chore(SplitButton): 🤖 Migrate component to CSS Modules

.changeset/migrate-splitbutton-css-modules.md

@@ -0,0 +1,17 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+🔄 **SplitButton Component Migration to CSS Modules**
+
+The `SplitButton` component has been migrated from Styled Components to CSS Modules (Web Standards + BEM class name convention).
+
+**Changes:**
+- Migrated from `styled-components` to CSS Modules (`SplitButton.module.css`)
+- Using BEM naming convention (`.split-button`, `.primary-button`, `.secondary-button`, etc.)
+- Maintained full API compatibility - no breaking changes
+- Both `primary` and `secondary` variants preserved
+- Interactive states (hover, focus, disabled) maintained with CSS pseudo-classes
+
+**Visual Testing:**
+This migration is protected by visual regression tests covering all button types and states in both light and dark themes.

.storybook/main.ts

@@ -1,25 +1,27 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   core: {
-    disableTelemetry: true
+    disableTelemetry: true,
   },
-  stories: [
-    "./Introduction.mdx",
-    "../src/**/*.stories.@(ts|tsx)",
-  ],
+  stories: ['./Introduction.mdx', '../src/**/*.stories.@(ts|tsx)'],
 
-  addons: ["@storybook/addon-links", //"@storybook/addon-interactions",
-  "storybook-addon-pseudo-states", "@storybook/addon-a11y", "@storybook/addon-docs"],
+  addons: [
+    '@storybook/addon-links', //"@storybook/addon-interactions",
+    'storybook-addon-pseudo-states',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+  ],
 
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
 
-  staticDirs: ["../public"],
+  staticDirs: ['../public'],
   typescript: {
-    reactDocgen: "react-docgen-typescript",
+    reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
+      tsconfigPath: '../tsconfig.json',
       compilerOptions: {
         allowSyntheticDefaultImports: false,
         esModuleInterop: false,
@@ -32,8 +34,9 @@ const config: StorybookConfig = {
   },
 
   async viteFinal(config, { configType }) {
-    config.plugins = (config.plugins || []).filter((plugin) => {
-      const pluginName = plugin && typeof plugin === 'object' && 'name' in plugin ? plugin.name : null;
+    config.plugins = (config.plugins || []).filter(plugin => {
+      const pluginName =
+        plugin && typeof plugin === 'object' && 'name' in plugin ? plugin.name : null;
       return pluginName !== 'css-external';
     });
     config.plugins.push({

src/components/SplitButton/SplitButton.module.css

@@ -0,0 +1,174 @@
+.split-button {
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--click-button-radii-all);
+  user-select: none;
+}
+
+.split-button_fill-width {
+  width: 100%;
+}
+
+.split-button_primary {
+  border-color: var(--click-button-split-primary-stroke-default);
+}
+
+.split-button_primary:hover:not([data-disabled]) {
+  border-color: var(--click-button-split-primary-stroke-hover);
+}
+
+.split-button_primary:focus-within:not([data-disabled]) {
+  border-color: var(--click-button-split-primary-stroke-active);
+}
+
+.split-button_primary[data-disabled] {
+  border-color: var(--click-button-split-primary-stroke-disabled);
+  cursor: not-allowed;
+}
+
+.split-button_secondary {
+  border-color: var(--click-button-split-secondary-stroke-default);
+}
+
+.split-button_secondary:hover:not([data-disabled]) {
+  border-color: var(--click-button-split-secondary-stroke-hover);
+}
+
+.split-button_secondary:focus-within:not([data-disabled]) {
+  border-color: var(--click-button-split-secondary-stroke-active);
+}
+
+.split-button_secondary[data-disabled] {
+  border-color: var(--click-button-split-secondary-stroke-disabled);
+  cursor: not-allowed;
+}
+
+/* Override BaseButton's styled-component border-radius until BaseButton is migrated to CSS modules */
+.split-button .split-button__primary-button {
+  display: flex;
+  padding: var(--click-button-split-space-y) var(--click-button-split-space-x);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: var(--click-button-split-typography-label-default);
+  cursor: pointer;
+}
+
+.split-button .split-button__primary-button_fill-width {
+  width: 100%;
+}
+
+.split-button .split-button__primary-button_primary {
+  background: var(--click-button-split-primary-background-main-default);
+  color: var(--click-button-split-primary-text-default);
+}
+
+.split-button .split-button__primary-button_primary[data-disabled] {
+  background: var(--click-button-split-primary-background-main-disabled);
+  color: var(--click-button-split-primary-text-disabled);
+  font: var(--click-button-split-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.split-button .split-button__primary-button_primary:hover:not([data-disabled]) {
+  background: var(--click-button-split-primary-background-main-hover);
+  color: var(--click-button-split-primary-text-hover);
+  font: var(--click-button-split-typography-label-hover);
+}
+
+.split-button .split-button__primary-button_primary:focus-visible:not([data-disabled]) {
+  background: var(--click-button-split-primary-background-main-active);
+  color: var(--click-button-split-primary-text-active);
+  font: var(--click-button-split-typography-label-active);
+  outline: 2px solid var(--click-button-split-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.split-button .split-button__primary-button_secondary {
+  background: var(--click-button-split-secondary-background-main-default);
+  color: var(--click-button-split-secondary-text-default);
+}
+
+.split-button .split-button__primary-button_secondary[data-disabled] {
+  background: var(--click-button-split-secondary-background-main-disabled);
+  color: var(--click-button-split-secondary-text-disabled);
+  font: var(--click-button-split-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.split-button .split-button__primary-button_secondary:hover:not([data-disabled]) {
+  background: var(--click-button-split-secondary-background-main-hover);
+  color: var(--click-button-split-secondary-text-hover);
+  font: var(--click-button-split-typography-label-hover);
+}
+
+.split-button .split-button__primary-button_secondary:focus-visible:not([data-disabled]) {
+  background: var(--click-button-split-secondary-background-main-active);
+  color: var(--click-button-split-secondary-text-active);
+  font: var(--click-button-split-typography-label-active);
+  outline: 2px solid var(--click-button-split-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.split-button .split-button__secondary-button {
+  display: flex;
+  padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x);
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.split-button .split-button__secondary-button_primary {
+  background: var(--click-button-split-primary-background-action-default);
+  color: var(--click-button-split-primary-text-default);
+}
+
+.split-button .split-button__secondary-button_primary:hover:not([data-disabled]) {
+  background: var(--click-button-split-primary-background-action-hover);
+  color: var(--click-button-split-primary-text-hover);
+}
+
+.split-button .split-button__secondary-button_primary:focus-visible:not([data-disabled]) {
+  background: var(--click-button-split-primary-background-action-active);
+  color: var(--click-button-split-primary-text-active);
+  outline: 2px solid var(--click-button-split-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.split-button .split-button__secondary-button_primary[data-disabled] {
+  background: var(--click-button-split-primary-background-action-disabled);
+  color: var(--click-button-split-primary-text-disabled);
+  cursor: not-allowed;
+}
+
+.split-button .split-button__secondary-button_secondary {
+  background: var(--click-button-split-secondary-background-action-default);
+  color: var(--click-button-split-secondary-text-default);
+}
+
+.split-button .split-button__secondary-button_secondary:hover:not([data-disabled]) {
+  background: var(--click-button-split-secondary-background-action-hover);
+  color: var(--click-button-split-secondary-text-hover);
+}
+
+.split-button .split-button__secondary-button_secondary:focus-visible:not([data-disabled]) {
+  background: var(--click-button-split-secondary-background-action-active);
+  color: var(--click-button-split-secondary-text-active);
+  outline: 2px solid var(--click-button-split-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.split-button .split-button__secondary-button_secondary[data-disabled] {
+  background: var(--click-button-split-secondary-background-action-disabled);
+  color: var(--click-button-split-secondary-text-disabled);
+  cursor: not-allowed;
+}

src/components/SplitButton/SplitButton.stories.tsx

@@ -61,3 +61,62 @@ export const Playground: Story = {
     menu: menuItems,
   },
 };
+
+// Button Types
+export const Primary: Story = {
+  args: {
+    type: 'primary',
+    children: 'Primary Split Button',
+    menu: menuItems,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: 'secondary',
+    children: 'Secondary Split Button',
+    menu: menuItems,
+  },
+};
+
+// Disabled States
+export const PrimaryDisabled: Story = {
+  args: {
+    type: 'primary',
+    children: 'Disabled Primary',
+    menu: menuItems,
+    disabled: true,
+  },
+};
+
+export const SecondaryDisabled: Story = {
+  args: {
+    type: 'secondary',
+    children: 'Disabled Secondary',
+    menu: menuItems,
+    disabled: true,
+  },
+};
+
+// Interactive
+export const Interactive: Story = {
+  args: {
+    type: 'primary',
+    children: 'Interactive Split Button',
+    menu: menuItems,
+    onClick: () => console.log('clicked'),
+  },
+};
+
+// Layout Variants
+export const FillWidth: Story = {
+  args: {
+    type: 'primary',
+    children: 'Full Width Split Button',
+    menu: menuItems,
+    fillWidth: true,
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};