Add AlphaIconButton component

.changeset/pink-paws-eat.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Add `AlphaIconButton` component.

packages/bezier-react/src/components/AlphaIconButton/AlphaIconButton.stories.tsx

@@ -0,0 +1,29 @@
+import { PlusIcon } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import {
+  AlphaIconButton,
+  type AlphaIconButtonProps,
+} from '~/src/components/AlphaIconButton'
+
+const meta: Meta<typeof AlphaIconButton> = {
+  component: AlphaIconButton,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+}
+export default meta
+
+export const Playground: StoryObj<AlphaIconButtonProps> = {
+  args: {
+    disabled: false,
+    active: false,
+    loading: false,
+    icon: PlusIcon,
+    shape: 'rectangle',
+    'aria-label': 'invite',
+    size: 'm',
+    variant: 'primary',
+    color: 'blue',
+  },
+}

packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss

@@ -0,0 +1,250 @@
+@use '../../styles/mixins/dimension';
+
+$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
+
+.IconButton {
+  position: relative;
+  box-sizing: border-box;
+  transition: background-color var(--transition-s);
+
+  /* dimension */
+  &:where(.size-xs) {
+    @include dimension.square(20px);
+
+    padding: 4px;
+  }
+
+  &:where(.size-s) {
+    @include dimension.square(24px);
+
+    padding: 4px;
+  }
+
+  &:where(.size-m) {
+    @include dimension.square(36px);
+
+    padding: 8px;
+  }
+
+  &:where(.size-l) {
+    @include dimension.square(44px);
+
+    padding: 12px;
+  }
+
+  &:where(.size-xl) {
+    @include dimension.square(54px);
+
+    padding: 15px;
+  }
+
+  /* background-color */
+  &:where(.variant-primary) {
+    $background-color-by-color: (
+      blue: var(--alpha-color-primary-bg-normal),
+      cobalt: var(--alpha-color-accent-bg-normal),
+      red: var(--alpha-color-critical-bg-normal),
+      orange: var(--alpha-color-warning-bg-normal),
+      green: var(--alpha-color-success-bg-normal),
+      pink: var(--alpha-color-bg-pink-normal),
+      purple: var(--alpha-color-bg-purple-normal),
+      dark-grey: var(--alpha-color-bg-grey-darkest),
+      light-grey: var(--alpha-color-bg-black-dark),
+    );
+
+    @each $color, $background-color in $background-color-by-color {
+      &:where(.color-#{$color}) {
+        background-color: $background-color;
+      }
+    }
+  }
+
+  &:where(.variant-secondary) {
+    $background-color-by-color: (
+      blue: var(--alpha-color-primary-bg-lightest),
+      cobalt: var(--alpha-color-accent-bg-lightest),
+      red: var(--alpha-color-critical-bg-lightest),
+      orange: var(--alpha-color-warning-bg-lightest),
+      green: var(--alpha-color-success-bg-lightest),
+      pink: var(--alpha-color-bg-pink-lightest),
+      purple: var(--alpha-color-bg-purple-lightest),
+      dark-grey: var(--alpha-color-bg-black-lighter),
+      light-grey: var(--alpha-color-bg-black-lighter),
+    );
+
+    @each $color, $background-color in $background-color-by-color {
+      &:where(.color-#{$color}) {
+        background-color: $background-color;
+      }
+    }
+  }
+
+  &:where(.variant-tertiary) {
+    background-color: initial;
+  }
+
+  /* color */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:where(.variant-primary) {
+    color: var(--alpha-color-fg-absolute-white-dark);
+
+    &:where(.color-dark-grey) {
+      color: var(--alpha-color-fg-white-normal);
+    }
+
+    &:where(.color-light-grey) {
+      color: var(--alpha-color-fg-absolute-white-normal);
+    }
+  }
+
+  &:where(.variant-secondary, .variant-tertiary) {
+    $color-map: (
+      blue: var(--alpha-color-primary-fg-normal),
+      cobalt: var(--alpha-color-accent-fg-normal),
+      red: var(--alpha-color-critical-fg-normal),
+      orange: var(--alpha-color-warning-fg-normal),
+      green: var(--alpha-color-success-fg-normal),
+      pink: var(--alpha-color-fg-pink-normal),
+      purple: var(--alpha-color-fg-purple-normal),
+      dark-grey: var(--alpha-color-fg-black-darkest),
+      light-grey: var(--alpha-color-fg-black-darker),
+    );
+
+    @each $button-color, $color in $color-map {
+      &:where(.color-#{$button-color}) {
+        color: $color;
+      }
+    }
+
+    &:where(.color-dark-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-darker);
+      }
+    }
+
+    &:where(.color-light-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-dark);
+      }
+    }
+  }
+
+  &:where(.variant-tertiary.color-white) {
+    & :where(.ButtonIcon) {
+      color: var(--alpha-color-fg-absolute-white-normal);
+    }
+  }
+
+  /* border-radius */
+  &:where(.shape-rectangle) {
+    $border-radius-by-size: (
+      xs: var(--alpha-dimension-6),
+      s: var(--alpha-dimension-7),
+      m: var(--alpha-dimension-10),
+      l: var(--alpha-dimension-12),
+      xl: var(--alpha-dimension-14),
+    );
+
+    @each $size, $border-radius in $border-radius-by-size {
+      &:where(.size-#{$size}) {
+        border-radius: $border-radius;
+      }
+    }
+  }
+
+  &:where(.shape-circle) {
+    border-radius: 9999px;
+  }
+
+  /* TODO: use v2 token when design is specified */
+
+  /* visual effect on interaction */
+  &:where(.active, :hover):where(:not(:disabled)) {
+    &:where(.variant-primary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-dark);
+        }
+      }
+
+      &:where(.color-dark-grey) {
+        background-color: var(--bg-grey-darkest);
+      }
+
+      &:where(.color-light-grey) {
+        background-color: var(--bg-black-darker);
+      }
+    }
+
+    &:where(.variant-secondary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-lighter);
+        }
+      }
+
+      &:where(.color-dark-grey, .color-light-grey) {
+        background-color: var(--bg-black-light);
+      }
+    }
+
+    &:where(.variant-tertiary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-lightest);
+        }
+      }
+
+      &:where(.color-dark-grey, .color-light-grey, .color-white) {
+        background-color: var(--bg-black-lighter);
+      }
+    }
+
+    &:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darkest);
+      }
+    }
+
+    &:where(.color-light-grey):where(.variant-secondary, .variant-tertiary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darker);
+      }
+    }
+
+    &:where(.color-white.variant-tertiary) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-absolute-white-normal);
+      }
+    }
+  }
+
+  &:where(.variant-primary.color-blue:focus-visible) {
+    outline: 3px solid var(--bgtxt-blue-light);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--alpha-opacity-disabled);
+  }
+
+  /* internal components */
+  .ButtonContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:where(.loading) {
+      visibility: hidden;
+    }
+  }
+
+  .ButtonLoader {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
+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'
+
+function getIconSize(size: ButtonSize) {
+  return (
+    {
+      xs: 'xxs',
+      s: 'xs',
+      m: 's',
+      l: 's',
+      xl: 'm',
+    } as const
+  )[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(
+    {
+      as = BaseButton,
+      color = 'blue',
+      variant = 'primary',
+      size = 'm',
+      disabled,
+      active,
+      shape = 'rectangle',
+      icon,
+      loading,
+      className,
+      ...rest
+    },
+    forwardedRef
+  ) {
+    const Comp = as as typeof BaseButton
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        className={classNames(
+          styles.IconButton,
+          styles[`size-${size}`],
+          styles[`variant-${variant}`],
+          styles[`color-${color}`],
+          styles[`shape-${shape}`],
+          active && styles.active,
+          className
+        )}
+        {...rest}
+      >
+        <div
+          className={classNames(
+            styles.ButtonContent,
+            loading && styles.loading
+          )}
+        >
+          {icon && (
+            <Icon
+              size={getIconSize(size)}
+              source={icon}
+              className={styles.ButtonIcon}
+            />
+          )}
+        </div>
+
+        {/* TODO: use AlphaSpinner */}
+        {loading && (
+          <div className={styles.ButtonLoader}>
+            <Spinner size={getSpinnerSize(size)} />
+          </div>
+        )}
+      </Comp>
+    )
+  }
+)