Finish updating global focus styles (#2050)

* updates focus styles that do not match the Primer CSS implementation

* updates ThemeSwitcher to render ActionMenu instead of DropdownMenu

* explicitly sets outline-offset in global focus styles instead of adding a new style that 'beats' the default 2px

* update snapshots

* fixes cross-browser issues for global focus styles

* fixes unintentional laggy focus style update on SubNav

* updates focus styles for UnderlineNav

* DRY button focus styles

* updates snapshots

* adds changeset

* fixes type error

* revert themePreval snapshot update

Author: mperrotti

.changeset/silent-falcons-exist.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Finishes updating components with the global focus styles defined in Primer CSS ([this PR](https://github.com/primer/css/pull/1744))

docs/content/SubNav.md

@@ -39,7 +39,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
     <SubNav.Link href="#support">Support</SubNav.Link>
   </SubNav.Links>
 
-  <TextInput type="search" icon={SearchIcon} sx={{width: 320}} />
+  <TextInput type="search" leadingVisual={SearchIcon} sx={{width: 320}} />
 </SubNav>
 ```
 
@@ -64,7 +64,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
         </ActionList>
       </ActionMenu.Overlay>
     </ActionMenu>
-    <TextInput type="search" icon={SearchIcon} width={320} />
+    <TextInput type="search" leadingVisual={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
     <SubNav.Link href="#home" selected>

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -1,24 +1,33 @@
-import {BaseStyles, Box, ThemeProvider, useTheme} from '@primer/react'
-import {DropdownMenu, DropdownButton} from '@primer/react/deprecated'
 import React from 'react'
+import {ActionMenu, ActionList, BaseStyles, Box, ThemeProvider, useTheme} from '@primer/react'
 
 function ThemeSwitcher() {
   const {theme, dayScheme, setDayScheme} = useTheme()
-  const items = Object.keys(theme.colorSchemes).map(scheme => ({text: scheme.replace(/_/g, ' '), key: scheme}))
+  const items = Object.keys(theme.colorSchemes).map(scheme => ({name: scheme.replace(/_/g, ' '), key: scheme}))
   const selectedItem = React.useMemo(() => items.find(item => item.key === dayScheme), [items, dayScheme])
+  const itemsKeys = items.map(item => item.key)
+  const [selectedIndex, setSelectedIndex] = React.useState(itemsKeys.indexOf(dayScheme))
+
   return (
-    <DropdownMenu
-      renderAnchor={({children, ...anchorProps}) => (
-        <DropdownButton {...anchorProps} sx={{variant: 'small'}}>
-          {children}
-        </DropdownButton>
-      )}
-      items={items}
-      selectedItem={selectedItem}
-      onChange={item => {
-        setDayScheme(item.key)
-      }}
-    />
+    <ActionMenu>
+      <ActionMenu.Button aria-label="Select field type">{selectedItem?.name}</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium">
+        <ActionList selectionVariant="single">
+          {items.map((type, index) => (
+            <ActionList.Item
+              key={index}
+              selected={index === selectedIndex}
+              onSelect={() => {
+                setSelectedIndex(index)
+                setDayScheme(items[index].key)
+              }}
+            >
+              {type.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
   )
 }
 

src/Button/styles.ts

@@ -2,17 +2,6 @@ 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 = {
@@ -23,11 +12,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         backgroundColor: 'btn.activeBg',
         borderColor: 'btn.activeBorder'
@@ -52,13 +36,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.primary.hoverText',
         backgroundColor: 'btn.primary.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
       '&:focus:not([disabled])': {
-        boxShadow: 'inset 0 0 0 3px',
-        ...fallbackFocus
+        boxShadow: 'inset 0 0 0 3px'
       },
       '&:focus-visible:not([disabled])': {
-        ...focusOutlineStyles,
         boxShadow: 'inset 0 0 0 3px'
       },
       '&:active:not([disabled])': {
@@ -95,11 +76,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
           color: 'btn.danger.hoverText'
         }
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         color: 'btn.danger.selectedText',
         backgroundColor: 'btn.danger.selectedBg',
@@ -134,11 +110,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         backgroundColor: 'btn.selectedBg'
       },
@@ -168,11 +139,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
           color: 'inherit'
         }
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',

src/Button/types.ts

@@ -2,8 +2,12 @@ import React, {HTMLAttributes, ComponentPropsWithRef} from 'react'
 import styled from 'styled-components'
 import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
+import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 
-export const StyledButton = styled.button<SxProp>(sx)
+export const StyledButton = styled.button<SxProp>`
+  ${getGlobalFocusStyles('-2px')};
+  ${sx};
+`
 
 export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
 

src/Checkbox.tsx

@@ -4,6 +4,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext
 import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from './CheckboxGroup'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 export type CheckboxProps = {
   /**
@@ -38,6 +39,7 @@ const StyledCheckbox = styled.input`
   cursor: pointer;
 
   ${props => props.disabled && `cursor: not-allowed;`}
+  ${getGlobalFocusStyles(0)};
 
   ${sx}
 `

src/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
+import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
@@ -37,6 +38,8 @@ const Page = styled.a`
     transition-duration: 0.1s;
   }
 
+  ${getGlobalFocusStyles(0)};
+
   &:active {
     border-color: ${get('colors.border.muted')};
   }

src/Radio.tsx

@@ -3,6 +3,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext
 import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {RadioGroupContext} from './RadioGroup'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 export type RadioProps = {
   /**
@@ -41,6 +42,7 @@ const StyledRadio = styled.input`
   cursor: pointer;
 
   ${props => props.disabled && `cursor: not-allowed;`}
+  ${getGlobalFocusStyles(0)};
 
   ${sx}
 `

src/SubNav.tsx

@@ -96,7 +96,7 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   &:focus {
     text-decoration: none;
     background-color: ${get('colors.canvas.subtle')};
-    transition: 0.2s ease;
+    transition: background-color 0.2s ease;
 
     .SubNav-octicon {
       color: ${get('colors.fg.muted')};

src/TabNav.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
@@ -49,6 +50,8 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   border: 1px solid transparent;
   border-bottom: 0;
 
+  ${getGlobalFocusStyles('-6px')};
+
   &:hover,
   &:focus {
     color: ${get('colors.fg.default')};