fix: options missing id

ant-design · Oct 11, 2023 · e9df555 · e9df555
1 parent 80da4e5
commit e9df555
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 47 deletions.
diff --git 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<ColorPickerProps> = (props) => {
   );
 };
 
-const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
+const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) => {
   const { styles } = useStyle();
 
   const matchColors = React.useMemo(() => {
@@ -95,6 +96,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}
         style={{ width: 120 }}
+        id={id}
       />
 
       <Space size="middle">

diff --git 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 (
     <Space size="large">
       <InputNumber
@@ -16,6 +17,7 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
         min={0}
         formatter={(val) => `${val}px`}
         parser={(str) => (str ? parseFloat(str) : (str as any))}
+        id={id}
       />
 
       <Slider

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -1,7 +1,8 @@
-import { createStyles, useTheme } from 'antd-style';
 import * as React from 'react';
-import classNames from 'classnames';
 import { Space } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import classNames from 'classnames';
+
 import useLocale from '../../../../hooks/useLocale';
 
 export const THEMES = {
@@ -33,56 +34,62 @@ const locales = {
 
 const useStyle = createStyles(({ token, css }) => ({
   themeCard: css`
-      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;
-      }
-
-      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);
-      }
-    `,
+    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;
+    }
+
+    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);
+    }
+  `,
 
   themeCardActive: css`
-      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);
-      }
-    `,
+    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);
+    }
+  `,
 }));
 
 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();
 
   const [locale] = useLocale(locales);
 
   return (
     <Space size={token.paddingLG}>
-      {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);
               }}
             >
-              <input type="radio" name="theme" />
+              <input type="radio" name="theme" id={index === 0 ? id : null} />
               <img src={url} alt={theme} />
             </label>
             <span>{locale[theme as keyof typeof locale]}</span>

diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
@@ -534,11 +534,20 @@ export default function Theme() {
                     <Form.Item label={locale.titleBorderRadius} name="borderRadius">
                       <RadiusPicker />
                     </Form.Item>
-                    <Form.Item label={locale.titleCompact} name="compact">
-                      <Radio.Group>
-                        <Radio value="default">{locale.default}</Radio>
-                        <Radio value="compact">{locale.compact}</Radio>
-                      </Radio.Group>
+                    <Form.Item label={locale.titleCompact} name="compact" htmlFor="compact_default">
+                      <Radio.Group
+                        options={[
+                          {
+                            label: locale.default,
+                            value: 'default',
+                            id: 'compact_default',
+                          },
+                          {
+                            label: locale.compact,
+                            value: 'compact',
+                          },
+                        ]}
+                      />
                     </Form.Item>
                   </Form>
                 </Card>

diff --git 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<HTMLDivElement, CheckboxGrou
           className={`${groupPrefixCls}-item`}
           style={option.style}
           title={option.title}
+          id={option.id}
         >
           {option.label}
         </Checkbox>

diff --git 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(
+      <Checkbox.Group options={[{ label: 'bamboo', id: 'bamboo', value: 'bamboo' }]} />,
+    );
+    expect(container.querySelector('#bamboo')).toBeTruthy();
+  });
 });
diff --git 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(
+      <Radio.Group options={[{ label: 'bamboo', id: 'bamboo', value: 'bamboo' }]} />,
+    );
+    expect(container.querySelector('#bamboo')).toBeTruthy();
+  });
 });
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
@@ -79,6 +79,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
           checked={value === option.value}
           title={option.title}
           style={option.style}
+          id={option.id}
         >
           {option.label}
         </Radio>