fix(fluent-button): fix typo in compound disabled selector, add tests (…

…#31302)

Co-authored-by: Chris Holt <13071055+chrisdholt@users.noreply.github.com>

change/@fluentui-web-components-f04748f8-f9ea-46fa-a74b-b301279eb3c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix compound disabled selector in fluent-button and fluent-anchor-button",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/anchor-button/anchor-button.spec.ts

@@ -103,4 +103,22 @@ test.describe('Anchor Button - Boolean Attributes', () => {
       await expect(element).toHaveJSProperty(attribute, value);
     });
   }
+
+  test(`should have transparent border when the \`disabled\` or \`disabled-focus\` attribute is present`, async ({
+    page,
+  }) => {
+    await element.evaluate((node: any) => {
+      node.setAttribute('appearance', 'primary');
+      node.setAttribute('disabled', true);
+    });
+
+    await expect(element).toHaveCSS('border-color', 'rgb(0, 0, 0)');
+
+    await element.evaluate((node: any) => {
+      node.setAttribute('disabled', false); // Reset
+      node.setAttribute('disabled-focusable', true);
+    });
+
+    await expect(element).toHaveCSS('border-color', 'rgb(0, 0, 0)');
+  });
 });

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

@@ -216,9 +216,9 @@ export const styles = css`
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) .control {
     border-color: transparent;
   }
 
@@ -234,9 +234,9 @@ export const styles = css`
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) .control {
     background-color: ${colorTransparentBackground};
   }
 
@@ -258,9 +258,9 @@ export const styles = css`
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) .control {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
@@ -294,9 +294,10 @@ export const styles = css`
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active)
+    .control {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }

packages/web-components/src/button/button.spec.ts

@@ -104,6 +104,16 @@ test.describe('Button', () => {
     await expect(element).not.toBeFocused();
   });
 
+  test('should have transparent border when the `disabled` attribute is present', async ({ page }) => {
+    const element = page.locator('fluent-button');
+
+    await page.setContent(/* html */ `
+      <fluent-button appearance='primary' disabled>Button</fluent-button>
+    `);
+
+    await expect(element).toHaveCSS('border-color', 'rgb(0, 0, 0)');
+  });
+
   test('should be focusable when the `disabled-focusable` attribute is present', async ({ page }) => {
     const element = page.locator('fluent-button');
 
@@ -116,6 +126,16 @@ test.describe('Button', () => {
     await expect(element).toBeFocused();
   });
 
+  test('should have transparent border when the `disabled-focusable` attribute is present', async ({ page }) => {
+    const element = page.locator('fluent-button');
+
+    await page.setContent(/* html */ `
+      <fluent-button appearance='primary' disabled-focusable>Button</fluent-button>
+    `);
+
+    await expect(element).toHaveCSS('border-color', 'rgb(0, 0, 0)');
+  });
+
   test('should NOT be clickable when the `disabled` attribute is present', async ({ page }) => {
     const element = page.locator('fluent-button');
 

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

@@ -213,9 +213,9 @@ export const styles = css`
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])),
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover),
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) {
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) {
     border-color: transparent;
   }
 
@@ -231,9 +231,9 @@ export const styles = css`
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])),
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover),
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) {
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) {
     background-color: ${colorTransparentBackground};
   }
 
@@ -255,9 +255,9 @@ export const styles = css`
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])),
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover),
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) {
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
@@ -291,9 +291,9 @@ export const styles = css`
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])),
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover),
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) {
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active) {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }