@fluentui/web-components 2.5.6 → 2.5.7

package/dist/esm/search/search.styles.js

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { baseInputStyles, heightNumber, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+const logicalControlSelector = '.root';
 const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
     const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
     const inputRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -14,15 +15,13 @@ const clearButtonActive = DesignToken.create("clear-button-active").withDefault(
     const inputRecipe = neutralFillInputRecipe.getValueFor(target);
     return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
 });
-export const searchFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
 export const searchStyles = (context, definition) => css `
     ${display('inline-block')}
-    ${inputStyles(context, definition, '.root')}
-    ${inputStateStyles(context, definition, '.root')}
+
+    ${baseInputStyles(context, definition, logicalControlSelector)}
+
+    ${inputStateStyles(context, definition, logicalControlSelector)}
+
     .root {
       display: flex;
       flex-direction: row;
@@ -102,6 +101,4 @@ export const searchStyles = (context, definition) => css `
     ::slotted(${context.tagFor(Button)}) {
       margin-inline-end: 1px;
     }
-  `.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.root')}
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/select/select.stories.js

@@ -5,9 +5,9 @@ export default {
     component: fluentSelect,
     argTypes: {
         appearance: {
-            options: ['filled', 'outlined', 'stealth'],
+            options: ['filled', 'outline', 'stealth'],
             control: { type: 'radio' },
-            defaultValue: 'outlined',
+            defaultValue: 'outline',
         },
         disabled: {
             control: { type: 'boolean' },

package/dist/esm/select/select.styles.js

@@ -4,67 +4,34 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevationShadowFlyout } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, layerCornerRadius, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { focusTreatmentBase } from '../styles/focus';
-export const selectFilledStyles = (context, definition) => css `
-  :host {
-    background: ${neutralFillSecondaryRest};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):hover) {
-    background: ${neutralFillSecondaryHover};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):active) {
-    background: ${neutralFillSecondaryActive};
-    border-color: transparent;
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-      :host(:not([disabled]):not([open]):hover) {
-        background: transparent;
-      }
-      :host(:not([disabled]):not([open]):hover),
-      :host(:not([disabled]):not([open]):active) {
-        border-color: ${SystemColors.Highlight};
-      }
-    `));
-export const selectStealthStyles = (context, definition) => css `
-  :host {
-    background: ${neutralFillStealthRest};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):hover) {
-    background: ${neutralFillStealthHover};
-    border-color: transparent;
-  }
-
-  :host(:not([disabled]):not([open]):active) {
-    background: ${neutralFillStealthActive};
-    border-color: transparent;
-  }
-`;
-export const selectStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
-      border: calc(${strokeWidth} * 1px) solid transparent;
+import { inputFilledStyles, inputForcedColorStyles, NeutralButtonStyles, StealthButtonStyles } from '../styles';
+const logicalControlSelector = '.control';
+const interactivitySelector = ':not([disabled]):not([open])';
+const nonInteractivitySelector = '[disabled]';
+/**
+ * The base styles for a select and combobox, without `appearance` visual differences.
+ *
+ * @internal
+ */
+export const baseSelectStyles = (context, definition) => css `
+    ${display('inline-flex')}
+    
+    :host {
       border-radius: calc(${controlCornerRadius} * 1px);
       box-sizing: border-box;
       color: ${neutralForegroundRest};
       fill: currentcolor;
       font-family: ${bodyFont};
-      height: calc(${heightNumber} * 1px);
       position: relative;
       user-select: none;
       min-width: 250px;
       vertical-align: top;
     }
 
-    :host .listbox {
+    .listbox {
       box-shadow: ${elevationShadowFlyout};
       background: ${fillColor};
       border-radius: calc(${layerCornerRadius} * 1px);
@@ -73,7 +40,7 @@ export const selectStyles = (context, definition) => css `
       flex-direction: column;
       left: 0;
       max-height: calc(var(--max-height) - (${heightNumber} * 1px));
-      padding: calc((${designUnit} - ${strokeWidth} ) * 1px) 0;
+      padding: calc((${designUnit} - ${strokeWidth} ) * 1px);
       overflow-y: auto;
       position: absolute;
       width: 100%;
@@ -82,11 +49,14 @@ export const selectStyles = (context, definition) => css `
       border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
-    :host .listbox[hidden] {
+    .listbox[hidden] {
       display: none;
     }
 
-    :host .control {
+    .control {
+      border: calc(${strokeWidth} * 1px) solid transparent;
+      border-radius: calc(${controlCornerRadius} * 1px);
+      height: calc(${heightNumber} * 1px);
       align-items: center;
       box-sizing: border-box;
       cursor: pointer;
@@ -97,27 +67,13 @@ export const selectStyles = (context, definition) => css `
       width: 100%;
     }
 
-    :host(:not([disabled]):not([open]):hover) {
-      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
-        border-box ${neutralStrokeControlHover};
-    }
-
-    :host(:not([disabled]):not([open]):active) {
-      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
-        border-box ${neutralStrokeControlActive};
-    }
-
     :host(:${focusVisible}) {
       ${focusTreatmentBase}
     }
 
-    :host([disabled]) {
-      cursor: ${disabledCursor};
-      opacity: ${disabledOpacity};
-    }
-
     :host([disabled]) .control {
       cursor: ${disabledCursor};
+      opacity: ${disabledOpacity};
       user-select: none;
     }
 
@@ -168,37 +124,16 @@ export const selectStyles = (context, definition) => css `
     ::slotted([role='option']) {
       flex: 0 0 auto;
     }
-  `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)), appearanceBehavior('stealth', selectStealthStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-      :host {
-        background: ${SystemColors.ButtonFace};
-        color: ${SystemColors.ButtonText};
-      }
-      :host(:not([disabled]):not([open]):hover) {
-        background: transparent;
-      }
-      :host(:not([disabled]):hover) {
-        border-color: ${SystemColors.Highlight};
-      }
-      :host(:${focusVisible}) {
-        forced-color-adjust: none;
-        outline-color: ${SystemColors.Highlight};
-      }
-      :host([open]) .listbox {
-        background: ${SystemColors.ButtonFace};
-        border-color: ${SystemColors.CanvasText};
-      }
-      .start, .end, .indicator, ::slotted(svg) {
-        fill: ${SystemColors.FieldText};
-      }
-      :host([disabled]) {
-        border-color: ${SystemColors.GrayText};
-        color: ${SystemColors.GrayText};
-        opacity: 1;
-      }
-      :host([disabled]) .start,
-      :host([disabled]) .end,
-      :host([disabled]) .indicator,
-      :host([disabled]) ::slotted(svg) {
-        fill: ${SystemColors.GrayText};
-      }
-    `));
+  `;
+/**
+ * @internal
+ */
+export const baseSelectForcedColorStyles = (context, definition) => css `
+    :host([open]) .listbox {
+      background: ${SystemColors.ButtonFace};
+      border-color: ${SystemColors.CanvasText};
+    }
+  `;
+export const selectStyles = (context, definition) => baseSelectStyles(context, definition)
+    .withBehaviors(appearanceBehavior('outline', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)
+    .withBehaviors(forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)))), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), forcedColorsStylesheetBehavior(baseSelectForcedColorStyles(context, definition)));