chore(IconButton): 🤖 Migrate component to CSS Modules

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

@@ -0,0 +1,12 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+The `IconButton` component has been migrated from Styled Components to CSS Modules (Web Standards + BEM class name convention). This change is part of our ongoing effort to modernize the component library.
+
+**Changes (non-breaking):**
+- Migrated from `styled-components` to CSS Modules (`IconButton.module.css`)
+- Using BEM naming convention (`.icon-button`, `.icon-button_primary`, `.icon-button_sm`, etc.)
+- Maintained full API compatibility - no breaking changes
+- All variants (primary, secondary, ghost, danger, info) and sizes (default, sm, xs) preserved
+- Interactive states (hover, focus, active) maintained with CSS pseudo-classes

.storybook/main.ts

@@ -1,24 +1,26 @@
-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: {
       compilerOptions: {
         allowSyntheticDefaultImports: 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/IconButton/IconButton.module.css

@@ -0,0 +1,193 @@
+/* stylelint-disable custom-property-pattern */
+.icon-button {
+  display: inline-flex;
+  position: relative;
+  padding: var(--click-button-iconButton-default-space-y) var(--click-button-iconButton-default-space-x);
+  overflow: hidden;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--click-button-iconButton-radii-all);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: var(--click-transition-default);
+}
+
+.icon-button:disabled {
+  cursor: not-allowed;
+}
+
+/* Small Size Modifier */
+.icon-button_sm {
+  padding: var(--click-button-iconButton-sm-space-y) var(--click-button-iconButton-sm-space-x);
+}
+
+/* Extra Small Size Modifier */
+.icon-button_xs {
+  padding: var(--click-button-iconButton-xs-space-y) var(--click-button-iconButton-xs-space-x);
+}
+
+/* Primary Type */
+.icon-button_primary {
+  background-color: var(--click-button-iconButton-color-primary-background-default);
+  color: var(--click-button-iconButton-color-primary-text-default);
+}
+
+.icon-button_primary:disabled {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+}
+
+.icon-button_primary:hover:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-primary-background-hover);
+  color: var(--click-button-iconButton-color-primary-text-hover);
+}
+
+.icon-button_primary:focus-visible:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-primary-background-active);
+  color: var(--click-button-iconButton-color-primary-text-active);
+  outline: 2px solid var(--click-button-iconButton-color-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.icon-button_primary:active:not(:disabled),
+.icon-button_primary:focus:not(:focus-visible, :disabled) {
+  background-color: var(--click-button-iconButton-color-primary-background-active);
+  color: var(--click-button-iconButton-color-primary-text-active);
+  /* suppress mouse-click focus ring; keyboard focus handled by :focus-visible */
+  outline: none;
+}
+
+/* Secondary Type */
+.icon-button_secondary {
+  background-color: var(--click-button-iconButton-color-secondary-background-default);
+  color: var(--click-button-iconButton-color-secondary-text-default);
+}
+
+.icon-button_secondary:disabled {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+}
+
+.icon-button_secondary:hover:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-secondary-background-hover);
+  color: var(--click-button-iconButton-color-secondary-text-hover);
+}
+
+.icon-button_secondary:focus-visible:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-secondary-background-active);
+  color: var(--click-button-iconButton-color-secondary-text-active);
+  outline: 2px solid var(--click-button-iconButton-color-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.icon-button_secondary:active:not(:disabled),
+.icon-button_secondary:focus:not(:focus-visible, :disabled) {
+  background-color: var(--click-button-iconButton-color-secondary-background-active);
+  color: var(--click-button-iconButton-color-secondary-text-active);
+  /* suppress mouse-click focus ring; keyboard focus handled by :focus-visible */
+  outline: none;
+}
+
+/* Ghost Type */
+.icon-button_ghost {
+  background-color: var(--click-button-iconButton-color-ghost-background-default);
+  color: var(--click-button-iconButton-color-ghost-text-default);
+}
+
+.icon-button_ghost:disabled {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+}
+
+.icon-button_ghost:hover:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-ghost-background-hover);
+  color: var(--click-button-iconButton-color-ghost-text-hover);
+}
+
+.icon-button_ghost:focus-visible:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-ghost-background-active);
+  color: var(--click-button-iconButton-color-ghost-text-active);
+  outline: 2px solid var(--click-button-iconButton-color-ghost-stroke-active);
+  outline-offset: 2px;
+}
+
+.icon-button_ghost:active:not(:disabled),
+.icon-button_ghost:focus:not(:focus-visible, :disabled) {
+  background-color: var(--click-button-iconButton-color-ghost-background-active);
+  color: var(--click-button-iconButton-color-ghost-text-active);
+  /* suppress mouse-click focus ring; keyboard focus handled by :focus-visible */
+  outline: none;
+}
+
+/* Danger Type */
+.icon-button_danger {
+  background-color: var(--click-button-iconButton-color-danger-background-default);
+  color: var(--click-button-iconButton-color-danger-text-default);
+}
+
+.icon-button_danger:disabled {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+}
+
+.icon-button_danger:hover:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-danger-background-hover);
+  color: var(--click-button-iconButton-color-danger-text-hover);
+}
+
+.icon-button_danger:focus-visible:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-danger-background-active);
+  color: var(--click-button-iconButton-color-danger-text-active);
+  outline: 2px solid var(--click-button-iconButton-color-danger-stroke-active);
+  outline-offset: 2px;
+}
+
+.icon-button_danger:active:not(:disabled),
+.icon-button_danger:focus:not(:focus-visible, :disabled) {
+  background-color: var(--click-button-iconButton-color-danger-background-active);
+  color: var(--click-button-iconButton-color-danger-text-active);
+  /* suppress mouse-click focus ring; keyboard focus handled by :focus-visible */
+  outline: none;
+}
+
+/* Info Type */
+.icon-button_info {
+  background-color: var(--click-button-iconButton-color-info-background-default);
+  color: var(--click-button-iconButton-color-info-text-default);
+}
+
+.icon-button_info:disabled {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+}
+
+.icon-button_info:hover:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-info-background-hover);
+  color: var(--click-button-iconButton-color-info-text-hover);
+}
+
+.icon-button_info:focus-visible:not(:disabled) {
+  background-color: var(--click-button-iconButton-color-info-background-active);
+  color: var(--click-button-iconButton-color-info-text-active);
+  outline: 2px solid var(--click-button-iconButton-color-info-stroke-active);
+  outline-offset: 2px;
+}
+
+.icon-button_info:active:not(:disabled),
+.icon-button_info:focus:not(:focus-visible, :disabled) {
+  background-color: var(--click-button-iconButton-color-info-background-active);
+  color: var(--click-button-iconButton-color-info-text-active);
+  /* suppress mouse-click focus ring; keyboard focus handled by :focus-visible */
+  outline: none;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .icon-button {
+    transition: none;
+  }
+}
+/* stylelint-enable custom-property-pattern */

src/components/IconButton/IconButton.tsx

@@ -1,77 +1,51 @@
 import { forwardRef } from 'react';
-import { styled } from 'styled-components';
 import { Icon } from '@/components/Icon';
+import { cn, cva } from '@/lib/cva';
 import { IconButtonProps } from './IconButton.types';
+import styles from './IconButton.module.css';
+
+const iconButtonVariants = cva(styles['icon-button'], {
+  variants: {
+    type: {
+      primary: styles['icon-button_primary'],
+      secondary: styles['icon-button_secondary'],
+      ghost: styles['icon-button_ghost'],
+      danger: styles['icon-button_danger'],
+      info: styles['icon-button_info'],
+    },
+    size: {
+      default: undefined,
+      sm: styles['icon-button_sm'],
+      xs: styles['icon-button_xs'],
+    },
+  },
+  defaultVariants: {
+    type: 'primary',
+    size: 'default',
+  },
+});
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ type = 'primary', icon, size, disabled, ...props }, ref) => {
+  ({ type = 'primary', icon, size = 'default', disabled, className, ...props }, ref) => {
     const iconName = icon ? icon.toString() : 'unknown icon';
 
     return (
-      <Button
+      <button
+        type="button"
+        aria-label={iconName}
         {...props}
-        $styleType={type}
-        $size={size}
+        className={cn(iconButtonVariants({ type, size }), className)}
         disabled={disabled}
+        aria-disabled={disabled}
         ref={ref}
-        role="button"
-        aria-label={iconName}
       >
         <Icon
           name={icon}
           size="sm"
         />
-      </Button>
+      </button>
     );
   }
 );
 
 IconButton.displayName = 'IconButton';
-
-const Button = styled.button<{
-  $styleType?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'info';
-  $size?: 'default' | 'sm' | 'xs';
-}>`
-  ${({ theme, $size, $styleType = 'primary' }) => `
-  border-radius: ${theme.click.button.iconButton.radii.all};
-  border: ${theme.click.button.stroke} solid ${
-    theme.click.button.iconButton.color[$styleType].stroke.default
-  };
-  cursor: pointer;
-  padding: ${
-    $size
-      ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}`
-      : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`
-  };
-
-  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
-
-  color: ${theme.click.button.iconButton.color[$styleType].text.default};
-  &:not([disabled]) {
-    &:hover {
-      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};
-      color: ${theme.click.button.iconButton.color[$styleType].text.hover};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};
-    }
-
-    &:focus, &:active, &:focus-within {
-      background-color: ${
-        theme.click.button.iconButton.color[$styleType].background.active
-      };
-      color: ${theme.click.button.iconButton.color[$styleType].text.active};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};
-    }
-  }
-  &:visited {
-    background-color: ${
-      theme.click.button.iconButton.color[$styleType].background.default
-    };
-  }
-
-  &[disabled] {
-    background-color: ${theme.click.button.iconButton.color.disabled.background.default};
-    color: ${theme.click.button.iconButton.color.disabled.text.default};
-    cursor: not-allowed;
-  }
-  `}
-`;