chore: support render function, document it, remove now unused POC context

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

docs-ui/src/content/toggle-button-group.props.ts

@@ -30,6 +30,7 @@ export const toggleButtonGroupUsageSnippet = `import { ToggleButtonGroup, Toggle
 <ToggleButtonGroup selectionMode="single">
   <ToggleButton id="dogs">Dogs</ToggleButton>
   <ToggleButton id="cats">Cats</ToggleButton>
+  <ToggleButton id="birds">Birds</ToggleButton>
 </ToggleButtonGroup>`;
 
 export const toggleButtonGroupSingleSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['dogs']}>
@@ -45,9 +46,9 @@ export const toggleButtonGroupMultipleSnippet = `<ToggleButtonGroup selectionMod
 </ToggleButtonGroup>`;
 
 export const toggleButtonGroupVerticalSnippet = `<ToggleButtonGroup selectionMode="single" orientation="vertical">
-  <ToggleButton id="low">Low</ToggleButton>
-  <ToggleButton id="medium">Medium</ToggleButton>
-  <ToggleButton id="high">High</ToggleButton>
+  <ToggleButton id="morning">Morning</ToggleButton>
+  <ToggleButton id="afternoon">Afternoon</ToggleButton>
+  <ToggleButton id="evening">Evening</ToggleButton>
 </ToggleButtonGroup>`;
 
 export const toggleButtonGroupDisabledSnippet = `<ToggleButtonGroup selectionMode="single" isDisabled>
@@ -62,16 +63,29 @@ export const toggleButtonGroupDisallowEmptySnippet = `<ToggleButtonGroup selecti
   <ToggleButton id="three">Three</ToggleButton>
 </ToggleButtonGroup>`;
 
-export const toggleButtonGroupIconsSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['cloud']}>
-  <ToggleButton id="cloud" iconStart="cloud">Cloud</ToggleButton>
-  <ToggleButton id="starred" iconStart="starFill">Starred</ToggleButton>
-  <ToggleButton id="next" iconEnd="arrowRight">Next</ToggleButton>
+export const toggleButtonGroupIconsSnippet = `import { RiCloudLine, RiStarFill, RiStarLine, RiArrowRightSLine } from '@remixicon/react';
+
+<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
+  <ToggleButton id="cloud" aria-label="Cloud" iconStart={<RiCloudLine />} />
+  <ToggleButton
+    id="starred"
+    aria-label="Starred"
+    iconStart={<RiStarFill />}
+  />
+  <ToggleButton id="star" iconStart={<RiStarLine />}>
+    Star
+  </ToggleButton>
+  <ToggleButton id="next" iconEnd={<RiArrowRightSLine />}>
+    Next
+  </ToggleButton>
 </ToggleButtonGroup>`;
 
-export const toggleButtonGroupIconsOnlySnippet = `<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
-  <ToggleButton id="cloud" aria-label="Cloud" iconStart="cloud" />
-  <ToggleButton id="star" aria-label="Star" iconStart="starLine" />
-  <ToggleButton id="next" aria-label="Next" iconEnd="arrowRight" />
+export const toggleButtonGroupIconsOnlySnippet = `import { RiCloudLine, RiStarLine, RiArrowRightSLine } from '@remixicon/react';
+
+<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
+  <ToggleButton id="cloud" iconStart={<RiCloudLine />} />
+  <ToggleButton id="star" iconStart={<RiStarLine />} />
+  <ToggleButton id="next" iconEnd={<RiArrowRightSLine />} />
 </ToggleButtonGroup>`;
 
 export const toggleButtonGroupSurfacesSnippet = `<Flex direction="column" gap="4">

docs-ui/src/content/toggle-button.mdx

@@ -10,6 +10,7 @@ import {
   toggleButtonIconsSnippet,
   toggleButtonDisabledSnippet,
   toggleButtonControlledSnippet,
+  toggleButtonFunctionChildrenSnippet,
 } from './toggle-button.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -88,6 +89,18 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   code={toggleButtonControlledSnippet}
 />
 
+### Dynamic Content with Function Children
+
+The `children` prop can be a function that receives render props, allowing you to dynamically customize the button content based on component state (such as `isSelected`, `isDisabled`, `isHovered`, etc.).
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="DynamicContent" />}
+  code={toggleButtonFunctionChildrenSnippet}
+/>
+
 <Theming definition={ToggleButtonDefinition} />
 
 <ChangelogComponent component="toggle-button" />

docs-ui/src/content/toggle-button.props.ts

@@ -23,7 +23,12 @@ export const toggleButtonPropDefs: Record<string, PropDef> = {
   defaultSelected: { type: 'boolean' },
   onChange: { type: 'enum', values: ['(isSelected: boolean) => void'] },
   isDisabled: { type: 'boolean', default: 'false' },
-  children: { type: 'enum', values: ['ReactNode'] },
+  children: {
+    type: 'enum',
+    values: ['ReactNode', '(values: ToggleButtonRenderProps) => ReactNode'],
+    description:
+      'The children of the component. A function may be provided to alter the children based on component state (such as `isSelected`, `isDisabled`, `isHovered`, etc.).',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
@@ -70,9 +75,12 @@ export const toggleButtonSizesSnippet = `<Flex align="center">
   <ToggleButton size="medium">Medium</ToggleButton>
 </Flex>`;
 
-export const toggleButtonIconsSnippet = `<Flex align="center">
-  <ToggleButton iconStart="star">Favorite</ToggleButton>
-  <ToggleButton iconEnd="check">Confirm</ToggleButton>
+export const toggleButtonIconsSnippet = `import { RiStarLine, RiStarFill, RiCheckLine } from '@remixicon/react';
+
+<Flex align="center">
+  <ToggleButton iconStart={<RiStarLine />}>Favorite</ToggleButton>
+  <ToggleButton iconStart={<RiStarFill />} defaultSelected>Starred</ToggleButton>
+  <ToggleButton iconEnd={<RiCheckLine />}>Confirm</ToggleButton>
 </Flex>`;
 
 export const toggleButtonDisabledSnippet = `<Flex align="center">
@@ -80,8 +88,108 @@ export const toggleButtonDisabledSnippet = `<Flex align="center">
   <ToggleButton defaultSelected isDisabled>Selected</ToggleButton>
 </Flex>`;
 
-export const toggleButtonControlledSnippet = `const [selected, setSelected] = useState(false);
+export const toggleButtonControlledSnippet = `import { useState } from 'react';
+import { RiStarFill, RiStarLine } from '@remixicon/react';
 
-<ToggleButton isSelected={selected} onChange={setSelected}>
-  {selected ? 'On' : 'Off'}
+const [selected, setSelected] = useState(false);
+
+<ToggleButton
+  isSelected={selected}
+  onChange={setSelected}
+  iconStart={selected ? <RiStarFill /> : <RiStarLine />}
+>
+  {selected ? 'Starred' : 'Not starred'}
 </ToggleButton>`;
+
+export const toggleButtonFunctionChildrenSnippet = `import { RiStarFill, RiStarLine } from '@remixicon/react';
+<Flex direction="column" gap="4">
+  <Flex direction="column" gap="2">
+    <Text weight="bold">Example 1: Selection State</Text>
+    <Flex align="center" gap="2">
+      <ToggleButton defaultSelected>
+        {({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
+      </ToggleButton>
+      <ToggleButton>
+        {({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
+      </ToggleButton>
+    </Flex>
+  </Flex>
+
+  <Flex direction="column" gap="2">
+    <Text weight="bold">Example 2: Multiple States</Text>
+    <Flex align="center" gap="2">
+      <ToggleButton defaultSelected>
+        {({ isSelected, isHovered }) => {
+          const states = [];
+          if (isSelected) states.push('on');
+          else states.push('off');
+          if (isHovered) states.push('hovered');
+          return \`Email (\${states.join(', ')})\`;
+        }}
+      </ToggleButton>
+      <ToggleButton>
+        {({ isSelected, isHovered }) => {
+          const states = [];
+          if (isSelected) states.push('on');
+          else states.push('off');
+          if (isHovered) states.push('hovered');
+          return \`Push (\${states.join(', ')})\`;
+        }}
+      </ToggleButton>
+    </Flex>
+  </Flex>
+
+  <Flex direction="column" gap="2">
+    <Text weight="bold">Example 3: Conditional Icons</Text>
+    <Flex align="center" gap="2">
+      <ToggleButton>
+        {({ isSelected }) => (
+          <>
+            {isSelected ? <RiStarFill /> : <RiStarLine />}
+            <span>{isSelected ? 'Starred' : 'Star'}</span>
+          </>
+        )}
+      </ToggleButton>
+    </Flex>
+  </Flex>
+
+  <Flex direction="column" gap="2">
+    <Text weight="bold">Example 4: Status Indicators</Text>
+    <Flex align="center" gap="2">
+      <ToggleButton defaultSelected>
+        {({ isSelected }) => (
+          <Flex align="center" gap="2">
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                backgroundColor: isSelected
+                  ? 'var(--bui-fg-success)'
+                  : 'var(--bui-fg-secondary)',
+              }}
+            />
+            <span>Active</span>
+          </Flex>
+        )}
+      </ToggleButton>
+      <ToggleButton>
+        {({ isSelected }) => (
+          <Flex align="center" gap="2">
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                backgroundColor: isSelected
+                  ? 'var(--bui-fg-danger)'
+                  : 'var(--bui-fg-secondary)',
+              }}
+            />
+            <span>Inactive</span>
+          </Flex>
+        )}
+      </ToggleButton>
+    </Flex>
+  </Flex>
+</Flex>`;

packages/ui/report.api.md

@@ -1856,8 +1856,6 @@ export interface ToggleButtonGroupProps
 
 // @public
 export interface ToggleButtonProps extends ToggleButtonProps_2 {
-  // (undocumented)
-  children?: ReactNode;
   // (undocumented)
   iconEnd?: ReactElement;
   // (undocumented)

packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -16,13 +16,11 @@
 
 import preview from '../../../../../.storybook/preview';
 import { ToggleButton } from './ToggleButton';
-import { ToggleButtonGroup } from '../ToggleButtonGroup/ToggleButtonGroup';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { useState } from 'react';
 import {
   RiCheckLine,
-  RiHeartLine,
   RiStarFill,
   RiStarLine,
   RiCloudLine,
@@ -150,20 +148,6 @@ export const IconsAndText = meta.story({
   ),
 });
 
-export const MixedIcons = meta.story({
-  render: () => (
-    <ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
-      <ToggleButton id="cloud" iconStart={<RiCloudLine />}>
-        Cloud
-      </ToggleButton>
-      <ToggleButton id="star" iconStart={<RiStarLine />} />
-      <ToggleButton id="arrow" iconEnd={<RiArrowRightSLine />}>
-        Next
-      </ToggleButton>
-    </ToggleButtonGroup>
-  ),
-});
-
 export const Disabled = meta.story({
   render: () => (
     <Flex align="center">
@@ -194,52 +178,128 @@ export const Controlled = meta.story({
   },
 });
 
-export const GroupSingle = meta.story({
-  render: () => (
-    <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['apples']}>
-      <ToggleButton id="apples">Apples</ToggleButton>
-      <ToggleButton id="oranges">Oranges</ToggleButton>
-      <ToggleButton id="bananas">Bananas</ToggleButton>
-    </ToggleButtonGroup>
-  ),
+export const FunctionChildren = meta.story({
+  render: () => {
+    const [disabled, setDisabled] = useState(false);
+    return (
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="2">
+          <ToggleButton isDisabled={disabled}>
+            {({ isDisabled, isSelected }) =>
+              isDisabled
+                ? `Disabled ${isSelected ? '(Selected)' : '(Unselected)'}`
+                : `Enabled ${isSelected ? '(Selected)' : '(Unselected)'}`
+            }
+          </ToggleButton>
+          <ToggleButton
+            aria-label="Toggle disabled state"
+            onChange={() => setDisabled(!disabled)}
+          >
+            {disabled ? 'Enable' : 'Disable'}
+          </ToggleButton>
+        </Flex>
+        <Text>
+          Toggle the button to change the disabled state and see text update
+        </Text>
+      </Flex>
+    );
+  },
 });
 
-export const GroupMultiple = meta.story({
-  render: () => (
-    <ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['dogs']}>
-      <ToggleButton id="dogs">Dogs</ToggleButton>
-      <ToggleButton id="cats">Cats</ToggleButton>
-      <ToggleButton id="rabbits">Rabbits</ToggleButton>
-    </ToggleButtonGroup>
-  ),
-});
+export const DynamicContent = meta.story({
+  render: () => {
+    return (
+      <Flex direction="column" gap="4">
+        <Flex direction="column" gap="2">
+          <Text weight="bold">Example 1: Selection State</Text>
+          <Flex align="center" gap="2">
+            <ToggleButton defaultSelected>
+              {({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
+            </ToggleButton>
+            <ToggleButton>
+              {({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
+            </ToggleButton>
+          </Flex>
+        </Flex>
 
-export const GroupWithIcons = meta.story({
-  render: () => (
-    <ToggleButtonGroup
-      selectionMode="multiple"
-      defaultSelectedKeys={['chill']}
-      orientation="horizontal"
-    >
-      <ToggleButton id="chill" iconStart={<RiHeartLine />}>
-        Chill
-      </ToggleButton>
-      <ToggleButton id="focus" iconStart={<RiCheckLine />}>
-        Focus
-      </ToggleButton>
-      <ToggleButton id="party" iconStart={<RiStarLine />}>
-        Party
-      </ToggleButton>
-    </ToggleButtonGroup>
-  ),
-});
+        <Flex direction="column" gap="2">
+          <Text weight="bold">Example 2: Multiple States</Text>
+          <Flex align="center" gap="2">
+            <ToggleButton defaultSelected>
+              {({ isSelected, isHovered }) => {
+                const states = [];
+                if (isSelected) states.push('on');
+                else states.push('off');
+                if (isHovered) states.push('hovered');
+                return `Email (${states.join(', ')})`;
+              }}
+            </ToggleButton>
+            <ToggleButton>
+              {({ isSelected, isHovered }) => {
+                const states = [];
+                if (isSelected) states.push('on');
+                else states.push('off');
+                if (isHovered) states.push('hovered');
+                return `Push (${states.join(', ')})`;
+              }}
+            </ToggleButton>
+          </Flex>
+        </Flex>
 
-export const VerticalGroup = meta.story({
-  render: () => (
-    <ToggleButtonGroup selectionMode="single" orientation="vertical">
-      <ToggleButton id="low">Low</ToggleButton>
-      <ToggleButton id="medium">Medium</ToggleButton>
-      <ToggleButton id="high">High</ToggleButton>
-    </ToggleButtonGroup>
-  ),
+        <Flex direction="column" gap="2">
+          <Text weight="bold">Example 3: Conditional Icons</Text>
+          <Flex align="center" gap="2">
+            <ToggleButton>
+              {({ isSelected }) => (
+                <>
+                  {isSelected ? <RiStarFill /> : <RiStarLine />}
+                  <span>{isSelected ? 'Starred' : 'Star'}</span>
+                </>
+              )}
+            </ToggleButton>
+          </Flex>
+        </Flex>
+
+        <Flex direction="column" gap="2">
+          <Text weight="bold">Example 4: Status Indicators</Text>
+          <Flex align="center" gap="2">
+            <ToggleButton defaultSelected>
+              {({ isSelected }) => (
+                <Flex align="center" gap="2">
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      backgroundColor: isSelected
+                        ? 'var(--bui-fg-success)'
+                        : 'var(--bui-fg-secondary)',
+                    }}
+                  />
+                  <span>Active</span>
+                </Flex>
+              )}
+            </ToggleButton>
+            <ToggleButton>
+              {({ isSelected }) => (
+                <Flex align="center" gap="2">
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      backgroundColor: isSelected
+                        ? 'var(--bui-fg-danger)'
+                        : 'var(--bui-fg-secondary)',
+                    }}
+                  />
+                  <span>Inactive</span>
+                </Flex>
+              )}
+            </ToggleButton>
+          </Flex>
+        </Flex>
+      </Flex>
+    );
+  },
 });

packages/ui/src/components/ToggleButton/ToggleButton.tsx

@@ -47,14 +47,22 @@ export const ToggleButton = forwardRef(
         {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}
         {...rest}
       >
-        <span
-          className={clsx(classNames.content, styles[classNames.content])}
-          data-slot="content"
-        >
-          {iconStart}
-          {children}
-          {iconEnd}
-        </span>
+        {renderProps => {
+          // If children is a function, call it with render props; otherwise use children as-is
+          const renderedChildren =
+            typeof children === 'function' ? children(renderProps) : children;
+
+          return (
+            <span
+              className={clsx(classNames.content, styles[classNames.content])}
+              data-slot="content"
+            >
+              {iconStart}
+              {renderedChildren}
+              {iconEnd}
+            </span>
+          );
+        }}
       </AriaToggleButton>
     );
   },

packages/ui/src/components/ToggleButton/types.ts

@@ -15,7 +15,7 @@
  */
 
 import type { Breakpoint } from '../..';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import type { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import type { Responsive, Surface } from '../../types';
 
@@ -28,7 +28,6 @@ export interface ToggleButtonProps extends AriaToggleButtonProps {
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
   iconStart?: ReactElement;
   iconEnd?: ReactElement;
-  children?: ReactNode;
   /** Surface the toggle button is placed on. Defaults to context surface if available */
   onSurface?: Responsive<Surface>;
 }

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css

@@ -24,6 +24,7 @@
     border-radius: var(--bui-radius-2);
     overflow: hidden;
     box-shadow: inset 0 0 0 1px var(--bui-border);
+    width: fit-content;
   }
 
   .bui-ToggleButtonGroup[data-orientation='vertical'] {

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -15,28 +15,13 @@
  */
 
 import clsx from 'clsx';
-import { forwardRef, Ref, createContext, useContext } from 'react';
+import { forwardRef, Ref } from 'react';
 import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
 import type { ToggleButtonGroupProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { ToggleButtonGroupDefinition } from './definition';
 import styles from './ToggleButtonGroup.module.css';
 
-/** @internal */
-export interface ToggleButtonGroupContextValue {}
-
-const ToggleButtonGroupContext = createContext<
-  ToggleButtonGroupContextValue | undefined
->(undefined);
-
-/**
- * Hook to access the ToggleButtonGroup context.
- * @internal
- */
-export const useToggleButtonGroupContext = () => {
-  return useContext(ToggleButtonGroupContext);
-};
-
 /** @public */
 export const ToggleButtonGroup = forwardRef(
   (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {
@@ -49,19 +34,15 @@ export const ToggleButtonGroup = forwardRef(
 
     const { className, children, ...rest } = cleanedProps;
 
-    const contextValue: ToggleButtonGroupContextValue = {};
-
     return (
-      <ToggleButtonGroupContext.Provider value={contextValue}>
-        <AriaToggleButtonGroup
-          className={clsx(classNames.root, styles[classNames.root], className)}
-          ref={ref}
-          {...dataAttributes}
-          {...rest}
-        >
-          {children}
-        </AriaToggleButtonGroup>
-      </ToggleButtonGroupContext.Provider>
+      <AriaToggleButtonGroup
+        className={clsx(classNames.root, styles[classNames.root], className)}
+        ref={ref}
+        {...dataAttributes}
+        {...rest}
+      >
+        {children}
+      </AriaToggleButtonGroup>
     );
   },
 );