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

.changeset/migrate-icon-to-css-modules.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate Icon from styled-components to css modules with no change in behavior

src/components/Assets/Flags/system/Flag.tsx

@@ -13,10 +13,10 @@
 
 const resolveFlagName = createAssetResolver<FlagName>();
 
 export { resolveFlagName };
 
 export interface FlagPropsWithAliases extends Omit<FlagProps, 'name'> {
   name: FlagName | AssetAlias | AssetDeprecatedName;
 }
 
 const Flag = ({ name, theme, size, ...props }: FlagPropsWithAliases) => {
@@ -40,7 +40,7 @@
   return (
     <SvgImageElement
       as={ThemedFlag}
-      $size={size}
+      size={size}
       role="img"
       aria-label={resolvedName}
       {...props}

src/components/Assets/Icons/system/Icon.tsx

@@ -13,10 +13,10 @@
 
 const resolveIconName = createAssetResolver<IconName>();
 
 export { resolveIconName };
 
 export interface IconPropsWithAliases extends Omit<IconProps, 'name'> {
   name: IconName | AssetAlias | AssetDeprecatedName;
 }
 
 const Icon = ({ name, theme, size, ...props }: IconPropsWithAliases) => {
@@ -40,7 +40,7 @@
   return (
     <SvgImageElement
       as={ThemedIcon}
-      $size={size}
+      size={size}
       role="img"
       aria-label={resolvedName}
       {...props}

src/components/Assets/Logos/system/Logo.tsx

@@ -13,10 +13,10 @@
 
 const resolveLogoName = createAssetResolver<LogoName>();
 
 export { resolveLogoName };
 
 export interface LogoPropsWithAliases extends Omit<LogoProps, 'name'> {
   name: LogoName | AssetAlias | AssetDeprecatedName;
 }
 
 const Logo = ({ name, theme, size, ...props }: LogoPropsWithAliases) => {
@@ -40,7 +40,7 @@
   return (
     <SvgImageElement
       as={ThemedLogo}
-      $size={size}
+      size={size}
       role="img"
       aria-label={resolvedName}
       {...props}

src/components/Assets/Payments/system/Payment.tsx

@@ -13,10 +13,10 @@
 
 const resolvePaymentName = createAssetResolver<PaymentName>();
 
 export { resolvePaymentName };
 
 export interface PaymentPropsWithAliases extends Omit<PaymentProps, 'name'> {
   name: PaymentName | AssetAlias | AssetDeprecatedName;
 }
 
 const Payment = ({ name, theme, size, ...props }: PaymentPropsWithAliases) => {
@@ -40,7 +40,7 @@
   return (
     <SvgImageElement
       as={ThemedPayment}
-      $size={size}
+      size={size}
       role="img"
       aria-label={resolvedName}
       {...props}

src/components/Icon/Icon.module.css

@@ -0,0 +1,134 @@
+.svg-wrapper {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  border-radius: var(--border-radii-full);
+  background: var(--click-icon-color-background-default);
+  color: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper :is(path[stroke], svg[stroke]:not([stroke='none']), rect[stroke], circle[fill]) {
+  stroke: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper :is(path[fill], svg[fill]:not([fill='none']), rect[fill], circle[fill]) {
+  fill: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper_size_xs {
+  --svg-state-padding: var(--click-icon-space-xs-all);
+}
+
+.svg-wrapper_size_xs svg {
+  width: var(--svg-width, var(--click-image-xs-size-width));
+  height: var(--svg-height, var(--click-image-xs-size-height));
+}
+
+.svg-wrapper_size_sm {
+  --svg-state-padding: var(--click-icon-space-sm-all);
+}
+
+.svg-wrapper_size_sm svg {
+  width: var(--svg-width, var(--click-image-sm-size-width));
+  height: var(--svg-height, var(--click-image-sm-size-height));
+}
+
+.svg-wrapper_size_md {
+  --svg-state-padding: var(--click-icon-space-md-all);
+}
+
+.svg-wrapper_size_md svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper_size_lg {
+  --svg-state-padding: var(--click-icon-space-lg-all);
+}
+
+.svg-wrapper_size_lg svg {
+  width: var(--svg-width, var(--click-image-lg-size-width));
+  height: var(--svg-height, var(--click-image-lg-size-height));
+}
+
+.svg-wrapper_size_xl {
+  --svg-state-padding: var(--click-icon-space-xl-all);
+}
+
+.svg-wrapper_size_xl svg {
+  width: var(--svg-width, var(--click-image-xl-size-width));
+  height: var(--svg-height, var(--click-image-xl-size-height));
+}
+
+.svg-wrapper_size_xxl {
+  --svg-state-padding: var(--click-icon-space-xxl-all);
+}
+
+.svg-wrapper_size_xxl svg {
+  width: var(--svg-width, var(--click-image-xxl-size-width));
+  height: var(--svg-height, var(--click-image-xxl-size-height));
+}
+
+.svg-wrapper_state_success {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-success);
+  color: var(--click-icon-color-text-success);
+}
+
+.svg-wrapper_state_warning {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-warning);
+  color: var(--click-icon-color-text-warning);
+}
+
+.svg-wrapper_state_danger {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-danger);
+  color: var(--click-icon-color-text-danger);
+}
+
+.svg-wrapper_state_info {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-info);
+  color: var(--click-icon-color-text-info);
+}
+
+.svg-image {
+  display: flex;
+  align-items: center;
+}
+
+.svg-image_size_xs {
+  width: var(--click-image-xs-size-width);
+  height: var(--click-image-xs-size-height);
+}
+
+.svg-image_size_sm {
+  width: var(--click-image-sm-size-width);
+  height: var(--click-image-sm-size-height);
+}
+
+.svg-image_size_md {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+}
+
+.svg-image_size_lg {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.svg-image_size_xl {
+  width: var(--click-image-xl-size-width);
+  height: var(--click-image-xl-size-height);
+}
+
+.svg-image_size_xxl {
+  width: var(--click-image-xxl-size-width);
+  height: var(--click-image-xxl-size-height);
+}

src/components/Icon/Icon.stories.module.css

@@ -0,0 +1,36 @@
+.responsive-grid {
+  gap: 1em;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 1400px) {
+  .responsive-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 1100px) {
+  .responsive-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 800px) {
+  .responsive-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 500px) {
+  .responsive-grid {
+    grid-template-columns: 1fr;
+  }
+}