feat: attribute selectors instead of class selectors (microsoft#4078)

* tree-item

- [ x ] Expanded
- [ x ] Selected

* tooltip

* text-field

- [ x ]  appearance
- [ x ]  disabled
- [ x ]  readonly

* text-area

- [ x ] appearance
- [ x ] resize

* tabs

* switch

- disabled
- checked

* slider

- orientation

* skeleton

* radio-group

- checked
- disabled
- readonly
- orientation

* progress-ring

- pauzed

* progress

- pauzed

* menu

- disabled

* flipper

* checkbox

- checked
- disabled
- readonly

* button

- appearance
- disabled

* badge

- circular

* accordion

* anchor / button

- appearance
- disabled

* switch - readonly

forgot a readonly here.

* checkbox - aria-checked instead of checked

Switching over to aria-checked='"true" instead of checked

* switch- aria-checked instead of checked

Switching over to aria-checked='"true" instead of checked
(no pun intended)

* [FIX] menuitem - checked

I think this was a bug, since the menu item was never highlighted when checked. Should be use aria-checked="true" like with the switch and checkbox or checked?

* [Fix] Tabs

Tabs are working correctly but the underlying `Tab` still uses the class `vertical` or `horizontal` which should not be a problem, since clients cannot access this setting and is determined in the `Tabs` component.
Maybe as follow-up:
- Use direction="vertical" or direction="horizontal" in the Foundation package so it's uniform.

* [FIX] Flipper

As mentioned by @chrisdholt these classes are fine since they belong to the shadow DOM.

Co-authored-by: Chris Holt <chhol@microsoft.com>

packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts

@@ -78,7 +78,7 @@ export const AccordionItemStyles = css`
             ${neutralFocusBehavior.var};
     }
 
-    :host(.expanded) .region {
+    :host([expanded]) .region {
         display: flex;
     }
 
@@ -95,15 +95,15 @@ export const AccordionItemStyles = css`
         display: flex;
     }
 
-    :host(.expanded) slot[name="collapsed-icon"] {
+    :host([expanded]) slot[name="collapsed-icon"] {
         display: none;
     }
 
     slot[name="expanded-icon"] {
         display: none;
     }
     
-    :host(.expanded) slot[name="expanded-icon"] {
+    :host([expanded]) slot[name="expanded-icon"] {
         display: flex;
     }
 

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

@@ -21,7 +21,7 @@ export const BadgeStyles = css`
         font-weight: 400;
     }
 
-    :host(.circular) .control {
+    :host([circular]) .control {
         border-radius: 100px;
         padding: 0 calc(var(--design-unit) * 1px);
         ${

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

@@ -22,72 +22,72 @@ export const ButtonStyles = css`
 `.withBehaviors(
     forcedColorsStylesheetBehavior(
         css`
-            :host(.disabled),
-            :host(.disabled) .control {
+            :host([disabled]),
+            :host([disabled]) .control {
                 forced-color-adjust: none;
                 background: ${SystemColors.ButtonFace};
                 border-color: ${SystemColors.GrayText};
                 color: ${SystemColors.GrayText};
                 cursor: ${disabledCursor};
                 opacity: 1;
             }
-            :host(.accent) .control {
+            :host([appearance="accent"]) .control {
                 forced-color-adjust: none;
                 background: ${SystemColors.Highlight};
                 color: ${SystemColors.HighlightText};
             }
     
-            :host(.accent) .control:hover {
+            :host([appearance="accent"]) .control:hover {
                 background: ${SystemColors.HighlightText};
                 border-color: ${SystemColors.Highlight};
                 color: ${SystemColors.Highlight};
             }
     
-            :host(.accent:${focusVisible}) .control {
+            :host([appearance="accent"]:${focusVisible}) .control {
                 border-color: ${SystemColors.ButtonText};
                 box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
             }
     
-            :host(.accent.disabled) .control,
-            :host(.accent.disabled) .control:hover {
+            :host([appearance="accent"][disabled]) .control,
+            :host([appearance="accent"][disabled]) .control:hover {
                 background: ${SystemColors.ButtonFace};
                 border-color: ${SystemColors.GrayText};
                 color: ${SystemColors.GrayText};
             }
-            :host(.lightweight) .control:hover {
+            :host([appearance="lightweight"]) .control:hover {
                 forced-color-adjust: none;
                 color: ${SystemColors.Highlight};
             }
     
-            :host(.lightweight) .control:hover .content::before {
+            :host([appearance="lightweight"]) .control:hover .content::before {
                 background: ${SystemColors.Highlight};
             }
     
-            :host(.lightweight.disabled) .control {
+            :host([appearance="lightweight"][disabled]) .control {
                 forced-color-adjust: none;
                 color: ${SystemColors.GrayText};
             }
         
-            :host(.lightweight.disabled) .control:hover .content::before {
+            :host([appearance="lightweight"][disabled]) .control:hover .content::before {
                 background: none;
             }
-            :host(.outline.disabled) .control {
+            :host([appearance="outline"][disabled]) .control {
                 border-color: ${SystemColors.GrayText};
             }
-            :host(.stealth) .control {
+            :host([appearance="stealth"]) .control {
                 forced-color-adjust: none;
                 background: none;
                 border-color: transparent;
                 color: ${SystemColors.ButtonText};
                 fill: currentcolor;
             }
-            :host(.stealth) .control:hover,
-            :host(.stealth:${focusVisible}) .control {
+            :host([appearance="stealth"]) .control:hover,
+            :host([appearance="stealth"]:${focusVisible}) .control {
                 background: ${SystemColors.Highlight};
                 border-color: ${SystemColors.Highlight};
                 color: ${SystemColors.HighlightText};
             }
-            :host(.stealth.disabled) .control {
+            :host([appearance="stealth"][disabled]) .control {
                 background: none;
                 border-color: transparent;
                 color: ${SystemColors.GrayText};

packages/web-components/fast-components/src/button/index.ts

@@ -42,15 +42,6 @@ export class FASTButton extends Button {
      */
     @attr
     public appearance: ButtonAppearance;
-    public appearanceChanged(
-        oldValue: ButtonAppearance,
-        newValue: ButtonAppearance
-    ): void {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
 
     public connectedCallback() {
         super.connectedCallback();

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

@@ -103,42 +103,42 @@ export const CheckboxStyles = css`
         border-color: ${neutralFocusBehavior.var};
     }
 
-    :host(.checked) .control {
+    :host([aria-checked="true"]) .control {
         background: ${accentFillRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
     }
 
-    :host(.checked:not([disabled])) .control:hover {
+    :host([aria-checked="true"]:not([disabled])) .control:hover {
         background: ${accentFillHoverBehavior.var};
         border: calc(var(--outline-width) * 1px) solid ${accentFillHoverBehavior.var};
     }
 
-    :host(.checked:not([disabled])) .control:active {
+    :host([aria-checked="true"]:not([disabled])) .control:active {
         background: ${accentFillActiveBehavior.var};
         border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};
     }
 
-    :host(.checked:${focusVisible}:not([disabled])) .control {
+    :host([aria-checked="true"]:${focusVisible}:not([disabled])) .control {
         box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
             neutralFocusBehavior.var
         };
         border-color: transparent;
     }
 
 
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .control,
-    :host(.disabled) .control {
+    :host([disabled]) .label,
+    :host([readonly]) .label,
+    :host([readonly]) .control,
+    :host([disabled]) .control {
         cursor: ${disabledCursor};
     }
 
-    :host(.checked:not(.indeterminate)) .checked-indicator,
+    :host([aria-checked="true"]:not(.indeterminate)) .checked-indicator,
     :host(.indeterminate) .indeterminate-indicator {
         opacity: 1;
     }
 
-    :host(.disabled) {
+    :host([disabled]) {
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
@@ -176,44 +176,44 @@ export const CheckboxStyles = css`
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
             }
-            :host(.checked:${focusVisible}:not([disabled])) .control {
+            :host([aria-checked="true"]:${focusVisible}:not([disabled])) .control {
                 box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
             }
-            :host(.checked) .control {
+            :host([aria-checked="true"]) .control {
                 background: ${SystemColors.Highlight};
                 border-color: ${SystemColors.Highlight};
             }
-            :host(.checked:not([disabled])) .control:hover, .control:active {
+            :host([aria-checked="true"]:not([disabled])) .control:hover, .control:active {
                 border-color: ${SystemColors.Highlight};
                 background: ${SystemColors.HighlightText};
             }
-            :host(.checked) .checked-indicator {
+            :host([aria-checked="true"]) .checked-indicator {
                 fill: ${SystemColors.HighlightText};
             }
-            :host(.checked:not([disabled])) .control:hover .checked-indicator {
+            :host([aria-checked="true"]:not([disabled])) .control:hover .checked-indicator {
                 fill: ${SystemColors.Highlight}
             }
-            :host(.checked) .indeterminate-indicator {
+            :host([aria-checked="true"]) .indeterminate-indicator {
                 background: ${SystemColors.HighlightText};
             }
-            :host(.checked) .control:hover .indeterminate-indicator {
+            :host([aria-checked="true"]) .control:hover .indeterminate-indicator {
                 background: ${SystemColors.Highlight}
             }
-            :host(.disabled) {
+            :host([disabled]) {
                 opacity: 1;
             }
-            :host(.disabled) .control {
+            :host([disabled]) .control {
                 forced-color-adjust: none;
                 border-color: ${SystemColors.GrayText};
                 background: ${SystemColors.Field};
             }
-            :host(.disabled) .indeterminate-indicator,
-            :host(.checked.disabled) .control:hover .indeterminate-indicator {
+            :host([disabled]) .indeterminate-indicator,
+            :host([aria-checked="true"][disabled]) .control:hover .indeterminate-indicator {
                 forced-color-adjust: none;
                 background: ${SystemColors.GrayText};
             }
-            :host(.disabled) .checked-indicator,
-            :host(.checked.disabled) .control:hover .checked-indicator {
+            :host([disabled]) .checked-indicator,
+            :host([aria-checked="true"][disabled]) .control:hover .checked-indicator {
                 forced-color-adjust: none;
                 fill: ${SystemColors.GrayText};
             }

packages/web-components/fast-components/src/flipper/flipper.styles.ts

@@ -58,16 +58,16 @@ export const FlipperStyles = css`
         height: 16px;
     }
 
-    :host(.disabled) {
+    :host([disabled]) {
         opacity: var(--disabled-opacity);
         cursor: ${disabledCursor};
         fill: currentcolor;
         color: ${neutralForegroundRestBehavior.var};
     }
 
-    :host(.disabled)::before,
-    :host(.disabled:hover)::before,
-    :host(.disabled:active)::before {
+    :host([disabled])::before,
+    :host([disabled]:hover)::before,
+    :host([disabled]:active)::before {
         background: ${neutralFillStealthRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
     }
@@ -111,8 +111,8 @@ export const FlipperStyles = css`
             :host {
                 background: ${SystemColors.Canvas};
             }
-            :host .next,
-            :host .previous {
+            :host [direction="next"],
+            :host [direction="previous"] {
                 color: ${SystemColors.ButtonText};
                 fill: currentcolor;
             }
@@ -126,21 +126,21 @@ export const FlipperStyles = css`
                 border-color: ${SystemColors.ButtonText};
                 opacity: 1;
             }
-            :host(:hover) .next,
-            :host(:hover) .previous {
+            :host(:hover) [direction="next"],
+            :host(:hover) [direction="previous"] {
                 forced-color-adjust: none;
                 color: ${SystemColors.HighlightText};
                 fill: currentcolor;
             }
-            :host(.disabled) {
+            :host([disabled]) {
                 opacity: 1;
             }
-            :host(.disabled)::before,
-            :host(.disabled:hover)::before,
-            :host(.disabled) .next,
-            :host(.disabled) .previous,
-            :host(.disabled:hover) .next,
-            :host(.disabled:hover) .previous {
+            :host([disabled])::before,
+            :host([disabled]:hover)::before,
+            :host([disabled]) [direction="next"],
+            :host([disabled]) [direction="previous"],
+            :host([disabled]:hover) [direction="next"],
+            :host([disabled]:hover) [direction="previous"] {
                 forced-color-adjust: none;
                 background: ${SystemColors.Canvas};
                 border-color: ${SystemColors.GrayText};

packages/web-components/fast-components/src/menu-item/menu-item.styles.ts

@@ -52,26 +52,30 @@ export const MenuItemStyles = css`
         background: ${accentFillHoverBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
+    :host([checked="true"]) {
+        background: ${accentFillHoverBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
+    }
 
     :host(:active) {
         background: ${accentFillActiveBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
 
-    :host(.disabled) {
+    :host([disabled]) {
         cursor: ${disabledCursor};
         opacity: var(--disabled-opacity);
     }
 
-    :host(.disabled:hover) {
+    :host([disabled]:hover) {
         color: ${neutralForegroundRestBehavior.var};
         fill: currentcolor;
         background: ${neutralFillStealthRestBehavior.var}
     }
 
-    :host(.disabled:hover) .start,
-    :host(.disabled:hover) .end,
-    :host(.disabled:hover)::slotted(svg) {
+    :host([disabled]:hover) .start,
+    :host([disabled]:hover) .end,
+    :host([disabled]:hover)::slotted(svg) {
         fill: ${neutralForegroundRestBehavior.var};
     }
 
@@ -133,11 +137,11 @@ export const MenuItemStyles = css`
                 color: ${SystemColors.HighlightText};
                 fill: currentcolor;
             }
-            :host(.disabled),
-            :host(.disabled:hover),
-            :host(.disabled:hover) .start,
-            :host(.disabled:hover) .end,
-            :host(.disabled:hover)::slotted(svg) {
+            :host([disabled]),
+            :host([disabled]:hover),
+            :host([disabled]:hover) .start,
+            :host([disabled]:hover) .end,
+            :host([disabled]:hover)::slotted(svg) {
                 background: ${SystemColors.Canvas};
                 color: ${SystemColors.GrayText};
                 fill: currentcolor;

packages/web-components/fast-components/src/progress-ring/progress-ring.styles.ts

@@ -49,12 +49,12 @@ export const ProgressRingStyles = css`
         animation: spin-infinite 2s linear infinite;
     }
 
-    :host(.paused) .indeterminate-indicator-1 {
+    :host([paused]) .indeterminate-indicator-1 {
         animation-play-state: paused;
         stroke: ${neutralFillRestBehavior.var};
     }
 
-    :host(.paused) .determinate {
+    :host([paused]) .determinate {
         stroke: ${neutralForegroundHintBehavior.var};
     }
 
@@ -85,10 +85,10 @@ export const ProgressRingStyles = css`
             .background {
                 stroke: ${SystemColors.Field};
             }
-            :host(.paused) .indeterminate-indicator-1 {
+            :host([paused]) .indeterminate-indicator-1 {
                 stroke: ${SystemColors.Field};
             }
-            :host(.paused) .determinate {
+            :host([paused]) .determinate {
                 stroke: ${SystemColors.GrayText};
             }
         `