feat: add radio group (#2572)

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -89,7 +89,6 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
         if (!filter[listType](pageMeta, pageMetas)) {
           return false;
         }
-        console.log(view);
         if (!view) {
           return true;
         }

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -58,7 +58,7 @@ export const StyledCreateWorkspaceCard = styled('div')(() => {
       background: 'var(--affine-hover-color)',
       color: 'var(--affine-text-primary-color)',
       '.add-icon': {
-        borderColor: 'var(--affine-white-color)',
+        borderColor: 'var(--affine-white)',
         color: 'var(--affine-primary-color)',
       },
     },
@@ -156,7 +156,7 @@ export const StyleWorkspaceAdd = styled('div')(() => {
     transition: 'background .2s',
     fontSize: '24px',
     ...displayFlex('center', 'center'),
-    borderColor: 'var(--affine-white-color)',
+    borderColor: 'var(--affine-white)',
     color: 'var(--affine-primary-color)',
   };
 });

packages/component/package.json

@@ -37,6 +37,7 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-toast": "^1.1.4",
     "@toeverything/hooks": "workspace:*",
     "@toeverything/theme": "^0.6.1",

packages/component/src/stories/button.stories.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Button } from '../ui/button/button';
 import { DropdownButton } from '../ui/button/dropdown';
 import type { ButtonProps } from '../ui/button/interface';
+import { RadioButton, RadioButtonGroup } from '../ui/button/radio';
 import { Menu } from '../ui/menu/menu';
 import { toast } from '../ui/toast/toast';
 
@@ -91,6 +92,20 @@ Dropdown.args = {
   onClickDropDown: () => toast('Click dropdown'),
 };
 
+export const RadioGroup: StoryFn = ({ ...props }) => {
+  return (
+    <RadioButtonGroup {...props}>
+      <RadioButton value="all">All</RadioButton>
+      <RadioButton value="page">Page</RadioButton>
+      <RadioButton value="edgeless">Edgeless</RadioButton>
+    </RadioButtonGroup>
+  );
+};
+RadioGroup.args = {
+  defaultValue: 'all',
+  onValueChange: (value: string) => toast(`Radio value: ${value}`),
+};
+
 export const Test: StoryFn<ButtonProps> = () => {
   const [input, setInput] = useState('');
   return (

packages/component/src/ui/button/dropdown.tsx

@@ -29,4 +29,4 @@ export const DropdownButton = forwardRef<
     </button>
   );
 });
-DropdownButton.displayName = 'SimpleDropdownButton';
+DropdownButton.displayName = 'DropdownButton';

packages/component/src/ui/button/radio.tsx

@@ -0,0 +1,35 @@
+import type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '@radix-ui/react-radio-group';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { forwardRef } from 'react';
+
+import * as styles from './styles.css';
+
+export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <RadioGroup.Item ref={ref} {...props}>
+        <span className={styles.radioUncheckedButton}>{children}</span>
+        <RadioGroup.Indicator className={styles.radioButton}>
+          {children}
+        </RadioGroup.Indicator>
+      </RadioGroup.Item>
+    );
+  }
+);
+RadioButton.displayName = 'RadioButton';
+
+export const RadioButtonGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ ...props }, ref) => {
+    return (
+      <RadioGroup.Root
+        ref={ref}
+        className={styles.radioButtonGroup}
+        {...props}
+      ></RadioGroup.Root>
+    );
+  }
+);
+RadioButtonGroup.displayName = 'RadioButtonGroup';

packages/component/src/ui/button/styles.css.ts

@@ -52,3 +52,43 @@ export const icon = style({
     },
   },
 });
+
+export const radioButton = style({
+  fontSize: 'var(--affine-font-xs)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '75px',
+  height: '24px',
+  borderRadius: '8px',
+  filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+    '&[data-state="checked"]': {
+      background: 'var(--affine-white)',
+    },
+  },
+});
+
+export const radioUncheckedButton = style([
+  radioButton,
+  {
+    selectors: {
+      '[data-state="checked"] > &': {
+        display: 'none',
+      },
+    },
+  },
+]);
+
+export const radioButtonGroup = style({
+  display: 'inline-flex',
+  alignItems: 'flex-start',
+  background: 'var(--affine-hover-color)',
+  borderRadius: '10px',
+  padding: '2px',
+});

yarn.lock

@@ -68,6 +68,7 @@ __metadata:
     "@popperjs/core": ^2.11.8
     "@radix-ui/react-avatar": ^1.0.3
     "@radix-ui/react-collapsible": ^1.0.3
+    "@radix-ui/react-radio-group": ^1.1.3
     "@radix-ui/react-toast": ^1.1.4
     "@storybook/addon-actions": ^7.0.18
     "@storybook/addon-coverage": ^0.0.8
@@ -6606,6 +6607,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-direction@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-direction@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 5336a8b0d4f1cde585d5c2b4448af7b3d948bb63a1aadb37c77771b0e5902dc6266e409cf35fd0edaca7f33e26424be19e64fb8f9d7f7be2d6f1714ea2764210
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dismissable-layer@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-dismissable-layer@npm:1.0.0"
@@ -6815,6 +6831,63 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-radio-group@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/react-radio-group@npm:1.1.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-direction": 1.0.1
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-roving-focus": 1.0.4
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-use-previous": 1.0.1
+    "@radix-ui/react-use-size": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 88f7007610817ab30f471a7e1f6605e94cc507a31fb4bb218116d65cc48c9b3149fce500f386716a3ed5fb0089d65faf32d3e01971322cd4a14b51003ec82bc2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-roving-focus@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-roving-focus@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-collection": 1.0.3
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-direction": 1.0.1
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/react-use-controllable-state": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 69b1c82c2d9db3ba71549a848f2704200dab1b2cd22d050c1e081a78b9a567dbfdc7fd0403ee010c19b79652de69924d8ca2076cd031d6552901e4213493ffc7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-scroll-area@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-scroll-area@npm:1.0.2"
@@ -7015,6 +7088,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-previous@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-previous@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-size@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 6cc150ad1e9fa85019c225c5a5d50a0af6cdc4653dad0c21b4b40cd2121f36ee076db326c43e6bc91a69766ccff5a84e917d27970176b592577deea3c85a3e26
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-visually-hidden@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"