Migrate Button component with scss

.changeset/tender-years-camp.md

@@ -0,0 +1,9 @@
+---
+"@channel.io/bezier-react": major
+---
+
+`Button`'s interface changes.
+
+- `Button` no longer supports `as` and `interpolation` prop.
+- The enum values of `ButtonSize` and `ButtonColorVariant` are changed to kebab case.
+- `Button` now supports common margin props.

packages/bezier-react/src/components/Button/Button.module.scss

@@ -0,0 +1,319 @@
+$chromaticColorVariants: "blue", "red", "green", "cobalt", "orange", "pink", "purple";
+$activeSelector: ":where(.active, :hover):where(:not(:disabled))";
+
+.Button {
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color var(--transition-s), box-shadow var(--transition-s);
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-disabled);
+  }
+
+  &:focus:not(:disabled) {
+    outline: 3px solid var(--bgtxt-cobalt-light);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Size */
+  &:where(.size-xs) {
+    padding: 0 2px;
+    min-width: 20px;
+    height: 20px;
+
+    &:where(.style-floating, .style-floating-alt) {
+      padding: 0 7px;
+    }
+  }
+
+  &:where(.size-s) {
+    padding: 0 4px;
+    min-width: 24px;
+    height: 24px;
+
+    &:where(.style-floating, .style-floating-alt) {
+      padding: 0 9px;
+    }
+  }
+
+  &:where(.size-m) {
+    padding: 0 10px;
+    min-width: 36px;
+    height: 36px;
+
+    &:where(.style-floating, .style-floating-alt) {
+      padding: 0 14px;
+    }
+  }
+
+  &:where(.size-l) {
+    padding: 0 12px;
+    min-width: 44px;
+    height: 44px;
+
+    &:where(.style-floating, .style-floating-alt) {
+      padding: 0 18px;
+    }
+  }
+
+  &:where(.size-xl) {
+    padding: 0 20px;
+    min-width: 54px;
+    height: 54px;
+
+    &:where(.style-floating, .style-floating-alt) {
+      padding: 0 23px;
+    }
+  }
+
+  /* NOTE: If there is no text, button is square, so padding is 0 */
+  &:not(:has(.ButtonText)) {
+    padding: 0;
+  }
+
+  &:where(.size-xs, .size-s) {
+    & :where(.ButtonText) {
+      padding: 0 3px;
+    }
+  }
+
+  &:where(.size-m, .size-l, .size-xl) {
+    & :where(.ButtonContent) {
+      gap: 2px;
+    }
+
+    & :where(.ButtonText) {
+      padding: 0 4px;
+    }
+  }
+
+  /* Color variants */
+  &:where(.style-primary) {
+    @each $colorVariant in $chromaticColorVariants {
+      &:where(.color-#{$colorVariant}) {
+        color: var(--bgtxt-absolute-white-dark);
+        background-color: var(--bgtxt-#{$colorVariant}-normal);
+
+        &#{$activeSelector} {
+          background-color: var(--bgtxt-#{$colorVariant}-dark);
+        }
+      }
+    }
+
+    &:where(.color-monochrome) {
+      color: var(--bgtxt-absolute-white-dark);
+      background-color: var(--bgtxt-absolute-black-lightest);
+
+      &#{$activeSelector} {
+        background-color: var(--bgtxt-absolute-black-lighter);
+      }
+    }
+
+    &:where(.color-monochrome-light) {
+      color: var(--bgtxt-absolute-white-dark);
+      background-color: var(--bg-black-darker);
+    }
+
+    &:where(.color-monochrome-dark) {
+      color: var(--txt-white-normal);
+      background-color: var(--bg-grey-darkest);
+    }
+  }
+
+  &:where(.style-secondary) {
+    @each $colorVariant in $chromaticColorVariants {
+      &:where(.color-#{$colorVariant}) {
+        color: var(--bgtxt-#{$colorVariant}-normal);
+        background-color: var(--bgtxt-#{$colorVariant}-lightest);
+
+        &#{$activeSelector} {
+          background-color: var(--bgtxt-#{$colorVariant}-lighter);
+        }
+      }
+    }
+
+    &:where(.color-monochrome) {
+      color: var(--txt-black-darkest);
+      background-color: var(--bg-black-lighter);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-light);
+      }
+    }
+
+    &:where(.color-monochrome-light) {
+      color: var(--txt-black-darker);
+      background-color: var(--bg-black-lighter);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-light);
+      }
+    }
+
+    &:where(.color-monochrome-dark) {
+      color: var(--txt-black-darkest);
+      background-color: var(--bg-black-lighter);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-light);
+      }
+    }
+  }
+
+  &:where(.style-tertiary) {
+    background-color: transparent;
+
+    @each $colorVariant in $chromaticColorVariants {
+      &:where(.color-#{$colorVariant}) {
+        color: var(--bgtxt-#{$colorVariant}-normal);
+
+        &#{$activeSelector} {
+          color: var(--bgtxt-#{$colorVariant}-dark);
+          background-color: var(--bgtxt-#{$colorVariant}-lightest);
+        }
+      }
+    }
+
+    &:where(.color-monochrome) {
+      color: var(--txt-black-darkest);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-lightest);
+      }
+    }
+
+    &:where(.color-monochrome-light) {
+      color: var(--txt-black-darker);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-lighter);
+      }
+    }
+
+    &:where(.color-monochrome-dark) {
+      color: var(--txt-black-darkest);
+
+      &#{$activeSelector} {
+        background-color: var(--bg-black-lighter);
+      }
+    }
+  }
+
+  &:where(.style-floating, .style-floating-alt) {
+    @each $colorVariant in $chromaticColorVariants {
+      &:where(.color-#{$colorVariant}) {
+        color: var(--bgtxt-absolute-white-dark);
+        background-color: var(--bgtxt-#{$colorVariant}-normal);
+
+        &#{$activeSelector} {
+          background-color: var(--bgtxt-#{$colorVariant}-dark);
+        }
+      }
+    }
+
+    &:where(.color-monochrome) {
+      color: var(--txt-black-darkest);
+      background-color: var(--bg-white-low);
+    }
+
+    &:where(.color-monochrome-light) {
+      color: var(--txt-black-darker);
+      background-color: var(--bg-white-high);
+    }
+
+    &:where(.color-monochrome-dark) {
+      color: var(--txt-black-darkest);
+      background-color: var(--bg-white-high);
+    }
+  }
+
+  /* Effect */
+  &:where(.style-primary, .style-secondary, .style-tertiary) {
+    &:where(.size-xs) {
+      border-radius: var(--radius-6);
+    }
+
+    &:where(.size-s, .size-m) {
+      border-radius: var(--radius-8);
+    }
+
+    &:where(.size-l) {
+      border-radius: var(--radius-12);
+    }
+
+    &:where(.size-xl) {
+      border-radius: var(--radius-16);
+    }
+  }
+
+  &:is(.style-floating, .style-floating-alt) {
+    box-shadow: var(--ev-2);
+
+    &:hover {
+      box-shadow: var(--ev-3);
+    }
+  }
+
+  &:where(.style-floating) {
+    overflow: hidden;
+    border-radius: 9999px;
+  }
+
+  &:where(.style-floating-alt) {
+    border-radius: var(--radius-8);
+  }
+
+  /* Hover styles for text, icon, and loader */
+  &:where(.color-monochrome):where(.style-secondary, .style-tertiary):where(:not(.active):not(:hover)) {
+    &:where(.size-s, .size-xs) .ButtonText {
+      color: var(--txt-black-darker);
+    }
+
+    &:where(.size-s, .size-xs) :is(.ButtonIcon, .ButtonLoader) {
+      color: var(--txt-black-dark);
+    }
+
+    &:where(.size-m, .size-l, .size-xl) :is(.ButtonIcon, .ButtonLoader) {
+      color: var(--txt-black-darker);
+    }
+  }
+
+  &:where(.color-monochrome-light):where(.style-secondary, .style-tertiary, .style-floating):where(:not(.active):not(:hover)) {
+    & :is(.ButtonIcon, .ButtonLoader) {
+      color: var(--txt-black-dark);
+    }
+  }
+
+  &:where(.color-monochrome-dark):where(.style-secondary, .style-tertiary, .style-floating):where(:not(.active):not(:hover)) {
+    & :is(.ButtonIcon, .ButtonLoader) {
+      color: var(--txt-black-darker);
+    }
+  }
+}
+
+.ButtonContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* NOTE: Using the visibility property to preserve content area while loading */
+  &:where(.loading) {
+    visibility: hidden;
+  }
+}
+
+.ButtonLoader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -44,7 +44,7 @@ import { Text } from '~/src/components/Text'
 
 import { Button } from './Button'
 import mdx from './Button.mdx'
-import type ButtonProps from './Button.types'
+import type { ButtonProps } from './Button.types'
 import {
   ButtonColorVariant,
   ButtonSize,