feat: add appearance behaviors for inputs and form controls

change/@fluentui-web-components-3913ee5d-6f58-4975-8cea-5c7b39eeb630.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "create a separate css block for filled appearance and add appearanceBehavior",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
-import { SelectStyles } from '../select/select.styles';
+import { SelectFilledStyles, SelectStyles } from '../select/select.styles';
+import { appearanceBehavior } from '../utilities/behaviors';
 
 export const ComboboxStyles = css`
     ${SelectStyles}
@@ -37,4 +38,4 @@ export const ComboboxStyles = css`
     .selected-value:active {
         outline: none;
     }
-`;
+`.withBehaviors(appearanceBehavior('filled', SelectFilledStyles));

packages/web-components/src/combobox/fixtures/base.html

@@ -19,7 +19,7 @@ <h2>Default</h2>
   </fluent-combobox>
 
   <h2>Filled</h2>
-  <fluent-combobox id="combobox" filled>
+  <fluent-combobox id="combobox" appearance="filled">
     <fluent-option>Please Please Me</fluent-option>
     <fluent-option>With The Beatles</fluent-option>
     <fluent-option>A Hard Day's Night</fluent-option>

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

@@ -14,6 +14,36 @@ import {
   neutralForegroundRestBehavior,
   neutralOutlineRestBehavior,
 } from '../styles/index';
+import { appearanceBehavior } from '../utilities/behaviors';
+
+export const NumberFieldFilledStyles = css`
+  :host([appearance='filled']) .root {
+    background: ${neutralFillRestBehavior.var};
+  }
+
+  :host([appearance='filled']:hover:not([disabled])) .root {
+    background: ${neutralFillHoverBehavior.var};
+  }
+`.withBehaviors(
+  neutralFillHoverBehavior,
+  neutralFillRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host([appearance='filled']) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.FieldText};
+      }
+      :host([appearance='filled']:hover:not([disabled])) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.Highlight};
+      }
+      :host([appearance='filled'][disabled]) .root {
+        border-color: ${SystemColors.GrayText};
+        background: ${SystemColors.Field};
+      }
+    `,
+  ),
+);
 
 export const NumberFieldStyles = css`
     ${display('inline-block')} :host {
@@ -140,14 +170,6 @@ export const NumberFieldStyles = css`
         opacity: 1;
     }
 
-    :host([appearance="filled"]) .root {
-        background: ${neutralFillRestBehavior.var};
-    }
-
-    :host([appearance="filled"]:hover:not([disabled])) .root {
-        background: ${neutralFillHoverBehavior.var};
-    }
-
     :host([disabled]) .label,
     :host([readonly]) .label,
     :host([readonly]) .control,
@@ -163,6 +185,7 @@ export const NumberFieldStyles = css`
         border-color: ${neutralOutlineRestBehavior.var};
     }
 `.withBehaviors(
+  appearanceBehavior('filled', NumberFieldFilledStyles),
   accentFillActiveBehavior,
   accentFillHoverBehavior,
   accentFillRestBehavior,
@@ -175,15 +198,12 @@ export const NumberFieldStyles = css`
   neutralOutlineRestBehavior,
   forcedColorsStylesheetBehavior(
     css`
-      .root,
-      :host([appearance='filled']) .root {
+      .root {
         forced-color-adjust: none;
         background: ${SystemColors.Field};
         border-color: ${SystemColors.FieldText};
       }
-      :host(:hover:not([disabled])) .root,
-      :host([appearance='filled']:hover:not([disabled])) .root,
-      :host([appearance='filled']:hover) .root {
+      :host(:hover:not([disabled])) .root {
         background: ${SystemColors.Field};
         border-color: ${SystemColors.Highlight};
       }
@@ -209,8 +229,7 @@ export const NumberFieldStyles = css`
       :host([disabled]) {
         opacity: 1;
       }
-      :host([disabled]) .root,
-      :host([appearance='filled']:hover[disabled]) .root {
+      :host([disabled]) .root {
         border-color: ${SystemColors.GrayText};
         background: ${SystemColors.Field};
       }

packages/web-components/src/select/fixtures/base.html

@@ -10,7 +10,7 @@ <h2>Default</h2>
   </fluent-select>
 
   <h2>Filled</h2>
-  <fluent-select filled>
+  <fluent-select appearance="filled">
     <fluent-option>This option has no value</fluent-option>
     <fluent-option disabled>This option is disabled</fluent-option>
     <fluent-option value="hi">This option has a value</fluent-option>

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

@@ -20,6 +20,23 @@ import {
   neutralOutlineRestBehavior,
 } from '../styles';
 import { heightNumber } from '../styles/size';
+import { appearanceBehavior } from '../utilities/behaviors';
+
+export const SelectFilledStyles = css`
+  :host([appearance="filled"]) {
+    background: ${neutralFillRestBehavior.var};
+    border-color: transparent;
+  }
+
+  :host([appearance="filled"]:hover:not([disabled])) {
+    background: ${neutralFillHoverBehavior.var};
+    border-color: transparent;
+  }
+
+  :host([appearance="filled"]:${focusVisible}) {
+    border-color: ${neutralFocusBehavior.var};
+  }
+`.withBehaviors(neutralFillHoverBehavior, neutralFillRestBehavior, neutralFocusBehavior);
 
 export const SelectStyles = css`
     ${display('inline-flex')} :host {
@@ -183,25 +200,10 @@ export const SelectStyles = css`
     ::slotted([role="option"]) {
         flex: 0 0 auto;
     }
-
-    :host([filled]) {
-        background: ${neutralFillRestBehavior.var};
-        border-color: transparent;
-    }
-
-    :host([filled]:hover:not([disabled])) {
-        background: ${neutralFillHoverBehavior.var};
-        border-color: transparent;
-    }
-
-    :host([filled]:${focusVisible}) {
-        border-color: ${neutralFocusBehavior.var};
-    }
 `.withBehaviors(
+  appearanceBehavior('filled', SelectFilledStyles),
   accentFillHoverBehavior,
   accentForegroundCutRestBehavior,
-  neutralFillRestBehavior,
-  neutralFillHoverBehavior,
   neutralOutlineActiveBehavior,
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,

packages/web-components/src/text-area/text-area.styles.ts

@@ -11,6 +11,19 @@ import {
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
 } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+
+export const TextAreaFilledStyles = css`
+  :host([appearance='filled']) .control {
+    background: ${neutralFillRestBehavior.var};
+    border-color: transparent;
+  }
+
+  :host([appearance='filled']:hover:not([disabled])) .control {
+    background: ${neutralFillHoverBehavior.var};
+    border-color: transparent;
+  }
+`.withBehaviors(neutralFillHoverBehavior, neutralFillRestBehavior);
 
 export const TextAreaStyles = css`
     ${display('inline-block')} :host {
@@ -52,16 +65,6 @@ export const TextAreaStyles = css`
         box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
-    :host(.filled) .control {
-        background: ${neutralFillRestBehavior.var};
-        border-color: transparent;
-    }
-
-    :host(.filled:hover:not([disabled])) .control {
-        background: ${neutralFillHoverBehavior.var};
-        border-color: transparent;
-    }
-
     :host(.resize-both) .control {
         resize: both;
     }
@@ -98,10 +101,9 @@ export const TextAreaStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
-  neutralFillHoverBehavior,
+  appearanceBehavior('filled', TextAreaFilledStyles),
   neutralFillInputHoverBehavior,
   neutralFillInputRestBehavior,
-  neutralFillRestBehavior,
   neutralFocusBehavior,
   neutralForegroundRestBehavior,
   neutralOutlineHoverBehavior,

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

@@ -12,6 +12,38 @@ import {
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
 } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+
+export const TextFieldFilledStyles = css`
+  :host([appearance='filled']) .root {
+    background: ${neutralFillRestBehavior.var};
+    border-color: transparent;
+  }
+
+  :host([appearance='filled']:hover:not(.disabled)) .root {
+    background: ${neutralFillHoverBehavior.var};
+    border-color: transparent;
+  }
+`.withBehaviors(
+  neutralFillHoverBehavior,
+  neutralFillRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host([appearance='filled']) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.FieldText};
+      }
+      :host([appearance='filled']:hover:not(.disabled)) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.Highlight};
+      }
+      :host([appearance='filled'].disabled) .root {
+        border-color: ${SystemColors.GrayText};
+        background: ${SystemColors.Field};
+      }
+    `,
+  ),
+);
 
 export const TextFieldStyles = css`
     ${display('inline-block')} :host {
@@ -100,16 +132,6 @@ export const TextFieldStyles = css`
         box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
-    :host(.filled) .root {
-        background: ${neutralFillRestBehavior.var};
-        border-color: transparent;
-    }
-
-    :host(.filled:hover:not(.disabled)) .root {
-        background: ${neutralFillHoverBehavior.var};
-        border-color: transparent;
-    }
-
     :host(.disabled) .label,
     :host(.readonly) .label,
     :host(.readonly) .control,
@@ -121,25 +143,21 @@ export const TextFieldStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
-  neutralFillHoverBehavior,
+  appearanceBehavior('filled', TextFieldFilledStyles),
   neutralFillInputHoverBehavior,
   neutralFillInputRestBehavior,
-  neutralFillRestBehavior,
   neutralFocusBehavior,
   neutralForegroundRestBehavior,
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
   forcedColorsStylesheetBehavior(
     css`
-      .root,
-      :host(.filled) .root {
+      .root {
         forced-color-adjust: none;
         background: ${SystemColors.Field};
         border-color: ${SystemColors.FieldText};
       }
-      :host(:hover:not(.disabled)) .root,
-      :host(.filled:hover:not(.disabled)) .root,
-      :host(.filled:hover) .root {
+      :host(:hover:not(.disabled)) .root {
         background: ${SystemColors.Field};
         border-color: ${SystemColors.Highlight};
       }
@@ -150,8 +168,7 @@ export const TextFieldStyles = css`
       :host(.disabled) {
         opacity: 1;
       }
-      :host(.disabled) .root,
-      :host(.filled:hover.disabled) .root {
+      :host(.disabled) .root {
         border-color: ${SystemColors.GrayText};
         background: ${SystemColors.Field};
       }