[Toggle][ToggleGroup] Create Toggle and ToggleGroup (#763)

mui · Dec 3, 2024 · 144f528 · 144f528
1 parent f800414
commit 144f528
Show file tree

Hide file tree

Showing 33 changed files with 2,184 additions and 4 deletions.
diff --git a/docs/data/api/toggle-group-root.json b/docs/data/api/toggle-group-root.json
@@ -0,0 +1,29 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultValue": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
+    "onValueChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(groupValue: Array<any>, event: Event) => void",
+        "describedArgs": ["groupValue", "event"]
+      }
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "toggleMultiple": { "type": { "name": "bool" }, "default": "false" },
+    "value": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } }
+  },
+  "name": "ToggleGroupRoot",
+  "imports": [
+    "import { ToggleGroup } from '@base-ui-components/react/toggle-group';\nconst ToggleGroupRoot = ToggleGroup.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleGroupRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/react/src/toggle-group/root/ToggleGroupRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-group/\">ToggleGroup</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/toggle-root.json b/docs/data/api/toggle-root.json
@@ -0,0 +1,32 @@
+{
+  "props": {
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultPressed": { "type": { "name": "bool" }, "default": "false" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onPressedChange": {
+      "type": { "name": "func" },
+      "default": "NOOP",
+      "signature": {
+        "type": "function(pressed: boolean, event: Event) => void",
+        "describedArgs": ["pressed", "event"]
+      }
+    },
+    "pressed": { "type": { "name": "bool" }, "default": "undefined" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleRoot",
+  "imports": [
+    "import { Toggle } from '@base-ui-components/react/toggle';\nconst ToggleRoot = Toggle.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleRoot",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/react/src/toggle/root/ToggleRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle/\">Toggle</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/components/toggle-group/ToggleGroupIntroduction.js b/docs/data/components/toggle-group/ToggleGroupIntroduction.js
@@ -0,0 +1,74 @@
+'use client';
+import * as React from 'react';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toggle } from '@base-ui-components/react/toggle';
+import classes from './styles.module.css';
+
+export default function ToggleGroupIntroduction() {
+  const [value, setValue] = React.useState(['align-center']);
+  return (
+    <ToggleGroup
+      className={classes.root}
+      value={value}
+      onValueChange={(newValue) => {
+        if (newValue.length > 0) {
+          setValue(newValue);
+        }
+      }}
+      aria-label="Text alignment"
+    >
+      <Toggle 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>
+      </Toggle>
+
+      <Toggle
+        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>
+      </Toggle>
+
+      <Toggle
+        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>
+      </Toggle>
+    </ToggleGroup>
+  );
+}
diff --git a/docs/data/components/toggle-group/ToggleGroupIntroduction.tsx b/docs/data/components/toggle-group/ToggleGroupIntroduction.tsx
@@ -0,0 +1,74 @@
+'use client';
+import * as React from 'react';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toggle } from '@base-ui-components/react/toggle';
+import classes from './styles.module.css';
+
+export default function ToggleGroupIntroduction() {
+  const [value, setValue] = React.useState(['align-center']);
+  return (
+    <ToggleGroup
+      className={classes.root}
+      value={value}
+      onValueChange={(newValue) => {
+        if (newValue.length > 0) {
+          setValue(newValue);
+        }
+      }}
+      aria-label="Text alignment"
+    >
+      <Toggle 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>
+      </Toggle>
+
+      <Toggle
+        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>
+      </Toggle>
+
+      <Toggle
+        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>
+      </Toggle>
+    </ToggleGroup>
+  );
+}
diff --git a/docs/data/components/toggle-group/ToggleGroupToggleMultiple.js b/docs/data/components/toggle-group/ToggleGroupToggleMultiple.js
@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toggle } from '@base-ui-components/react/toggle';
+import classes from './styles.module.css';
+
+export default function ToggleGroupToggleMultiple() {
+  return (
+    <ToggleGroup
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <Toggle value="bold" aria-label="Toggle bold" className={classes.button}>
+        <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>
+      </Toggle>
+
+      <Toggle value="italics" aria-label="Toggle italics" className={classes.button}>
+        <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>
+      </Toggle>
+
+      <Toggle
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <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>
+      </Toggle>
+    </ToggleGroup>
+  );
+}
diff --git a/docs/data/components/toggle-group/ToggleGroupToggleMultiple.tsx b/docs/data/components/toggle-group/ToggleGroupToggleMultiple.tsx
@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toggle } from '@base-ui-components/react/toggle';
+import classes from './styles.module.css';
+
+export default function ToggleGroupToggleMultiple() {
+  return (
+    <ToggleGroup
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <Toggle value="bold" aria-label="Toggle bold" className={classes.button}>
+        <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>
+      </Toggle>
+
+      <Toggle value="italics" aria-label="Toggle italics" className={classes.button}>
+        <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>
+      </Toggle>
+
+      <Toggle
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <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>
+      </Toggle>
+    </ToggleGroup>
+  );
+}
diff --git a/docs/data/components/toggle-group/styles.module.css b/docs/data/components/toggle-group/styles.module.css
@@ -0,0 +1,66 @@
+.root {
+  display: flex;
+}
+
+.button {
+  --size: 2.5rem;
+  --corner-radius: 0.4rem;
+  --border-color: var(--gray-outline-2);
+  --border-radius-right: 0 var(--corner-radius) var(--corner-radius) 0;
+  --border-radius-left: var(--corner-radius) 0 0 var(--corner-radius);
+
+  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(--border-radius-left);
+  border-inline-end-color: transparent;
+}
+
+.button:last-child {
+  border-radius: var(--border-radius-right);
+  border-inline-start-color: transparent;
+}
+
+.button:first-child:dir(rtl) {
+  border-radius: var(--border-radius-right);
+}
+
+.button:last-child:dir(rtl) {
+  border-radius: var(--border-radius-left);
+}
+
+.button:not(:disabled):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(--color-violet);
+  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);
+}