Skip to content

Remove deprecated focus style primitives #2510

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 9 commits into from
Nov 3, 2022
Merged

Remove deprecated focus style primitives #2510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0cbf69a
remove deprecated primitives
langermank Nov 1, 2022
27c6144
Create afraid-wombats-drive.md
langermank Nov 1, 2022
64d4680
snippy snaps
langermank Nov 1, 2022
8029bef
Merge branch 'remove-deprecated-focus-styles' of https://github.com/p…
langermank Nov 1, 2022
3aca973
Merge branch 'main' into remove-deprecated-focus-styles
langermank Nov 1, 2022
19f5cac
move to draft directory
langermank Nov 3, 2022
ee1fdfe
fix focus color
langermank Nov 3, 2022
27bfe4e
test: update snapshots
joshblack Nov 3, 2022
ec35a70
Merge branch 'main' into remove-deprecated-focus-styles
langermank Nov 3, 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/afraid-wombats-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Remove deprecated focus style primitives
6 changes: 2 additions & 4 deletions src/SideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,13 @@ type StyledSideNavLinkProps = {
// used for variant normal hover, focus pseudo selectors
const CommonAccessibilityVariantNormalStyles = css`
background-color: ${get('colors.neutral.subtle')};
outline: none;
text-decoration: none;
`

// used for light weight hover, focus pseudo selectors
const CommonAccessibilityVariantLightWeightStyles = css`
color: ${get('colors.fg.default')};
text-decoration: none;
outline: none;
`

const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
Expand Down Expand Up @@ -135,7 +133,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {

&:focus {
${CommonAccessibilityVariantNormalStyles}
box-shadow: ${get('shadows.primer.shadow.focus')};
outline: solid 2px ${get('colors.accent.fg')};
z-index: 1;
}

Expand All @@ -160,7 +158,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {

&:focus {
${CommonAccessibilityVariantLightWeightStyles}
box-shadow: ${get('shadows.primer.shadow.focus')};
outline: solid 1px ${get('colors.accent.fg')};
z-index: 1;
}

Expand Down
6 changes: 2 additions & 4 deletions src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
}

.c1:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c1:active {
Expand Down Expand Up @@ -150,8 +149,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
}

.c1:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c1:active {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
}

.c1:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c1:active {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ exports[`Dialog renders consistently 1`] = `
border: none;
padding: 0;
background: transparent;
outline: none;
cursor: pointer;
border-radius: 6px;
color: #57606a;
Expand All @@ -75,7 +74,7 @@ exports[`Dialog renders consistently 1`] = `
}

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

.c1:hover {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
}

.c0:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c0:active {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
}

.c1:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c1:active {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,7 @@ exports[`SelectPanel renders consistently 1`] = `
}

.c1:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c1:active {
Expand Down
8 changes: 2 additions & 6 deletions src/__tests__/__snapshots__/SideNav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,15 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `

.c1.variant-normal > .c0:hover {
background-color: rgba(234,238,242,0.5);
outline: none;
-webkit-text-decoration: none;
text-decoration: none;
}

.c1.variant-normal > .c0:focus {
background-color: rgba(234,238,242,0.5);
outline: none;
-webkit-text-decoration: none;
text-decoration: none;
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
z-index: 1;
}

Expand All @@ -102,15 +100,13 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
color: #24292f;
-webkit-text-decoration: none;
text-decoration: none;
outline: none;
}

.c1.variant-lightweight > .c0:focus {
color: #24292f;
-webkit-text-decoration: none;
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 1px #0969da;
z-index: 1;
}

Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@ exports[`ActionMenu renders consistently 1`] = `
}

.c0:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c0:active {
Expand Down
8 changes: 3 additions & 5 deletions src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@ exports[`Button renders consistently 1`] = `
}
.c0:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}
.c0:active {
Expand Down Expand Up @@ -124,8 +123,7 @@ exports[`Button respects the "disabled" prop 1`] = `
}
.c0:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}
.c0:active {
Expand Down Expand Up @@ -478,7 +476,7 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
}
.c0:focus {
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}
.c0:hover {
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@ exports[`DropdownMenu renders consistently 1`] = `
}

.c0:focus {
border-color: rgba(27,31,36,0.15);
box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
outline: solid 2px #0969da;
}

.c0:active {
Expand Down
3 changes: 1 addition & 2 deletions src/deprecated/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & SxProp>`

// focus must come before :active so that the active box shadow overrides
&:focus {
border-color: ${get('colors.btn.focusBorder')};
box-shadow: ${get('shadows.btn.focusShadow')};
outline: solid 2px ${get('colors.accent.fg')};
}

&:active {
Expand Down
3 changes: 1 addition & 2 deletions src/deprecated/Button/ButtonClose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@ const StyledButton = styled.button<SxProp>`
border: none;
padding: 0;
background: transparent;
outline: none;
cursor: pointer;
border-radius: ${get('radii.2')};
color: ${get('colors.fg.muted')};

&:focus {
box-shadow: ${get('shadows.btn.focusShadow')};
outline: solid 2px ${get('colors.accent.fg')};
}

&:hover {
Expand Down
2 changes: 1 addition & 1 deletion src/deprecated/Button/ButtonInvisible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & SxProp>`
color: ${get('colors.primer.fg.disabled')};
}
&:focus {
box-shadow: ${get('shadows.btn.focusShadow')};
outline: solid 2px ${get('colors.accent.fg')};
}
&:hover {
background-color: ${get('colors.btn.hoverBg')};
Expand Down
2 changes: 1 addition & 1 deletion src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.'
import ThemeProvider from '../../ThemeProvider'

const meta: Meta = {
title: 'Components/Forms/MarkdownEditor',
title: 'Drafts/Components/MarkdownEditor',
decorators: [
Story => {
return (
Expand Down
4 changes: 3 additions & 1 deletion src/drafts/MarkdownEditor/_MarkdownInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,9 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
width: '100%',
borderStyle: 'none',
height: fullHeight ? '100%' : undefined,
boxShadow: isDraggedOver ? 'primer.shadow.focus' : 'none',
outline: theme => {
return isDraggedOver ? `solid 2px ${theme.colors.accent.fg}` : undefined
},
display: visible ? undefined : 'none',
'& textarea': {
lineHeight: 1.2,
Expand Down
3 changes: 1 addition & 2 deletions src/stories/Overlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,8 +468,7 @@ export const MemexIssueOverlay = () => {
color: 'fg.default',
p: 2,
textAlign: 'left',
borderRadius: '2',
'&:hover': {boxShadow: 'primer.shadow.focus'}
borderRadius: '2'
}}
>
{title}
Expand Down