feat(KeybindingHint): Convert to CSS modules behind feature flag (#5326)

* feat(KeybindingHint): Convert to CSS modules behind feature flag

* add className prop

Author: hussam-i-am

.changeset/gentle-apes-do.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert KeybindingHint to CSS modules behind feature flag

packages/react/src/KeybindingHint/KeybindingHint.module.css

@@ -0,0 +1,15 @@
+.KeybindingHint {
+  position: relative;
+  padding: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: unset;
+  color: inherit;
+  white-space: nowrap;
+  vertical-align: baseline;
+  background: none;
+  border: none;
+  box-shadow: none;
+}

packages/react/src/KeybindingHint/KeybindingHint.tsx

@@ -3,34 +3,48 @@ import {memo} from 'react'
 import Text from '../Text'
 import type {KeybindingHintProps} from './props'
 import {accessibleSequenceString, Sequence} from './components/Sequence'
+import {useFeatureFlag} from '../FeatureFlags'
+
+import classes from './KeybindingHint.module.css'
+import {clsx} from 'clsx'
 
 /** `kbd` element with style resets. */
-const Kbd = ({children}: {children: ReactNode}) => (
-  <Text
-    as={'kbd' as 'span'}
-    sx={{
-      color: 'inherit',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      border: 'none',
-      background: 'none',
-      boxShadow: 'none',
-      p: 0,
-      lineHeight: 'unset',
-      position: 'relative',
-      overflow: 'visible',
-      verticalAlign: 'baseline',
-      textWrap: 'nowrap',
-    }}
-  >
-    {children}
-  </Text>
-)
+const Kbd = ({children, className}: {children: ReactNode; className?: string}) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+
+  return (
+    <Text
+      as={'kbd' as 'span'}
+      className={clsx(className, enabled && classes.KeybindingHint)}
+      data-testid="keybinding-hint"
+      sx={
+        enabled
+          ? undefined
+          : {
+              color: 'inherit',
+              fontFamily: 'inherit',
+              fontSize: 'inherit',
+              border: 'none',
+              background: 'none',
+              boxShadow: 'none',
+              p: 0,
+              lineHeight: 'unset',
+              position: 'relative',
+              overflow: 'visible',
+              verticalAlign: 'baseline',
+              textWrap: 'nowrap',
+            }
+      }
+    >
+      {children}
+    </Text>
+  )
+}
 
 /** Indicates the presence of an available keybinding. */
 // KeybindingHint is a good candidate for memoizing since props will rarely change
-export const KeybindingHint = memo((props: KeybindingHintProps) => (
-  <Kbd>
+export const KeybindingHint = memo(({className, ...props}: KeybindingHintProps) => (
+  <Kbd className={className}>
     <Sequence {...props} />
   </Kbd>
 ))

packages/react/src/KeybindingHint/props.ts

@@ -31,4 +31,8 @@ export interface KeybindingHintProps {
    * Control the size of the hint.
    */
   size?: 'small' | 'normal'
+  /**
+   * Additional class name to apply to the hint.
+   */
+  className?: string
 }

packages/react/src/__tests__/KeybindingHint.test.tsx

@@ -74,6 +74,11 @@ describe('KeybindingHint', () => {
     expect(el).toBeInTheDocument()
     expect(el).not.toHaveAttribute('aria-hidden')
   })
+
+  it('accepts className prop', () => {
+    render(<KeybindingHint keys="Control" className="test-class" />)
+    expect(screen.getByTestId('keybinding-hint')).toHaveClass('test-class')
+  })
 })
 
 describe('getAccessibleKeybindingHintString', () => {