[ButtonGroup][joy] Add ButtonGroup component (#37407)

mui · Jun 9, 2023 · 05b7cdb · 05b7cdb
1 parent 4aeb94c
commit 05b7cdb
Show file tree

Hide file tree

Showing 56 changed files with 2,181 additions and 11 deletions.
diff --git a/docs/data/joy/components/button-group/BasicButtonGroup.js b/docs/data/joy/components/button-group/BasicButtonGroup.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function BasicButtonGroup() {
+  return (
+    <ButtonGroup aria-label="outlined primary button group">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/BasicButtonGroup.tsx b/docs/data/joy/components/button-group/BasicButtonGroup.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function BasicButtonGroup() {
+  return (
+    <ButtonGroup aria-label="outlined primary button group">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/BasicButtonGroup.tsx.preview b/docs/data/joy/components/button-group/BasicButtonGroup.tsx.preview
@@ -0,0 +1,8 @@
+<ButtonGroup aria-label="outlined primary button group">
+  <Button>One</Button>
+  <Button>Two</Button>
+  <Button>Three</Button>
+  <IconButton>
+    <Settings />
+  </IconButton>
+</ButtonGroup>
diff --git a/docs/data/joy/components/button-group/ButtonGroupColors.js b/docs/data/joy/components/button-group/ButtonGroupColors.js
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Stack from '@mui/joy/Stack';
+
+export default function ButtonGroupColors() {
+  const [variant, setVariant] = React.useState('outlined');
+  const createOnClick = (value) => () => {
+    setVariant(value);
+  };
+  return (
+    <Stack spacing={1} alignItems="center">
+      <ButtonGroup variant={variant} size="sm" aria-label="neutral button group">
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="primary"
+        aria-label="primary button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="info"
+        aria-label="info button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="danger"
+        aria-label="danger button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="success"
+        aria-label="success button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="warning"
+        aria-label="warning button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/button-group/ButtonGroupColors.tsx b/docs/data/joy/components/button-group/ButtonGroupColors.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { VariantProp } from '@mui/joy/styles';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Stack from '@mui/joy/Stack';
+
+export default function ButtonGroupColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('outlined');
+  const createOnClick = (value: VariantProp) => () => {
+    setVariant(value);
+  };
+  return (
+    <Stack spacing={1} alignItems="center">
+      <ButtonGroup variant={variant} size="sm" aria-label="neutral button group">
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="primary"
+        aria-label="primary button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="info"
+        aria-label="info button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="danger"
+        aria-label="danger button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="success"
+        aria-label="success button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        variant={variant}
+        size="sm"
+        color="warning"
+        aria-label="warning button group"
+      >
+        <Button onClick={createOnClick('outlined')}>Outlined</Button>
+        <Button onClick={createOnClick('plain')}>Plain</Button>
+        <Button onClick={createOnClick('soft')}>Soft</Button>
+        <Button onClick={createOnClick('solid')}>Solid</Button>
+      </ButtonGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/button-group/ButtonGroupUsage.js b/docs/data/joy/components/button-group/ButtonGroupUsage.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+
+export default function ButtonUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="ButtonGroup"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'solid',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'primary',
+        },
+        {
+          propName: 'disabled',
+          knob: 'switch',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'orientation',
+          knob: 'radio',
+          defaultValue: 'horizontal',
+          options: ['horizontal', 'vertical'],
+        },
+        {
+          propName: 'children',
+          defaultValue: `<Button />
+  ...
+  <IconButton />`,
+        },
+      ]}
+      renderDemo={(props) => (
+        <ButtonGroup {...props}>
+          <Button>Vote</Button>
+          <Button>Comment</Button>
+          <IconButton>
+            <FavoriteBorder />
+          </IconButton>
+        </ButtonGroup>
+      )}
+    />
+  );
+}
diff --git a/docs/data/joy/components/button-group/CustomSeparatorButtonGroup.js b/docs/data/joy/components/button-group/CustomSeparatorButtonGroup.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Divider from '@mui/joy/Divider';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function CustomSeparatorButtonGroup() {
+  return (
+    <ButtonGroup
+      variant="solid"
+      color="success"
+      aria-label="button group"
+      sx={{
+        '--ButtonGroup-separatorColor': 'none',
+        '& > span': {
+          zIndex: 3,
+          background:
+            'linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)',
+        },
+      }}
+    >
+      <Button>One</Button>
+      <Divider />
+      <Button>Two</Button>
+      <Divider />
+      <Button>Three</Button>
+      <Divider />
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/CustomSeparatorButtonGroup.tsx b/docs/data/joy/components/button-group/CustomSeparatorButtonGroup.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import Divider from '@mui/joy/Divider';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function CustomSeparatorButtonGroup() {
+  return (
+    <ButtonGroup
+      variant="solid"
+      color="success"
+      aria-label="button group"
+      sx={{
+        '--ButtonGroup-separatorColor': 'none',
+        '& > span': {
+          zIndex: 3,
+          background:
+            'linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)',
+        },
+      }}
+    >
+      <Button>One</Button>
+      <Divider />
+      <Button>Two</Button>
+      <Divider />
+      <Button>Three</Button>
+      <Divider />
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/DetachedButtonGroup.js b/docs/data/joy/components/button-group/DetachedButtonGroup.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function DetachedButtonGroup() {
+  return (
+    <ButtonGroup detached aria-label="detached button group" sx={{ gap: 1 }}>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/DetachedButtonGroup.tsx b/docs/data/joy/components/button-group/DetachedButtonGroup.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function DetachedButtonGroup() {
+  return (
+    <ButtonGroup detached aria-label="detached button group" sx={{ gap: 1 }}>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/joy/components/button-group/DetachedButtonGroup.tsx.preview b/docs/data/joy/components/button-group/DetachedButtonGroup.tsx.preview
@@ -0,0 +1,8 @@
+<ButtonGroup detached aria-label="detached button group" sx={{ gap: 1 }}>
+  <Button>One</Button>
+  <Button>Two</Button>
+  <Button>Three</Button>
+  <IconButton>
+    <Settings />
+  </IconButton>
+</ButtonGroup>
diff --git a/docs/data/joy/components/button-group/DisabledButtonGroup.js b/docs/data/joy/components/button-group/DisabledButtonGroup.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import ButtonGroup from '@mui/joy/ButtonGroup';
+import IconButton from '@mui/joy/IconButton';
+import Settings from '@mui/icons-material/Settings';
+
+export default function DisabledButtonGroup() {
+  return (
+    <ButtonGroup disabled aria-label="disabled button group">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+      <IconButton disabled={false}>
+        <Settings />
+      </IconButton>
+    </ButtonGroup>
+  );
+}