feat: support direction="column" styling for button group

nl-design-system · Nov 12, 2023 · dc19ddb · dc19ddb
1 parent 94830f6
commit dc19ddb
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 46 deletions.
diff --git a/.changeset/clever-hairs-visit.md b/.changeset/clever-hairs-visit.md
@@ -0,0 +1,6 @@
+---
+"@utrecht/components": patch
+"@utrecht/component-library-css": patch
+---
+
+inline button link component no longer automatically stretches to match size of button group
diff --git a/.changeset/cold-plums-fetch.md b/.changeset/cold-plums-fetch.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": major
+---
+
+`ButtonGroup` boolean property `vertical` now is `direction="column"`'
diff --git a/.changeset/lazy-rivers-stare.md b/.changeset/lazy-rivers-stare.md
@@ -0,0 +1,6 @@
+---
+"@utrecht/components": major
+"@utrecht/component-library-css": major
+---
+
+rename `utrecht-button-group--vertical` mixin and class name to `utrecht-button-group--column`'
diff --git a/.changeset/popular-mice-accept.md b/.changeset/popular-mice-accept.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/web-component-library-stencil": minor
+---
+
+add `direction` property to `utrecht-button-group`
diff --git a/components/button-group/css/_mixin.scss b/components/button-group/css/_mixin.scss
@@ -4,6 +4,7 @@
  */
 
 @mixin utrecht-button-group {
+  align-items: baseline;
   background-color: var(--utrecht-button-group-background-color);
   display: flex;
   flex-wrap: wrap;
@@ -19,12 +20,12 @@
   --utrecht-space-around: 1;
 }
 
-@mixin utrecht-button-group__link-button--horizontal {
+@mixin utrecht-button-group__link-button--row {
   --utrecht-button-padding-inline-end: 0;
   --utrecht-button-padding-inline-start: 0;
 }
 
-@mixin utrecht-button-group--vertical {
+@mixin utrecht-button-group--column {
   flex-direction: column;
   gap: var(--utrecht-button-group-block-gap, 1em);
 }
diff --git a/components/button-group/css/index.scss b/components/button-group/css/index.scss
@@ -13,12 +13,12 @@
   @include utrecht-button-group--distanced;
 }
 
-.utrecht-button-group__link-button--horizontal,
-.utrecht-button-group--horizontal .utrecht-link-button,
-.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-link-button {
-  @include utrecht-button-group__link-button--horizontal;
+.utrecht-button-group__link-button--row,
+.utrecht-button-group--row .utrecht-link-button,
+.utrecht-button-group:not(.utrecht-button-group--column) .utrecht-link-button {
+  @include utrecht-button-group__link-button--row;
 }
 
-.utrecht-button-group--vertical {
-  @include utrecht-button-group--vertical;
+.utrecht-button-group--column {
+  @include utrecht-button-group--column;
 }
diff --git a/components/button/css/_mixin.scss b/components/button/css/_mixin.scss
@@ -210,6 +210,7 @@
 
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
+  block-size: fit-content;
   border-block-end-color: var(--_utrecht-button-border-bottom-color);
   border-block-end-width: var(--_utrecht-button-border-block-end-width);
   border-color: var(--_utrecht-button-border-color);
@@ -227,6 +228,7 @@
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--utrecht-button-line-height);
+  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
   min-inline-size: var(--utrecht-button-min-inline-size, 44px);
   padding-block-end: var(--utrecht-button-padding-block-end);

diff --git a/packages/component-library-react/src/ButtonGroup.tsx b/packages/component-library-react/src/ButtonGroup.tsx
@@ -10,18 +10,27 @@ const hasManyElements = (children: ReactNode | ReactNode[]) =>
   Array.isArray(children) &&
   children.reduce((count: number, item): number => (isValidElement(item) ? count + 1 : count), 0) >= 2;
 
-export type ButtonGroupProps = HTMLAttributes<HTMLParagraphElement>;
+export interface ButtonGroupProps extends HTMLAttributes<HTMLParagraphElement> {
+  direction?: string | 'column' | 'row';
+}
 
 export const ButtonGroup = forwardRef(
   (
-    { children, className, ...restProps }: PropsWithChildren<ButtonGroupProps>,
+    { children, className, direction, ...restProps }: PropsWithChildren<ButtonGroupProps>,
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => (
     <p
       role={hasManyElements(children) ? 'group' : undefined}
       {...restProps}
       ref={ref}
-      className={clsx('utrecht-button-group', className)}
+      className={clsx(
+        'utrecht-button-group',
+        {
+          'utrecht-button-group--column': direction === 'column',
+          'utrecht-button-group--row': direction === 'row',
+        },
+        className,
+      )}
     >
       {children}
     </p>

diff --git a/packages/storybook-css/src/ButtonGroup.stories.tsx b/packages/storybook-css/src/ButtonGroup.stories.tsx
@@ -3,18 +3,9 @@ import { Button, ButtonGroup } from '@utrecht/component-library-react';
 import readme from '@utrecht/components/button-group/README.md?raw';
 import tokensDefinition from '@utrecht/components/button-group/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import clsx from 'clsx';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { designTokenStory } from './design-token-story';
 
-interface ButtonGroupStoryProps {
-  vertical?: boolean;
-}
-
-const ButtonGroupStory = ({ vertical, ...props }: PropsWithChildren<ButtonGroupStoryProps>) => (
-  <ButtonGroup {...props} className={clsx(vertical && 'utrecht-button-group--vertical')} />
-);
-
 const meta = {
   title: 'CSS Component/Button Group',
   id: 'css-button-group',
@@ -26,15 +17,16 @@ const meta = {
     ],
   },
   argTypes: {
-    vertical: {
-      description: 'Set the vertical modifier',
-      control: 'boolean',
-      table: {
-        category: 'Demo',
+    direction: {
+      description: 'Layout of the button group',
+      control: 'select',
+      options: {
+        '': undefined,
+        column: 'column',
+        row: 'row',
       },
     },
   },
-  render: ButtonGroupStory,
   parameters: {
     tokensPrefix: 'utrecht-button-group',
     status: {
@@ -48,7 +40,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof ButtonGroupStory>;
+} satisfies Meta<typeof ButtonGroup>;
 
 export default meta;
 
@@ -66,16 +58,16 @@ Er moet lege ruimte zijn tussen de buttons, zodat de buttons duidelijk van elkaa
   },
 };
 
-export const DirectionVertical: Story = {
+export const DirectionColumn: Story = {
   args: {
     ...Default.args,
-    vertical: true,
+    direction: 'column',
   },
   parameters: {
     docs: {
       description: {
         story: `
-Styling via the \`.utrecht-button-group\` and \`.utrecht-button-group--vertical\` modifier class names.
+Styling via the \`.utrecht-button-group\` and \`.utrecht-button-group--column\` modifier class names.
 Er moet lege ruimte zijn tussen de rijen, zodat de buttons duidelijk van elkaar te onderscheiden zijn, en het niet één grote button lijkt.`,
       },
     },

diff --git a/packages/storybook-react/src/stories/ButtonGroup.stories.tsx b/packages/storybook-react/src/stories/ButtonGroup.stories.tsx
@@ -10,15 +10,18 @@ const meta = {
   title: 'React Component/Button group',
   id: 'react-button-group',
   component: ButtonGroup,
-  args: {
-    children: (
-      <>
-        <Button appearance="primary-action-button">Save and continue</Button>
-        <Button appearance="secondary-action-button">Back</Button>
-      </>
-    ),
+  args: {},
+  argTypes: {
+    direction: {
+      description: 'Layout of the button group',
+      control: 'select',
+      options: {
+        '': undefined,
+        column: 'column',
+        row: 'row',
+      },
+    },
   },
-  argTypes: {},
   parameters: {
     tokensPrefix: 'utrecht-button-group',
     tokens,
@@ -29,11 +32,26 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof ButtonGroup>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Button appearance="primary-action-button">Save and continue</Button>,
+      <Button appearance="secondary-action-button">Back</Button>,
+    ],
+  },
+};
+
+export const DirectionColumn: Story = {
+  args: {
+    ...Default.args,
+    direction: 'column',
+  },
+};
 
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-web-component/src/ButtonGroup.stories.tsx b/packages/storybook-web-component/src/ButtonGroup.stories.tsx
@@ -4,7 +4,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/button-group/README.md?raw';
 import tokensDefinition from '@utrecht/components/button-group/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import { UtrechtButton, UtrechtButtonGroup } from '@utrecht/web-component-library-react';
+import {
+  UtrechtButton,
+  UtrechtButtonGroup,
+  UtrechtButtonLink,
+  UtrechtLinkButton,
+} from '@utrecht/web-component-library-react';
 import React from 'react';
 import { designTokenStory } from './design-token-story';
 
@@ -16,6 +21,14 @@ const meta = {
     children: {
       description: 'Content of the button group',
     },
+    direction: {
+      description: 'Layout of the button group',
+      options: {
+        '': undefined,
+        column: 'column',
+        row: 'row',
+      },
+    },
   },
   args: {
     children: [],
@@ -43,10 +56,31 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     children: [
-      <UtrechtButton appearance="primary-action-button">Save and continue</UtrechtButton>,
-      <UtrechtButton appearance="secondary-action-button">Back</UtrechtButton>,
+      <UtrechtButton appearance="primary-action-button">Primary action button</UtrechtButton>,
+      <UtrechtButton appearance="secondary-action-button">Secondary action button</UtrechtButton>,
+      <UtrechtButton appearance="subtle-button">Subtle button</UtrechtButton>,
+      <UtrechtButton>Default button</UtrechtButton>,
+      <UtrechtButtonLink appearance="primary-action-button" href="#">
+        Primary action button link
+      </UtrechtButtonLink>,
+      <UtrechtButtonLink appearance="secondary-action-button" href="#">
+        Secondary action button link
+      </UtrechtButtonLink>,
+      <UtrechtButtonLink appearance="subtle-button" href="#">
+        Subtle button link
+      </UtrechtButtonLink>,
+      <UtrechtButtonLink href="#">Default button link</UtrechtButtonLink>,
+      <UtrechtLinkButton>Link button</UtrechtLinkButton>,
+      <UtrechtLinkButton inline>Inline link button</UtrechtLinkButton>,
     ],
   },
 };
 
+export const DirectionColumn: Story = {
+  args: {
+    ...Default.args,
+    direction: 'column',
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/web-component-library-stencil/src/components.d.ts b/packages/web-component-library-stencil/src/components.d.ts
@@ -49,6 +49,7 @@ export namespace Components {
         "value": string;
     }
     interface UtrechtButtonGroup {
+        "direction": string | 'column' | 'row';
     }
     interface UtrechtButtonLink {
         "appearance": string;
@@ -2835,6 +2836,7 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface UtrechtButtonGroup {
+        "direction"?: string | 'column' | 'row';
     }
     interface UtrechtButtonLink {
         "appearance"?: string;

diff --git a/packages/web-component-library-stencil/src/components/button-group.tsx b/packages/web-component-library-stencil/src/components/button-group.tsx
@@ -4,17 +4,25 @@
  * Copyright (c) 2020-2022 Frameless B.V.
  */
 
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-button-group',
   styleUrl: 'button-group.scss',
   shadow: true,
 })
 export class ButtonGroup {
+  @Prop() direction: string | 'column' | 'row';
   render() {
+    const { direction } = this;
     return (
-      <div class="utrecht-button-group">
+      <div
+        class={clsx('utrecht-button-group', {
+          'utrecht-button-group--column': direction === 'column',
+          'utrecht-button-group--row': direction === 'row',
+        })}
+      >
         <slot></slot>
       </div>
     );