feat(SegmentedControl): allow square display for icon items

.changeset/warm-rocks-leave.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": minor
+---
+
+feat(SegmentedControl): allow square display for icon items

packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -80,13 +80,13 @@ export const WithTooltip: Story = {
 export const IconOnly: Story = {
     render: (args) => (
         <SegmentedControl.Root {...args}>
-            <SegmentedControl.Item value="first">
+            <SegmentedControl.Item value="first" iconOnly>
                 <IconIcon size={16} />
             </SegmentedControl.Item>
-            <SegmentedControl.Item value="second">
+            <SegmentedControl.Item value="second" iconOnly>
                 <IconIcon size={16} />
             </SegmentedControl.Item>
-            <SegmentedControl.Item value="third">
+            <SegmentedControl.Item value="third" iconOnly>
                 <IconIcon size={16} />
             </SegmentedControl.Item>
         </SegmentedControl.Root>

packages/components/src/components/SegmentedControl/SegmentedControl.tsx

@@ -79,20 +79,29 @@ SegmentedControlRoot.displayName = 'SegmentedControl.Root';
 type SegmentedControlItemProps = {
     children: ReactNode;
     value: string;
+    /**
+     * Render the item as a square, sized to match the control's height. Intended for
+     * icon-only content. For the active-indicator animation to look correct, apply this
+     * prop consistently to every item in the control.
+     * @default false
+     */
+    iconOnly?: boolean;
 };
 
 export const SegmentedControlItem = (
-    { children, ...itemProps }: SegmentedControlItemProps,
+    { children, iconOnly, ...itemProps }: SegmentedControlItemProps,
     ref: ForwardedRef<HTMLButtonElement>,
 ) => (
-    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>
-        {/* Separator */}
+    <ToggleGroupPrimitive.Item
+        ref={ref}
+        {...itemProps}
+        className={styles.item}
+        asChild={false}
+        data-icon-only={iconOnly}
+    >
         <span className={styles.separator} />
         <span className={styles.itemLabel}>
-            {/* Active children */}
             <span className={styles.itemLabelActive}>{children}</span>
-
-            {/* Inactive children */}
             <span className={styles.itemLabelInactive}>{children}</span>
         </span>
     </ToggleGroupPrimitive.Item>

packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss

@@ -49,6 +49,14 @@ $radius-without-border: calc(var(--border-radius-medium) - var(--border-width-de
     user-select: none;
     min-width: 0;
 
+    &[data-icon-only='true'] {
+        aspect-ratio: 1;
+    }
+
+    &[data-icon-only='true'] .itemLabel {
+        padding-inline: 0;
+    }
+
     // Hover on unselected items but not when disabled
     &[aria-checked='false']:enabled:hover:not(:focus-visible) {
         background-color: var(--color-surface-hover);