feat: add toggle button group small variant

Author: Lucas Araujo

src/design-system/toggle-button-group/toggle-button-group-item.component.tsx

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import { Text } from '../text';
 
 import * as cx from './toggle-button-group-item.css';
+import { useToggleButtonGroupContext } from './toggle-button-group-root.component';
 
 import type { ToggleGroupItemProps } from '@radix-ui/react-toggle-group';
 
@@ -20,20 +21,27 @@ export const Item = forwardRef<HTMLButtonElement, ToggleButtonGroupItemProps>(
   (
     { icon: IconComponent, children, ...props },
     forwardReference,
-  ): JSX.Element => (
-    <ToggleGroup.Item
-      className={cn(cx.root, cx.rootHandle)}
-      ref={forwardReference}
-      {...props}
-    >
-      {IconComponent && <IconComponent className={cx.icon} />}
-      {Boolean(children) && (
-        <Text.Button weight="$semibold" className={cx.label}>
-          {children}
-        </Text.Button>
-      )}
-    </ToggleGroup.Item>
-  ),
+  ): JSX.Element => {
+    const variant = useToggleButtonGroupContext();
+
+    return (
+      <ToggleGroup.Item
+        className={cn(cx.root, cx.rootHandle, {
+          [cx.smallVariant]: variant === 'small',
+          [cx.commonVariant]: variant !== 'small',
+        })}
+        ref={forwardReference}
+        {...props}
+      >
+        {IconComponent && <IconComponent className={cx.icon} />}
+        {Boolean(children) && (
+          <Text.Button weight="$semibold" className={cx.label}>
+            {children}
+          </Text.Button>
+        )}
+      </ToggleGroup.Item>
+    );
+  },
 );
 
 Item.displayName = 'Item';

src/design-system/toggle-button-group/toggle-button-group-item.css.ts

@@ -9,7 +9,6 @@ export const root = style([
     padding: '$8',
     color: '$toggle_button_group_item_label_color',
     backgroundColor: '$toggle_button_group_item_bgColor',
-    borderRadius: '$small',
     gap: '$6',
   }),
   {
@@ -71,3 +70,11 @@ export const icon = sx({
   width: '$24',
   height: '$24',
 });
+
+export const commonVariant = sx({
+  borderRadius: '$small',
+});
+
+export const smallVariant = sx({
+  borderRadius: '$tiny',
+});

src/design-system/toggle-button-group/toggle-button-group-root.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, createContext } from 'react';
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import classNames from 'classnames';
@@ -7,6 +7,10 @@ import * as cx from './toggle-button-group-root.css';
 
 import type { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
 
+type Variant = 'compact' | 'wide' | 'small';
+
+const ToggleButtonGroupContext = createContext<Variant>('wide');
+
 type ToggleGroupSingleOptionalProps = Pick<
   ToggleGroupSingleProps,
   'loop' | 'rovingFocus'
@@ -18,10 +22,16 @@ type ToggleGroupSingleRequiredProps = Required<
 
 export type ToggleButtonGroupRootProps = ToggleGroupSingleOptionalProps &
   ToggleGroupSingleRequiredProps & {
-    variant?: 'compact' | 'wide';
+    variant?: Variant;
     disabled?: boolean;
   };
 
+export const useToggleButtonGroupContext = (): Variant => {
+  const context = React.useContext(ToggleButtonGroupContext);
+
+  return context;
+};
+
 export const Root = ({
   children,
   onValueChange,
@@ -37,17 +47,21 @@ export const Root = ({
   );
 
   return (
-    <ToggleGroup.Root
-      className={classNames(cx.root, {
-        [cx.rootCompact]: variant === 'compact',
-        [cx.rootDisabled]: disabled,
-      })}
-      type="single"
-      onValueChange={handleValueChange}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </ToggleGroup.Root>
+    <ToggleButtonGroupContext.Provider value={variant}>
+      <ToggleGroup.Root
+        className={classNames(cx.root, {
+          [cx.rootCompact]: variant === 'compact',
+          [cx.rootSmall]: variant === 'small',
+          [cx.rootDisabled]: disabled,
+          [cx.defaultRadius]: variant !== 'small',
+        })}
+        type="single"
+        onValueChange={handleValueChange}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </ToggleGroup.Root>
+    </ToggleButtonGroupContext.Provider>
   );
 };

src/design-system/toggle-button-group/toggle-button-group-root.css.ts

@@ -3,7 +3,6 @@ import { style, sx } from '../../design-tokens';
 export const root = style([
   sx({
     backgroundColor: '$toggle_button_group_bgColor',
-    borderRadius: '$medium',
     padding: '$8',
     gap: '$8',
   }),
@@ -19,3 +18,18 @@ export const rootCompact = style({
 });
 
 export const rootDisabled = style({});
+
+export const defaultRadius = sx({
+  borderRadius: '$medium',
+});
+
+export const rootSmall = style([
+  sx({
+    height: '$40',
+    borderRadius: '$extraSmall',
+    boxSizing: 'border-box',
+  }),
+  {
+    padding: '5px',
+  },
+]);

src/design-system/toggle-button-group/toggle-button-group-root.stories.tsx

@@ -238,6 +238,24 @@ export const Overview = (): JSX.Element => {
               </Variants.Cell>
             </Variants.Row>
           </Variants.Table>
+          <Variants.Table headers={['(Small) Label']}>
+            <Variants.Row>
+              <Variants.Cell>
+                <ToggleButtonGroup.Root
+                  variant="small"
+                  value={activeVariants}
+                  onValueChange={handleVariantsValueChange}
+                >
+                  <ToggleButtonGroup.Item value={ToggleGroupItemType.grid}>
+                    Label
+                  </ToggleButtonGroup.Item>
+                  <ToggleButtonGroup.Item value={ToggleGroupItemType.list}>
+                    Label
+                  </ToggleButtonGroup.Item>
+                </ToggleButtonGroup.Root>
+              </Variants.Cell>
+            </Variants.Row>
+          </Variants.Table>
         </Section>
         <Divider my="$64" />
         <Section title="Main components">