(web components) Standardize focus treatment (#24771)

* Standardized focus treatment to use `outline` instead of a combination of `border` and `box-shadow` * Change files * Fix some unintended sizing changes * Fix naming convention and export
microsoft · Sep 16, 2022 · 2420757 · 2420757
1 parent 7c868d1
commit 2420757
Show file tree

Hide file tree

Showing 26 changed files with 130 additions and 179 deletions.
diff --git a/change/@fluentui-web-components-d424d9c8-3c64-4787-bb4b-e3323ae05884.json b/change/@fluentui-web-components-d424d9c8-3c64-4787-bb4b-e3323ae05884.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Standardized focus treatment to use `outline` instead of a combination of `border` and `box-shadow`",
+  "packageName": "@fluentui/web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -789,6 +789,12 @@ export const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
 // @public (undocumented)
 export const focusStrokeWidth: CSSDesignToken<number>;
 
+// @public
+export const focusTreatmentBase: CSSDirective;
+
+// @public
+export const focusTreatmentTight: CSSDirective;
+
 // @public (undocumented)
 export const fontWeight: CSSDesignToken<number>;
 

diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -12,8 +12,6 @@ import { Swatch } from '../../color/swatch';
 import {
   controlCornerRadius,
   designUnit,
-  focusStrokeOuter,
-  focusStrokeWidth,
   layerCornerRadius,
   neutralFillLayerAltRest,
   neutralFillLayerRecipe,
@@ -23,6 +21,7 @@ import {
   neutralStrokeLayerRest,
   strokeWidth,
 } from '../../design-tokens';
+import { focusTreatmentBase } from '../../styles/focus';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
 import { heightNumber } from '../../styles/size';
 
@@ -96,18 +95,16 @@ export const accordionItemStyles: (
     .button::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      top: calc(${strokeWidth} * -1px);
+      left: calc(${strokeWidth} * -1px);
+      right: calc(${strokeWidth} * -1px);
+      bottom: calc(${strokeWidth} * -1px);
       cursor: pointer;
     }
 
     .button:${focusVisible}::before {
-      outline: none;
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
+      ${focusTreatmentBase}
       border-radius: calc(${layerCornerRadius} * 1px);
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
     }
 
     :host(.expanded) .button:${focusVisible}::before {
@@ -184,8 +181,7 @@ export const accordionItemStyles: (
     forcedColorsStylesheetBehavior(
       css`
         .button:${focusVisible}::before {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight};
+          outline-color: ${SystemColors.Highlight};
         }
         .icon {
           fill: ${SystemColors.ButtonText};

diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -9,15 +9,13 @@ import {
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   controlCornerRadius,
-  focusStrokeOuter,
-  focusStrokeWidth,
   neutralForegroundActive,
   neutralForegroundHover,
   neutralForegroundRest,
-  strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { heightNumber } from '../styles/index';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const breadcrumbItemStyles: (
   context: ElementDefinitionContext,
@@ -32,7 +30,6 @@ export const breadcrumbItemStyles: (
       ${typeRampBase};
       min-width: calc(${heightNumber} * 1px);
       border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
     }
 
     .listitem {
@@ -63,12 +60,8 @@ export const breadcrumbItemStyles: (
       color: ${neutralForegroundActive};
     }
 
-    .control:${focusVisible}::after {
-      content: '';
-      position: absolute;
-      inset: calc(${strokeWidth} * -1px);
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
-      border-radius: inherit;
+    .control:${focusVisible} {
+      ${focusTreatmentTight}
     }
 
     :host(:not([href])),
@@ -115,8 +108,8 @@ export const breadcrumbItemStyles: (
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
-        :host([href]) .control:${focusVisible}::after {
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset;
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.LinkText};
         }
       `,
     ),

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -16,8 +16,6 @@ import {
   controlCornerRadius,
   designUnit,
   disabledOpacity,
-  fillColor,
-  focusStrokeOuter,
   foregroundOnAccentRest,
   neutralFillInputAltActive,
   neutralFillInputAltFocus,
@@ -30,6 +28,7 @@ import {
   strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentTight } from '../styles/focus';
 
 export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -55,7 +54,6 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
       background: ${neutralFillInputAltRest};
-      outline: none;
       cursor: pointer;
     }
 
@@ -107,9 +105,8 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
     }
 
     :host(:${focusVisible}) .control {
-      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
       background: ${neutralFillInputAltFocus};
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentTight}
     }
 
     :host(.checked) .control {
@@ -160,7 +157,7 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
         }
         :host(:${focusVisible}) .control {
           forced-color-adjust: none;
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          outline-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
         }
@@ -173,9 +170,6 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
           background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked:${focusVisible}) .control {
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
-        }
         :host(.checked) slot[name='checked-indicator'],
         :host(.checked) slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.HighlightText};

diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts
@@ -1,8 +1,8 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
-import { ComboboxOptions, disabledCursor, ElementDefinitionContext, focusVisible } from '@microsoft/fast-foundation';
+import { ComboboxOptions, disabledCursor, ElementDefinitionContext } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { strokeWidth } from '../design-tokens';
+import { neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralStrokeInputActive, neutralStrokeInputHover, neutralStrokeInputRest, strokeWidth } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 
 export const comboboxStyles: (context: ElementDefinitionContext, definition: ComboboxOptions) => ElementStyles = (
@@ -12,6 +12,21 @@ export const comboboxStyles: (context: ElementDefinitionContext, definition: Com
   css`
     ${selectStyles(context, definition)}
 
+    :host {
+      background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+        border-box ${neutralStrokeInputRest};
+    }
+
+    :host(:not([disabled]):not([open]):hover) {
+      background: padding-box linear-gradient(${neutralFillInputHover}, ${neutralFillInputHover}),
+        border-box ${neutralStrokeInputHover};
+    }
+
+    :host(:not([disabled]):not([open]):active) {
+      background: padding-box linear-gradient(${neutralFillInputActive}, ${neutralFillInputActive}),
+        border-box ${neutralStrokeInputActive};
+    }
+
     :host(:empty) .listbox {
         display: none;
     }
@@ -35,12 +50,6 @@ export const comboboxStyles: (context: ElementDefinitionContext, definition: Com
         height: calc(100% - ${strokeWidth} * 1px));
         margin: auto 0;
         width: 100%;
-    }
-
-    .selected-value:hover,
-    .selected-value:${focusVisible},
-    .selected-value:disabled,
-    .selected-value:active {
         outline: none;
     }
 `.withBehaviors(

diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
@@ -9,25 +9,25 @@ import {
 import {
   controlCornerRadius,
   designUnit,
-  focusStrokeOuter,
   focusStrokeWidth,
   neutralForegroundRest,
+  strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const dataGridCellStyles: (
   context: ElementDefinitionContext,
   definition: FoundationElementDefinition,
 ) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
     :host {
-      padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
+      padding: calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);
       color: ${neutralForegroundRest};
       box-sizing: border-box;
       ${typeRampBase}
-      border: transparent calc(${focusStrokeWidth} * 1px) solid;
+      border: transparent calc(${strokeWidth} * 1px) solid;
       overflow: hidden;
-      outline: none;
       white-space: nowrap;
       border-radius: calc(${controlCornerRadius} * 1px);
     }
@@ -37,22 +37,19 @@ export const dataGridCellStyles: (
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
         :host {
           forced-color-adjust: none;
-          border-color: transparent;
           background: ${SystemColors.Field};
           color: ${SystemColors.FieldText};
         }
 
         :host(:${focusVisible}) {
-          border-color: ${SystemColors.FieldText};
-          box-shadow: 0 0 0 2px inset ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
+          outline-color: ${SystemColors.FieldText};
         }
       `,
     ),

diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
@@ -13,14 +13,14 @@ import {
   controlCornerRadius,
   designUnit,
   disabledOpacity,
-  focusStrokeOuter,
-  focusStrokeWidth,
   neutralFillRest,
   neutralFillStrongActive,
   neutralFillStrongHover,
   neutralFillStrongRest,
   neutralStrokeControlRest,
+  strokeWidth,
 } from '../design-tokens';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const flipperStyles: (context: ElementDefinitionContext, definition: FlipperOptions) => ElementStyles = (
   context: ElementDefinitionContext,
@@ -36,9 +36,8 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
       background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
         border-box ${neutralStrokeControlRest};
       box-sizing: border-box;
-      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
       padding: 0;
     }
 
@@ -66,7 +65,7 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
 
     :host::-moz-focus-inner {
@@ -104,8 +103,7 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
         }
         :host(:${focusVisible}) {
           forced-color-adjust: none;
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.ButtonFace}, 0 0 0 4px ${SystemColors.ButtonText};
+          outline-color: ${SystemColors.Highlight};
         }
       `,
     ),

diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -14,7 +14,6 @@ import {
   controlCornerRadius,
   designUnit,
   disabledOpacity,
-  focusStrokeOuter,
   focusStrokeWidth,
   neutralFillSecondaryActive,
   neutralFillSecondaryHover,
@@ -24,8 +23,10 @@ import {
   neutralFillStealthHover,
   neutralFillStealthRest,
   neutralForegroundRest,
+  strokeWidth,
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 
 export const optionStyles: (
   context: ElementDefinitionContext,
@@ -37,16 +38,15 @@ export const optionStyles: (
       ${typeRampBase}
       background: ${neutralFillStealthRest};
       border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid transparent;
       box-sizing: border-box;
       color: ${neutralForegroundRest};
       cursor: pointer;
       fill: currentcolor;
       height: calc(${heightNumber} * 1px);
-      outline: none;
       overflow: hidden;
       align-items: center;
-      padding: 0 calc(${designUnit} * 2.25px);
+      padding: 0 calc(((${designUnit} * 3) - ${strokeWidth} - 1) * 1px);
       user-select: none;
       white-space: nowrap;
     }
@@ -55,7 +55,7 @@ export const optionStyles: (
       content: '';
       display: block;
       position: absolute;
-      left: 0;
+      left: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
       top: calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);
       width: 3px;
       height: calc((${heightNumber} / 2) * 1px);
@@ -81,7 +81,7 @@ export const optionStyles: (
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
       background: ${neutralFillStealthFocus};
     }
 
@@ -156,6 +156,9 @@ export const optionStyles: (
           fill: currentcolor;
           opacity: 1;
         }
+        :host(:${focusVisible}) {
+          outline-color: ${SystemColors.CanvasText};
+        }
       `,
     ),
   );