feat(ListItem,Button,ToolbarItem,ToolbarMenu): Adding/fixing universal focus indicator

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Update `call-missed-line` icon in Teams theme @codepretty ([#2059](https://github.com/stardust-ui/react/pull/2059))
 - Show debug panel correctly for components with no owner @miroslavstastny ([#2055](https://github.com/stardust-ui/react/pull/2055))
+- Update `listItem`, `button`, `toolbar`, `toolbarMenu` to use `getBorderFocusStyles` in the Teams theme @bcalvery ([#2011](https://github.com/stardust-ui/react/pull/2011))
 - Correctly handle empty key actions in RTL @miroslavstastny ([#2060](https://github.com/stardust-ui/react/pull/2060))
 - Accessibility improvements for `tree` and `splitButton` @kolaps33 ([#2032](https://github.com/stardust-ui/react/pull/2032))
 - Update color scheme values in Teams theme @codepretty ([#2063](https://github.com/stardust-ui/react/pull/2063))

docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx

@@ -6,45 +6,25 @@ const ButtonUsageExampleShorthand = () => (
     <Provider
       theme={{
         componentVariables: {
-          Button: siteVariables => ({
-            color: siteVariables.colors.brand[600],
-            colorHover: siteVariables.colors.brand[300],
-            colorFocus: siteVariables.colors.brand[900],
-            backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750]
-            backgroundColorActive: siteVariables.colors.brand[200],
-            backgroundColorHover: siteVariables.colors.brand[50],
-            backgroundColorFocus: siteVariables.colors.brand[200],
-            borderColor: siteVariables.colors.brand[200],
-            borderColorHover: siteVariables.colors.brand[300],
+          Button: siteVars => ({
+            color: siteVars.colorScheme.brand.foreground,
+            colorHover: siteVars.colorScheme.brand.foreground,
+            colorFocus: siteVars.colorScheme.default.foreground,
+            colorDisabled: siteVars.colorScheme.brandForegroundDisabled,
+            backgroundColor: siteVars.colorScheme.default.background,
+            backgroundColorActive: siteVars.colorScheme.brandBorderPressed,
+            backgroundColorHover: siteVars.colorScheme.brand.backgroundHover1,
+            backgroundColorFocus: siteVars.colorScheme.default.background,
+            backgroundColorDisabled: siteVars.colorScheme.brand.backgroundDisabled,
+            borderColor: siteVars.colorScheme.brandBorder2,
+            borderColorHover: siteVars.colorScheme.brandBorderHover,
           }),
         },
       }}
     >
-      <Button content="Tinted Button" />
+      <Button content="Tinted Button" /> <Button disabled content="Tinted Button Disabled" />
     </Provider>
-    This button's styling is only applicable to dark theme.
-    <br />
-    <br />
-    <Provider
-      theme={{
-        componentVariables: {
-          Button: siteVariables => ({
-            color: siteVariables.colors.brand[600],
-            colorHover: siteVariables.colors.brand[600],
-            colorFocus: siteVariables.colors.brand[900],
-            backgroundColor: siteVariables.colors.white,
-            backgroundColorActive: siteVariables.colors.brand[200],
-            backgroundColorHover: siteVariables.colors.brand[50],
-            backgroundColorFocus: siteVariables.colors.brand[200],
-            borderColor: siteVariables.colors.brand[200],
-            borderColorHover: siteVariables.colors.brand[300],
-          }),
-        },
-      }}
-    >
-      <Button content="Tinted Button" />
-    </Provider>
-    This button's styling is only applicable to light theme.
+    This button's styling is using color scheme variables.
   </div>
 )
 

packages/react/src/themes/teams-dark/componentVariables.ts

@@ -1,5 +1,4 @@
 export { default as Attachment } from './components/Attachment/attachmentVariables'
-export { default as Button } from './components/Button/buttonVariables'
 export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Dialog } from './components/Dialog/dialogVariables'

packages/react/src/themes/teams-dark/components/List/listItemVariables.ts

@@ -1,7 +1,6 @@
 import { ListItemVariables } from '../../../teams/components/List/listItemVariables'
 
 export default (siteVars: any): Partial<ListItemVariables> => ({
-  selectedFocusOutlineColor: siteVars.colors.brand[600],
   selectableFocusHoverBackgroundColor: siteVars.colors.grey[500],
   selectedBackgroundColor: siteVars.colors.grey[500],
 })

packages/react/src/themes/teams-high-contrast/componentStyles.ts

@@ -1,4 +1,5 @@
 export { default as Attachment } from './components/Attachment/attachmentStyles'
+export { default as Button } from './components/Button/buttonStyles'
 export { default as MenuItem } from './components/Menu/menuItemStyles'
 export { default as Alert } from './components/Alert/alertStyles'
 export { default as Dialog } from './components/Dialog/dialogStyles'

packages/react/src/themes/teams-high-contrast/components/Button/buttonStyles.ts

@@ -0,0 +1,43 @@
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types'
+import { ButtonProps } from '../../../../components/Button/Button'
+import { ButtonVariables } from '../../../teams/components/Button/buttonVariables'
+import { ButtonHighContrastVariables } from './buttonVariables'
+
+const buttonStyles: ComponentSlotStylesPrepared<
+  ButtonProps,
+  ButtonVariables & ButtonHighContrastVariables
+> = {
+  root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
+    return {
+      // rectangular button defaults
+      ...(!p.text && {
+        ':focus-visible': {
+          backgroundColor: v.backgroundColorFocus,
+          color: v.colorHover,
+          borderColor: 'transparent',
+
+          '&:hover': {
+            color: v.colorHover,
+            backgroundColor: v.backgroundColorHover,
+            borderColor: 'transparent',
+          },
+        },
+      }),
+
+      // Overrides for "primary" buttons
+      ...(p.primary &&
+        !p.text && {
+          ':focus-visible': {
+            backgroundColor: v.primaryBackgroundColorFocus,
+
+            '&:hover': {
+              color: v.primaryColorHover,
+              backgroundColor: v.primaryBackgroundColorHover,
+            },
+          },
+        }),
+    }
+  },
+}
+
+export default buttonStyles

packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts

@@ -1,35 +1,21 @@
 import { ButtonVariables } from '../../../teams/components/Button/buttonVariables'
 
-export default (siteVars: any): Partial<ButtonVariables> => {
+export interface ButtonHighContrastVariables {
+  backgroundColorFocus: string
+  primaryBackgroundColorFocus: string
+}
+
+export default (siteVars: any): Partial<ButtonVariables> & ButtonHighContrastVariables => {
   return {
-    color: siteVars.colors.white,
-    backgroundColor: 'transparent',
-    backgroundColorActive: siteVars.accessibleYellow,
-    backgroundColorHover: siteVars.accessibleYellow,
-    backgroundColorFocus: siteVars.accessibleYellow,
+    backgroundColorActive: siteVars.colors.white,
+    backgroundColorFocus: siteVars.accessibleCyan,
+    borderColorActive: siteVars.colors.white,
     backgroundColorDisabled: siteVars.accessibleGreen,
-    borderColor: siteVars.colors.white,
-    borderColorHover: 'transparent',
-
-    primaryColor: siteVars.colors.black,
-    primaryColorHover: siteVars.colors.black,
-    primaryColorFocus: siteVars.colors.black,
-    primaryBackgroundColor: siteVars.colors.white,
-    primaryBackgroundColorActive: siteVars.accessibleYellow,
-    primaryBackgroundColorHover: siteVars.accessibleYellow,
-    primaryBackgroundColorFocus: siteVars.accessibleYellow,
-    primaryBorderColor: siteVars.colors.white,
 
-    circularColor: siteVars.colors.white,
-    circularColorActive: siteVars.colors.black,
-    circularBackgroundColor: siteVars.colors.black,
-    circularBackgroundColorActive: siteVars.accessibleYellow,
-    circularBackgroundColorHover: siteVars.accessibleYellow,
-    circularBackgroundColorFocus: siteVars.accessibleYellow,
-    circularBorderColor: siteVars.colors.white,
-    circularBorderColorHover: siteVars.colors.white,
-    circularBorderColorFocus: siteVars.colors.white,
+    primaryBackgroundColorActive: siteVars.colors.white,
+    primaryBackgroundColorFocus: siteVars.accessibleCyan,
 
     boxShadow: 'none',
+    primaryBoxShadow: 'none',
   }
 }

packages/react/src/themes/teams-high-contrast/components/Toolbar/toolbarVariables.ts

@@ -9,14 +9,10 @@ export default (siteVars: any): Partial<ToolbarVariables> => ({
     extendColorScheme(siteVars.colorScheme, {
       default: {
         foregroundHover: siteVars.colorScheme.brand.foregroundHover,
-        borderFocus: undefined,
         foregroundActive: siteVars.accessibleYellow,
-        backgroundFocus: siteVars.colorScheme.default.backgroundHover,
 
         menuItemForegroundHover: siteVars.colorScheme.default.foregroundHover,
         menuItemBackgroundHover: siteVars.colorScheme.default.backgroundHover,
-        menuItemForegroundFocus: siteVars.colorScheme.default.foregroundHover,
-        menuItemBackgroundFocus: siteVars.colorScheme.default.backgroundHover,
       },
     }),
     toolbarColorAreas,

packages/react/src/themes/teams/components/Button/buttonStyles.ts

@@ -13,9 +13,9 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
 
     const borderFocusStyles = getBorderFocusStyles({
       siteVariables,
+      borderPadding: borderWidth,
       ...(p.circular && {
-        borderRadius: v.circularBorderRadius,
-        focusOuterBorderColor: v.circularBorderColorFocus,
+        borderPadding: pxToRem(4),
       }),
     })
 
@@ -54,15 +54,25 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
           borderColor: v.borderColorHover,
         },
 
+        ':active': {
+          color: v.colorActive,
+          backgroundColor: v.backgroundColorActive,
+          borderColor: v.borderColorActive,
+          boxShadow: 'none',
+        },
+
         ':focus': {
           ...borderFocusStyles[':focus'],
-          boxShadow: 'none',
-          ':active': { backgroundColor: v.backgroundColorActive },
         },
+
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
-          color: v.colorFocus,
-          backgroundColor: v.backgroundColorFocus,
+          borderColor: v.borderColor,
+          borderWidth,
+
+          ':hover': {
+            borderColor: v.borderColorHover,
+          },
         },
 
         ...(p.size === 'small' && {
@@ -75,31 +85,11 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
         !p.text && {
           minWidth: v.height,
           padding: 0,
-          color: v.circularColor,
-          backgroundColor: v.circularBackgroundColor,
-          borderColor: v.circularBorderColor,
           borderRadius: v.circularBorderRadius,
 
           ...(p.size === 'small' && {
             minWidth: v.sizeSmallHeight,
           }),
-
-          ':hover': {
-            color: v.circularColorActive,
-            backgroundColor: v.circularBackgroundColorHover,
-            borderColor: v.circularBorderColorHover,
-          },
-
-          ':focus': {
-            ...borderFocusStyles[':focus'],
-            boxShadow: 'none',
-            ':active': { backgroundColor: v.circularBackgroundColorActive },
-          },
-          ':focus-visible': {
-            ...borderFocusStyles[':focus-visible'],
-            color: v.circularColorActive,
-            backgroundColor: v.circularBackgroundColorFocus,
-          },
         }),
 
       // text button defaults
@@ -121,6 +111,7 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
           boxShadow: 'none',
           ...borderFocusStyles[':focus'],
         },
+
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
           ...getIconFillOrOutlineStyles({ outline: false }),
@@ -137,22 +128,24 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
           color: v.primaryColor,
           backgroundColor: v.primaryBackgroundColor,
           borderColor: v.primaryBorderColor,
-          boxShadow: siteVariables.shadowLevel1Dark,
+          boxShadow: v.primaryBoxShadow,
 
-          ':hover': {
-            color: v.primaryColorHover,
-            backgroundColor: v.primaryBackgroundColorHover,
+          ':active': {
+            backgroundColor: v.primaryBackgroundColorActive,
+            boxShadow: 'none',
           },
 
           ':focus': {
             ...borderFocusStyles[':focus'],
-            boxShadow: 'none',
-            ':active': { backgroundColor: v.primaryBackgroundColorActive },
           },
+
           ':focus-visible': {
             ...borderFocusStyles[':focus-visible'],
-            color: v.primaryColorFocus,
-            backgroundColor: v.primaryBackgroundColorFocus,
+          },
+
+          ':hover': {
+            color: v.primaryColorHover,
+            backgroundColor: v.primaryBackgroundColorHover,
           },
         }),
 
@@ -178,6 +171,12 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
           ':hover': {
             backgroundColor: v.backgroundColorDisabled,
           },
+          ...(p.primary && {
+            backgroundColor: v.primaryBackgroundColorDisabled,
+            ':hover': {
+              backgroundColor: v.primaryBackgroundColorDisabled,
+            },
+          }),
         }),
       }),