feat: create UI badges for labeling beta features #14661
Conversation
| @@ -1,10 +1,12 @@ | |||
| import MuiPopover, { | |||
| type PopoverProps as MuiPopoverProps, | |||
| // biome-ignore lint/nursery/noRestrictedImports: Used as base component | |||
| // biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on | |||
There was a problem hiding this comment.
I might have Biome configured wrong because my Biome plugin is flagging all of these comments as not doing anything
Accidentally removed this at first, but that's definitely a me problem, right?
There was a problem hiding this comment.
I think it doesn't like that our biome.json config is in the site/ directory 🙄 I hate that extensions never bother to handle subdirectories well.
| {title} | ||
| </h1> | ||
| {tooltip} | ||
| <Stack direction="row" spacing={2} alignItems="center"> |
There was a problem hiding this comment.
Only change is that the previous content is in a new stack so that the badges can be placed inside them
| @@ -149,7 +149,7 @@ const styles = { | |||
| menuItem: (theme) => css` | |||
| text-decoration: none; | |||
| color: inherit; | |||
| gap: 20px; | |||
| gap: 8px; | |||
There was a problem hiding this comment.
This was a change from when the feature badges were still part of the dropdown. Even with that removed, though, the gap seemed way too big for any feature elements we add
| @@ -396,7 +412,7 @@ const classNames = { | |||
| `, | |||
|
|
|||
| subLink: (css, theme) => css` | |||
| color: inherit; | |||
| color: ${theme.palette.text.secondary}; | |||
There was a problem hiding this comment.
De-emphasized the colors of the inactive sub links because in dark mode, there wasn't enough contrast to make it obvious which subheader was active
There was a problem hiding this comment.
I'm not sure I'm sold on why preview needs to become an InteractiveRole, that's a lot of extra colors to manage for a badge that never uses the disabled variants (and I don't get why it needs hover either. we don't modify the colors of any other UI elements just because they have a tooltip.)
| @@ -1,10 +1,12 @@ | |||
| import MuiPopover, { | |||
| type PopoverProps as MuiPopoverProps, | |||
| // biome-ignore lint/nursery/noRestrictedImports: Used as base component | |||
| // biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on | |||
There was a problem hiding this comment.
I think it doesn't like that our biome.json config is in the site/ directory 🙄 I hate that extensions never bother to handle subdirectories well.
| @@ -1,7 +1,7 @@ | |||
| import type { Branding } from "../branding"; | |||
| import colors from "../tailwindColors"; | |||
|
|
|||
| export default { | |||
There was a problem hiding this comment.
Forgot to leave a comment on these earlier, but the reason why I switched the syntax from satisfies to type annotations is because when I was adding additional properties to the type definitions, satisfies wasn't always immediately kicking up an error when something was only partially updated, and it made way more red squiggles than it needed to
| {({ isOpen }) => ( | ||
| <span | ||
| css={[ | ||
| styles.badge, | ||
| size === "sm" && styles.badgeSmallText, | ||
| size === "lg" && styles.badgeLargeText, | ||
| isOpen && styles.badgeHover, | ||
| ]} | ||
| {...delegatedProps} | ||
| > | ||
| <span style={visuallyHidden}> (This is a</span> | ||
| {featureStageBadgeTypes[contentType]} | ||
| <span style={visuallyHidden}> feature)</span> | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
Ended up using render props to cut down the repetitive state
| type FeatureStageBadgeProps = Readonly< | ||
| Omit<HTMLAttributes<HTMLSpanElement>, "children"> & { | ||
| contentType: keyof typeof featureStageBadgeTypes; | ||
| size?: "sm" | "md" | "lg"; | ||
| } | ||
| >; |
There was a problem hiding this comment.
Ended up applying YAGNI to the props and removed pretty much everything that isn't part of the current requirements. We have no need for a static version of the component right now
| experimental: "experimental", | ||
| } as const satisfies Record<string, ReactNode>; | ||
|
|
||
| const styles = { |
There was a problem hiding this comment.
I think we generally define styles below the component
Closes #14499
Changes made
FeatureStageBadgecomponent for labeling components that are beta/experimentalPopovercomponent to support sending events outside the componentBonus
Notes