From 70ce748d57dfbc8e04782a4c1232c9a2e4c87b02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 12 Oct 2023 09:43:35 +0800 Subject: [PATCH] fix: options missing id (#45287) --- .../index/components/Theme/ColorPicker.tsx | 4 +- .../index/components/Theme/RadiusPicker.tsx | 6 +- .../index/components/Theme/ThemePicker.tsx | 73 ++++++++++--------- .dumi/pages/index/components/Theme/index.tsx | 19 +++-- components/checkbox/Group.tsx | 6 +- components/checkbox/__tests__/group.test.tsx | 8 ++ components/radio/__tests__/group.test.tsx | 8 ++ components/radio/group.tsx | 1 + 8 files changed, 82 insertions(+), 43 deletions(-) diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx index fa080e7661..464566be47 100644 --- a/.dumi/pages/index/components/Theme/ColorPicker.tsx +++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx @@ -35,6 +35,7 @@ const useStyle = createStyles(({ token, css }) => ({ })); export interface ColorPickerProps { + id?: string; children?: React.ReactNode; value?: string | Color; onChange?: (value?: Color | string) => void; @@ -66,7 +67,7 @@ const DebouncedColorPicker: React.FC = (props) => { ); }; -const ThemeColorPicker: React.FC = ({ value, onChange }) => { +const ThemeColorPicker: React.FC = ({ value, onChange, id }) => { const { styles } = useStyle(); const matchColors = React.useMemo(() => { @@ -95,6 +96,7 @@ const ThemeColorPicker: React.FC = ({ value, onChange }) => { value={typeof value === 'string' ? value : value?.toHexString()} onChange={(event) => onChange?.(event.target.value)} style={{ width: 120 }} + id={id} /> diff --git a/.dumi/pages/index/components/Theme/RadiusPicker.tsx b/.dumi/pages/index/components/Theme/RadiusPicker.tsx index d0718b58e6..ee7f03e574 100644 --- a/.dumi/pages/index/components/Theme/RadiusPicker.tsx +++ b/.dumi/pages/index/components/Theme/RadiusPicker.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { InputNumber, Space, Slider } from 'antd'; +import { InputNumber, Slider, Space } from 'antd'; export interface RadiusPickerProps { + id?: string; value?: number; onChange?: (value: number | null) => void; } -export default function RadiusPicker({ value, onChange }: RadiusPickerProps) { +export default function RadiusPicker({ value, onChange, id }: RadiusPickerProps) { return ( `${val}px`} parser={(str) => (str ? parseFloat(str) : (str as any))} + id={id} /> ({ themeCard: css` - border-radius: ${token.borderRadius}px; - cursor: pointer; - transition: all ${token.motionDurationSlow}; - overflow: hidden; - display: inline-block; + border-radius: ${token.borderRadius}px; + cursor: pointer; + transition: all ${token.motionDurationSlow}; + overflow: hidden; + display: inline-block; - & > input[type="radio"] { - width: 0; - height: 0; - opacity: 0; - position: absolute; - } + & > input[type='radio'] { + width: 0; + height: 0; + opacity: 0; + position: absolute; + } - img { - vertical-align: top; - box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - } + img { + vertical-align: top; + box-shadow: + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + } - &:focus-within, - &:hover { - transform: scale(1.04); - } - `, + &:focus-within, + &:hover { + transform: scale(1.04); + } + `, themeCardActive: css` - box-shadow: 0 0 0 1px ${token.colorBgContainer}, - 0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary}; + box-shadow: + 0 0 0 1px ${token.colorBgContainer}, + 0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary}; - &, - &:hover:not(:focus-within) { - transform: scale(1); - } - `, + &, + &:hover:not(:focus-within) { + transform: scale(1); + } + `, })); export interface ThemePickerProps { + id?: string; value?: string; onChange?: (value: string) => void; } -export default function ThemePicker({ value, onChange }: ThemePickerProps) { +export default function ThemePicker(props: ThemePickerProps) { + const { value, onChange, id } = props; + const token = useTheme(); const { styles } = useStyle(); @@ -82,7 +89,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) { return ( - {Object.keys(THEMES).map((theme) => { + {Object.keys(THEMES).map((theme, index) => { const url = THEMES[theme as THEME]; return ( @@ -94,7 +101,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) { onChange?.(theme); }} > - + {theme} {locale[theme as keyof typeof locale]} diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index 258d0f64b9..e528a1ad39 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -534,11 +534,20 @@ export default function Theme() { - - - {locale.default} - {locale.compact} - + + diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index 4b6a304a65..94dba90665 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -1,11 +1,11 @@ +import * as React from 'react'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; + import { ConfigContext } from '../config-provider'; import type { CheckboxChangeEvent } from './Checkbox'; import Checkbox from './Checkbox'; import GroupContext from './GroupContext'; - import useStyle from './style'; export type CheckboxValueType = string | number | boolean; @@ -16,6 +16,7 @@ export interface CheckboxOptionType { style?: React.CSSProperties; disabled?: boolean; title?: string; + id?: string; onChange?: (e: CheckboxChangeEvent) => void; } @@ -124,6 +125,7 @@ const InternalGroup: React.ForwardRefRenderFunction {option.label} diff --git a/components/checkbox/__tests__/group.test.tsx b/components/checkbox/__tests__/group.test.tsx index cd643627cf..1178df5776 100644 --- a/components/checkbox/__tests__/group.test.tsx +++ b/components/checkbox/__tests__/group.test.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; + import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; @@ -268,4 +269,11 @@ describe('CheckboxGroup', () => { fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith(['A']); }); + + it('options support id', () => { + const { container } = render( + , + ); + expect(container.querySelector('#bamboo')).toBeTruthy(); + }); }); diff --git a/components/radio/__tests__/group.test.tsx b/components/radio/__tests__/group.test.tsx index 8839f89c4c..9179cd850d 100644 --- a/components/radio/__tests__/group.test.tsx +++ b/components/radio/__tests__/group.test.tsx @@ -1,5 +1,6 @@ import type { RefAttributes } from 'react'; import React from 'react'; + import type { RadioGroupProps } from '..'; import Radio from '..'; import { fireEvent, render } from '../../../tests/utils'; @@ -252,4 +253,11 @@ describe('Radio Group', () => { fireEvent.blur(container.firstChild!); expect(handleBlur).toHaveBeenCalledTimes(1); }); + + it('options support id', () => { + const { container } = render( + , + ); + expect(container.querySelector('#bamboo')).toBeTruthy(); + }); }); diff --git a/components/radio/group.tsx b/components/radio/group.tsx index a5c2cdd9a6..9e2efab1c5 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -79,6 +79,7 @@ const RadioGroup = React.forwardRef((props, ref checked={value === option.value} title={option.title} style={option.style} + id={option.id} > {option.label}