docs(sbb-action-group): add button-size small

src/components/action-group/action-group.spec.ts

@@ -59,7 +59,7 @@ describe(`sbb-action-group`, () => {
       expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok;
     });
 
-    it('should sync button-size property with sbb-button', async () => {
+    it('should sync button-size="m" property with sbb-button', async () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" button-size="m">
           <sbb-secondary-button>Button</sbb-secondary-button>
@@ -74,6 +74,21 @@ describe(`sbb-action-group`, () => {
       expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok;
     });
 
+    it('should sync button-size="s" property with sbb-button', async () => {
+      const root = (await fixture(html`
+        <sbb-action-group align-group="start" orientation="horizontal" button-size="s">
+          <sbb-secondary-button>Button</sbb-secondary-button>
+          <sbb-block-link
+            icon-name="chevron-small-left-small"
+            href="https://github.com/lyne-design-system/lyne-components"
+          >
+            Link
+          </sbb-block-link>
+        </sbb-action-group>
+      `)) as SbbActionGroupElement;
+      expect(assertButtons(root, (b) => b.size === 's')).to.be.ok;
+    });
+
     it('should sync link-size property with sbb-link', async () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" link-size="s">

src/components/action-group/action-group.stories.ts

@@ -95,7 +95,7 @@ const buttonSize: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['l', 'm'],
+  options: ['l', 'm', 's'],
 };
 
 const linkSize: InputType = {
@@ -152,6 +152,16 @@ const basicArgsVerticalFullWidth = {
   'align-group': 'stretch',
 };
 
+const basicArgsSizeS = {
+  ...basicArgs,
+  'button-size': buttonSize.options[2],
+};
+
+const basicArgsVerticalSizeS = {
+  ...basicArgsVertical,
+  'button-size': buttonSize.options[2],
+};
+
 export const HorizontalAllocation3_0_0: StoryObj = {
   render: CommonTemplateThreeElementsAllocation,
   argTypes: basicArgTypes,
@@ -266,6 +276,78 @@ export const VerticalToHorizontal3_0_0: StoryObj = {
   args: { ...basicArgsVertical, 'horizontal-from': 'medium' },
 };
 
+export const HorizontalAllocationSizeS3_0_0: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const HorizontalAllocationSizeS1_1_1: StoryObj = {
+  render: TemplateHorizontalAllocation111,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const HorizontalAllocationSizeS2_0_1: StoryObj = {
+  render: TemplateHorizontalAllocation201,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const HorizontalAllocationSizeS1_0_2: StoryObj = {
+  render: TemplateHorizontalAllocation102,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS, 'align-group': 'end' },
+};
+
+export const HorizontalAllocationSizeS2_0_0: StoryObj = {
+  render: CommonTemplateTwoElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const HorizontalAllocationSizeS1_0_1: StoryObj = {
+  render: TemplateHorizontalAllocation101,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const VerticalAllocationSizeS3_0_0: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'start' },
+};
+
+export const VerticalAllocationSizeS2_0_0: StoryObj = {
+  render: CommonTemplateTwoElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'start' },
+};
+
+export const VerticalAllocationSizeS0_3_0: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'center' },
+};
+
+export const VerticalAllocationSizeS0_2_0: StoryObj = {
+  render: CommonTemplateTwoElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'center' },
+};
+
+export const VerticalAllocationSizeS0_0_3: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'end' },
+};
+
+export const VerticalAllocationSizeS0_0_2: StoryObj = {
+  render: CommonTemplateTwoElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'end' },
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,

src/components/action-group/readme.md

@@ -29,7 +29,7 @@ indicate the minimum breakpoint from which the orientation changes to `horizonta
 ### Button-size and link-size
 
 The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-block-link`.
-Default values are `l` for `sbb-button` and `m` for `sbb-block-link`.
+The accepted values are `s`, `m` and `l` (default) for `sbb-button` and `xs`, `s` and `m` (default) for `sbb-block-link`.
 
 ```html
 <sbb-action-group button-size="m" link-size="s">