Add styles for inline badges #304
Conversation
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughA new CSS file for badge styling has been introduced, providing base and modifier classes for different badge types and sizes. The site-wide CSS imports have been updated to include this new stylesheet. Cursor styles for certain beta label elements have been changed from pointer to help. Tooltip styles have been updated to enforce consistent font size within headings. Tooltip initialization in JavaScript now includes a guard for the Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant BadgeCSS
participant TooltipJS
participant TippyLib
User->>Page: Loads page
Page->>BadgeCSS: Loads badge styles via site.css
Page->>TooltipJS: Executes tooltip activation script
TooltipJS->>TippyLib: Checks if tippy is a function
alt tippy is a function
TooltipJS->>TippyLib: Initialize tooltips for [data-tippy-content]
TooltipJS->>TippyLib: Initialize tooltips for [data-tooltip]
end
Page->>User: Renders badges and tooltips with dynamic content
Assessment against linked issues
Suggested reviewers
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
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/css/badges.css (2)
1-7: Consider setting display and alignment on base badge
Currently.badgerelies on its host element’s display. For consistent box behavior (vertical centering, padding), you may want to add:.badge { display: inline-flex; align-items: center; justify-content: center; /* existing styles… */ }
17-21: Use CSS variables for fallback badge colors
The hard-coded#e0e0e0and#1f1f1freduce theme flexibility. Consider introducing--badge-label-backgroundand--badge-label-colorvariables so site-wide theming can override these defaults.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/css/badges.css(1 hunks)src/css/context-switcher.css(2 hunks)src/css/site.css(1 hunks)src/css/tooltips.css(1 hunks)src/js/12-activate-tooltips.js(1 hunks)src/partials/article.hbs(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (8)
src/css/tooltips.css (1)
11-19: Enforce consistent tooltip font size in headings
The new rule correctly targets popper roots inside all heading levels and uses!importantto override inline styles from Tippy. This ensures tooltips match body copy sizing for readability.src/css/badges.css (2)
9-15: Large badge variant is well scoped
The.badge--largerules properly ensure minimum size and centering. Usinginline-flexhere is ideal for icon or text alignment.
30-33: Large beta badge colors are correct
The.badge--large.badge--betaselector properly applies the intended background and text colors via--beta-label-*variables, matching design tokens.src/css/site.css (1)
8-8: Import badges.css for global badge styling
The import location (afterbody.css) integrates the badge definitions site-wide. Path and order appear correct.src/css/context-switcher.css (2)
16-18: Change beta-label hover cursor to help
Switching frompointertohelpbetter communicates informational intent for beta badges.
58-58: Apply help cursor to nav-beta-label
Usingcursor: help;on the navigation badge aligns UX consistency with other beta indicators.src/js/12-activate-tooltips.js (2)
6-6: Excellent defensive programming practice!The guard clause prevents runtime errors if the tippy library fails to load. This is a good defensive programming approach.
8-15: Good code organization with helpful comments.The comment clarifies the purpose of this initialization block, making the code more maintainable.
|
Caution No docstrings were generated. |
This pull request introduces enhancements to the user interface and tooltip functionality, including new badge styles, improved tooltip initialization, and dynamic beta text for tooltips. The changes are grouped into three themes: badge styles, tooltip improvements, and dynamic beta text.
2025-06-20_13-14-21.mp4
Badge Styles:
badges.cssfile with base styles for badges, including variations for large badges and beta badges. These styles improve consistency and usability across the application. (src/css/badges.css, src/css/badges.cssR1-R33)site.cssto import the newbadges.cssfile, ensuring the badge styles are applied globally. (src/css/site.css, src/css/site.cssR8)Tooltip Improvements:
tooltips.cssto ensure consistent font sizes for tooltips in headers (h1throughh6). (src/css/tooltips.css, src/css/tooltips.cssR11-R19)12-activate-tooltips.jsto support custom tooltips usingdata-tooltipattributes, alongside the existingdata-tippy-contentattributes. (src/js/12-activate-tooltips.js, src/js/12-activate-tooltips.jsL6-R27)Dynamic Beta Text:
article.hbsto use dynamic beta text frompage.attributes.beta-text, allowing for customizable beta feature descriptions in tooltips. (src/partials/article.hbs, [1] [2]