@channel.io/bezier-react 2.0.2 → 2.0.4

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import {
+  type FloatingButtonProps,
+  type FloatingButtonSize,
+} from '~/src/components/AlphaFloatingButton/FloatingButton.types'
+import { BaseButton } from '~/src/components/BaseButton'
+import { Icon } from '~/src/components/Icon'
+import { Spinner } from '~/src/components/Spinner'
+import { Text } from '~/src/components/Text'
+
+import styles from './FloatingButton.module.scss'
+
+function getIconSize(size: FloatingButtonSize) {
+  return (
+    {
+      xs: 'xxs',
+      s: 'xs',
+      m: 's',
+      l: 's',
+      xl: 'm',
+    } as const
+  )[size]
+}
+
+function getSpinnerSize(size: FloatingButtonSize) {
+  return (
+    {
+      xs: 'xs',
+      s: 'xs',
+      m: 's',
+      l: 's',
+      xl: 's',
+    } as const
+  )[size]
+}
+
+function getTypography(size: FloatingButtonSize) {
+  return (
+    {
+      xs: '13',
+      s: '13',
+      m: '14',
+      l: '15',
+      xl: '18',
+    } as const
+  )[size]
+}
+
+export const FloatingButton = forwardRef<
+  HTMLButtonElement,
+  FloatingButtonProps
+>(function Button(
+  {
+    as = BaseButton,
+    text,
+    prefixIcon,
+    suffixIcon,
+    color = 'blue',
+    variant = 'primary',
+    size = 'm',
+    active,
+    className,
+    loading,
+    ...rest
+  },
+  forwardedRef
+) {
+  const Comp = as as typeof BaseButton
+
+  return (
+    <Comp
+      ref={forwardedRef}
+      className={classNames(
+        styles.FloatingButton,
+        styles[`size-${size}`],
+        styles[`variant-${variant}`],
+        styles[`color-${color}`],
+        active && styles.active,
+        className
+      )}
+      {...rest}
+    >
+      <div
+        className={classNames(styles.ButtonContent, loading && styles.loading)}
+      >
+        {prefixIcon && (
+          <Icon
+            size={getIconSize(size)}
+            source={prefixIcon}
+            className={styles.ButtonIcon}
+          />
+        )}
+
+        {/* TODO: use AlphaText later, add typo */}
+        <Text
+          className={styles.ButtonText}
+          typo={getTypography(size)}
+          bold
+        >
+          {text}
+        </Text>
+
+        {suffixIcon && (
+          <Icon
+            size={getIconSize(size)}
+            source={suffixIcon}
+            className={styles.ButtonIcon}
+          />
+        )}
+      </div>
+
+      {/* TODO: use AlphaSpinner */}
+      {loading && (
+        <div className={styles.ButtonLoader}>
+          <Spinner size={getSpinnerSize(size)} />
+        </div>
+      )}
+    </Comp>
+  )
+})

package/src/components/AlphaFloatingButton/FloatingButton.types.ts

@@ -0,0 +1,71 @@
+import { type BezierIcon } from '@channel.io/bezier-icons'
+
+import {
+  type BezierComponentProps,
+  type DisableProps,
+  type PolymorphicProps,
+  type SizeProps,
+} from '~/src/types/props'
+
+export type FloatingButtonVariant = 'primary' | 'secondary'
+
+export type FloatingButtonColor =
+  | 'blue'
+  | 'cobalt'
+  | 'red'
+  | 'orange'
+  | 'green'
+  | 'pink'
+  | 'purple'
+  | 'dark-grey'
+  | 'light-grey'
+
+export type FloatingButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+interface FloatingButtonOwnProps {
+  /**
+   * The text content in the button.
+   */
+  text: string
+
+  /**
+   * If `loading` is true, spinner will be shown, replacing the content.
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * If `active` is true, the button will be styled as if it is hovered.
+   * @default false
+   */
+  active?: boolean
+
+  /**
+   * Types of visual styles for button.
+   * @default 'primary'
+   */
+  variant?: FloatingButtonVariant
+
+  /**
+   * Color of the button.
+   * @default 'blue'
+   */
+  color?: FloatingButtonColor
+
+  /**
+   * Icon on the left.
+   */
+  prefixIcon?: BezierIcon
+
+  /**
+   * Icon on the right.
+   */
+  suffixIcon?: BezierIcon
+}
+
+export interface FloatingButtonProps
+  extends Omit<BezierComponentProps<'button'>, 'color'>,
+    PolymorphicProps,
+    SizeProps<FloatingButtonSize>,
+    DisableProps,
+    FloatingButtonOwnProps {}

package/src/components/AlphaFloatingButton/index.ts

@@ -0,0 +1,7 @@
+export { FloatingButton as AlphaFloatingButton } from './FloatingButton'
+export type {
+  FloatingButtonColor as AlphaFloatingButtonColor,
+  FloatingButtonProps as AlphaFloatingButtonProps,
+  FloatingButtonSize as AlphaFloatingButtonSize,
+  FloatingButtonVariant as AlphaFloatingButtonVariant,
+} from './FloatingButton.types'

package/src/components/BaseButton/BaseButton.tsx

@@ -10,12 +10,15 @@ import styles from './BaseButton.module.scss'
  * `BaseButton` is a reset-style button component with a focus ring, intended for internal use only.
  */
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
-  function BaseButton({ className, children, ...rest }, forwardedRef) {
+  function BaseButton(
+    { className, children, type = 'button', ...rest },
+    forwardedRef
+  ) {
     return (
       <button
         className={classNames(styles.BaseButton, className)}
         ref={forwardedRef}
-        type="button"
+        type={type}
         {...rest}
       >
         {children}

package/src/components/Button/Button.module.scss

@@ -244,6 +244,10 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     border-radius: var(--radius-8);
   }
 
+  &:where(.style-primary.color-blue:focus-visible) {
+    outline: 3px solid var(--bgtxt-blue-light);
+  }
+
   /* Hover styles for text, icon, and loader */
   &:where(.color-monochrome):where(.style-secondary, .style-tertiary):where(
       :not(.active, :hover)

package/src/components/Button/Button.stories.tsx

@@ -76,7 +76,7 @@ export const WithCustomComponent: StoryObj<ButtonProps> = {
     leftContent: (
       <Avatar
         name="test"
-        avatarUrl="https://source.unsplash.com/random"
+        avatarUrl="https://cf.channel.io/thumb/200x200/pub-file/1/65fc43ee585607b276f6/tmp-3329819395"
       />
     ),
     size: 'm',

package/src/components/Button/Button.tsx

@@ -91,7 +91,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       as = BaseButton,
       className,
-      type = 'button',
       text,
       disabled = false,
       loading = false,
@@ -119,8 +118,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <Comp
-        // eslint-disable-next-line react/button-has-type
-        type={type}
         ref={forwardedRef}
         className={classNames(
           styles.Button,

package/src/components/LegacyStack/LegacyStack.stories.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
-import { range } from '~/src/utils/number'
-
 import { Button } from '~/src/components/Button'
 import { Text } from '~/src/components/Text'
 
@@ -65,22 +63,20 @@ const meta: Meta<
 }
 export default meta
 
-const randomSize = (): number => Math.floor(Math.random() * 240 + 120)
-
 const Item = ({
+  size,
   fixedSize,
   direction,
 }: {
+  size: number
   fixedSize: boolean
   direction: 'horizontal' | 'vertical'
 }) => {
-  const [alignSize] = useState(() => randomSize())
-
   return (
     <div
       style={{
-        width: fixedSize && direction === 'vertical' ? alignSize : '100%',
-        height: fixedSize && direction === 'horizontal' ? alignSize : '100%',
+        width: fixedSize && direction === 'vertical' ? size : '100%',
+        height: fixedSize && direction === 'horizontal' ? size : '100%',
         backgroundColor: 'var(--bg-black-light)',
         borderRadius: '4px',
         boxShadow: 'inset 0 0 1px #c0c0c0',
@@ -142,7 +138,7 @@ const Template: StoryFn<StackPreviewProps> = ({
         align={align}
         spacing={spacing}
       >
-        {range(4).map((i) => (
+        {[200, 400, 300, 100].map((size, i) => (
           <LegacyStackItem
             key={`item-${i}`}
             justify={itemJustifies[i]}
@@ -157,6 +153,7 @@ const Template: StoryFn<StackPreviewProps> = ({
             <Item
               direction={direction}
               fixedSize={(align ?? itemAligns[i]) !== 'stretch'}
+              size={size}
             />
           </LegacyStackItem>
         ))}

package/src/index.ts

@@ -5,7 +5,11 @@ import '~/src/styles/index.scss'
 export { tokens } from '@channel.io/bezier-tokens'
 
 /* ------------------------------- COMPONENTS ------------------------------- */
+export * from '~/src/components/AlphaAvatar'
+export * from '~/src/components/AlphaAvatarGroup'
+export * from '~/src/components/AlphaButton'
 export * from '~/src/components/AlphaDialogPrimitive'
+export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaTooltipPrimitive'
 export * from '~/src/components/AppProvider'
 export * from '~/src/components/AutoFocus'