[ToggleButton][Joy] Add ToggleButton component (#37716)

mui · Jul 18, 2023 · 5131b59 · 5131b59
1 parent a748b51
commit 5131b59
Show file tree

Hide file tree

Showing 40 changed files with 2,094 additions and 181 deletions.
diff --git a/docs/data/joy/components/toggle-button-group/ExclusiveSelection.js b/docs/data/joy/components/toggle-button-group/ExclusiveSelection.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+
+export default function ExclusiveSelection() {
+  const [value, setValue] = React.useState('default');
+  return (
+    <ToggleButtonGroup
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="default">Default</Button>
+      <IconButton value="bold">
+        <FormatBoldIcon />
+      </IconButton>
+      <IconButton value="italic">
+        <FormatItalicIcon />
+      </IconButton>
+      <IconButton value="underlined">
+        <FormatUnderlinedIcon />
+      </IconButton>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ExclusiveSelection.tsx b/docs/data/joy/components/toggle-button-group/ExclusiveSelection.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+
+export default function ExclusiveSelection() {
+  const [value, setValue] = React.useState<string | null>('default');
+  return (
+    <ToggleButtonGroup
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="default">Default</Button>
+      <IconButton value="bold">
+        <FormatBoldIcon />
+      </IconButton>
+      <IconButton value="italic">
+        <FormatItalicIcon />
+      </IconButton>
+      <IconButton value="underlined">
+        <FormatUnderlinedIcon />
+      </IconButton>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleButtons.js b/docs/data/joy/components/toggle-button-group/ToggleButtons.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import Stack from '@mui/joy/Stack';
+import FormatBold from '@mui/icons-material/FormatBold';
+
+export default function ToggleButtons() {
+  const [pressed, setPressed] = React.useState(false);
+  return (
+    <Stack spacing={2} direction="row">
+      <Button
+        variant="outlined"
+        color="neutral"
+        onClick={() => setPressed(!pressed)}
+        aria-pressed={pressed ? 'true' : 'false'}
+        sx={(theme) => ({
+          [`&[aria-pressed="true"]`]: {
+            ...theme.variants.outlinedActive.neutral,
+            borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
+          },
+        })}
+      >
+        Button
+      </Button>
+      <IconButton
+        variant="outlined"
+        color="neutral"
+        onClick={() => setPressed(!pressed)}
+        aria-pressed={pressed ? 'true' : 'false'}
+        sx={(theme) => ({
+          [`&[aria-pressed="true"]`]: {
+            ...theme.variants.outlinedActive.neutral,
+            borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
+          },
+        })}
+      >
+        <FormatBold />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleButtons.tsx b/docs/data/joy/components/toggle-button-group/ToggleButtons.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import Stack from '@mui/joy/Stack';
+import FormatBold from '@mui/icons-material/FormatBold';
+
+export default function ToggleButtons() {
+  const [pressed, setPressed] = React.useState(false);
+  return (
+    <Stack spacing={2} direction="row">
+      <Button
+        variant="outlined"
+        color="neutral"
+        onClick={() => setPressed(!pressed)}
+        aria-pressed={pressed ? 'true' : 'false'}
+        sx={(theme) => ({
+          [`&[aria-pressed="true"]`]: {
+            ...theme.variants.outlinedActive.neutral,
+            borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
+          },
+        })}
+      >
+        Button
+      </Button>
+      <IconButton
+        variant="outlined"
+        color="neutral"
+        onClick={() => setPressed(!pressed)}
+        aria-pressed={pressed ? 'true' : 'false'}
+        sx={(theme) => ({
+          [`&[aria-pressed="true"]`]: {
+            ...theme.variants.outlinedActive.neutral,
+            borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
+          },
+        })}
+      >
+        <FormatBold />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroup.js b/docs/data/joy/components/toggle-button-group/ToggleGroup.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+
+export default function ToggleGroup() {
+  const [value, setValue] = React.useState(['default']);
+  return (
+    <ToggleButtonGroup
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="default">Default</Button>
+      <IconButton value="bold">
+        <FormatBoldIcon />
+      </IconButton>
+      <IconButton value="italic">
+        <FormatItalicIcon />
+      </IconButton>
+      <IconButton value="underlined">
+        <FormatUnderlinedIcon />
+      </IconButton>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroup.tsx b/docs/data/joy/components/toggle-button-group/ToggleGroup.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+
+export default function ToggleGroup() {
+  const [value, setValue] = React.useState(['default']);
+  return (
+    <ToggleButtonGroup
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="default">Default</Button>
+      <IconButton value="bold">
+        <FormatBoldIcon />
+      </IconButton>
+      <IconButton value="italic">
+        <FormatItalicIcon />
+      </IconButton>
+      <IconButton value="underlined">
+        <FormatUnderlinedIcon />
+      </IconButton>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupColors.js b/docs/data/joy/components/toggle-button-group/ToggleGroupColors.js
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import Stack from '@mui/joy/Stack';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+
+export default function ToggleGroupColors() {
+  const [variant, setVariant] = React.useState('plain');
+  const [color, setColor] = React.useState('neutral');
+  return (
+    <Stack spacing={2}>
+      <ToggleButtonGroup
+        variant={variant || undefined}
+        color={color || undefined}
+        value="pressed"
+      >
+        <Button value="pressed">I&apos;m pressed</Button>
+        <IconButton value="bold">
+          <FormatBoldIcon />
+        </IconButton>
+        <IconButton value="italic">
+          <FormatItalicIcon />
+        </IconButton>
+        <IconButton value="underlined">
+          <FormatUnderlinedIcon />
+        </IconButton>
+      </ToggleButtonGroup>
+      <FormControl>
+        <FormLabel>Variant</FormLabel>
+        <RadioGroup
+          orientation="horizontal"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio value="plain" label="plain" />
+          <Radio value="outlined" label="outlined" />
+          <Radio value="soft" label="soft" />
+          <Radio value="solid" label="solid" />
+        </RadioGroup>
+      </FormControl>
+      <FormControl>
+        <FormLabel>Color</FormLabel>
+        <RadioGroup
+          orientation="horizontal"
+          value={color}
+          onChange={(event) => setColor(event.target.value)}
+        >
+          <Radio value="primary" label="primary" />
+          <Radio value="neutral" label="neutral" />
+          <Radio value="danger" label="danger" />
+          <Radio value="success" label="success" />
+          <Radio value="warning" label="warning" />
+        </RadioGroup>
+      </FormControl>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupColors.tsx b/docs/data/joy/components/toggle-button-group/ToggleGroupColors.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import Stack from '@mui/joy/Stack';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import { VariantProp, ColorPaletteProp } from '@mui/joy/styles';
+
+export default function ToggleGroupColors() {
+  const [variant, setVariant] = React.useState<VariantProp | null>('plain');
+  const [color, setColor] = React.useState<ColorPaletteProp | null>('neutral');
+  return (
+    <Stack spacing={2}>
+      <ToggleButtonGroup
+        variant={variant || undefined}
+        color={color || undefined}
+        value="pressed"
+      >
+        <Button value="pressed">I&apos;m pressed</Button>
+        <IconButton value="bold">
+          <FormatBoldIcon />
+        </IconButton>
+        <IconButton value="italic">
+          <FormatItalicIcon />
+        </IconButton>
+        <IconButton value="underlined">
+          <FormatUnderlinedIcon />
+        </IconButton>
+      </ToggleButtonGroup>
+      <FormControl>
+        <FormLabel>Variant</FormLabel>
+        <RadioGroup
+          orientation="horizontal"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio value="plain" label="plain" />
+          <Radio value="outlined" label="outlined" />
+          <Radio value="soft" label="soft" />
+          <Radio value="solid" label="solid" />
+        </RadioGroup>
+      </FormControl>
+      <FormControl>
+        <FormLabel>Color</FormLabel>
+        <RadioGroup
+          orientation="horizontal"
+          value={color}
+          onChange={(event) => setColor(event.target.value as ColorPaletteProp)}
+        >
+          <Radio value="primary" label="primary" />
+          <Radio value="neutral" label="neutral" />
+          <Radio value="danger" label="danger" />
+          <Radio value="success" label="success" />
+          <Radio value="warning" label="warning" />
+        </RadioGroup>
+      </FormControl>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.js b/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+
+export default function ToggleGroupSizes() {
+  const [value, setValue] = React.useState('md');
+  return (
+    <ToggleButtonGroup
+      size={value || undefined}
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="sm">Small</Button>
+      <Button value="md">Medium</Button>
+      <Button value="lg">Large</Button>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.tsx b/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ToggleButtonGroup, {
+  ToggleButtonGroupStaticProps,
+} from '@mui/joy/ToggleButtonGroup';
+
+export default function ToggleGroupSizes() {
+  const [value, setValue] = React.useState<
+    ToggleButtonGroupStaticProps['size'] | null
+  >('md');
+  return (
+    <ToggleButtonGroup
+      size={value || undefined}
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Button value="sm">Small</Button>
+      <Button value="md">Medium</Button>
+      <Button value="lg">Large</Button>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.tsx.preview b/docs/data/joy/components/toggle-button-group/ToggleGroupSizes.tsx.preview
@@ -0,0 +1,11 @@
+<ToggleButtonGroup
+  size={value || undefined}
+  value={value}
+  onChange={(event, newValue) => {
+    setValue(newValue);
+  }}
+>
+  <Button value="sm">Small</Button>
+  <Button value="md">Medium</Button>
+  <Button value="lg">Large</Button>
+</ToggleButtonGroup>