WIP toggle button group

mui · Oct 31, 2024 · 7cc24fd · 7cc24fd
1 parent 20dda82
commit 7cc24fd
Show file tree

Hide file tree

Showing 19 changed files with 954 additions and 55 deletions.
diff --git a/docs/data/api/toggle-button-group-item.json b/docs/data/api/toggle-button-group-item.json
@@ -0,0 +1,22 @@
+{
+  "props": {
+    "value": { "type": { "name": "any" }, "required": true },
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleButtonGroupItem",
+  "imports": [
+    "import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';\nconst ToggleButtonGroupItem = ToggleButtonGroup.Item;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonGroupItem",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button-group/\">ToggleButtonGroup</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/toggle-button-group-root.json b/docs/data/api/toggle-button-group-root.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "toggleMultiple": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "ToggleButtonGroupRoot",
+  "imports": [
+    "import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';\nconst ToggleButtonGroupRoot = ToggleButtonGroup.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonGroupRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button-group/\">ToggleButtonGroup</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/components/toggle-button-group/toggle-button-group.mdx b/docs/data/components/toggle-button-group/toggle-button-group.mdx
@@ -0,0 +1,19 @@
+---
+productId: base-ui
+title: React ToggleButtonGroup component
+description: ToggleButtonGroup provides a set of two-state buttons that can either be off (not pressed) or on (pressed).
+components: ToggleButtonGroupRoot, ToggleButtonGroupItem
+githubLabel: 'component: toggle button'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio-group/
+packageName: '@base_ui/react'
+---
+
+# ToggleButtonGroup
+
+<Description />
+
+<ComponentLinkHeader design={false} />
+
+## Installation
+
+<InstallationInstructions componentName="ToggleButtonGroup" />
diff --git a/docs/data/translations/api-docs/toggle-button-group-item/toggle-button-group-item.json b/docs/data/translations/api-docs/toggle-button-group-item/toggle-button-group-item.json
@@ -0,0 +1,17 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "aria-label": { "description": "The label for the toggle button." },
+    "aria-labelledby": {
+      "description": "An id or space-separated list of ids of elements that label the toggle button."
+    },
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." },
+    "value": {
+      "description": "A unique value that identifies the component when used inside a ToggleButtonGroup"
+    }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json b/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json
@@ -0,0 +1,13 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." },
+    "toggleMultiple": {
+      "description": "When <code>false</code> only one ToggleButton in the group can be pressed. When a ToggleButton is pressed, the others in the group will become unpressed"
+    }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/src/app/experiments/toggle-group.tsx b/docs/src/app/experiments/toggle-group.tsx
@@ -0,0 +1,132 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';
+import classes from './toggle.module.css';
+
+export default function ToggleButtonGroupDemo() {
+  return (
+    <div className={classes.grid}>
+      <ToggleButtonGroup.Root
+        className={classes.group}
+        defaultValue={['align-center']}
+        aria-label="Text alignment"
+        disabled
+      >
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="align-left"
+          aria-label="Align left"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <line x1="17" y1="10" x2="3" y2="10" />
+            <line x1="21" y1="6" x2="3" y2="6" />
+            <line x1="21" y1="14" x2="3" y2="14" />
+            <line x1="17" y1="18" x2="3" y2="18" />
+          </svg>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="align-center"
+          aria-label="Align center"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <line x1="18" y1="10" x2="6" y2="10" />
+            <line x1="21" y1="6" x2="3" y2="6" />
+            <line x1="21" y1="14" x2="3" y2="14" />
+            <line x1="18" y1="18" x2="6" y2="18" />
+          </svg>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="align-right"
+          aria-label="Align right"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <line x1="21" y1="10" x2="7" y2="10" />
+            <line x1="21" y1="6" x2="3" y2="6" />
+            <line x1="21" y1="14" x2="3" y2="14" />
+            <line x1="21" y1="18" x2="7" y2="18" />
+          </svg>
+        </ToggleButtonGroup.Item>
+      </ToggleButtonGroup.Root>
+
+      <ToggleButtonGroup.Root
+        className={classes.group}
+        toggleMultiple
+        aria-label="Text formatting"
+      >
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="bold"
+          aria-label="Toggle bold"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+            <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+          </svg>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="italics"
+          aria-label="Toggle italics"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <line x1="19" y1="4" x2="10" y2="4" />
+            <line x1="14" y1="20" x2="5" y2="20" />
+            <line x1="15" y1="4" x2="9" y2="20" />
+          </svg>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          className={classes.button}
+          value="underline"
+          aria-label="Toggle underline"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+            <line x1="4" y1="21" x2="20" y2="21" />
+          </svg>
+        </ToggleButtonGroup.Item>
+      </ToggleButtonGroup.Root>
+    </div>
+  );
+}
diff --git a/docs/src/app/experiments/toggle.module.css b/docs/src/app/experiments/toggle.module.css
@@ -0,0 +1,61 @@
+.grid {
+  display: grid;
+  grid-gap: 2rem;
+}
+
+.group {
+  display: flex;
+}
+
+.button {
+  --size: 2.5rem;
+  --corner: 0.4rem;
+  --border-color: var(--gray-outline-2);
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  height: var(--size);
+  width: var(--size);
+  border: 1px solid var(--border-color);
+  background-color: var(--gray-container-2);
+  color: var(--gray-400);
+}
+
+.button:first-child {
+  border-radius: var(--corner) 0 0 var(--corner);
+  border-right-color: transparent;
+}
+
+.button:last-child {
+  border-radius: 0 var(--corner) var(--corner) 0;
+  border-left-color: transparent;
+}
+
+.button:hover {
+  background-color: var(--gray-surface-1);
+  outline: 1px solid var(--gray-500);
+  outline-offset: -1px;
+  color: var(--gray-text-2);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--gray-900);
+  z-index: 1;
+}
+
+.icon {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.button[data-pressed] {
+  background-color: #fefefe;
+  color: var(--gray-text-2);
+}
diff --git a/docs/src/app/experiments/toggle.tsx b/docs/src/app/experiments/toggle.tsx