Update docs

trimble-oss · Jul 4, 2024 · e0e5239 · e0e5239
1 parent c44e35c
commit e0e5239
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/...ook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx b/...ook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx
@@ -42,14 +42,14 @@ For Icon only Buttons,
 ## Single Selection
 
 <modus-button-group selection-type="single">
-  <modus-button>Button 1</modus-button>
+  <modus-button selected>Button 1</modus-button>
   <modus-button>Button 2</modus-button>
   <modus-button>Button 3</modus-button>
 </modus-button-group>
 
 ```html
 <modus-button-group selection-type="single">
-  <modus-button>Button 1</modus-button>
+  <modus-button selected>Button 1</modus-button>
   <modus-button>Button 2</modus-button>
   <modus-button>Button 3</modus-button>
 </modus-button-group>
@@ -93,6 +93,7 @@ interface ModusButtonGroupButtonClickEvent {
 | `buttonStyle`   | `button-style`   | (optional) The style of the buttons in group                     | `"borderless" , "fill" , "outline"`              | `'outline'` |
 | `color`         | `color`          | (optional) The color of the buttons in group                     | `"danger" ,"primary" , "secondary" , "tertiary"` | `'primary'` |
 | `disabled`      | `disabled`       | (optional) If `true`, the button group is disabled               | `boolean`                                        | `false`     |
+| `selected`      | `selected`       | (optional) The default selected button in the group              | `HTMLModusButtonElement`                         | `undefined` |
 | `selectionType` | `selection-type` | (optional) The selection type (`none`, `single`, `multiple`)     | `ButtonGroupSelectionType`                       | `none`      |
 | `size`          | `size`           | (optional) The size of the buttons. (`small`, `medium`, `large`) | `ButtonSize`                                     | `medium`    |
 

diff --git a/...-workspace/storybook/stories/components/modus-button-group/modus-button-group.stories.tsx b/...-workspace/storybook/stories/components/modus-button-group/modus-button-group.stories.tsx
@@ -2,10 +2,9 @@ import { html } from 'lit-html';
 // @ts-ignore: JSX/MDX with Stencil
 import docs from './modus-button-group-storybook-docs.mdx';
 
-
 export default {
   title: 'Components/Button Group',
-  argTypes:{
+  argTypes: {
     ariaDisabled: {
       name: 'aria-disabled',
       description: "The button group's aria-disabled state",
@@ -73,12 +72,12 @@ export default {
         defaultValue: { summary: `'medium'` },
         type: { summary: `'small' | 'medium' | 'large'` },
       },
-    }
+    },
   },
 
   parameters: {
     controls: { expanded: true, sort: 'alpha' },
-    actions:{
+    actions: {
       handles: ['buttonGroupClick', 'buttonSelectionChange'],
     },
     docs: {
@@ -90,12 +89,31 @@ export default {
   },
 };
 const Template = ({ ariaLabel, buttonStyle, color, disabled, selectionType, size }) => html`
-  <modus-button-group aria-label=${ariaLabel} button-style=${buttonStyle} color=${color} .disabled=${disabled} selection-type=${selectionType} size=${size}>
+  <modus-button-group
+    aria-label=${ariaLabel}
+    button-style=${buttonStyle}
+    color=${color}
+    .disabled=${disabled}
+    selection-type=${selectionType}
+    size=${size}>
     <modus-button>Button 1</modus-button>
     <modus-button>Button 2</modus-button>
     <modus-button>Button 3</modus-button>
   </modus-button-group>
 `;
+const SingleSelectionTemplate = ({ ariaLabel, buttonStyle, color, disabled, selectionType, size }) => html`
+  <modus-button-group
+    aria-label=${ariaLabel}
+    button-style=${buttonStyle}
+    color=${color}
+    .disabled=${disabled}
+    selection-type=${selectionType}
+    size=${size}>
+    <modus-button selected>Button 1</modus-button>
+    <modus-button>Button 2</modus-button>
+    <modus-button>Button 3</modus-button>
+  </modus-button-group>
+`;
 const DefaultArgs = {
   ariaDisabled: '',
   ariaLabel: '',
@@ -108,10 +126,8 @@ const DefaultArgs = {
 export const Default = Template.bind({});
 Default.args = { ...DefaultArgs };
 
-export const SingleSelection = Template.bind({});
+export const SingleSelection = SingleSelectionTemplate.bind({});
 SingleSelection.args = { ...DefaultArgs, selectionType: 'single' };
 
 export const MultipleSelection = Template.bind({});
 MultipleSelection.args = { ...DefaultArgs, selectionType: 'multiple' };
-
-