@channel.io/bezier-react 2.0.1 → 2.0.3

package/src/components/AlphaAvatarGroup/AvatarGroup.types.ts

@@ -0,0 +1,43 @@
+import type {
+  BezierComponentProps,
+  ChildrenProps,
+  SizeProps,
+} from '~/src/types/props'
+
+import {
+  type AlphaAvatarProps,
+  type AlphaAvatarSize,
+} from '~/src/components/AlphaAvatar'
+
+type AvatarGroupEllipsisType = 'icon' | 'count'
+
+interface AvatarGroupOwnProps {
+  /**
+   * Maximum number of avatars to display.
+   * If the number of avatars exceeds this number, ellipsis will be displayed.
+   * @default 5
+   */
+  max: number
+
+  /**
+   * Spacing between the avatars.
+   * Spacing could be negative, which will make the avatars overlap each other.
+   * @default 4
+   */
+  spacing?: number
+
+  /**
+   * Controls how the ellipsis is displayed.
+   * @default 'icon'
+   */
+  ellipsisType?: AvatarGroupEllipsisType
+}
+
+export interface AvatarGroupContextValue
+  extends Pick<AlphaAvatarProps, 'size'> {}
+
+export interface AvatarGroupProps
+  extends BezierComponentProps<'div'>,
+    ChildrenProps,
+    SizeProps<AlphaAvatarSize>,
+    AvatarGroupOwnProps {}

package/src/components/AlphaAvatarGroup/__mocks__/avatarList.ts

@@ -0,0 +1,39 @@
+const MOCK_AVATAR_LIST = [
+  {
+    id: 1,
+    avatarUrl: 'https://bit.ly/code-beast',
+    name: 'Christian Nwamba',
+  },
+  {
+    id: 2,
+    avatarUrl: 'https://bit.ly/tioluwani-kolawole',
+    name: 'Kola Tioluwani',
+  },
+  {
+    id: 3,
+    avatarUrl: 'https://bit.ly/kent-c-dodds',
+    name: 'Kent Dodds',
+  },
+  {
+    id: 4,
+    avatarUrl: 'https://bit.ly/ryan-florence',
+    name: 'Ryan Florence',
+  },
+  {
+    id: 5,
+    avatarUrl: 'https://bit.ly/dan-abramov',
+    name: 'Dan Abrahmov',
+  },
+  {
+    id: 6,
+    avatarUrl: 'https://bit.ly/prosper-baba',
+    name: 'Prosper Otemuyiwa',
+  },
+  {
+    id: 7,
+    avatarUrl: 'https://bit.ly/sage-adebayo',
+    name: 'Segun Adebayo',
+  },
+]
+
+export default MOCK_AVATAR_LIST

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

@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
+<div
+  class="AvatarGroup size-24"
+  role="group"
+  style="--b-avatar-group-spacing: 4px;"
+>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Christian Nwamba"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kola Tioluwani"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kent Dodds"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Ryan Florence"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Dan Abrahmov"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Prosper Otemuyiwa"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="AvatarEllipsisCountWrapper"
+    style="--b-avatar-group-ellipsis-ml: 4px;"
+  >
+    <span
+      class="Text typo-13 margin AvatarEllipsisCount"
+      data-testid="bezier-text"
+      style="--b-text-color: var(--txt-black-dark);"
+    >
+      +1
+    </span>
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
+<div
+  class="AvatarGroup size-24"
+  role="group"
+  style="--b-avatar-group-spacing: 4px;"
+>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Christian Nwamba"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kola Tioluwani"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kent Dodds"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Ryan Florence"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Dan Abrahmov"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="AvatarEllipsisIconWrapper"
+    data-testid="bezier-avatar-group-ellipsis-icon"
+  >
+    <div
+      class="SmoothCornersBox AvatarEllipsisIcon"
+      data-state="disabled"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
+    >
+      <svg
+        class="Icon margin"
+        data-testid="bezier-icon"
+        fill="none"
+        height="16"
+        style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
+        viewBox="0 0 24 24"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M2.5 12a2.257 2.257 0 0 0 2.25 2.25A2.257 2.257 0 0 0 7 12a2.257 2.257 0 0 0-2.25-2.25A2.257 2.257 0 0 0 2.5 12m9.5 2.25A2.257 2.257 0 0 1 9.75 12 2.257 2.257 0 0 1 12 9.75 2.257 2.257 0 0 1 14.25 12 2.257 2.257 0 0 1 12 14.25m7.25 0A2.257 2.257 0 0 1 17 12a2.257 2.257 0 0 1 2.25-2.25A2.257 2.257 0 0 1 21.5 12a2.257 2.257 0 0 1-2.25 2.25"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="Avatar size-24"
+      data-disabled="false"
+      data-testid="bezier-avatar-wrapper"
+    >
+      <div
+        aria-label="Prosper Otemuyiwa"
+        class="SmoothCornersBox AvatarImage"
+        data-state="disabled"
+        data-testid="bezier-avatar"
+        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/AlphaAvatarGroup/index.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup as AlphaAvatarGroup } from './AvatarGroup'
+export { type AvatarGroupProps as AlphaAvatarGroupProps } from './AvatarGroup.types'

package/src/components/FormHelperText/FormHelperText.tsx

@@ -22,7 +22,7 @@ export const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'
 
 const BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(
   function BaseHelperText(props, forwardedRef) {
-    const { type, typo = '13', children, ...rest } = props
+    const { type, typo = '13', children, className, ...rest } = props
 
     const contextValue = useFormControlContext()
     const getProps =
@@ -52,7 +52,11 @@ const BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(
       <Text
         ref={mergedRef}
         as="p"
-        className={classNames(styles.FormHelperText, formControlClassName)}
+        className={classNames(
+          styles.FormHelperText,
+          formControlClassName,
+          className
+        )}
         typo={typo}
         align="left"
         {...ownProps}

package/src/components/FormLabel/FormLabel.tsx

@@ -35,6 +35,7 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
       help,
       bold = true,
       color = 'txt-black-darkest',
+      className,
       children,
       ...rest
     } = props
@@ -67,7 +68,8 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
       <Text
         className={classNames(
           styles.LabelText,
-          !HelpComponent && formControlClassName
+          !HelpComponent && formControlClassName,
+          className
         )}
         ref={forwardedRef}
         as="label"
@@ -91,7 +93,7 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
       <LegacyHStack
         align="center"
         spacing={6}
-        className={HelpComponent && formControlClassName}
+        className={formControlClassName}
       >
         <LegacyStackItem
           shrink

package/src/components/Modal/Modal.tsx

@@ -407,7 +407,11 @@ export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
  * It **must** be placed outside of the `ModalContent`.
  */
 export function ModalTrigger({ children }: ModalTriggerProps) {
-  return <AlphaDialogPrimitiveTrigger asChild>{children}</AlphaDialogPrimitiveTrigger>
+  return (
+    <AlphaDialogPrimitiveTrigger asChild>
+      {children}
+    </AlphaDialogPrimitiveTrigger>
+  )
 }
 
 /**
@@ -415,5 +419,7 @@ export function ModalTrigger({ children }: ModalTriggerProps) {
  * It passes the handler that closes the modal to the children.
  */
 export function ModalClose({ children }: ModalCloseProps) {
-  return <AlphaDialogPrimitiveClose asChild>{children}</AlphaDialogPrimitiveClose>
+  return (
+    <AlphaDialogPrimitiveClose asChild>{children}</AlphaDialogPrimitiveClose>
+  )
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -215,7 +215,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           disableHoverableContent={!allowHover}
           onOpenChange={onOpenChange}
         >
-          <AlphaTooltipPrimitiveTrigger asChild>{children}</AlphaTooltipPrimitiveTrigger>
+          <AlphaTooltipPrimitiveTrigger asChild>
+            {children}
+          </AlphaTooltipPrimitiveTrigger>
 
           <AlphaTooltipPrimitivePortal container={container}>
             <InvertedThemeProvider>

package/src/index.ts

@@ -5,6 +5,8 @@ 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/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaTooltipPrimitive'
 export * from '~/src/components/AppProvider'

package/src/stories/alpha-color.mdx

@@ -23,7 +23,7 @@ export const Color = ({ name, value, reference }) => {
       <VStack
         style={{
           flex: 1,
-          color: 'var(--alpha-fg-black-darkest)',
+          color: 'var(--alpha-color-fg-black-darkest)',
         }}
         spacing={4}
         justify="center"
@@ -36,7 +36,7 @@ export const Color = ({ name, value, reference }) => {
             gap: 3,
             fontSize: 9,
             lineHeight: 1,
-            color: 'var(--alpha-fg-black-dark)',
+            color: 'var(--alpha-color-fg-black-dark)',
           }}
         >
           {reference ? 'var' : ''}
@@ -46,9 +46,9 @@ export const Color = ({ name, value, reference }) => {
               fontSize: 'inherit',
               lineHeight: 'inherit',
               padding: '1px 2px',
-              backgroundColor: 'var(--alpha-bg-grey-lighter)',
+              backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
               borderRadius: 3,
-              border: '1px solid var(--alpha-bg-black-lightest)',
+              border: '1px solid var(--alpha-color-bg-black-lightest)',
             }}
           >
             {reference ? reference : value}
@@ -62,7 +62,7 @@ export const Color = ({ name, value, reference }) => {
 export const Primary = () => (
   <HStack>
 
-    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={20}>
+    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
       {Object.entries(tokens.global.color).map(([key, { value, ref }]) => (
         <Color
           key={key}
@@ -74,7 +74,7 @@ export const Primary = () => (
     </VStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
         {Object.entries(tokens.lightTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}
@@ -87,7 +87,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
         {Object.entries(tokens.darkTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}

package/src/stories/alpha-shadow.mdx

@@ -16,14 +16,14 @@ export const Shadow = ({ name, value, reference }) => {
         style={{
           flex: 1,
           boxShadow: value,
-          backgroundColor: 'var(--alpha-surface-normal)',
+          backgroundColor: 'var(--alpha-color-surface-normal)',
           height: 60,
         }}
       />
       <VStack
         style={{
           flex: 1,
-          color: 'var(--alpha-fg-black-darkest)',
+          color: 'var(--alpha-color-fg-black-darkest)',
         }}
         spacing={4}
         justify="center"
@@ -36,7 +36,7 @@ export const Shadow = ({ name, value, reference }) => {
             gap: 3,
             fontSize: 9,
             lineHeight: 1,
-            color: 'var(--alpha-fg-black-dark)',
+            color: 'var(--alpha-color-fg-black-dark)',
           }}
         >
           {reference ? 'var' : ''}
@@ -46,9 +46,9 @@ export const Shadow = ({ name, value, reference }) => {
               fontSize: 'inherit',
               lineHeight: 'inherit',
               padding: '1px 2px',
-              backgroundColor: 'var(--alpha-bg-grey-lighter)',
+              backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
               borderRadius: 3,
-              border: '1px solid var(--alpha-bg-black-lightest)',
+              border: '1px solid var(--alpha-color-bg-black-lightest)',
             }}
           >
             {reference ? reference : value}
@@ -63,7 +63,7 @@ export const Primary = () => (
   <HStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}>
         <VStack spacing={40}>
           {Object.entries(tokens.lightTheme.shadow).map(([key, { value, ref }]) => (
             <Shadow
@@ -78,7 +78,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}>
         <VStack spacing={40}>
           {Object.entries(tokens.darkTheme.shadow).map(([key, { value, ref }]) => (
             <Shadow