@channel.io/bezier-react 2.0.7 → 2.0.8

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -1,5 +1,7 @@
 @use '../../styles/mixins/dimension';
 
+@import '../Icon/Icon.module';
+
 $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .IconButton {
@@ -50,10 +52,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-normal),
       dark-grey: var(--alpha-color-bg-grey-darkest),
       light-grey: var(--alpha-color-bg-black-dark),
+      white: var(--alpha-color-bg-absolute-white-dark),
     );
 
     @each $color, $background-color in $background-color-by-color {
-      &:where(.color-#{$color}) {
+      &:where(.color-#{'' + $color}) {
         background-color: $background-color;
       }
     }
@@ -70,17 +73,18 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-lightest),
       dark-grey: var(--alpha-color-bg-black-lighter),
       light-grey: var(--alpha-color-bg-black-lighter),
+      white: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
-      &:where(.color-#{$color}) {
+      &:where(.color-#{'' + $color}) {
         background-color: $background-color;
       }
     }
   }
 
   &:where(.variant-tertiary) {
-    background-color: initial;
+    background-color: var(--alpha-color-bg-white-white-alpha-transparent);
   }
 
   /* color */
@@ -111,7 +115,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     );
 
     @each $button-color, $color in $color-map {
-      &:where(.color-#{$button-color}) {
+      &:where(.color-#{'' + $button-color}) {
         color: $color;
       }
     }
@@ -162,7 +166,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   &:where(.active, :hover):where(:not(:disabled)) {
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -178,7 +182,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -190,7 +194,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }
@@ -229,7 +233,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   /* internal components */
-  .ButtonContent {
+  & :where(.ButtonContent) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -239,12 +243,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  .ButtonLoader {
+  & :where(.ButtonLoader) {
     position: absolute;
     inset: 0;
 
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @each $size, $value in $size-map {
+      &:where(.size-#{$size}) {
+        & :is(.Spinner) {
+          @include dimension.square(#{$value}px);
+        }
+      }
+    }
   }
 }

package/src/components/AlphaIconButton/IconButton.tsx

@@ -4,10 +4,10 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
+import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 import { BaseButton } from '~/src/components/BaseButton'
 import { type ButtonSize } from '~/src/components/Button'
 import { Icon } from '~/src/components/Icon'
-import { Spinner } from '~/src/components/Spinner'
 
 import styles from './IconButton.module.scss'
 
@@ -23,18 +23,6 @@ function getIconSize(size: ButtonSize) {
   )[size]
 }
 
-function getSpinnerSize(size: ButtonSize) {
-  return (
-    {
-      xs: 'xs',
-      s: 'xs',
-      m: 's',
-      l: 's',
-      xl: 's',
-    } as const
-  )[size]
-}
-
 export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
   function IconButton(
     {
@@ -84,10 +72,17 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           )}
         </div>
 
-        {/* TODO: use AlphaSpinner */}
         {loading && (
-          <div className={styles.ButtonLoader}>
-            <Spinner size={getSpinnerSize(size)} />
+          <div
+            className={classNames(
+              styles.ButtonLoader,
+              styles[`size-${getIconSize(size)}`]
+            )}
+          >
+            <AlphaSpinner
+              className={styles.Spinner}
+              variant="on-overlay"
+            />
           </div>
         )}
       </Comp>

package/src/components/AlphaSpinner/Spinner.module.scss

@@ -14,22 +14,26 @@
   --b-spinner-size: initial;
   --b-spinner-track-color: initial;
   --b-spinner-indicator-color: initial;
-  --b-spinner-stroke-width: initial;
-  --b-spinner-stroke-dasharray: initial;
+  --b-spinner-stroke-thickness: initial;
 
-  @include dimension.square(var(--b-spinner-size));
+  /* NOTE: stroke-width is fixed for the exceptional case of use inside buttons */
+  --b-spinner-stroke-width: 2px;
+  --b-spinner-view-box-size: 16;
+  --b-spinner-stroke-dasharray: 16 9999;
+
+  @include dimension.square(calc(1px * var(--b-spinner-size)));
 
   display: inline-flex;
   animation: rotate 1s linear infinite;
 
-  & .track {
+  & :where(.track) {
     fill: none;
     stroke: var(--b-spinner-track-color);
     stroke-linecap: round;
     stroke-width: var(--b-spinner-stroke-width);
   }
 
-  & .indicator {
+  & :where(.indicator) {
     fill: none;
     stroke: var(--b-spinner-indicator-color);
     stroke-dasharray: var(--b-spinner-stroke-dasharray);
@@ -37,16 +41,21 @@
     stroke-width: var(--b-spinner-stroke-width);
   }
 
+  &:where(.size-s, .size-m) {
+    --b-spinner-stroke-width: calc(
+      var(--b-spinner-stroke-thickness) * var(--b-spinner-view-box-size) /
+        var(--b-spinner-size)
+    );
+  }
+
   &:where(.size-s) {
-    --b-spinner-size: 28px;
-    --b-spinner-stroke-width: 4px;
-    --b-spinner-stroke-dasharray: 40 9999;
+    --b-spinner-size: 28;
+    --b-spinner-stroke-thickness: 4px;
   }
 
   &:where(.size-m) {
-    --b-spinner-size: 50px;
-    --b-spinner-stroke-width: 6px;
-    --b-spinner-stroke-dasharray: 60 9999;
+    --b-spinner-size: 50;
+    --b-spinner-stroke-thickness: 6px;
   }
 
   &:where(.variant-primary) {

package/src/components/AlphaSpinner/Spinner.tsx

@@ -18,7 +18,8 @@ export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
         className={classNames(
           styles.Spinner,
           size && styles[`size-${size}`],
-          styles[`variant-${variant}`]
+          styles[`variant-${variant}`],
+          className
         )}
         ref={forwardedRef}
         data-testid={SPINNER_TEST_ID}
@@ -31,17 +32,15 @@ export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
           <circle
             cx="8"
             cy="8"
-            r="7"
+            r="6.5"
             className={styles.track}
-            vectorEffect="non-scaling-stroke"
           />
 
           <circle
             cx="8"
             cy="8"
-            r="7"
+            r="6.5"
             className={styles.indicator}
-            vectorEffect="non-scaling-stroke"
           />
         </svg>
       </span>

package/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -180,13 +180,13 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
     >
       <svg
-        class="Icon margin"
+        class="Icon size-xs margin"
         data-testid="bezier-icon"
         fill="none"
-        height="16"
+        height="1em"
         style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
         viewBox="0 0 24 24"
-        width="16"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

package/src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`Help > Snapshot > 1`] = `
 <svg
-  class="Icon margin Icon"
+  class="Icon size-xs margin Icon"
   data-testid="bezier-help"
   fill="none"
-  height="16"
+  height="1em"
   style="--b-icon-color: var(--txt-black-dark);"
   viewBox="0 0 24 24"
-  width="16"
+  width="1em"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path

package/src/components/Icon/Icon.module.scss

@@ -1,7 +1,25 @@
+@use '../../styles/mixins/dimension';
+
+$size-map: (
+  xxxs: 10,
+  xxs: 12,
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 36,
+  xl: 44,
+);
+
 .Icon {
   --b-icon-color: initial;
 
   flex: 0 0 auto;
   color: var(--b-icon-color);
   transition: color var(--transition-s);
+
+  @each $size, $value in $size-map {
+    &:where(.size-#{$size}) {
+      @include dimension.square(#{$value}px);
+    }
+  }
 }

package/src/components/Icon/Icon.tsx

@@ -5,25 +5,12 @@ import classNames from 'classnames'
 import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
 import { tokenCssVar } from '~/src/utils/style'
 
-import { type IconProps, type IconSize } from './Icon.types'
+import { type IconProps } from './Icon.types'
 
 import styles from './Icon.module.scss'
 
 export const ICON_TEST_ID = 'bezier-icon'
 
-const getSizeValue = (size: IconSize) =>
-  (
-    ({
-      xl: 44,
-      l: 36,
-      m: 24,
-      s: 20,
-      xs: 16,
-      xxs: 12,
-      xxxs: 10,
-    }) satisfies Record<IconSize, number>
-  )[size]
-
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {
     const [marginProps, marginRest] = splitByMarginProps(props)
@@ -48,9 +35,12 @@ export const Icon = memo(
             ...style,
           } as React.CSSProperties
         }
-        className={classNames(styles.Icon, marginStyles.className, className)}
-        width={getSizeValue(size)}
-        height={getSizeValue(size)}
+        className={classNames(
+          styles.Icon,
+          styles[`size-${size}`],
+          marginStyles.className,
+          className
+        )}
         data-testid={ICON_TEST_ID}
         {...rest}
       />

package/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap

@@ -13,13 +13,13 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-group-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-blue-normal);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -40,13 +40,13 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
     class="RightContentWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-xs margin"
       data-testid="bezier-icon"
       fill="none"
-      height="16"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-orange-normal);"
       viewBox="0 0 24 24"
-      width="16"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -73,13 +73,13 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-group-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--txt-black-dark);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -100,13 +100,13 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
     class="RightContentWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-xs margin"
       data-testid="bezier-icon"
       fill="none"
-      height="16"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-orange-normal);"
       viewBox="0 0 24 24"
-      width="16"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap

@@ -11,13 +11,13 @@ exports[`NavItem Test > Snapshot > Active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-item-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-blue-normal);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -48,13 +48,13 @@ exports[`NavItem Test > Snapshot > Not active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-item-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--txt-black-dark);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path