Style toggle button (#72)

* Style toggle button

* Add new snapshots

Author: fcollonval

packages/components/.storybook/main.js

@@ -3,6 +3,7 @@ import remarkGfm from 'remark-gfm';
 module.exports = {
   stories: [
     '../docs/**/*.mdx',
+    '../src/**/*.mdx',
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.ts'
   ],

packages/components/src/button/Documentation.mdx

@@ -0,0 +1,73 @@
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas>
+    <Story of={ButtonStories.Neutral} />
+</Canvas>
+
+### Error
+
+<Canvas>
+    <Story of={ButtonStories.Error} />
+</Canvas>
+
+### Accent
+
+<Canvas>
+    <Story of={ButtonStories.Accent} />
+</Canvas>
+
+### Lightweight
+
+<Canvas>
+    <Story of={ButtonStories.Lightweight} />
+</Canvas>
+
+### With autofocus
+
+<Canvas>
+    <Story of={ButtonStories.WithAutofocus} />
+</Canvas>
+
+### With disabled
+
+<Canvas>
+    <Story of={ButtonStories.WithDisabled} />
+</Canvas>
+
+### With start icon
+
+<Canvas>
+    <Story of={ButtonStories.WithStartIcon} />
+</Canvas>
+
+### Icon only
+
+<Canvas>
+    <Story of={ButtonStories.IconOnly} />
+</Canvas>
+
+### Toggle button
+
+To define a toggle button, you must set the `aria-pressed` attribute
+to `false` or `true` depending on the state of the button.
+
+> Reference used: https://joshcollinsworth.com/blog/accessible-toggle-buttons
+
+<Canvas>
+    <Story of={ButtonStories.Toggle} />
+</Canvas>

packages/components/src/button/button.stories.ts

@@ -28,6 +28,10 @@ export default {
       table: {
         disable: true
       }
+    },
+    ariaPressed: {
+      control: 'select',
+      options: ['none', 'true', 'false']
     }
   }
 } as Meta;
@@ -46,6 +50,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
       ${args.isDisabled ? 'disabled' : ''} 
       ${args.isAutoFocused ? 'autofocus' : ''}
       ${args.isMinimal ? 'minimal' : ''}
+      ${args.ariaPressed !== 'none' ? `aria-pressed=${args.ariaPressed}` : ''}
     >${args.startIcon ? getFaIcon('plus', args.label ? 'start' : null) : ''}${
       args.label ?? ''
     }</jp-button
@@ -58,56 +63,64 @@ const Template: StoryFn = (args, context): HTMLElement => {
   return container.firstChild as HTMLElement;
 };
 
-export const Default: StoryObj = { render: Template.bind({}) };
-Default.args = {
+export const Accent: StoryObj = { render: Template.bind({}) };
+Accent.args = {
   label: 'Button Text',
   appearance: 'Accent',
   isDisabled: false,
   isAutoFocused: false,
   isMinimal: false,
   startIcon: false,
+  ariaPressed: 'none',
   onClick: action('button-clicked')
 };
 
 export const Error: StoryObj = { render: Template.bind({}) };
 Error.args = {
-  ...Default.args,
+  ...Accent.args,
   appearance: 'Error'
 };
 
 export const Neutral: StoryObj = { render: Template.bind({}) };
 Neutral.args = {
-  ...Default.args,
+  ...Accent.args,
   appearance: 'Neutral'
 };
 
 export const Lightweight: StoryObj = { render: Template.bind({}) };
 Lightweight.args = {
-  ...Default.args,
+  ...Accent.args,
   appearance: 'Lightweight'
 };
 
 export const WithAutofocus: StoryObj = { render: Template.bind({}) };
 WithAutofocus.args = {
-  ...Default.args,
+  ...Accent.args,
   isAutoFocused: true
 };
 
 export const WithDisabled: StoryObj = { render: Template.bind({}) };
 WithDisabled.args = {
-  ...Default.args,
+  ...Accent.args,
   isDisabled: true
 };
 
 export const WithStartIcon: StoryObj = { render: Template.bind({}) };
 WithStartIcon.args = {
-  ...Default.args,
+  ...Accent.args,
   startIcon: true
 };
 
 export const IconOnly: StoryObj = { render: Template.bind({}) };
 IconOnly.args = {
-  ...Default.args,
+  ...Accent.args,
   label: null,
   startIcon: true
 };
+
+export const Toggle: StoryObj = { render: Template.bind({}) };
+Toggle.storyName = 'Toggle button';
+Toggle.args = {
+  ...Accent.args,
+  ariaPressed: 'true'
+};

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

@@ -2,6 +2,7 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
+import { neutralFillStrongActive } from '@microsoft/fast-components';
 import { css, ElementStyles } from '@microsoft/fast-element';
 import {
   ButtonOptions,
@@ -30,6 +31,7 @@ import {
   errorFillFocus,
   errorFillHover,
   errorFillRest,
+  errorForegroundActive,
   focusStrokeWidth,
   foregroundOnAccentActive,
   foregroundOnAccentHover,
@@ -113,6 +115,11 @@ const BaseButtonStyles = css`
     background-color: ${neutralFillActive};
   }
 
+  :host([aria-pressed='true']) {
+    box-shadow: inset 0px 0px 5px 5px ${neutralFillStrongActive};
+    scale: 0.95;
+  }
+
   :host([minimal]) {
     --density: -4;
   }
@@ -216,6 +223,10 @@ const AccentButtonStyles = css`
     color: ${foregroundOnAccentHover};
   }
 
+  :host([appearance='accent'][aria-pressed='true']) {
+    box-shadow: inset 0px 0px 5px 5px ${accentForegroundActive};
+  }
+
   :host([appearance='accent']:active) .control:active {
     background: ${accentFillActive};
     color: ${foregroundOnAccentActive};
@@ -276,6 +287,10 @@ const ErrorButtonStyles = css`
     color: ${foregroundOnAccentHover};
   }
 
+  :host([appearance='error'][aria-pressed='true']) {
+    box-shadow: inset 0px 0px 5px 5px ${errorForegroundActive};
+  }
+
   :host([appearance='error']:active) .control:active {
     background: ${errorFillActive};
     color: ${foregroundOnAccentActive};

packages/components/src/button/button.test.ts

@@ -3,8 +3,8 @@
 
 import { test, expect } from '@playwright/test';
 
-test('Default', async ({ page }) => {
-  await page.goto('/iframe.html?id=components-button--default');
+test('Accent', async ({ page }) => {
+  await page.goto('/iframe.html?id=components-button--accent');
 
   expect(await page.locator('jp-button').screenshot()).toMatchSnapshot(
     'button-default.png'
@@ -66,3 +66,11 @@ test('Icon Only', async ({ page }) => {
     'button-icon-only.png'
   );
 });
+
+test('Toggled', async ({ page }) => {
+  await page.goto('/iframe.html?id=components-button--toggle');
+
+  expect(await page.locator('jp-button').screenshot()).toMatchSnapshot(
+    'button-toggle.png'
+  );
+});