@channel.io/bezier-react 2.0.5 → 2.0.6

package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -0,0 +1,91 @@
+import React, { forwardRef } from 'react'
+
+import { isBezierIcon } from '@channel.io/bezier-icons'
+import classNames from 'classnames'
+
+import { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'
+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 './FloatingIconButton.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 FloatingIconButton = forwardRef<
+  HTMLButtonElement,
+  AlphaFloatingIconButtonProps
+>(function FloatingIconButton(
+  {
+    as = BaseButton,
+    color = 'blue',
+    variant = 'primary',
+    size = 'm',
+    active,
+    content,
+    loading,
+    className,
+    ...rest
+  },
+  forwardedRef
+) {
+  const Comp = as as typeof BaseButton
+
+  return (
+    <Comp
+      ref={forwardedRef}
+      className={classNames(
+        styles.FloatingIconButton,
+        styles[`size-${size}`],
+        styles[`variant-${variant}`],
+        styles[`color-${color}`],
+        active && styles.active,
+        className
+      )}
+      {...rest}
+    >
+      <div
+        className={classNames(styles.ButtonContent, loading && styles.loading)}
+      >
+        {isBezierIcon(content) ? (
+          <Icon
+            size={getIconSize(size)}
+            source={content}
+          />
+        ) : (
+          content
+        )}
+      </div>
+
+      {/* TODO: use AlphaSpinner */}
+      {loading && (
+        <div className={styles.ButtonLoader}>
+          <Spinner size={getSpinnerSize(size)} />
+        </div>
+      )}
+    </Comp>
+  )
+})

package/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react'
+
+import { type BezierIcon } from '@channel.io/bezier-icons'
+
+import {
+  type BezierComponentProps,
+  type DisableProps,
+  type PolymorphicProps,
+  type SizeProps,
+} from '~/src/types/props'
+
+type FloatingIconButtonVariant = 'primary' | 'secondary'
+
+type FloatingIconButtonColor =
+  | 'blue'
+  | 'cobalt'
+  | 'red'
+  | 'orange'
+  | 'green'
+  | 'pink'
+  | 'purple'
+  | 'dark-grey'
+  | 'light-grey'
+
+type FloatingIconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+interface FloatingIconButtonOwnProps {
+  /**
+   * 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.
+   * You may want to use this prop for a button which opens dropdown, etc.
+   * @default false
+   */
+  active?: boolean
+
+  /**
+   * Types of visual styles for button.
+   * @default 'primary'
+   */
+  variant?: FloatingIconButtonVariant
+
+  /**
+   * Color of the button.
+   * @default 'blue'
+   */
+  color?: FloatingIconButtonColor
+
+  /**
+   * Icon in the button.
+   */
+  content: BezierIcon | ReactNode
+}
+
+export interface FloatingIconButtonProps
+  extends Omit<BezierComponentProps<'button'>, 'color' | 'content'>,
+    PolymorphicProps,
+    SizeProps<FloatingIconButtonSize>,
+    DisableProps,
+    FloatingIconButtonOwnProps {}

package/src/components/AlphaFloatingIconButton/index.ts

@@ -0,0 +1,2 @@
+export { FloatingIconButton as AlphaFloatingIconButton } from './FloatingIconButton'
+export type { FloatingIconButtonProps as AlphaFloatingIconButtonProps } from './FloatingIconButton.types'

package/src/components/AlphaIconButton/AlphaIconButton.stories.tsx

@@ -19,7 +19,7 @@ export const Playground: StoryObj<AlphaIconButtonProps> = {
     disabled: false,
     active: false,
     loading: false,
-    icon: PlusIcon,
+    content: PlusIcon,
     shape: 'rectangle',
     'aria-label': 'invite',
     size: 'm',

package/src/components/AlphaIconButton/IconButton.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'
@@ -41,10 +42,9 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
       color = 'blue',
       variant = 'primary',
       size = 'm',
-      disabled,
       active,
       shape = 'rectangle',
-      icon,
+      content,
       loading,
       className,
       ...rest
@@ -73,12 +73,14 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
             loading && styles.loading
           )}
         >
-          {icon && (
+          {isBezierIcon(content) ? (
             <Icon
               size={getIconSize(size)}
-              source={icon}
+              source={content}
               className={styles.ButtonIcon}
             />
+          ) : (
+            content
           )}
         </div>
 

package/src/components/AlphaIconButton/IconButton.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import {
@@ -52,7 +54,7 @@ interface IconButtonOwnProps {
   /**
    * Icon in the button.
    */
-  icon?: BezierIcon
+  content: BezierIcon | ReactNode
 
   /**
    * Shape of the button.
@@ -61,8 +63,8 @@ interface IconButtonOwnProps {
   shape?: 'rectangle' | 'circle'
 }
 
-export interface ButtonProps
-  extends Omit<BezierComponentProps<'button'>, 'color'>,
+export interface IconButtonProps
+  extends Omit<BezierComponentProps<'button'>, 'color' | 'content'>,
     PolymorphicProps,
     SizeProps<IconButtonSize>,
     DisableProps,

package/src/components/AlphaIconButton/index.ts

@@ -1,2 +1,2 @@
 export { IconButton as AlphaIconButton } from './IconButton'
-export type { ButtonProps as AlphaIconButtonProps } from './IconButton.types'
+export type { IconButtonProps as AlphaIconButtonProps } from './IconButton.types'

package/src/index.ts

@@ -10,6 +10,7 @@ export * from '~/src/components/AlphaAvatarGroup'
 export * from '~/src/components/AlphaButton'
 export * from '~/src/components/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaFloatingButton'
+export * from '~/src/components/AlphaFloatingIconButton'
 export * from '~/src/components/AlphaIconButton'
 export * from '~/src/components/AlphaTooltipPrimitive'
 export * from '~/src/components/AppProvider'