Remove deprecated focus style primitives (#2510)

langermank · joshblack · broccolinisoup · commit 3e54c13c6868 · 2022-11-04T09:26:35.000+10:00
* remove deprecated primitives

* Create afraid-wombats-drive.md

* snippy snaps

* move to draft directory

* fix focus color

* test: update snapshots

Co-authored-by: Josh Black &lt;josh@josh.black&gt;
diff --git a/.changeset/afraid-wombats-drive.md b/.changeset/afraid-wombats-drive.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove deprecated focus style primitives
diff --git a/src/SideNav.tsx b/src/SideNav.tsx
@@ -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 => {
@@ -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;
     }
 
@@ -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;
     }
 
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -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 {
@@ -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 {
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -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 {
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -65,7 +65,6 @@ exports[`Dialog renders consistently 1`] = `
   border: none;
   padding: 0;
   background: transparent;
-  outline: none;
   cursor: pointer;
   border-radius: 6px;
   color: #57606a;
@@ -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 {
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -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 {
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -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 {
diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
@@ -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 {
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -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;
 }
 
@@ -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;
 }
 
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -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 {
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -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 {
@@ -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 {
@@ -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 {
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -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 {
diff --git a/src/deprecated/Button/Button.tsx b/src/deprecated/Button/Button.tsx
@@ -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 {
diff --git a/src/deprecated/Button/ButtonClose.tsx b/src/deprecated/Button/ButtonClose.tsx
@@ -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 {
diff --git a/src/deprecated/Button/ButtonInvisible.tsx b/src/deprecated/Button/ButtonInvisible.tsx
@@ -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')};
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx
@@ -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 (
diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
@@ -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,
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
@@ -468,8 +468,7 @@ export const MemexIssueOverlay = () => {
                   color: 'fg.default',
                   p: 2,
                   textAlign: 'left',
-                  borderRadius: '2',
-                  '&:hover': {boxShadow: 'primer.shadow.focus'}
+                  borderRadius: '2'
                 }}
               >
                 {title}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": patch
 +---
++
 +Remove deprecated focus style primitives
Original file line number	Diff line number	Diff line change
@@ -58,8 +58,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.c1:focus {`
`61`		`- border-color: rgba(27,31,36,0.15);`
`62`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`61`	`+ outline: solid 2px #0969da;`
`63`	`62`	`}`
`64`	`63`
`65`	`64`	`.c1:active {`
@@ -150,8 +149,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
`150`	`149`	`}`
`151`	`150`
`152`	`151`	`.c1:focus {`
`153`		`- border-color: rgba(27,31,36,0.15);`
`154`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`152`	`+ outline: solid 2px #0969da;`
`155`	`153`	`}`
`156`	`154`
`157`	`155`	`.c1:active {`
Original file line number	Diff line number	Diff line change
@@ -58,8 +58,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.c1:focus {`
`61`		`- border-color: rgba(27,31,36,0.15);`
`62`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`61`	`+ outline: solid 2px #0969da;`
`63`	`62`	`}`
`64`	`63`
`65`	`64`	`.c1:active {`
Original file line number	Diff line number	Diff line change
@@ -65,7 +65,6 @@ exports[`Dialog renders consistently 1`] = `
`65`	`65`	`border: none;`
`66`	`66`	`padding: 0;`
`67`	`67`	`background: transparent;`
`68`		`- outline: none;`
`69`	`68`	`cursor: pointer;`
`70`	`69`	`border-radius: 6px;`
`71`	`70`	`color: #57606a;`
@@ -75,7 +74,7 @@ exports[`Dialog renders consistently 1`] = `
`75`	`74`	`}`
`76`	`75`
`77`	`76`	`.c1:focus {`
`78`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`77`	`+ outline: solid 2px #0969da;`
`79`	`78`	`}`
`80`	`79`
`81`	`80`	`.c1:hover {`
Original file line number	Diff line number	Diff line change
@@ -74,8 +74,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`.c0:focus {`
`77`		`- border-color: rgba(27,31,36,0.15);`
`78`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`77`	`+ outline: solid 2px #0969da;`
`79`	`78`	`}`
`80`	`79`
`81`	`80`	`.c0:active {`
Original file line number	Diff line number	Diff line change
@@ -52,8 +52,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.c1:focus {`
`55`		`- border-color: rgba(27,31,36,0.15);`
`56`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`55`	`+ outline: solid 2px #0969da;`
`57`	`56`	`}`
`58`	`57`
`59`	`58`	`.c1:active {`
Original file line number	Diff line number	Diff line change
@@ -58,8 +58,7 @@ exports[`SelectPanel renders consistently 1`] = `
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.c1:focus {`
`61`		`- border-color: rgba(27,31,36,0.15);`
`62`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`61`	`+ outline: solid 2px #0969da;`
`63`	`62`	`}`
`64`	`63`
`65`	`64`	`.c1:active {`
Original file line number	Diff line number	Diff line change
@@ -52,8 +52,7 @@ exports[`ActionMenu renders consistently 1`] = `
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.c0:focus {`
`55`		`- border-color: rgba(27,31,36,0.15);`
`56`		`- box-shadow: 0 0 0 3px rgba(9,105,218,0.3);`
	`55`	`+ outline: solid 2px #0969da;`
`57`	`56`	`}`
`58`	`57`
`59`	`58`	`.c0:active {`