From fec9566bd1480fb29e67be4c9266bb13acdf10b4 Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Wed, 24 Mar 2021 18:11:06 -0700
Subject: [PATCH] create a separate css block for filled appearance and add
 appearanceBehavior

---
 .../src/combobox/combobox.styles.ts           |  5 +-
 .../src/combobox/fixtures/base.html           |  2 +-
 .../src/number-field/number-field.styles.ts   | 49 ++++++++++++-----
 .../src/select/fixtures/base.html             |  2 +-
 .../src/select/select.styles.ts               | 34 ++++++------
 .../src/text-area/text-area.styles.ts         | 27 +++++----
 .../src/text-field/text-field.styles.ts       | 55 ++++++++++++-------
 7 files changed, 108 insertions(+), 66 deletions(-)

diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts
index c548129a4fd7e2..81d1495b9959a7 100644
--- a/packages/web-components/src/combobox/combobox.styles.ts
+++ b/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 { SelectStyles, SelectFilledStyles } 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));
diff --git a/packages/web-components/src/combobox/fixtures/base.html b/packages/web-components/src/combobox/fixtures/base.html
index aeadd392ad7cdd..4066b6545ed45f 100644
--- a/packages/web-components/src/combobox/fixtures/base.html
+++ b/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>
diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts
index 7cf3c867c5e464..bde8054c039fa7 100644
--- a/packages/web-components/src/number-field/number-field.styles.ts
+++ b/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};
       }
diff --git a/packages/web-components/src/select/fixtures/base.html b/packages/web-components/src/select/fixtures/base.html
index a3e512f899c537..732a4a68b89714 100644
--- a/packages/web-components/src/select/fixtures/base.html
+++ b/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>
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
index f18e4a2cda096a..2b9f9a7171e3c1 100644
--- a/packages/web-components/src/select/select.styles.ts
+++ b/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,
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
index 1c8ac196f004bb..79a065b12e9ba4 100644
--- a/packages/web-components/src/text-area/text-area.styles.ts
+++ b/packages/web-components/src/text-area/text-area.styles.ts
@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   heightNumber,
   neutralFillHoverBehavior,
@@ -11,6 +12,19 @@ import {
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
 } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+
+export const TextAreaFilledStyles = css`
+  :host(.filled) .control {
+    background: ${neutralFillRestBehavior.var};
+    border-color: transparent;
+  }
+
+  :host(.filled:hover:not([disabled])) .control {
+    background: ${neutralFillHoverBehavior.var};
+    border-color: transparent;
+  }
+`.withBehaviors(neutralFillHoverBehavior, neutralFillRestBehavior);
 
 export const TextAreaStyles = css`
     ${display('inline-block')} :host {
@@ -52,16 +66,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 +102,9 @@ export const TextAreaStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
-  neutralFillHoverBehavior,
+  appearanceBehavior('filled', TextAreaFilledStyles),
   neutralFillInputHoverBehavior,
   neutralFillInputRestBehavior,
-  neutralFillRestBehavior,
   neutralFocusBehavior,
   neutralForegroundRestBehavior,
   neutralOutlineHoverBehavior,
diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
index 53d428d67de337..d1f3c6604e3ad6 100644
--- a/packages/web-components/src/text-field/text-field.styles.ts
+++ b/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(.filled) .root {
+    background: ${neutralFillRestBehavior.var};
+    border-color: transparent;
+  }
+
+  :host(.filled:hover:not(.disabled)) .root {
+    background: ${neutralFillHoverBehavior.var};
+    border-color: transparent;
+  }
+`.withBehaviors(
+  neutralFillHoverBehavior,
+  neutralFillRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host(.filled) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.FieldText};
+      }
+      :host(.filled:hover:not(.disabled)) .root {
+        background: ${SystemColors.Field};
+        border-color: ${SystemColors.Highlight};
+      }
+      :host(.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};
       }