Add onPrimary variant to KeybindingHint (#5414)

* Add `onPrimary` variant to `KeybindingHint`

* Create flat-sheep-look.md

Author: iansan5653

.changeset/flat-sheep-look.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `onPrimary` `variant` to `KeybindingHint`

packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx

@@ -20,7 +20,16 @@ export const PrimaryButton: StoryObj<KeybindingHintProps> = {
       Submit
     </Button>
   ),
-  args: {keys: 'Mod+Enter', variant: 'onEmphasis'},
+  args: {keys: 'Mod+Enter', variant: 'onPrimary'},
+}
+
+export const DangerButton: StoryObj<KeybindingHintProps> = {
+  render: args => (
+    <Button variant="danger" trailingVisual={() => <KeybindingHint {...args} />}>
+      Delete
+    </Button>
+  ),
+  args: {keys: 'Mod+Delete', variant: 'normal'},
 }
 
 export const ActionListExample: StoryObj<KeybindingHintProps> = {

packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx

@@ -22,11 +22,20 @@ export const SequenceFull = {args: {keys: sequence, format: 'full'}}
 
 export const OnEmphasis: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'accent.fg', p: 3}}>
+    <Box sx={{backgroundColor: 'var(--bgColor-black)', p: 3}}>
       <KeybindingHint {...args} />
     </Box>
   ),
   args: {keys: chord, variant: 'onEmphasis'},
 }
 
+export const OnPrimary: StoryObj<KeybindingHintProps> = {
+  render: args => (
+    <Box sx={{backgroundColor: 'var(--button-primary-bgColor-rest)', p: 3}}>
+      <KeybindingHint {...args} />
+    </Box>
+  ),
+  args: {keys: chord, variant: 'onPrimary'},
+}
+
 export const Small = {args: {keys: chord, size: 'small'}}

packages/react/src/KeybindingHint/components/Chord.tsx

@@ -29,14 +29,20 @@ const splitChord = (chord: string) =>
     .map(k => k.toLowerCase())
     .sort(compareLowercaseKeys)
 
+const backgroundColors = {
+  normal: 'var(--bgColor-transparent)',
+  onEmphasis: 'var(--counter-bgColor-emphasis)',
+  onPrimary: 'var(--button-primary-bgColor-active)',
+}
+
 export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => (
   <Text
     sx={{
       display: 'inline-flex',
-      bg: variant === 'onEmphasis' ? 'var(--counter-bgColor-emphasis)' : 'var(--bgColor-transparent)',
-      color: variant === 'onEmphasis' ? 'var(--fgColor-onEmphasis)' : 'var(--fgColor-muted)',
+      bg: backgroundColors[variant],
+      color: variant === 'normal' ? 'var(--fgColor-muted)' : 'var(--fgColor-onEmphasis)',
       border: '1px solid',
-      borderColor: variant === 'onEmphasis' ? 'transparent' : 'var(--borderColor-default)',
+      borderColor: variant === 'normal' ? 'var(--borderColor-default)' : 'transparent',
       borderRadius: size === 'small' ? 1 : 2,
       fontWeight: 'normal',
       fontFamily: 'normal',

packages/react/src/KeybindingHint/props.ts

@@ -1,6 +1,6 @@
 export type KeybindingHintFormat = 'condensed' | 'full'
 
-export type KeybindingHintVariant = 'normal' | 'onEmphasis'
+export type KeybindingHintVariant = 'normal' | 'onEmphasis' | 'onPrimary'
 
 export interface KeybindingHintProps {
   /**
@@ -24,7 +24,7 @@ export interface KeybindingHintProps {
    */
   format?: KeybindingHintFormat
   /**
-   * Set to `onEmphasis` for display on emphasis colors.
+   * Set to `onEmphasis` for display on emphasis colors, and `onPrimary` for display on primary buttons.
    */
   variant?: KeybindingHintVariant
   /**