(web-components) Cleaned up shared styles for button and input for improved reuse and color updates

change/@fluentui-web-components-4bde24b4-312c-47f7-bbd5-003938181433.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Cleaned up shared styles for button and input for improved reuse and color updates",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/anchor/anchor.styles.ts

@@ -1,32 +1,28 @@
-import { css, ElementStyles } from '@microsoft/fast-element';
+import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import {
   AccentButtonStyles,
   baseButtonStyles,
   HypertextStyles,
   LightweightButtonStyles,
+  NeutralButtonStyles,
   OutlineButtonStyles,
   StealthButtonStyles,
 } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 
 const interactivitySelector: string = '[href]';
-const nonInteractivitySelector: string = ':not([href])';
 
 export const anchorStyles: (
   context: ElementDefinitionContext,
   definition: FoundationElementDefinition,
 ) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
-  css`
-    :host .control:not([href]) {
-      cursor: default;
-    }
-
-    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(
-    appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+  baseButtonStyles(context, definition, interactivitySelector)
+  .withBehaviors(
+    appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector)),
+    appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector)),
+    appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector)),
+    appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector)),
+    appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector)),
+    appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector)),
   );

packages/web-components/src/button/button.styles.ts

@@ -2,14 +2,13 @@ import { css, ElementStyles } from '@microsoft/fast-element';
 import {
   disabledCursor,
   ElementDefinitionContext,
-  forcedColorsStylesheetBehavior,
   FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
   AccentButtonStyles,
   baseButtonStyles,
   LightweightButtonStyles,
+  NeutralButtonStyles,
   OutlineButtonStyles,
   StealthButtonStyles,
 } from '../styles/';
@@ -24,79 +23,25 @@ export const buttonStyles: (
   definition: FoundationElementDefinition,
 ) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
   css`
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
+    :host(${interactivitySelector}) .control {
+      cursor: pointer;
+    }
+
+    :host(${nonInteractivitySelector}) .control {
       cursor: ${disabledCursor};
     }
 
+    @media (forced-colors: none) {
+      :host(${nonInteractivitySelector}) .control {
+        opacity: ${disabledOpacity};
+      }
+    }
+
     ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
   `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        :host([disabled]) {
-          opacity: 1;
-        }
-        :host([disabled]) .control {
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-          fill: currentcolor;
-        }
-      `,
-    ),
-    appearanceBehavior(
-      'accent',
-      css`
-      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
-      `.withBehaviors(
-        forcedColorsStylesheetBehavior(
-          css`
-            :host([disabled]) .control {
-              background: ${SystemColors.ButtonFace};
-            }
-          `,
-        ),
-      )
-    ),
-    appearanceBehavior(
-      'lightweight',
-      css`
-      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
-      `.withBehaviors(
-        forcedColorsStylesheetBehavior(
-          css`
-            :host([disabled]) .control {
-              border-color: ${SystemColors.ButtonFace};
-            }
-          `,
-        ),
-      )
-    ),
-    appearanceBehavior(
-      'outline',
-      css`
-      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(
-        forcedColorsStylesheetBehavior(
-          css`
-            :host([disabled]) .control {
-              border-color: ${SystemColors.GrayText};
-            }
-          `,
-        ),
-      )
-    ),
-    appearanceBehavior(
-      'stealth',
-      css`
-      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(
-        forcedColorsStylesheetBehavior(
-          css`
-            :host([disabled]) .control {
-              border-color: ${SystemColors.ButtonFace};
-            }
-          `,
-        ),
-      )
-    )
+    appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+    appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+    appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+    appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+    appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
   );

packages/web-components/src/combobox/combobox.stories.ts

@@ -8,6 +8,9 @@ export default {
       options: ['filled', 'outline'],
       control: { type: 'radio' },
     },
+    disabled: {
+      control: { type: 'boolean' },
+    },
     autocomplete: {
       options: ['inline', 'list', 'none', 'both'],
       control: { type: 'radio' },
@@ -22,15 +25,16 @@ export default {
   },
 };
 
-const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
+const ComboboxTemplate = ({ appearance, disabled, autocomplete, position, required }) => `
   <style>
     div.docs-story>div:first-child {
       height: 32em !important;
     }
   </style>
   <fluent-combobox
     ${appearance ? `appearance="${appearance}"` : ''}
-    ${appearance ? `autocomplete="${autocomplete}"` : ''}
+    ${disabled ? 'disabled' : ''} 
+    ${autocomplete ? `autocomplete="${autocomplete}"` : ''}
     ${required ? 'required' : ''}
     ${position ? `position="${position}"` : ''}
     style="margin-bottom: 500px;"
@@ -56,6 +60,7 @@ export const Combobox = ComboboxTemplate.bind({});
 Combobox.args = {
   value: 'Christopher Eccleston',
   appearance: 'outline',
+  disabled: false,
 };
 
 const example = `

packages/web-components/src/combobox/combobox.styles.ts

@@ -1,56 +1,50 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
-import { ComboboxOptions, disabledCursor, ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { selectFilledStyles, selectStyles } from '../select/select.styles';
+import { ComboboxOptions, disabledCursor, ElementDefinitionContext, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { baseSelectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralStrokeInputActive, neutralStrokeInputHover, neutralStrokeInputRest, strokeWidth } from '../design-tokens';
+import { strokeWidth } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles } from '../styles';
+
+const logicalControlSelector: string = '.control';
+const interactivitySelector: string = ':not([disabled]):not([open])';
 
 export const comboboxStyles: (context: ElementDefinitionContext, definition: ComboboxOptions) => ElementStyles = (
   context: ElementDefinitionContext,
   definition: ComboboxOptions,
 ) =>
   css`
-    ${selectStyles(context, definition)}
-
-    :host {
-      background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-        border-box ${neutralStrokeInputRest};
-    }
+    ${baseSelectStyles(context, definition)}
 
-    :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};
-    }
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     :host(:empty) .listbox {
-        display: none;
+      display: none;
     }
 
     :host([disabled]) *,
     :host([disabled]) {
-        cursor: ${disabledCursor};
-        user-select: none;
+      cursor: ${disabledCursor};
+      user-select: none;
     }
 
     :host(:active) .selected-value {
-        user-select: none;
+      user-select: none;
     }
 
     .selected-value {
-        -webkit-appearance: none;
-        background: transparent;
-        border: none;
-        color: inherit;
-        ${typeRampBase}
-        height: calc(100% - ${strokeWidth} * 1px));
-        margin: auto 0;
-        width: 100%;
-        outline: none;
+      -webkit-appearance: none;
+      background: transparent;
+      border: none;
+      color: inherit;
+      ${typeRampBase}
+      height: calc(100% - ${strokeWidth} * 1px));
+      margin: auto 0;
+      width: 100%;
+      outline: none;
     }
-`.withBehaviors(
-  appearanceBehavior('filled', selectFilledStyles(context, definition)));
+  `.withBehaviors(
+    appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector, interactivitySelector)),
+    appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)),
+    forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)),
+  );

packages/web-components/src/number-field/number-field.styles.ts

@@ -5,38 +5,28 @@ import {
   forcedColorsStylesheetBehavior,
   NumberFieldOptions,
 } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
-  inputFilledForcedColorStyles,
+  baseInputStyles,
   inputFilledStyles,
   inputForcedColorStyles,
+  inputOutlineStyles,
   inputStateStyles,
-  inputStyles,
 } from '../styles/index';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
 
-export const numberFieldFilledStyles: (
+const logicalControlSelector: string = '.root';
+
+export const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles = (
   context: ElementDefinitionContext,
   definition: NumberFieldOptions,
-) => ElementStyles = (context: ElementDefinitionContext, definition: NumberFieldOptions) =>
-  css`
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `,
-    ),
-  );
-
-export const numberFieldStyles = (context, definition) =>
+) =>
   css`
     ${display('inline-block')}
 
-    ${inputStyles(context, definition, '.root')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
-    ${inputStateStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     .root {
       display: flex;
@@ -96,14 +86,7 @@ export const numberFieldStyles = (context, definition) =>
       padding-top: 3px;
     }
   `.withBehaviors(
-    appearanceBehavior('filled', numberFieldFilledStyles(context, definition)),
-    forcedColorsStylesheetBehavior(
-      css`
-        ${inputForcedColorStyles(context, definition, '.root')}
-        .step-up,
-        .step-down {
-          fill: ${SystemColors.FieldText};
-        }
-      `,
-    ),
+    appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)),
+    appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)),
+    forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)),
   );