From a7df5955bde2bc05f69ef7e2bdd16df7e56df365 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 22 Nov 2024 16:06:45 +0000
Subject: [PATCH 1/2] feat(KeybindingHint): Convert to CSS modules behind
 feature flag

---
 .changeset/gentle-apes-do.md                  |  5 ++
 .../KeybindingHint/KeybindingHint.module.css  | 15 ++++++
 .../src/KeybindingHint/KeybindingHint.tsx     | 54 +++++++++++--------
 3 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/gentle-apes-do.md
 create mode 100644 packages/react/src/KeybindingHint/KeybindingHint.module.css

diff --git a/.changeset/gentle-apes-do.md b/.changeset/gentle-apes-do.md
new file mode 100644
index 00000000000..4ceb2ac641d
--- /dev/null
+++ b/.changeset/gentle-apes-do.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert KeybindingHint to CSS modules behind feature flag
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.module.css b/packages/react/src/KeybindingHint/KeybindingHint.module.css
new file mode 100644
index 00000000000..980830b0e8f
--- /dev/null
+++ b/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;
+}
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.tsx b/packages/react/src/KeybindingHint/KeybindingHint.tsx
index 82338b748ca..8c55afeb504 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.tsx
@@ -3,29 +3,41 @@ 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'
 
 /** `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}: {children: ReactNode}) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+
+  return (
+    <Text
+      as={'kbd' as 'span'}
+      className={enabled ? classes.KeybindingHint : undefined}
+      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

From 6baf2cafd0e7b73457a77e098ab34dce53fbb93a Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Tue, 26 Nov 2024 16:07:09 +0000
Subject: [PATCH 2/2] add className prop

---
 packages/react/src/KeybindingHint/KeybindingHint.tsx | 10 ++++++----
 packages/react/src/KeybindingHint/props.ts           |  4 ++++
 packages/react/src/__tests__/KeybindingHint.test.tsx |  5 +++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/KeybindingHint/KeybindingHint.tsx b/packages/react/src/KeybindingHint/KeybindingHint.tsx
index 8c55afeb504..4b7a820aada 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.tsx
@@ -6,15 +6,17 @@ 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}) => {
+const Kbd = ({children, className}: {children: ReactNode; className?: string}) => {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
 
   return (
     <Text
       as={'kbd' as 'span'}
-      className={enabled ? classes.KeybindingHint : undefined}
+      className={clsx(className, enabled && classes.KeybindingHint)}
+      data-testid="keybinding-hint"
       sx={
         enabled
           ? undefined
@@ -41,8 +43,8 @@ const Kbd = ({children}: {children: ReactNode}) => {
 
 /** 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>
 ))
diff --git a/packages/react/src/KeybindingHint/props.ts b/packages/react/src/KeybindingHint/props.ts
index 111908a7370..bc384fafd08 100644
--- a/packages/react/src/KeybindingHint/props.ts
+++ b/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
 }
diff --git a/packages/react/src/__tests__/KeybindingHint.test.tsx b/packages/react/src/__tests__/KeybindingHint.test.tsx
index 79281964828..78c113a1b6e 100644
--- a/packages/react/src/__tests__/KeybindingHint.test.tsx
+++ b/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', () => {