@channel.io/bezier-react 2.0.4 → 2.0.6

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

@@ -0,0 +1,71 @@
+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 IconButtonVariant = 'primary' | 'secondary' | 'tertiary'
+
+type IconButtonColor =
+  | 'blue'
+  | 'cobalt'
+  | 'red'
+  | 'orange'
+  | 'green'
+  | 'pink'
+  | 'purple'
+  | 'dark-grey'
+  | 'light-grey'
+  | 'white'
+
+type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+interface IconButtonOwnProps {
+  /**
+   * 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?: IconButtonVariant
+
+  /**
+   * Color of the button.
+   * @default 'blue'
+   */
+  color?: IconButtonColor
+
+  /**
+   * Icon in the button.
+   */
+  content: BezierIcon | ReactNode
+
+  /**
+   * Shape of the button.
+   * @default 'rectangle'
+   */
+  shape?: 'rectangle' | 'circle'
+}
+
+export interface IconButtonProps
+  extends Omit<BezierComponentProps<'button'>, 'color' | 'content'>,
+    PolymorphicProps,
+    SizeProps<IconButtonSize>,
+    DisableProps,
+    IconButtonOwnProps {}

package/src/components/AlphaIconButton/index.ts

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

package/src/components/Avatar/Avatar.tsx

@@ -122,7 +122,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     >
       <SmoothCornersBox
         ref={forwardedRef}
-        aria-label={name}
+        aria-description={name}
         className={classNames(
           styles.AvatarImage,
           Number(size) >= 72 && styles['big-size'],

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

@@ -2,7 +2,7 @@
 
 exports[`Avatar > Snapshot 1`] = `
 <div
-  aria-label="Name"
+  aria-description="Name"
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
@@ -12,7 +12,7 @@ exports[`Avatar > Snapshot 1`] = `
 
 exports[`Avatar > renders border style 1`] = `
 <div
-  aria-label="Name"
+  aria-description="Name"
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"

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

@@ -12,7 +12,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Christian Nwamba"
+      aria-description="Christian Nwamba"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -25,7 +25,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kola Tioluwani"
+      aria-description="Kola Tioluwani"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -38,7 +38,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kent Dodds"
+      aria-description="Kent Dodds"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -51,7 +51,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Ryan Florence"
+      aria-description="Ryan Florence"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -64,7 +64,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Dan Abrahmov"
+      aria-description="Dan Abrahmov"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -77,7 +77,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Prosper Otemuyiwa"
+      aria-description="Prosper Otemuyiwa"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -111,7 +111,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Christian Nwamba"
+      aria-description="Christian Nwamba"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -124,7 +124,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kola Tioluwani"
+      aria-description="Kola Tioluwani"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -137,7 +137,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kent Dodds"
+      aria-description="Kent Dodds"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -150,7 +150,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Ryan Florence"
+      aria-description="Ryan Florence"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -163,7 +163,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Dan Abrahmov"
+      aria-description="Dan Abrahmov"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -203,7 +203,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       data-testid="bezier-avatar-wrapper"
     >
       <div
-        aria-label="Prosper Otemuyiwa"
+        aria-description="Prosper Otemuyiwa"
         class="SmoothCornersBox AvatarImage"
         data-state="disabled"
         data-testid="bezier-avatar"

package/src/components/Emoji/Emoji.tsx

@@ -29,7 +29,7 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
     <div
       ref={forwardedRef}
       role="img"
-      aria-label={name}
+      aria-description={name}
       style={
         {
           '--b-emoji-background-image': cssUrl(imageUrl),

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

@@ -2,7 +2,7 @@
 
 exports[`Emoji Test > snapshot 1`] = `
 <div
-  aria-label="a"
+  aria-description="a"
   class="Emoji size-24"
   data-testid="bezier-emoji"
   role="img"

package/src/index.ts

@@ -10,6 +10,8 @@ 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'
 export * from '~/src/components/AutoFocus'