Skip to content

Add button focus styles #2007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 8, 2022
Merged

Add button focus styles #2007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60015eb
Add button focus styles
pksjce Mar 31, 2022
851a40c
Fix primary button focus styles
pksjce Apr 4, 2022
40b318a
Fix safari fallback
pksjce Apr 8, 2022
a8f29a8
Fix toggle switch snapshot
pksjce Apr 8, 2022
2f436be
Create strange-jobs-add.md
pksjce Apr 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strange-jobs-add.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Add button focus styles
36 changes: 25 additions & 11 deletions src/Button/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@ import {VariantType} from './types'
import {Theme} from '../ThemeProvider'

export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
const focusOutlineStyles = {
outline: '2px solid',
outlineColor: 'accent.fg',
outlineOffset: '-2px'
}
const fallbackFocus = {
...focusOutlineStyles,
':not(:focus-visible)': {
outline: 'solid 1px transparent'
}
}

export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
const style = {
Expand All @@ -14,8 +25,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
boxShadow: `${theme?.shadows.btn.focusShadow}`
...fallbackFocus
},
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
backgroundColor: 'btn.activeBg',
borderColor: 'btn.activeBorder'
Expand All @@ -42,7 +54,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
boxShadow: `${theme?.shadows.btn.primary.focusShadow}`
boxShadow: 'inset 0 0 0 3px',
...fallbackFocus
},
'&:focus-visible:not([disabled])': {
...focusOutlineStyles,
boxShadow: 'inset 0 0 0 3px'
},
'&:active:not([disabled])': {
backgroundColor: 'btn.primary.selectedBg',
Expand Down Expand Up @@ -80,9 +97,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
borderColor: 'btn.danger.focusBorder',
boxShadow: `${theme?.shadows.btn.danger.focusShadow}`
...fallbackFocus
},
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
color: 'btn.danger.selectedText',
backgroundColor: 'btn.danger.selectedBg',
Expand Down Expand Up @@ -119,8 +136,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
boxShadow: `${theme?.shadows.btn.focusShadow}`
...fallbackFocus
},
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
backgroundColor: 'btn.selectedBg'
},
Expand Down Expand Up @@ -152,10 +170,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
borderColor: 'btn.outline.focusBorder',
boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
...fallbackFocus
},

'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
color: 'btn.outline.selectedText',
backgroundColor: 'btn.outline.selectedBg',
Expand Down Expand Up @@ -242,9 +259,6 @@ export const getBaseStyles = (theme?: Theme) => ({
userSelect: 'none',
textDecoration: 'none',
textAlign: 'center',
'&:focus': {
outline: 'none'
},
'&:disabled': {
cursor: 'default'
},
Expand Down
18 changes: 13 additions & 5 deletions src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ exports[`ActionMenu renders consistently 1`] = `
box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
}

.c1:focus {
outline: none;
}

.c1:disabled {
cursor: default;
color: #8c959f;
Expand Down Expand Up @@ -86,7 +82,19 @@ exports[`ActionMenu renders consistently 1`] = `
}

.c1:focus:not([disabled]) {
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}

.c1:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c1:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}

.c1:active:not([disabled]) {
Expand Down
112 changes: 80 additions & 32 deletions src/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@ exports[`Button renders consistently 1`] = `
box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: #8c959f;
Expand Down Expand Up @@ -75,7 +71,19 @@ exports[`Button renders consistently 1`] = `
}

.c0:focus:not([disabled]) {
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}

.c0:active:not([disabled]) {
Expand Down Expand Up @@ -131,10 +139,6 @@ exports[`Button styles danger button appropriately 1`] = `
box-shadow: undefined;
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: btn.danger.disabledText;
Expand Down Expand Up @@ -186,8 +190,19 @@ exports[`Button styles danger button appropriately 1`] = `
}

.c0:focus:not([disabled]) {
border-color: btn.danger.focusBorder;
box-shadow: undefined;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:active:not([disabled]) {
Expand Down Expand Up @@ -255,10 +270,6 @@ exports[`Button styles icon only button to make it a square 1`] = `
box-shadow: undefined,undefined;
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: primer.fg.disabled;
Expand All @@ -281,7 +292,19 @@ exports[`Button styles icon only button to make it a square 1`] = `
}

.c0:focus:not([disabled]) {
box-shadow: undefined;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:active:not([disabled]) {
Expand Down Expand Up @@ -358,10 +381,6 @@ exports[`Button styles invisible button appropriately 1`] = `
box-shadow: none;
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: primer.fg.disabled;
Expand Down Expand Up @@ -400,7 +419,19 @@ exports[`Button styles invisible button appropriately 1`] = `
}

.c0:focus:not([disabled]) {
box-shadow: undefined;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:active:not([disabled]) {
Expand Down Expand Up @@ -461,10 +492,6 @@ exports[`Button styles outline button appropriately 1`] = `
background-color: btn.bg;
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: btn.outline.disabledText;
Expand Down Expand Up @@ -516,8 +543,19 @@ exports[`Button styles outline button appropriately 1`] = `
}

.c0:focus:not([disabled]) {
border-color: btn.outline.focusBorder;
box-shadow: undefined;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:active:not([disabled]) {
Expand Down Expand Up @@ -584,10 +622,6 @@ exports[`Button styles primary button appropriately 1`] = `
box-shadow: undefined;
}

.c0:focus {
outline: none;
}

.c0:disabled {
cursor: default;
color: btn.primary.disabledText;
Expand Down Expand Up @@ -630,7 +664,21 @@ exports[`Button styles primary button appropriately 1`] = `
}

.c0:focus:not([disabled]) {
box-shadow: undefined;
box-shadow: inset 0 0 0 3px;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}

.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}

.c0:focus-visible:not([disabled]) {
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
box-shadow: inset 0 0 0 3px;
}

.c0:active:not([disabled]) {
Expand Down
Loading