Skip to content

742-refactor: Update subtitle to support heading tags #844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 30 commits into from
Jun 5, 2025

Conversation

oibioib
Copy link
Collaborator

@oibioib oibioib commented Apr 9, 2025

What type of PR is this? (select all that apply)

  • πŸ• Feature
  • πŸ› Bug Fix
  • 🚧 Breaking Change
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ“ Documentation Update

Description

The component accept props:

  • as
  • fontSize
  • fontWeight

Default heading level - h3.

Refactor code and change h3-h4 tags to Subtitle.

Related Tickets & Documents

Added/updated tests?

  • πŸ‘Œ Yes
  • πŸ™…β€β™‚οΈ No, because they aren't needed
  • πŸ™‹β€β™‚οΈ No, because I need help

[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

    • Headings and titles across various components now use a unified Subtitle component, enhancing visual consistency and flexibility.
  • Style

    • Simplified and standardized font size and weight styling for subtitles and headings throughout the application.
    • Improved spacing and line heights for better readability in several components.
    • Removed redundant or unused CSS classes related to heading styles.
  • Refactor

    • Updated components to use new Subtitle props for size, weight, and heading level, replacing standard HTML headings and old prop names.
    • Consolidated font size and weight CSS classes into a more modular structure for subtitles.

@oibioib
Copy link
Collaborator Author

oibioib commented Apr 9, 2025

run visual now

Copy link
Contributor

coderabbitai bot commented Apr 9, 2025

πŸ“ Walkthrough

Walkthrough

The changes refactor the Subtitle component to support rendering as any heading tag (h2–h4) via a new as prop, update its font weight and size handling, and apply the component throughout the codebase in place of standard heading elements. Related SCSS modules are updated to align with the new styling conventions.

Changes

Files/Groups Change Summary
src/shared/ui/subtitle/subtitle.tsx, subtitle.module.scss, subtitle.test.tsx Refactored Subtitle to accept as prop for heading tags, updated font size/weight logic, and tests.
src/app/docs/components/search/search.tsx, src/entities/event/ui/event-card/event-card.tsx, src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.tsx, src/entities/trainer/ui/trainers-card/trainer-card.tsx, src/shared/ui/modal/modal.tsx, src/shared/ui/video-playlist-with-player/playlist/playlist.tsx, src/widgets/school-menu/ui/school-menu/school-menu.tsx, src/widgets/mentorship-activities/ui/activity-card/activity-card.tsx, src/widgets/mentorship-after-register/ui/mentorship-after-register.tsx, src/widgets/mentorship-hero/ui/mentorship-hero.tsx, src/entities/course/ui/course-card/course-card.tsx, src/entities/course/ui/course-item/course-item.tsx, src/widgets/about-course/ui/about-course-grid/about-course-grid.tsx, src/widgets/faq/ui/faq.tsx, src/widgets/hero-page/ui/hero-page.tsx, src/widgets/required/ui/course-module/course-module.tsx Replaced native headings with Subtitle, updated props for font size/weight, and adjusted imports.
src/entities/event/ui/event-card/event-card.module.scss, src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss, src/entities/trainer/ui/trainers-card/trainer-card.module.scss, src/shared/ui/modal/modal.module.scss, src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss, src/widgets/school-menu/ui/school-menu/school-menu.module.scss, src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss Removed or updated font size/weight/line-height styles to match new Subtitle usage.
src/app/docs/components/docs-layout/docs-layout.module.scss Increased vertical gap in .docs-content from 40px to 50px.

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
Loading

Assessment against linked issues

Objective Addressed Explanation
Subtitle accepts new as prop for heading tag (h2–h6) (#742) ❌ Only supports h2, h3, and h4; h5 and h6 are not supported.
Default to h3 if as not provided (#742) βœ…
Refactor all usages to use as where needed, maintain styling (#742) βœ…
Unit tests for new as prop and heading levels (#742) βœ…
No styling breaks for subtitles (#742) βœ…

Assessment against linked issues: Out-of-scope changes

Code Change (file_path) Explanation
Increased gap in .docs-content (src/app/docs/components/docs-layout/docs-layout.module.scss) This layout spacing change is unrelated to the objectives of updating the Subtitle component.

Possibly related PRs

Suggested labels

refactor

Suggested reviewers

  • andron13
  • dzmitry-varabei
  • ansivgit
  • natanchik
  • SpaNb4
  • Quiddlee

πŸ“œ Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between abd1854 and 1091542.

πŸ“’ Files selected for processing (2)
  • src/entities/event/ui/event-card/event-card.module.scss (1 hunks)
  • src/widgets/school-menu/ui/school-menu/school-menu.module.scss (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/widgets/school-menu/ui/school-menu/school-menu.module.scss
  • src/entities/event/ui/event-card/event-card.module.scss
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: Build rs.school
  • GitHub Check: CI

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.

❀️ Share
πŸͺ§ Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/shared/ui/subtitle/subtitle.tsx (1)

9-9: Consider including h1 for completeness

The 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

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 5c72b1b and 9757a5f.

πŸ“’ 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 results

Adding 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 from weight to fontWeight

Property 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 from weight to fontWeight

Consistent prop naming change for the Subtitle component.

src/entities/trainer/ui/trainers-card/trainer-card.tsx (2)

5-5: Added Subtitle component import

Appropriate import added for the new component usage.


19-24: Replaced HTML headings with Subtitle component

Effectively replaced h3/h4 elements with the Subtitle component, properly using the as prop 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 as prop 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 appropriately

The Subtitle component is now correctly imported from the relative path.


105-107: Good refactoring to use the Subtitle component

The 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 configuration

The Subtitle component is properly configured with fontSize and fontWeight props, ensuring consistent heading styling.


39-41: Content formatting improved

The 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 component

The 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 readability

Adding 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 appropriately

The Subtitle component is imported correctly from the relative path.


24-26: Heading element replaced with Subtitle component

The 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 clarity

The 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 added

A new "regular-font-weight" class has been added, expanding the available font weight options.


67-67: Class renamed for consistency

The "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 support

The SubtitleProps now includes an optional "as" prop, allowing the component to render different heading levels (h2-h6).


23-28: Renamed weight variant for clarity

The "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 weight

The default font weight is now explicitly set to "medium".


36-45: Component implementation improved

The 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 component

The component now correctly uses "fontWeight" instead of "weight" and renders the appropriate heading element based on the "as" prop.

Also applies to: 50-50

@oibioib
Copy link
Collaborator Author

oibioib commented Apr 9, 2025

run visual now

Copy link

github-actions bot commented Apr 9, 2025

Lighthouse Report:

  • Performance: 96 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@oibioib
Copy link
Collaborator Author

oibioib commented Apr 16, 2025

run visual now

Copy link

Lighthouse Report:

  • Performance: 67 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@KristiBo KristiBo removed this from RS Site May 19, 2025
Copy link

github-actions bot commented Jun 4, 2025

Lighthouse Report:

  • Performance: 79 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link

github-actions bot commented Jun 4, 2025

Lighthouse Report:

  • Performance: 90 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link

github-actions bot commented Jun 4, 2025

Lighthouse Report:

  • Performance: 71 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@oibioib
Copy link
Collaborator Author

oibioib commented Jun 4, 2025

run visual now

@oibioib oibioib requested a review from YulikK June 4, 2025 11:06
Copy link

github-actions bot commented Jun 5, 2025

Lighthouse Report:

  • Performance: 57.99999999999999 / 100
  • Accessibility: 96 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@YulikK YulikK merged commit 4f32d41 into main Jun 5, 2025
3 checks passed
@YulikK YulikK deleted the refactor/742-update-subtitle-to-support-heading-tags branch June 5, 2025 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update Subtitle to Support h2-h6 Tags
6 participants