@@ -77,35 +77,35 @@ const styles = {
77
77
} ,
78
78
} as const satisfies Record < string , Interpolation < Theme > > ;
79
79
80
- function grammaticalArticle ( nextWord : string ) : string {
81
- const vowels = [ "a" , "e" , "i" , "o" , "u" ] ;
82
- const firstLetter = nextWord . slice ( 0 , 1 ) . toLowerCase ( ) ;
83
- return vowels . includes ( firstLetter ) ? "an" : "a" ;
84
- }
85
-
86
- function capitalizeFirstLetter ( text : string ) : string {
87
- return text . slice ( 0 , 1 ) . toUpperCase ( ) + text . slice ( 1 ) ;
88
- }
89
-
90
80
type FeatureBadgeProps = Readonly <
91
81
Omit < HTMLAttributes < HTMLSpanElement > , "children" > & {
92
82
type : keyof typeof featureBadgeTypes ;
93
83
size ?: "sm" | "lg" ;
94
84
} & (
95
85
| {
96
86
/**
97
- * Defines whether the FeatureBadge should act as a
98
- * controlled or uncontrolled component with its hover and
99
- * general interaction styling.
87
+ * Defines whether the FeatureBadge should respond directly
88
+ * to user input (displaying tooltips, controlling its own
89
+ * hover styling, etc.)
90
+ */
91
+ variant : "static" ;
92
+
93
+ /**
94
+ * When used with the static variant, this lets you define
95
+ * whether the component should display hover/highlighted
96
+ * styling. Useful for coordinating hover behavior with an
97
+ * outside component.
100
98
*/
99
+ highlighted ?: boolean ;
100
+ }
101
+ | {
101
102
variant : "interactive" ;
102
103
103
104
// Had to specify the highlighted key for this union option
104
105
// even though it won't be used, because otherwise the type
105
106
// ergonomics for users would be too clunky.
106
107
highlighted ?: undefined ;
107
108
}
108
- | { variant : "static" ; highlighted ?: boolean }
109
109
)
110
110
> ;
111
111
@@ -180,13 +180,8 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
180
180
onPointerEnter = { ( ) => setIsTooltipHovering ( true ) }
181
181
onPointerLeave = { ( ) => setIsTooltipHovering ( false ) }
182
182
>
183
- < h5 css = { styles . tooltipTitle } >
184
- { capitalizeFirstLetter ( featureType ) } Feature
185
- </ h5 >
186
-
187
183
< p css = { styles . tooltipDescription } >
188
- This is { grammaticalArticle ( featureType ) } { featureType } feature. It
189
- has not yet reached generally availability (GA).
184
+ This feature has not yet reached general availability (GA).
190
185
</ p >
191
186
192
187
< Link
0 commit comments