742-refactor: Update subtitle to support heading tags #844
Conversation
oibioib
requested review from
andron13,
dzmitry-varabei,
SpaNb4,
Quiddlee,
ansivgit and
natanchik
as code owners
|
run visual now |
📝 WalkthroughWalkthroughThe changes refactor the Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant Subtitle
ParentComponent->>Subtitle: Render with as="h2"/"h3"/"h4" and fontWeight/fontSize props
Subtitle->>Subtitle: Determine HeadingTag (default h3)
Subtitle->>Subtitle: Apply font size/weight classes
Subtitle-->>ParentComponent: Rendered heading element with correct styles
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/shared/ui/subtitle/subtitle.tsx (1)
9-9: Consider including h1 for completenessThe component supports heading levels h2-h6, but h1 is excluded. Consider whether h1 should be included for completeness, although it's typically reserved for page titles.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
src/app/docs/components/search/search.module.scss(1 hunks)src/app/docs/components/search/search.tsx(2 hunks)src/entities/event/ui/event-card/event-card.module.scss(0 hunks)src/entities/event/ui/event-card/event-card.tsx(2 hunks)src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss(1 hunks)src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.tsx(1 hunks)src/entities/trainer/ui/trainers-card/trainer-card.module.scss(0 hunks)src/entities/trainer/ui/trainers-card/trainer-card.tsx(2 hunks)src/shared/ui/modal/modal.module.scss(0 hunks)src/shared/ui/modal/modal.tsx(2 hunks)src/shared/ui/subtitle/subtitle.module.scss(1 hunks)src/shared/ui/subtitle/subtitle.test.tsx(1 hunks)src/shared/ui/subtitle/subtitle.tsx(2 hunks)src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss(0 hunks)src/shared/ui/video-playlist-with-player/playlist/playlist.tsx(2 hunks)src/views/mentorship/mentorship-hero/ui/mentorship-hero.tsx(1 hunks)src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.tsx(1 hunks)src/views/mentorship/ui/mentors-after-register/ui/mentors-after-register.module.scss(0 hunks)src/views/mentorship/ui/mentors-after-register/ui/mentors-after-register.tsx(1 hunks)src/widgets/school-menu/ui/school-menu/school-menu.module.scss(0 hunks)src/widgets/school-menu/ui/school-menu/school-menu.tsx(2 hunks)
💤 Files with no reviewable changes (6)
- src/shared/ui/modal/modal.module.scss
- src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss
- src/entities/event/ui/event-card/event-card.module.scss
- src/views/mentorship/ui/mentors-after-register/ui/mentors-after-register.module.scss
- src/entities/trainer/ui/trainers-card/trainer-card.module.scss
- src/widgets/school-menu/ui/school-menu/school-menu.module.scss
🔇 Additional comments (31)
src/app/docs/components/search/search.module.scss (1)
22-23: Added appropriate spacing to search resultsAdding margin-top improves the visual separation between the search input and results.
src/views/mentorship/mentorship-hero/ui/mentorship-hero.tsx (1)
30-30: Updated property name fromweighttofontWeightProperty name change aligns with the subtitle component refactoring.
src/views/mentorship/ui/mentor-activities/ui/activity-card/activity-card.tsx (1)
21-21: Updated property name fromweighttofontWeightConsistent prop naming change for the Subtitle component.
src/entities/trainer/ui/trainers-card/trainer-card.tsx (2)
5-5: Added Subtitle component importAppropriate import added for the new component usage.
19-24: Replaced HTML headings with Subtitle componentEffectively replaced h3/h4 elements with the Subtitle component, properly using the
asprop to maintain semantic heading levels while achieving consistent styling.src/app/docs/components/search/search.tsx (2)
10-10: Import of Subtitle component added correctly.The Subtitle component is properly imported from the shared UI directory.
131-131: Appropriate usage of Subtitle component.Replaced h3 element with Subtitle component using proper fontSize and fontWeight props. This aligns with the standardization goal of the PR.
src/widgets/school-menu/ui/school-menu/school-menu.tsx (2)
4-4: Import of Subtitle component added correctly.The Subtitle component is properly imported from the shared UI directory.
21-21: Appropriate usage of Subtitle component.Correctly replaced the heading element with Subtitle component while preserving the existing className handling.
src/shared/ui/subtitle/subtitle.test.tsx (2)
66-71: Test description clarified for default behavior.Modified test description accurately indicates that h3 is the default rendering tag.
73-99: Comprehensive test coverage for new heading level functionality.Added tests for all heading levels (h2, h4, h5, h6) with proper assertions. This ensures the new
asprop is working correctly for all supported heading tags.src/entities/event/ui/event-card/event-card.tsx (3)
5-5: Import of Subtitle component added correctly.The Subtitle component is properly imported from the shared UI directory.
34-40: Appropriate usage of Subtitle component for organization section.Correctly replaced heading elements with Subtitle components while setting appropriate props:
- Used fontWeight="regular" for organizedBy text
- Used as="h4" with fontSize="extra-small" for organization text
This maintains proper semantic structure while leveraging the new component.
42-46: Appropriate usage of Subtitle component for event title.Correctly replaced the heading element with Subtitle component for the event title while preserving the className.
src/shared/ui/modal/modal.tsx (2)
6-6: Import of Subtitle component added appropriatelyThe Subtitle component is now correctly imported from the relative path.
105-107: Good refactoring to use the Subtitle componentThe modal title now uses the standardized Subtitle component instead of direct HTML h2 element, maintaining the data-testid attribute for testing purposes.
src/views/mentorship/ui/mentors-after-register/ui/mentors-after-register.tsx (2)
36-38: Appropriate Subtitle configurationThe Subtitle component is properly configured with fontSize and fontWeight props, ensuring consistent heading styling.
39-41: Content formatting improvedThe paragraph content is now formatted across multiple lines for better code readability without affecting the rendered output.
src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.tsx (2)
42-50: Heading level explicitly defined with as="h4"The Subtitle component now properly specifies the semantic heading level as h4 with appropriate fontWeight and fontSize props, maintaining the className and data-testid attribute.
51-59: Course info converted to Subtitle componentThe course information is now consistently rendered using the Subtitle component with appropriate semantic level (h4) and styling (fontWeight="medium").
src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss (1)
52-52: Line height added for better text readabilityAdding line-height to .card-subtitle improves text readability and vertical spacing.
src/shared/ui/video-playlist-with-player/playlist/playlist.tsx (2)
4-4: Import statement added appropriatelyThe Subtitle component is imported correctly from the relative path.
24-26: Heading element replaced with Subtitle componentThe h3 element has been successfully replaced with the Subtitle component, maintaining the same functionality while aligning with the new standardized approach. The fontSize prop is appropriately set to "small" and all original attributes are preserved.
src/shared/ui/subtitle/subtitle.module.scss (3)
55-57: Class renamed for clarityThe font weight class has been renamed from "normal" to "light-font-weight" to better reflect its purpose and improve naming consistency.
59-61: New font weight class addedA new "regular-font-weight" class has been added, expanding the available font weight options.
67-67: Class renamed for consistencyThe "bold" class has been renamed to "bold-font-weight" to maintain naming consistency with other font weight classes.
src/shared/ui/subtitle/subtitle.tsx (5)
8-10: Added dynamic heading level supportThe SubtitleProps now includes an optional "as" prop, allowing the component to render different heading levels (h2-h6).
23-28: Renamed weight variant for clarityThe "weight" variant has been renamed to "fontWeight" and values have been expanded to include "light", "regular", "medium", and "bold", improving naming clarity.
32-32: Updated default font weightThe default font weight is now explicitly set to "medium".
36-45: Component implementation improvedThe Subtitle component now uses the "as" prop to dynamically determine the heading level, with h3 as the default. The HeadingTag variable is used appropriately to render the correct element.
47-48: Updated prop usage in componentThe component now correctly uses "fontWeight" instead of "weight" and renders the appropriate heading element based on the "as" prop.
Also applies to: 50-50
|
run visual now |
|
Lighthouse Report:
|
|
run visual now |
|
Lighthouse Report:
|
|
Lighthouse Report:
|
|
Lighthouse Report:
|
|
Lighthouse Report:
|
|
run visual now |
|
Lighthouse Report:
|
What type of PR is this? (select all that apply)
Description
The component accept props:
Default heading level - h3.
Refactor code and change h3-h4 tags to Subtitle.
Related Tickets & Documents
Added/updated tests?
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit
New Features
Style
Refactor