Toggle button API docs

ni · May 16, 2024 · fcca58e · fcca58e
1 parent 108d201
commit fcca58e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/packages/storybook/src/nimble/toggle-button/toggle-button.mdx b/packages/storybook/src/nimble/toggle-button/toggle-button.mdx
@@ -9,9 +9,7 @@ import * as toggleButtonStories from './toggle-button.stories';
 
 Per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/) - A toggle button is a two-state button
 that can be either off (not pressed) or on (pressed). For example, a button labeled mute in an audio player could
-indicate that sound is muted by setting the pressed state true. Important: it is critical the label on a toggle does
-not change when its state changes. In this example, when the pressed state is true, the label remains "Mute" so a
-screen reader would say something like "Mute toggle button pressed".
+indicate that sound is muted by setting the pressed state true.
 
 <Canvas of={toggleButtonStories.outlineButton} />
 

diff --git a/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts b/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts
@@ -10,9 +10,10 @@ import {
     appearanceVariantDescription,
     contentHiddenDescription,
     endIconDescription,
-    iconDescription
+    iconDescription,
+    textContentDescription
 } from '../patterns/button/doc-strings';
-import { createUserSelectedThemeStory } from '../../utilities/storybook';
+import { apiCategory, createUserSelectedThemeStory, disabledDescription } from '../../utilities/storybook';
 
 interface ToggleButtonArgs {
     label: string;
@@ -23,8 +24,13 @@ interface ToggleButtonArgs {
     icon: boolean;
     contentHidden: boolean;
     endIcon: boolean;
+    change: () => void;
 }
 
+const contentDescription = textContentDescription({ componentName: 'toggle button' });
+
+const defaultSlotDescription = `${contentDescription} The content should remain the same whether the toggle button is pressed or not.`;
+
 const metadata: Meta<ToggleButtonArgs> = {
     title: 'Components/Toggle Button',
     decorators: [withActions<HtmlRenderer>],
@@ -35,24 +41,49 @@ const metadata: Meta<ToggleButtonArgs> = {
     },
     argTypes: {
         appearance: {
-            options: Object.values(ButtonAppearance),
+            options: Object.keys(ButtonAppearance),
             control: { type: 'radio' },
-            description: appearanceDescription
+            description: appearanceDescription,
+            table: { category: apiCategory.attributes }
         },
         appearanceVariant: {
             name: 'appearance-variant',
             options: Object.keys(ButtonAppearanceVariant),
             control: { type: 'radio' },
-            description: appearanceVariantDescription
+            description: appearanceVariantDescription,
+            table: { category: apiCategory.attributes }
         },
         contentHidden: {
-            description: contentHiddenDescription
+            name: 'content-hidden',
+            description: contentHiddenDescription,
+            table: { category: apiCategory.attributes }
+        },
+        disabled: {
+            description: disabledDescription({ componentName: 'toggle button' }),
+            table: { category: apiCategory.attributes }
+        },
+        checked: {
+            description: 'Whether the toggle button is pressed (on) or not pressed (off).',
+            table: { category: apiCategory.attributes }
+        },
+        label: {
+            name: 'default',
+            description: defaultSlotDescription,
+            table: { category: apiCategory.slots }
         },
         icon: {
-            description: iconDescription
+            name: 'start',
+            description: iconDescription,
+            table: { category: apiCategory.slots }
         },
         endIcon: {
-            description: endIconDescription
+            name: 'end',
+            description: endIconDescription,
+            table: { category: apiCategory.slots }
+        },
+        change: {
+            description: 'Fires when the toggle button is pressed via mouse or keyboard.',
+            table: { category: apiCategory.events }
         }
     },
     // prettier-ignore