[Menu] RadioGroup

mui · Aug 5, 2024 · 6fb355e · 6fb355e
1 parent 15c5459
commit 6fb355e
Show file tree

Hide file tree

Showing 10 changed files with 1,012 additions and 0 deletions.
diff --git a/docs/data/base/components/menu/RadioItems.js b/docs/data/base/components/menu/RadioItems.js
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+import { styled } from '@mui/system';
+
+export default function RadioItems() {
+  return (
+    <Menu.Root>
+      <MenuButton>Font</MenuButton>
+      <MenuPositioner alignment="start" keepMounted>
+        <MenuPopup>
+          <Menu.RadioGroup defaultValue={'jetbrains-mono'}>
+            <RadioItem value="cascadia-code">Cascadia Code</RadioItem>
+            <RadioItem value="consolas">Consolas</RadioItem>
+            <RadioItem value="dejavu-sans-mono">DejaVu Sans Mono</RadioItem>
+            <RadioItem value="fira-code">Fira Code</RadioItem>
+            <RadioItem value="jetbrains-mono">JetBrains Mono</RadioItem>
+            <RadioItem value="menlo">Menlo</RadioItem>
+            <RadioItem value="monaco">Monaco</RadioItem>
+            <RadioItem value="monolisa">Monolisa</RadioItem>
+            <RadioItem value="source-code-pro">Source Code Pro</RadioItem>
+          </Menu.RadioGroup>
+        </MenuPopup>
+      </MenuPositioner>
+    </Menu.Root>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const MenuPopup = styled(Menu.Popup)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 200px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  z-index: 1;
+  transform-origin: var(--transform-origin);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 100ms ease-in, transform 100ms ease-in;
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  `,
+);
+
+const RadioItem = styled(Menu.RadioItem)(
+  ({ theme }) => `
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: default;
+  user-select: none;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &:focus {
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  }
+
+  &[data-disabled] {
+    color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+  }
+
+  &::before {
+    content: '○';
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  &[data-state=checked]::before {
+    content: '◉';
+  }
+  `,
+);
+
+const MenuButton = styled(Menu.Trigger)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+  `,
+);
+
+const MenuPositioner = styled(Menu.Positioner)`
+  &:focus-visible {
+    outline: 0;
+  }
+
+  &[data-state='closed'] {
+    pointer-events: none;
+  }
+`;
diff --git a/docs/data/base/components/menu/RadioItems.tsx b/docs/data/base/components/menu/RadioItems.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+import { styled } from '@mui/system';
+
+export default function RadioItems() {
+  return (
+    <Menu.Root>
+      <MenuButton>Font</MenuButton>
+      <MenuPositioner alignment="start" keepMounted>
+        <MenuPopup>
+          <Menu.RadioGroup defaultValue={'jetbrains-mono'}>
+            <RadioItem value="cascadia-code">Cascadia Code</RadioItem>
+            <RadioItem value="consolas">Consolas</RadioItem>
+            <RadioItem value="dejavu-sans-mono">DejaVu Sans Mono</RadioItem>
+            <RadioItem value="fira-code">Fira Code</RadioItem>
+            <RadioItem value="jetbrains-mono">JetBrains Mono</RadioItem>
+            <RadioItem value="menlo">Menlo</RadioItem>
+            <RadioItem value="monaco">Monaco</RadioItem>
+            <RadioItem value="monolisa">Monolisa</RadioItem>
+            <RadioItem value="source-code-pro">Source Code Pro</RadioItem>
+          </Menu.RadioGroup>
+        </MenuPopup>
+      </MenuPositioner>
+    </Menu.Root>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const MenuPopup = styled(Menu.Popup)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 200px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  z-index: 1;
+  transform-origin: var(--transform-origin);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 100ms ease-in, transform 100ms ease-in;
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  `,
+);
+
+const RadioItem = styled(Menu.RadioItem)(
+  ({ theme }) => `
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: default;
+  user-select: none;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &:focus {
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  }
+
+  &[data-disabled] {
+    color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+  }
+
+  &::before {
+    content: '○';
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  &[data-state=checked]::before {
+    content: '◉';
+  }
+  `,
+);
+
+const MenuButton = styled(Menu.Trigger)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+  `,
+);
+
+const MenuPositioner = styled(Menu.Positioner)`
+  &:focus-visible {
+    outline: 0;
+  }
+
+  &[data-state='closed'] {
+    pointer-events: none;
+  }
+`;
diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
@@ -164,6 +164,10 @@ To change how long the menu waits until it opens or closes when `openOnHover` is
 <Menu.Root openOnHover delay={200}>
 ```
 
+## Radio items
+
+{{"demo": "RadioItems.js"}}
+
 ## Nested menu
 
 Menu items can open submenus.

diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import * as Menu from '@base_ui/react/Menu';
+import { createRenderer, describeConformance } from '../../../test';
+
+describe('<Menu.RadioGroup />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Menu.RadioGroup />, () => ({
+    render,
+    refInstanceof: window.HTMLDivElement,
+  }));
+
+  it('renders a div with the `group` role', async () => {
+    const { getByRole } = await render(<Menu.RadioGroup />);
+    expect(getByRole('group')).toBeVisible();
+  });
+});