chore(ButtonGroup): migrate to CSS Modules with visual regression baseline

.changeset/migrate-button-group-to-css-modules.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+migration of ButtonGroup from styled-components to css modules. no behavior change.

.scripts/bash/playwright-docker

@@ -1,36 +1,30 @@
 #!/bin/bash
 
-COMMAND="${1:-test}"
-
 PORT="8282"
+COMPOSE_FILE="docker-compose.playwright.yml"
 
-if [[ "$COMMAND" = "update" ]]; then
-  docker compose \
-    -f docker-compose.playwright.yml \
-    run \
-    --rm update-snapshots
-elif [[ "$COMMAND" = "ui" ]]; then
-  docker rm -f playwright-ui 2>/dev/null
+case "${1:-}" in
+  update)
+    shift
+    docker compose -f "$COMPOSE_FILE" run --rm --entrypoint "" playwright \
+      npx playwright test --update-snapshots=all "$@"
+    ;;
+  ui)
+    docker rm -f playwright-ui 2>/dev/null
 
-  echo "🎭 Starting Playwright UI at http://localhost:$PORT..."
+    echo "🎭 Starting Playwright UI at http://localhost:$PORT..."
 
-  (sleep 3 &&
-    open "http://localhost:$PORT" 2>/dev/null ||
-    xdg-open "http://localhost:$PORT" 2>/dev/null) &
+    (sleep 3 &&
+      open "http://localhost:$PORT" 2>/dev/null ||
+      xdg-open "http://localhost:$PORT" 2>/dev/null) &
 
-  docker compose \
-      -f docker-compose.playwright.yml \
-      run \
-      --rm \
-      --service-ports \
-      --name playwright-ui \
-      ui
-elif [[ "$COMMAND" = "report" ]]; then
-  npx playwright show-report
-else
-  docker compose \
-    -f docker-compose.playwright.yml \
-    run \
-    --rm \
-    test
-fi
+    docker compose -f "$COMPOSE_FILE" run --rm --service-ports --name playwright-ui ui
+    ;;
+  report)
+    npx playwright show-report
+    ;;
+  *)
+    docker compose -f "$COMPOSE_FILE" run --rm --entrypoint "" playwright \
+      npx playwright test "$@"
+    ;;
+esac

Dockerfile.playwright

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.58.2-noble
+FROM mcr.microsoft.com/playwright:v1.60.0-noble
 
 WORKDIR /app
 
@@ -10,4 +10,4 @@ RUN yarn install
 
 COPY . .
 
-CMD ["yarn", "test:visual"]
+CMD ["npx", "playwright", "test"]

docker-compose.playwright.yml

@@ -15,11 +15,11 @@ services:
 
   test:
     extends: playwright
-    command: yarn test:visual
+    command: npx playwright test
 
   update-snapshots:
     extends: playwright
-    command: yarn test:visual:update
+    command: npx playwright test --update-snapshots=all
 
   ui:
     extends: playwright

package.json

@@ -429,7 +429,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.1.10",
     "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-links": "^10.1.10",

src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,85 @@
+.buttongroup {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
+}
+
+.buttongroup_type_default {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttongroup_type_borderless {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttongroup_fillwidth {
+  width: 100%;
+}
+
+.button {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  cursor: pointer;
+}
+
+.button_type_default {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type_borderless {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillwidth {
+  flex: 1;
+}
+
+.button[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  color: var(--click-button-group-color-text-active);
+  font: var(--click-button-group-typography-label-active);
+}
+
+.button:hover {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
+
+.button:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button:disabled:active,
+.button:disabled:focus,
+.button:disabled[aria-pressed='true'] {
+  color: var(--click-button-group-color-text-disabled);
+}
+
+.button[aria-pressed='true']:disabled {
+  background: var(--click-button-group-color-background-disabled-active);
+}

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -21,6 +21,122 @@ export const Playground: StoryObj<typeof ButtonGroup> = {
     fillWidth: false,
     type: 'default',
     defaultSelected: 'option3',
+    'aria-label': 'Button group playground',
+  },
+};
+
+export const Default: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+  },
+};
+
+export const Borderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+  },
+};
+
+export const DefaultSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    selected: 'option1',
+  },
+};
+
+export const BorderlessSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    selected: 'option1',
+  },
+};
+
+export const WithDisabledButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+  },
+};
+
+export const WithDisabledSelectedButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled Active', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+    selected: 'disabled',
+  },
+};
+
+export const FillWidthDefault: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'default',
+    fillWidth: true,
+  },
+};
+
+export const FillWidthBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'borderless',
+    fillWidth: true,
+  },
+};
+
+export const MultiSelectSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
+  },
+};
+
+export const MultiSelectBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
   },
 };