From 88eaaf9ce49e092a902c18e0906cc6e68cfe9141 Mon Sep 17 00:00:00 2001 From: Whitewater Date: Mon, 29 May 2023 08:15:22 -0700 Subject: [PATCH] feat: add radio group (#2572) --- .../block-suite-page-list/index.tsx | 1 - .../pure/workspace-list-modal/styles.ts | 4 +- packages/component/package.json | 1 + .../component/src/stories/button.stories.tsx | 15 +++ packages/component/src/ui/button/dropdown.tsx | 2 +- packages/component/src/ui/button/radio.tsx | 35 ++++++ .../component/src/ui/button/styles.css.ts | 40 +++++++ yarn.lock | 104 ++++++++++++++++++ 8 files changed, 198 insertions(+), 4 deletions(-) create mode 100644 packages/component/src/ui/button/radio.tsx diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx index 05582ef00e..851debabaa 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx @@ -89,7 +89,6 @@ export const BlockSuitePageList: React.FC = ({ if (!filter[listType](pageMeta, pageMetas)) { return false; } - console.log(view); if (!view) { return true; } diff --git a/apps/web/src/components/pure/workspace-list-modal/styles.ts b/apps/web/src/components/pure/workspace-list-modal/styles.ts index 5493b582b0..cbb83e1a10 100644 --- a/apps/web/src/components/pure/workspace-list-modal/styles.ts +++ b/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)', }; }); diff --git a/packages/component/package.json b/packages/component/package.json index 740259ff13..0ee6fea6c3 100644 --- a/packages/component/package.json +++ b/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", diff --git a/packages/component/src/stories/button.stories.tsx b/packages/component/src/stories/button.stories.tsx index ed4b0ebe25..b6b636be92 100644 --- a/packages/component/src/stories/button.stories.tsx +++ b/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 ( + + All + Page + Edgeless + + ); +}; +RadioGroup.args = { + defaultValue: 'all', + onValueChange: (value: string) => toast(`Radio value: ${value}`), +}; + export const Test: StoryFn = () => { const [input, setInput] = useState(''); return ( diff --git a/packages/component/src/ui/button/dropdown.tsx b/packages/component/src/ui/button/dropdown.tsx index 002a69cb79..a9d103de91 100644 --- a/packages/component/src/ui/button/dropdown.tsx +++ b/packages/component/src/ui/button/dropdown.tsx @@ -29,4 +29,4 @@ export const DropdownButton = forwardRef< ); }); -DropdownButton.displayName = 'SimpleDropdownButton'; +DropdownButton.displayName = 'DropdownButton'; diff --git a/packages/component/src/ui/button/radio.tsx b/packages/component/src/ui/button/radio.tsx new file mode 100644 index 0000000000..7debf2c2be --- /dev/null +++ b/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( + ({ children, ...props }, ref) => { + return ( + + {children} + + {children} + + + ); + } +); +RadioButton.displayName = 'RadioButton'; + +export const RadioButtonGroup = forwardRef( + ({ ...props }, ref) => { + return ( + + ); + } +); +RadioButtonGroup.displayName = 'RadioButtonGroup'; diff --git a/packages/component/src/ui/button/styles.css.ts b/packages/component/src/ui/button/styles.css.ts index 32ee4a0ff9..d19fe29ce3 100644 --- a/packages/component/src/ui/button/styles.css.ts +++ b/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', +}); diff --git a/yarn.lock b/yarn.lock index c48a244a20..bc39c6f509 100644 --- a/yarn.lock +++ b/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"