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

This reverts commit 1d79cc5.

Author: francinelucca

.changeset/gentle-apes-do.md

@@ -3,48 +3,34 @@ 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, 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>
-  )
-}
+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>
+)
 
 /** Indicates the presence of an available keybinding. */
 // KeybindingHint is a good candidate for memoizing since props will rarely change
-export const KeybindingHint = memo(({className, ...props}: KeybindingHintProps) => (
-  <Kbd className={className}>
+export const KeybindingHint = memo((props: KeybindingHintProps) => (
+  <Kbd>
     <Sequence {...props} />
   </Kbd>
 ))

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

@@ -31,8 +31,4 @@ 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/KeybindingHint/KeybindingHint.tsx

@@ -74,11 +74,6 @@ 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', () => {