Make the beta badge more visible #298
Conversation
|
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 📝 WalkthroughWalkthroughThe changes update the styling and behavior of the "beta" label in the documentation. The CSS for Sequence Diagram(s)sequenceDiagram
participant User
participant DOM
participant BetaLabelScript
participant NavBetaLabel
User->>DOM: Loads documentation page
DOM->>BetaLabelScript: Fires DOMContentLoaded
BetaLabelScript->>DOM: Selects .beta-label p and .nav-beta-label
BetaLabelScript->>DOM: Sets up Tippy tooltips on both labels
BetaLabelScript->>DOM: Sets up IntersectionObserver on .beta-label p
loop On scroll or layout change
DOM->>BetaLabelScript: Triggers IntersectionObserver callback
alt .beta-label p is fully visible
BetaLabelScript->>NavBetaLabel: Remove "visible" class
else .beta-label p is not fully visible
BetaLabelScript->>NavBetaLabel: Add "visible" class
end
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were found. 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 (
|
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/partials/article.hbs (1)
34-73: Effective implementation with opportunity for refactoring.The script correctly uses
DOMContentLoaded, includes proper error handling, and the IntersectionObserver logic is sound. However, consider extracting the duplicated tippy configuration to reduce code repetition.+ const tippyConfig = { + content: "This feature is in beta. Features in beta are available for testing and feedback. They are not supported by Redpanda and should not be used in production environments.", + animation: "scale", + theme: "redpanda-term", + touch: "hold", + interactive: true, + allowHTML: true, + }; + - tippy(navBadge, { - content: - "This feature is in beta. Features in beta are available for testing and feedback. They are not supported by Redpanda and should not be used in production environments.", - animation: "scale", - theme: "redpanda-term", - touch: "hold", - interactive: true, - allowHTML: true, - }); - tippy(topBadge, { - content: - "This feature is in beta. Features in beta are available for testing and feedback. They are not supported by Redpanda and should not be used in production environments.", - animation: "scale", - theme: "redpanda-term", - touch: "hold", - interactive: true, - allowHTML: true, - }); + tippy(navBadge, tippyConfig); + tippy(topBadge, tippyConfig);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/css/context-switcher.css(3 hunks)src/css/vars.css(1 hunks)src/partials/article.hbs(1 hunks)src/partials/toc.hbs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (4)
src/css/vars.css (1)
121-123: LGTM! Well-structured CSS variable definitions.The new beta label variables follow established naming conventions and correctly reference existing theme variables for consistency. Good abstraction for maintainable theming.
src/partials/toc.hbs (1)
6-10: Clean conditional markup with appropriate accessibility consideration.The Handlebars syntax is correct and the
aria-hidden="true"attribute is appropriate for this supplementary visual indicator. The conditional logic properly integrates with the existing TOC structure.src/css/context-switcher.css (2)
11-48: Excellent styling updates with consistent design patterns.The changes properly utilize the new CSS variables, maintain consistency with existing font size calculations, and enhance the visual prominence of beta labels appropriately. The transition from 1px to 2px border and addition of minimum width improves visual clarity.
50-78: Well-implemented navigation beta label with effective visibility control.The sticky positioning and z-index management are appropriate for the TOC context. The visibility toggle using
display: none/inline-flexprovides clean state transitions, and the styling maintains consistency with the main beta label.
|
Can you make the "beta" font larger--seems like the badge/box would accommodate 1 pt up, no? Trying to make sure it is impossible to miss, as that was part of the original request. |
Feediver1
left a comment
There was a problem hiding this comment.
LGTM--thanks @JakeSCahill
This pull request introduces enhancements to the styling and behavior of beta labels. The changes improve the visual appearance of beta labels, add dynamic visibility behavior, and enhance user experience with tooltips and sticky navigation.
Before, the beta badge appeared only below the h1, so if a user entered the page halfway down, they wouldn't see it.
To mitigate this issue, this PR adds a feature to make a beta badge appear in the table on contents when you scroll down.
2025-06-06_16-03-55.mp4
Styling Improvements for Beta Labels:
src/css/context-switcher.css: Updated.beta-labeland.beta-label > pstyles to include bold font weight, adjusted border thickness, and added new properties likemin-width,margin-top, andbackground-color. Introduced.nav-beta-labeland.nav-beta-containerclasses for sticky navigation and improved display behavior. [1] [2] [3]Theme Variable Updates:
src/css/vars.css: Added new theme variables (--beta-label-color,--beta-label-background,--beta-label-border) to ensure consistent styling of beta labels across light and dark themes.Template Enhancements for Beta Labels:
src/partials/article.hbs: Replaced the previous tooltip implementation for.beta-label pwith a more dynamic setup, including intersection observer logic to toggle visibility of.nav-beta-labelbased on scroll position.src/partials/toc.hbs: Added a conditional block to display a sticky.nav-beta-labelcontainer when the page has abetaattribute.