chore(web-components): replace state partials with state function (#33037)

Author: radium-v

change/@fluentui-web-components-04faf08a-3fc9-47e1-bade-1f263207c6e5.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "replace state partials with stateSelector function",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,5 +1,38 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utils/index.js';
+import {
+  anchorState,
+  beigeState,
+  blueState,
+  brandState,
+  brassState,
+  brownState,
+  cornflowerState,
+  cranberryState,
+  darkGreenState,
+  darkRedState,
+  forestState,
+  goldState,
+  grapeState,
+  lavenderState,
+  lightTealState,
+  lilacState,
+  magentaState,
+  marigoldState,
+  minkState,
+  navyState,
+  peachState,
+  pinkState,
+  platinumState,
+  plumState,
+  pumpkinState,
+  purpleState,
+  redState,
+  royalBlueState,
+  seafoamState,
+  steelState,
+  tealState,
+} from '../styles/states/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
@@ -322,157 +355,157 @@ export const styles = css`
     border-radius: ${borderRadiusXLarge};
   }
 
-  :host(:is([state--brand], :state(brand))) {
+  :host(${brandState}) {
     color: ${colorNeutralForegroundStaticInverted};
     background-color: ${colorBrandBackgroundStatic};
   }
 
-  :host(:is([state--dark-red], :state(dark-red))) {
+  :host(${darkRedState}) {
     color: ${colorPaletteDarkRedForeground2};
     background-color: ${colorPaletteDarkRedBackground2};
   }
 
-  :host(:is([state--cranberry], :state(cranberry))) {
+  :host(${cranberryState}) {
     color: ${colorPaletteCranberryForeground2};
     background-color: ${colorPaletteCranberryBackground2};
   }
 
-  :host(:is([state--red], :state(red))) {
+  :host(${redState}) {
     color: ${colorPaletteRedForeground2};
     background-color: ${colorPaletteRedBackground2};
   }
 
-  :host(:is([state--pumpkin], :state(pumpkin))) {
+  :host(${pumpkinState}) {
     color: ${colorPalettePumpkinForeground2};
     background-color: ${colorPalettePumpkinBackground2};
   }
 
-  :host(:is([state--peach], :state(peach))) {
+  :host(${peachState}) {
     color: ${colorPalettePeachForeground2};
     background-color: ${colorPalettePeachBackground2};
   }
 
-  :host(:is([state--marigold], :state(marigold))) {
+  :host(${marigoldState}) {
     color: ${colorPaletteMarigoldForeground2};
     background-color: ${colorPaletteMarigoldBackground2};
   }
 
-  :host(:is([state--gold], :state(gold))) {
+  :host(${goldState}) {
     color: ${colorPaletteGoldForeground2};
     background-color: ${colorPaletteGoldBackground2};
   }
 
-  :host(:is([state--brass], :state(brass))) {
+  :host(${brassState}) {
     color: ${colorPaletteBrassForeground2};
     background-color: ${colorPaletteBrassBackground2};
   }
 
-  :host(:is([state--brown], :state(brown))) {
+  :host(${brownState}) {
     color: ${colorPaletteBrownForeground2};
     background-color: ${colorPaletteBrownBackground2};
   }
 
-  :host(:is([state--forest], :state(forest))) {
+  :host(${forestState}) {
     color: ${colorPaletteForestForeground2};
     background-color: ${colorPaletteForestBackground2};
   }
 
-  :host(:is([state--seafoam], :state(seafoam))) {
+  :host(${seafoamState}) {
     color: ${colorPaletteSeafoamForeground2};
     background-color: ${colorPaletteSeafoamBackground2};
   }
 
-  :host(:is([state--dark-green], :state(dark-green))) {
+  :host(${darkGreenState}) {
     color: ${colorPaletteDarkGreenForeground2};
     background-color: ${colorPaletteDarkGreenBackground2};
   }
 
-  :host(:is([state--light-teal], :state(light-teal))) {
+  :host(${lightTealState}) {
     color: ${colorPaletteLightTealForeground2};
     background-color: ${colorPaletteLightTealBackground2};
   }
 
-  :host(:is([state--teal], :state(teal))) {
+  :host(${tealState}) {
     color: ${colorPaletteTealForeground2};
     background-color: ${colorPaletteTealBackground2};
   }
 
-  :host(:is([state--steel], :state(steel))) {
+  :host(${steelState}) {
     color: ${colorPaletteSteelForeground2};
     background-color: ${colorPaletteSteelBackground2};
   }
 
-  :host(:is([state--blue], :state(blue))) {
+  :host(${blueState}) {
     color: ${colorPaletteBlueForeground2};
     background-color: ${colorPaletteBlueBackground2};
   }
 
-  :host(:is([state--royal-blue], :state(royal-blue))) {
+  :host(${royalBlueState}) {
     color: ${colorPaletteRoyalBlueForeground2};
     background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
-  :host(:is([state--cornflower], :state(cornflower))) {
+  :host(${cornflowerState}) {
     color: ${colorPaletteCornflowerForeground2};
     background-color: ${colorPaletteCornflowerBackground2};
   }
 
-  :host(:is([state--navy], :state(navy))) {
+  :host(${navyState}) {
     color: ${colorPaletteNavyForeground2};
     background-color: ${colorPaletteNavyBackground2};
   }
 
-  :host(:is([state--lavender], :state(lavender))) {
+  :host(${lavenderState}) {
     color: ${colorPaletteLavenderForeground2};
     background-color: ${colorPaletteLavenderBackground2};
   }
 
-  :host(:is([state--purple], :state(purple))) {
+  :host(${purpleState}) {
     color: ${colorPalettePurpleForeground2};
     background-color: ${colorPalettePurpleBackground2};
   }
 
-  :host(:is([state--grape], :state(grape))) {
+  :host(${grapeState}) {
     color: ${colorPaletteGrapeForeground2};
     background-color: ${colorPaletteGrapeBackground2};
   }
 
-  :host(:is([state--lilac], :state(lilac))) {
+  :host(${lilacState}) {
     color: ${colorPaletteLilacForeground2};
     background-color: ${colorPaletteLilacBackground2};
   }
 
-  :host(:is([state--pink], :state(pink))) {
+  :host(${pinkState}) {
     color: ${colorPalettePinkForeground2};
     background-color: ${colorPalettePinkBackground2};
   }
 
-  :host(:is([state--magenta], :state(magenta))) {
+  :host(${magentaState}) {
     color: ${colorPaletteMagentaForeground2};
     background-color: ${colorPaletteMagentaBackground2};
   }
 
-  :host(:is([state--plum], :state(plum))) {
+  :host(${plumState}) {
     color: ${colorPalettePlumForeground2};
     background-color: ${colorPalettePlumBackground2};
   }
 
-  :host(:is([state--beige], :state(beige))) {
+  :host(${beigeState}) {
     color: ${colorPaletteBeigeForeground2};
     background-color: ${colorPaletteBeigeBackground2};
   }
 
-  :host(:is([state--mink], :state(mink))) {
+  :host(${minkState}) {
     color: ${colorPaletteMinkForeground2};
     background-color: ${colorPaletteMinkBackground2};
   }
 
-  :host(:is([state--platinum], :state(platinum))) {
+  :host(${platinumState}) {
     color: ${colorPalettePlatinumForeground2};
     background-color: ${colorPalettePlatinumBackground2};
   }
 
-  :host(:is([state--anchor], :state(anchor))) {
+  :host(${anchorState}) {
     color: ${colorPaletteAnchorForeground2};
     background-color: ${colorPaletteAnchorBackground2};
   }

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { checkedState, circularState, largeState } from '../styles/states/index.js';
+import { checkedState, circularState, indeterminateState, largeState } from '../styles/states/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
@@ -25,12 +25,6 @@ import {
 import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
 
-/**
- * Selector for the `indeterminate` state.
- * @public
- */
-const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
-
 /** Checkbox styles
  *
  * @public

packages/web-components/src/counter-badge/counter-badge.styles.ts

@@ -1,13 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
-import { extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
-
-/**
- * Selector for the `dot` state.
- * @public
- */
-const dotState = css.partial`:is([state--dot], :state(dot))`;
+import { dotState, extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
 
 /** Badge styles
  * @public

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

@@ -1,5 +1,20 @@
 import { css } from '@microsoft/fast-element';
-import { disabledState } from '../styles/states/index.js';
+import {
+  badInputState,
+  customErrorState,
+  disabledState,
+  focusVisibleState,
+  hasMessageState,
+  patternMismatchState,
+  rangeOverflowState,
+  rangeUnderflowState,
+  stepMismatchState,
+  tooLongState,
+  tooShortState,
+  typeMismatchState,
+  validState,
+  valueMissingState,
+} from '../styles/states/index.js';
 import {
   borderRadiusMedium,
   colorNeutralForeground1,
@@ -23,84 +38,6 @@ import {
 import { display } from '../utils/display.js';
 import { ValidationFlags } from './field.options.js';
 
-/**
- * Selector for the `focus-visible` state.
- * @public
- */
-const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
-
-/**
- * Selector for the `bad-input` state.
- * @public
- */
-const badInputState = css.partial`:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;
-
-/**
- * Selector for the `custom-error` state.
- * @public
- */
-const customErrorState = css.partial`:is([state--${ValidationFlags.customError}], :state(${ValidationFlags.customError}))`;
-
-/**
- * Selector for the `pattern-mismatch` state.
- * @public
- */
-const patternMismatchState = css.partial`:is([state--${ValidationFlags.patternMismatch}], :state(${ValidationFlags.patternMismatch}))`;
-
-/**
- * Selector for the `range-overflow` state.
- * @public
- */
-const rangeOverflowState = css.partial`:is([state--${ValidationFlags.rangeOverflow}], :state(${ValidationFlags.rangeOverflow}))`;
-
-/**
- * Selector for the `range-underflow` state.
- * @public
- */
-const rangeUnderflowState = css.partial`:is([state--${ValidationFlags.rangeUnderflow}], :state(${ValidationFlags.rangeUnderflow}))`;
-
-/**
- * Selector for the `step-mismatch` state.
- * @public
- */
-const stepMismatchState = css.partial`:is([state--${ValidationFlags.stepMismatch}], :state(${ValidationFlags.stepMismatch}))`;
-
-/**
- * Selector for the `too-long` state.
- * @public
- */
-const tooLongState = css.partial`:is([state--${ValidationFlags.tooLong}], :state(${ValidationFlags.tooLong}))`;
-
-/**
- * Selector for the `too-short` state.
- * @public
- */
-const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :state(${ValidationFlags.tooShort}))`;
-
-/**
- * Selector for the `type-mismatch` state.
- * @public
- */
-const typeMismatchState = css.partial`:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
-
-/**
- * Selector for the `valid` state.
- * @public
- */
-const validState = css.partial`:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
-
-/**
- * Selector for the `value-missing` state.
- * @public
- */
-const valueMissingState = css.partial`:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
-
-/**
- * Selector for the `has-message` state.
- * @public
- */
-const hasMessageState = css.partial`:is([state--has-message], :state(has-message))`;
-
 /**
  * The styles for the {@link Field} component.
  *