feat(border): focus styles mechanism (#1269)

* feat(border): focus styles mechanism * changelog * - removed side effects from getBorderFocusStyles by not applying any styles to the element directly (only when focused from keyboard); * - reverted changes to ':active' selector and refactored for readability * aligned alert focus styles with new approach * aligned border colors to latest design * aligned border colors to latest design v2 * fix outline * changelog update * addressed PR comments: * - optimized attachment dom structure (removed 2 redundant DOM elements); * - boxShadow consistency fixes; * - fixed wrong casting; * - improved comments. * added consistency in icon styles outline vs filled * chose better name for getIconFillOrOutlineStyles * addressed PR comments * fix merge * fix import
microsoft · May 10, 2019 · eb47a32 · eb47a32
1 parent 08d2f82
commit eb47a32
Show file tree

Hide file tree

Showing 25 changed files with 284 additions and 436 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,11 +16,11 @@
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
 ### BREAKING CHANGES
 - Rename `context` prop to `mountNode` in `PortalInner` @layershifter ([#1288](https://github.com/stardust-ui/react/pull/1288))
 - Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069))
 - Remove `defaultTarget` prop in `Popup` component @layershifter ([#1153](https://github.com/stardust-ui/react/pull/1153))
+- Add focus border styling mechanism @Bugaa92 in Teams theme ([#1269](https://github.com/stardust-ui/react/pull/1269))
 
 ### Features
 - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282))

diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
@@ -9,23 +9,11 @@ class AttachmentActionExampleShorthand extends React.Component {
       <div>
         <Attachment
           header="Picture.jpg"
-          action={{
-            icon: {
-              name: 'close',
-              outline: true,
-            },
-            onClick: this.handleClick('Remove'),
-          }}
+          action={{ icon: 'close', onClick: this.handleClick('Remove') }}
         />
         <Attachment
           header="Document.docx"
-          action={{
-            icon: {
-              name: 'more',
-              outline: true,
-            },
-            onClick: this.handleClick('Show more'),
-          }}
+          action={{ icon: 'more', onClick: this.handleClick('Show more') }}
         />
       </div>
     )

diff --git a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
@@ -4,13 +4,7 @@ import { Attachment } from '@stardust-ui/react'
 const AttachmentProgressExampleShorthand = () => (
   <Attachment
     header="Photo.jpg"
-    action={{
-      icon: {
-        name: 'close',
-        outline: true,
-      },
-      onClick: () => alert("'X' is clicked!"),
-    }}
+    action={{ icon: 'close', onClick: () => alert("'X' is clicked!") }}
     progress={33}
   />
 )

diff --git a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
@@ -14,13 +14,7 @@ class AttachmentActionableExampleShorthand extends React.Component {
         icon="table"
         header="Document.docx"
         description="800 Kb"
-        action={{
-          icon: {
-            name: 'more',
-            outline: true,
-          },
-          onClick: this.handleClick('More Action'),
-        }}
+        action={{ icon: 'more', onClick: this.handleClick('More Action') }}
         progress={33}
         onClick={this.handleClick('Attachment')}
       />

diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx
@@ -8,18 +8,14 @@ const ButtonUsageExampleShorthand = () => (
         componentVariables: {
           Button: siteVariables => ({
             color: siteVariables.colors.brand[600],
-            colorActive: siteVariables.colors.brand[300],
             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],
-            borderColorActive: siteVariables.colors.brand[300],
             borderColorHover: siteVariables.colors.brand[300],
-            borderColorFocus: siteVariables.colors.grey[900],
-            borderColorFocusIndicator: siteVariables.colors.brand[900],
           }),
         },
       }}
@@ -34,18 +30,14 @@ const ButtonUsageExampleShorthand = () => (
         componentVariables: {
           Button: siteVariables => ({
             color: siteVariables.colors.brand[600],
-            colorActive: 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],
-            borderColorActive: siteVariables.colors.brand[300],
             borderColorHover: siteVariables.colors.brand[300],
-            borderColorFocus: siteVariables.colors.white,
-            borderColorFocusIndicator: siteVariables.colors.brand[900],
           }),
         },
       }}

diff --git a/packages/react/src/components/Attachment/Attachment.tsx b/packages/react/src/components/Attachment/Attachment.tsx
@@ -104,13 +104,10 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
         {...unhandledProps}
         {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
-        {icon && (
-          <div className={classes.icon}>
-            {Icon.create(icon, {
-              defaultProps: { size: 'larger' },
-            })}
-          </div>
-        )}
+        {icon &&
+          Icon.create(icon, {
+            defaultProps: { size: 'larger', styles: styles.icon },
+          })}
         {(header || description) && (
           <div className={classes.content}>
             {Text.create(header, {
@@ -122,16 +119,13 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
             })}
           </div>
         )}
-        {action && (
-          <div className={classes.action}>
-            {Button.create(action, {
-              defaultProps: { iconOnly: true, text: true },
-            })}
-          </div>
-        )}
+        {action &&
+          Button.create(action, {
+            defaultProps: { iconOnly: true, text: true, styles: styles.action },
+          })}
         {!_.isNil(progress) &&
           Box.create('', {
-            defaultProps: { className: classes.progress },
+            defaultProps: { styles: styles.progress },
           })}
       </ElementType>
     )

diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts
@@ -3,7 +3,6 @@ import { ButtonVariables } from '../../../teams/components/Button/buttonVariable
 export default (siteVars: any): Partial<ButtonVariables> => {
   return {
     color: siteVars.colors.white,
-    colorActive: siteVars.colors.white,
     colorHover: siteVars.colors.white,
     colorFocus: siteVars.colors.white,
     colorDisabled: siteVars.colors.grey[450],
@@ -13,24 +12,18 @@ export default (siteVars: any): Partial<ButtonVariables> => {
     backgroundColorActive: siteVars.colors.grey[500],
     backgroundColorDisabled: siteVars.colors.grey[550],
     borderColor: siteVars.colors.grey[500],
-    borderColorActive: siteVars.colors.grey[450],
-    borderColorFocus: siteVars.colors.grey[800],
     borderColorHover: siteVars.colors.grey[450],
-    borderColorFocusIndicator: siteVars.colors.white,
 
     primaryBackgroundColorActive: siteVars.colors.brand[500],
     primaryBackgroundColorHover: siteVars.colors.brand[500],
     primaryBackgroundColorFocus: siteVars.colors.brand[800],
-    primaryBorderColorFocus: siteVars.colors.grey[800],
-    primaryBorderColorFocusIndicator: siteVars.colors.white,
 
     circularColor: siteVars.colors.grey[250],
     circularColorActive: siteVars.colors.grey[800],
     circularBackgroundColorActive: siteVars.colors.grey[250],
     circularBackgroundColorHover: siteVars.colors.grey[300],
     circularBackgroundColorFocus: siteVars.colors.grey[250],
     circularBorderColor: siteVars.colors.grey[250],
-    circularBorderColorFocusIndicator: siteVars.colors.grey[800],
 
     textColorHover: siteVars.colors.brand[300],
     textPrimaryColorHover: siteVars.colors.brand[300],

diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts
@@ -1,6 +1,12 @@
 import { colors } from '../teams/siteVariables'
 export { colorScheme } from './colors'
 
+//
+// BORDER STYLES
+//
+export const focusInnerBorderColor = colors.black
+export const focusOuterBorderColor = colors.white
+
 //
 // SHADOW LEVELS
 //

diff --git a/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts
@@ -1,10 +1,10 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { AlertProps } from '../../../../components/Alert/Alert'
 import { AlertHighContrastVariables } from './alertVariables'
-import { pxToRem } from '../../../../lib'
+import getBorderFocusStyles from '../../../teams/getBorderFocusStyles'
 
 const alertStyles: ComponentSlotStylesInput<AlertProps, AlertHighContrastVariables> = {
-  action: ({ variables: v, props: p }): ICSSInJSStyle => ({
+  action: ({ variables: v, props: p, theme: { siteVariables } }): ICSSInJSStyle => ({
     ...(p.isFromKeyboard && {
       ':focus': {
         backgroundColor: v.focusBackgroundColor,
@@ -18,16 +18,8 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertHighContrastVariabl
     ':hover': {
       backgroundColor: v.hoverBackgroundColor,
 
-      ':before': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        border: `${pxToRem(2)} solid ${v.hoverBorderColor}`,
-        borderRadius: pxToRem(2),
-      },
+      // TODO: consider creating dedicated method for border styles on hover
+      ...getBorderFocusStyles({ siteVariables, isFromKeyboard: true })[':focus'],
     },
   }),
 }

diff --git a/packages/react/src/themes/teams-high-contrast/components/Alert/alertVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Alert/alertVariables.ts
@@ -16,8 +16,6 @@ export default (siteVars: any): Partial<AlertVariables> & AlertHighContrastVaria
     hoverBackgroundColor: siteVars.accessibleYellow,
     focusBackgroundColor: siteVars.accessibleCyan,
 
-    focusInnerBorderColor: siteVars.colors.black,
-
     dangerColor: siteVars.colors.black,
     dangerBackgroundColor: siteVars.colors.white,
     dangerBorderColor: siteVars.colors.white,

diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts
@@ -33,12 +33,6 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
       },
     }),
   }),
-
-  action: ({ variables: v }): ICSSInJSStyle => ({
-    ':hover': {
-      outline: `1px solid ${v.textColorHover}`,
-    },
-  }),
 }
 
 export default attachmentStyles
diff --git a/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
@@ -10,25 +10,16 @@ export default (siteVars: any): Partial<ButtonVariables> => {
     backgroundColorFocus: siteVars.accessibleYellow,
     backgroundColorDisabled: siteVars.accessibleGreen,
     borderColor: siteVars.colors.white,
-    borderColorActive: 'transparent',
     borderColorHover: 'transparent',
-    borderColorFocus: siteVars.colors.black,
-    borderColorFocusIndicator: siteVars.colors.white,
 
     primaryColor: siteVars.colors.white,
-    primaryColorActive: siteVars.colors.black,
     primaryColorHover: siteVars.colors.black,
     primaryColorFocus: siteVars.colors.black,
     primaryBackgroundColor: siteVars.colors.black,
     primaryBackgroundColorActive: siteVars.accessibleYellow,
     primaryBackgroundColorHover: siteVars.accessibleYellow,
     primaryBackgroundColorFocus: siteVars.accessibleYellow,
     primaryBorderColor: siteVars.colors.white,
-    primaryBorderColorFocus: siteVars.colors.black,
-    primaryBorderColorFocusIndicator: siteVars.colors.white,
-    primaryBorderWidth: 2,
-
-    primaryCircularBorderColorFocusIndicator: siteVars.colors.black,
 
     circularColor: siteVars.colors.white,
     circularColorActive: siteVars.colors.black,
@@ -37,10 +28,8 @@ export default (siteVars: any): Partial<ButtonVariables> => {
     circularBackgroundColorHover: siteVars.accessibleYellow,
     circularBackgroundColorFocus: siteVars.accessibleYellow,
     circularBorderColor: siteVars.colors.white,
-    circularBorderColorActive: siteVars.colors.white,
     circularBorderColorHover: siteVars.colors.white,
     circularBorderColorFocus: siteVars.colors.white,
-    circularBorderColorFocusIndicator: siteVars.colors.black,
 
     textColor: siteVars.accessibleYellow,
     textColorHover: siteVars.accessibleYellow,

diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts
@@ -1,5 +1,12 @@
-export * from './colors'
 import { colors } from '../teams/siteVariables'
+import { accessibleCyan } from './colors'
+export * from './colors'
+
+//
+// BORDER STYLES
+//
+export const focusInnerBorderColor = colors.black
+export const focusOuterBorderColor = accessibleCyan
 
 //
 // SEMANTIC ASSIGNMENTS

diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -2,8 +2,8 @@ import * as React from 'react'
 import { ComponentSlotStylesInput, ICSSInJSStyle, SiteVariablesPrepared } from '../../../types'
 import { AlertProps } from '../../../../components/Alert/Alert'
 import { AlertVariables } from './alertVariables'
-import { teamsIconClassNames } from '../Icon/svg'
-import { pxToRem } from '../../../../lib'
+import getBorderFocusStyles from '../../getBorderFocusStyles'
+import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 
 const getIntentColorsFromProps = (
   p: AlertProps,
@@ -95,71 +95,28 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     flexGrow: 1,
   }),
 
-  action: ({ variables: v, props: p }): ICSSInJSStyle => ({
-    height: v.actionSize,
-    minWidth: v.actionSize,
-    color: v.actionColor || 'currentColor',
-    border: 0,
-    borderRadius: v.borderRadius,
-
-    [`& .${teamsIconClassNames.filled}`]: {
-      display: 'none',
-    },
-
-    [`& .${teamsIconClassNames.outline}`]: {
-      display: 'block',
-    },
+  action: ({ variables: v, props: p, theme: { siteVariables } }): ICSSInJSStyle => {
+    const iconFilledStyles = getIconFillOrOutlineStyles({ outline: false })
 
-    ':focus': { outline: 0 },
-
-    ':hover': {
-      color: 'currentColor',
-
-      [`& .${teamsIconClassNames.filled}`]: {
-        display: 'block',
-      },
-
-      [`& .${teamsIconClassNames.outline}`]: {
-        display: 'none',
+    return {
+      height: v.actionSize,
+      minWidth: v.actionSize,
+      color: v.actionColor || 'currentColor',
+      border: 0,
+      borderRadius: v.borderRadius,
+      ...getIconFillOrOutlineStyles({ outline: true }),
+
+      ':hover': {
+        color: 'currentColor',
+        ...iconFilledStyles,
       },
-    },
 
-    ...(p.isFromKeyboard && {
       ':focus': {
-        outline: 0,
-
-        [`& .${teamsIconClassNames.filled}`]: {
-          display: 'block',
-        },
-
-        [`& .${teamsIconClassNames.outline}`]: {
-          display: 'none',
-        },
-
-        ':before': {
-          content: '""',
-          position: 'absolute',
-          top: '1px',
-          right: '1px',
-          bottom: '1px',
-          left: '1px',
-          border: `1px solid ${v.focusInnerBorderColor}`,
-          borderRadius: pxToRem(2),
-        },
-
-        ':after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          border: `1px solid ${v.focusOuterBorderColor}`,
-          borderRadius: pxToRem(2),
-        },
+        ...(p.isFromKeyboard && iconFilledStyles),
+        ...getBorderFocusStyles({ siteVariables, isFromKeyboard: p.isFromKeyboard })[':focus'],
       },
-    }),
-  }),
+    }
+  },
 }
 
 export default alertStyles