Skip to content

Commit

Permalink
Add onPrimary variant to KeybindingHint (#5414)
Browse files Browse the repository at this point in the history
* Add `onPrimary` variant to `KeybindingHint`

* Create flat-sheep-look.md
  • Loading branch information
iansan5653 authored Dec 11, 2024
1 parent 9f5a9ac commit d44a4cf
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/flat-sheep-look.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

Add `onPrimary` `variant` to `KeybindingHint`
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'}}
12 changes: 9 additions & 3 deletions packages/react/src/KeybindingHint/components/Chord.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/KeybindingHint/props.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export type KeybindingHintFormat = 'condensed' | 'full'

export type KeybindingHintVariant = 'normal' | 'onEmphasis'
export type KeybindingHintVariant = 'normal' | 'onEmphasis' | 'onPrimary'

export interface KeybindingHintProps {
/**
Expand All @@ -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
/**
Expand Down

0 comments on commit d44a4cf

Please sign in to comment.