Skip to content

Commit

Permalink
Fix safari fallback
Browse files Browse the repository at this point in the history
  • Loading branch information
@pksjce
pksjce committed Apr 8, 2022
1 parent 851a40c commit 40b318a
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 106 deletions.
22 changes: 8 additions & 14 deletions src/Button/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ const focusOutlineStyles = {
outlineOffset: '-2px'
}
const fallbackFocus = {
'&:not(:focus-visible)': {
...focusOutlineStyles,
':not(:focus-visible)': {
outline: 'solid 1px transparent'
}
}
Expand All @@ -24,9 +25,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
outline: 'none'
...fallbackFocus
},
...fallbackFocus,
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
backgroundColor: 'btn.activeBg',
Expand Down Expand Up @@ -54,9 +54,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
outline: 'none'
boxShadow: 'inset 0 0 0 3px',
...fallbackFocus
},
...fallbackFocus,
'&:focus-visible:not([disabled])': {
...focusOutlineStyles,
boxShadow: 'inset 0 0 0 3px'
Expand Down Expand Up @@ -97,9 +97,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
outline: 'none'
...fallbackFocus
},
...fallbackFocus,
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
color: 'btn.danger.selectedText',
Expand Down Expand Up @@ -137,9 +136,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
outline: 'none'
...fallbackFocus
},
...fallbackFocus,
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
backgroundColor: 'btn.selectedBg'
Expand Down Expand Up @@ -172,9 +170,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
// focus must come before :active so that the active box shadow overrides
'&:focus:not([disabled])': {
outline: 'none'
...fallbackFocus
},
...fallbackFocus,
'&:focus-visible:not([disabled])': focusOutlineStyles,
'&:active:not([disabled])': {
color: 'btn.outline.selectedText',
Expand Down Expand Up @@ -262,9 +259,6 @@ export const getBaseStyles = (theme?: Theme) => ({
userSelect: 'none',
textDecoration: 'none',
textAlign: 'center',
'&:focus': {
outline: 'none'
},
'&:disabled': {
cursor: 'default'
},
Expand Down
10 changes: 4 additions & 6 deletions src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
View file
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,10 +82,12 @@ exports[`ActionMenu renders consistently 1`] = `
}
.c1:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}
.c1:not(:focus-visible) {
.c1:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down
61 changes: 25 additions & 36 deletions src/__tests__/__snapshots__/Button.test.tsx.snap
View file
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,10 +71,12 @@ exports[`Button renders consistently 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -141,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 @@ -196,10 +190,12 @@ exports[`Button styles danger button appropriately 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -274,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 @@ -300,10 +292,12 @@ exports[`Button styles icon only button to make it a square 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -387,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 @@ -429,10 +419,12 @@ exports[`Button styles invisible button appropriately 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -500,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 @@ -555,10 +543,12 @@ exports[`Button styles outline button appropriately 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -632,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 @@ -678,10 +664,13 @@ exports[`Button styles primary button appropriately 1`] = `
}
.c0:focus:not([disabled]) {
outline: none;
box-shadow: inset 0 0 0 3px;
outline: 2px solid;
outline-color: accent.fg;
outline-offset: -2px;
}
.c0:not(:focus-visible) {
.c0:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down
30 changes: 12 additions & 18 deletions src/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1189,10 +1189,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
box-shadow: none;
}
.c3:focus {
outline: none;
}
.c3:disabled {
cursor: default;
color: #8c959f;
Expand All @@ -1215,10 +1211,12 @@ exports[`TextInput renders trailingAction icon button 1`] = `
}
.c3:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}
.c3:not(:focus-visible) {
.c3:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -1642,10 +1640,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
box-shadow: none;
}
.c2:focus {
outline: none;
}
.c2:disabled {
cursor: default;
color: #8c959f;
Expand Down Expand Up @@ -1684,10 +1678,12 @@ exports[`TextInput renders trailingAction text button 1`] = `
}
.c2:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}
.c2:not(:focus-visible) {
.c2:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down Expand Up @@ -1865,10 +1861,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
box-shadow: none;
}
.c3:focus {
outline: none;
}
.c3:disabled {
cursor: default;
color: #8c959f;
Expand Down Expand Up @@ -1907,10 +1899,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
}
.c3:focus:not([disabled]) {
outline: none;
outline: 2px solid;
outline-color: #0969da;
outline-offset: -2px;
}
.c3:not(:focus-visible) {
.c3:focus:not([disabled]):not(:focus-visible) {
outline: solid 1px transparent;
}
Expand Down
Loading

0 comments on commit 40b318a

Please sign in to comment.