From 390e34614110a99fe197191e9898d7c982ad7fa5 Mon Sep 17 00:00:00 2001 From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:04:15 +0800 Subject: [PATCH 01/41] feat: add mousePosition prop for confirm dialog (#51576) --- components/modal/ConfirmDialog.tsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index 973d450f11..097a40b8b6 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -173,11 +173,6 @@ const ConfirmDialog: React.FC = (props) => { const { close, zIndex, - afterClose, - open, - keyboard, - centered, - getContainer, maskStyle, direction, prefixCls, @@ -185,9 +180,6 @@ const ConfirmDialog: React.FC = (props) => { rootPrefixCls, bodyStyle, closable = false, - closeIcon, - modalRender, - focusTriggerAfterClose, onConfirm, styles, } = props; @@ -234,7 +226,7 @@ const ConfirmDialog: React.FC = (props) => { // ========================= Render ========================= return ( = (props) => { close?.({ triggerCancel: true }); onConfirm?.(false); }} - open={open} title="" footer={null} transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)} @@ -255,14 +246,7 @@ const ConfirmDialog: React.FC = (props) => { styles={{ body: bodyStyle, mask: maskStyle, ...styles }} width={width} zIndex={mergedZIndex} - afterClose={afterClose} - keyboard={keyboard} - centered={centered} - getContainer={getContainer} closable={closable} - closeIcon={closeIcon} - modalRender={modalRender} - focusTriggerAfterClose={focusTriggerAfterClose} > From 67738152fe3156d8699223a8caaee4d7bced894c Mon Sep 17 00:00:00 2001 From: Oyster Lee Date: Thu, 14 Nov 2024 09:54:20 +0800 Subject: [PATCH 02/41] feat(Splitter): add lazy mode (#51557) Co-authored-by: afc163 Co-authored-by: lijianan <574980606@qq.com> --- components/splitter/SplitBar.tsx | 66 +++++- components/splitter/Splitter.tsx | 3 + .../__snapshots__/demo-extend.test.ts.snap | 122 ++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 120 ++++++++++ components/splitter/__tests__/lazy.test.tsx | 208 ++++++++++++++++++ components/splitter/demo/lazy.md | 7 + components/splitter/demo/lazy.tsx | 37 ++++ components/splitter/index.en-US.md | 2 + components/splitter/index.zh-CN.md | 14 +- components/splitter/interface.ts | 1 + components/splitter/style/index.ts | 37 ++++ 11 files changed, 608 insertions(+), 9 deletions(-) create mode 100644 components/splitter/__tests__/lazy.test.tsx create mode 100644 components/splitter/demo/lazy.md create mode 100644 components/splitter/demo/lazy.tsx diff --git a/components/splitter/SplitBar.tsx b/components/splitter/SplitBar.tsx index 32f30c0e78..2319a948f7 100644 --- a/components/splitter/SplitBar.tsx +++ b/components/splitter/SplitBar.tsx @@ -4,6 +4,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined'; import RightOutlined from '@ant-design/icons/RightOutlined'; import UpOutlined from '@ant-design/icons/UpOutlined'; import classNames from 'classnames'; +import useEvent from 'rc-util/lib/hooks/useEvent'; export interface SplitBarProps { index: number; @@ -20,6 +21,8 @@ export interface SplitBarProps { ariaNow: number; ariaMin: number; ariaMax: number; + lazy?: boolean; + containerSize: number; } function getValidNumber(num: number | undefined): number { @@ -42,12 +45,18 @@ const SplitBar: React.FC = (props) => { onOffsetUpdate, onOffsetEnd, onCollapse, + lazy, + containerSize, } = props; const splitBarPrefixCls = `${prefixCls}-bar`; // ======================== Resize ======================== const [startPos, setStartPos] = useState<[x: number, y: number] | null>(null); + const [constrainedOffset, setConstrainedOffset] = useState(0); + + const constrainedOffsetX = vertical ? 0 : constrainedOffset; + const constrainedOffsetY = vertical ? constrainedOffset : 0; const onMouseDown: React.MouseEventHandler = (e) => { if (resizable && e.currentTarget) { @@ -64,6 +73,30 @@ const SplitBar: React.FC = (props) => { } }; + // Updated constraint calculation + const getConstrainedOffset = (rawOffset: number) => { + const currentPos = (containerSize * ariaNow) / 100; + const newPos = currentPos + rawOffset; + + // Calculate available space + const minAllowed = Math.max(0, (containerSize * ariaMin) / 100); + const maxAllowed = Math.min(containerSize, (containerSize * ariaMax) / 100); + + // Constrain new position within bounds + const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos)); + return clampedPos - currentPos; + }; + + const handleLazyMove = useEvent((offsetX: number, offsetY: number) => { + const constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX); + setConstrainedOffset(constrainedOffsetValue); + }); + + const handleLazyEnd = useEvent(() => { + onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY); + setConstrainedOffset(0); + }); + React.useEffect(() => { if (startPos) { const onMouseMove = (e: MouseEvent) => { @@ -71,10 +104,17 @@ const SplitBar: React.FC = (props) => { const offsetX = pageX - startPos[0]; const offsetY = pageY - startPos[1]; - onOffsetUpdate(index, offsetX, offsetY); + if (lazy) { + handleLazyMove(offsetX, offsetY); + } else { + onOffsetUpdate(index, offsetX, offsetY); + } }; const onMouseUp = () => { + if (lazy) { + handleLazyEnd(); + } setStartPos(null); onOffsetEnd(); }; @@ -85,11 +125,18 @@ const SplitBar: React.FC = (props) => { const offsetX = touch.pageX - startPos[0]; const offsetY = touch.pageY - startPos[1]; - onOffsetUpdate(index, offsetX, offsetY); + if (lazy) { + handleLazyMove(offsetX, offsetY); + } else { + onOffsetUpdate(index, offsetX, offsetY); + } } }; const handleTouchEnd = () => { + if (lazy) { + handleLazyEnd(); + } setStartPos(null); onOffsetEnd(); }; @@ -106,7 +153,11 @@ const SplitBar: React.FC = (props) => { window.removeEventListener('touchend', handleTouchEnd); }; } - }, [startPos]); + }, [startPos, lazy, vertical, index, containerSize, ariaNow, ariaMin, ariaMax]); + + const transformStyle = { + [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`, + }; // ======================== Render ======================== const StartIcon = vertical ? UpOutlined : LeftOutlined; @@ -120,6 +171,15 @@ const SplitBar: React.FC = (props) => { aria-valuemin={getValidNumber(ariaMin)} aria-valuemax={getValidNumber(ariaMax)} > + {lazy && ( +
+ )} +
> = (props) => { onResizeStart, onResize, onResizeEnd, + lazy, } = props; const { getPrefixCls, direction, splitter } = React.useContext(ConfigContext); @@ -170,6 +171,7 @@ const Splitter: React.FC> = (props) => { splitBar = ( > = (props) => { }} onOffsetEnd={onInternalResizeEnd} onCollapse={onInternalCollapse} + containerSize={containerSize || 0} /> ); } diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap index 9ebbbd18c7..68abd5e69b 100644 --- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -562,6 +562,128 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`] exports[`renders components/splitter/demo/group.tsx extend context correctly 2`] = `[]`; +exports[`renders components/splitter/demo/lazy.tsx extend context correctly 1`] = ` +
+
+
+
+
+
+ First +
+
+
+ +
+
+
+
+
+ First +
+
+
+ +
+`; + +exports[`renders components/splitter/demo/lazy.tsx extend context correctly 2`] = `[]`; + exports[`renders components/splitter/demo/multiple.tsx extend context correctly 1`] = `
`; +exports[`renders components/splitter/demo/lazy.tsx correctly 1`] = ` +
+
+
+
+
+
+ First +
+
+
+ +
+
+
+
+
+ First +
+
+
+ +
+`; + exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
( + + {items?.map((item, idx) => { + const key = `panel-${idx}`; + return ; + })} + +); + +const resizeSplitter = async () => { + triggerResize(document.body.querySelector('.ant-splitter')!); + await waitFakeTimer(); +}; + +describe('Splitter lazy', () => { + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + let containerSize = 100; + + beforeAll(() => { + spyElementPrototypes(HTMLElement, { + offsetWidth: { + get: () => containerSize, + }, + offsetHeight: { + get: () => containerSize, + }, + }); + }); + + beforeEach(() => { + containerSize = 100; + errSpy.mockReset(); + resetWarned(); + }); + + afterEach(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + + const mockDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => { + // Down + const downEvent = createEvent.mouseDown(draggerEle); + (downEvent as any).pageX = 0; + (downEvent as any).pageY = 0; + + fireEvent(draggerEle, downEvent); + + // Move + const moveEvent = createEvent.mouseMove(window); + (moveEvent as any).pageX = offset; + (moveEvent as any).pageY = offset; + fireEvent(window, moveEvent); + + expect(onResize).not.toHaveBeenCalled(); + + // Up + fireEvent.mouseUp(window); + }; + + const mockTouchDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => { + const touchStart = createEvent.touchStart(draggerEle, { + touches: [{ pageX: 0, pageY: 0 }], + }); + fireEvent(draggerEle, touchStart); + + // Touch Move + const touchMove = createEvent.touchMove(window, { + touches: [{ pageX: offset, pageY: offset }], + }); + fireEvent(window, touchMove); + + // onResize should not be called during drag + expect(onResize).not.toHaveBeenCalled(); + + // Touch End + fireEvent.touchEnd(window); + }; + + it('should only update after mouse up when lazy is true', async () => { + const onResize = jest.fn(); + const onResizeEnd = jest.fn(); + + const { container } = render( + , + ); + + await resizeSplitter(); + + // Right + mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000); + expect(onResize).toHaveBeenCalledWith([70, 30]); + + // Left + onResize.mockReset(); + mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000); + expect(onResize).toHaveBeenCalledWith([30, 70]); + }); + + it('should work with touch events when lazy', async () => { + const onResize = jest.fn(); + const onResizeEnd = jest.fn(); + + const { container } = render( + , + ); + + await resizeSplitter(); + + // Right + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000); + expect(onResize).toHaveBeenCalledWith([70, 30]); + + // Left + onResize.mockReset(); + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000); + expect(onResize).toHaveBeenCalledWith([30, 70]); + }); + + it('should work with vertical splitter', async () => { + const onResize = jest.fn(); + const onResizeEnd = jest.fn(); + + const { container } = render( + , + ); + + await resizeSplitter(); + + // Drag Down + mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000); + expect(onResize).toHaveBeenCalledWith([70, 30]); + + // Drag Up + onResize.mockReset(); + mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000); + expect(onResize).toHaveBeenCalledWith([30, 70]); + + // Touch Drag Down + onResize.mockReset(); + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000); + expect(onResize).toHaveBeenCalledWith([70, 30]); + + // Touch Drag Up + onResize.mockReset(); + mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000); + expect(onResize).toHaveBeenCalledWith([30, 70]); + }); +}); diff --git a/components/splitter/demo/lazy.md b/components/splitter/demo/lazy.md new file mode 100644 index 0000000000..61a9ba34d5 --- /dev/null +++ b/components/splitter/demo/lazy.md @@ -0,0 +1,7 @@ +## zh-CN + +延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。 + +## en-US + +Lazy mode, dragging does not update the size immediately, but updates when released. diff --git a/components/splitter/demo/lazy.tsx b/components/splitter/demo/lazy.tsx new file mode 100644 index 0000000000..368c81d4f6 --- /dev/null +++ b/components/splitter/demo/lazy.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Flex, Space, Splitter, Typography } from 'antd'; + +const Desc: React.FC> = (props) => ( + + + {props.text} + + +); + +const App: React.FC = () => ( + + + + + + + + + + + + + + + + + + +); + +export default App; diff --git a/components/splitter/index.en-US.md b/components/splitter/index.en-US.md index a006539b02..e116db937c 100644 --- a/components/splitter/index.en-US.md +++ b/components/splitter/index.en-US.md @@ -24,6 +24,7 @@ Can be used to separate areas horizontally or vertically. When you need to freel Multiple panels Complex combination Nested in tabs +Lazy Debug ## API @@ -40,6 +41,7 @@ Common props ref：[Common props](/docs/react/common-props) | onResizeStart | Callback before dragging starts | `(sizes: number[]) => void` | - | - | | onResize | Panel size change callback | `(sizes: number[]) => void` | - | - | | onResizeEnd | Drag end callback | `(sizes: number[]) => void` | - | - | +| lazy | Lazy mode | `boolean` | `false` | 5.23.0 | ### Panel diff --git a/components/splitter/index.zh-CN.md b/components/splitter/index.zh-CN.md index 3f79bfc14d..5234aa2244 100644 --- a/components/splitter/index.zh-CN.md +++ b/components/splitter/index.zh-CN.md @@ -27,6 +27,7 @@ tag: 5.21.0 多面板 复杂组合 标签页中嵌套 +延迟渲染模式 调试 ## API @@ -37,12 +38,13 @@ tag: 5.21.0 ### Splitter -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------- | ---------------- | --------------------------- | ------------ | ---- | -| layout | 布局方向 | `horizontal` \| `vertical` | `horizontal` | - | -| onResizeStart | 开始拖拽之前回调 | `(sizes: number[]) => void` | - | - | -| onResize | 面板大小变化回调 | `(sizes: number[]) => void` | - | - | -| onResizeEnd | 拖拽结束回调 | `(sizes: number[]) => void` | - | - | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ------------- | ---------------- | --------------------------- | ------------ | ------ | +| layout | 布局方向 | `horizontal` \| `vertical` | `horizontal` | - | +| onResizeStart | 开始拖拽之前回调 | `(sizes: number[]) => void` | - | - | +| onResize | 面板大小变化回调 | `(sizes: number[]) => void` | - | - | +| onResizeEnd | 拖拽结束回调 | `(sizes: number[]) => void` | - | - | +| lazy | 延迟渲染模式 | `boolean` | `false` | 5.23.0 | ### Panel diff --git a/components/splitter/interface.ts b/components/splitter/interface.ts index aeada36424..4f5bc2ec79 100644 --- a/components/splitter/interface.ts +++ b/components/splitter/interface.ts @@ -8,6 +8,7 @@ export interface SplitterProps { onResizeStart?: (sizes: number[]) => void; onResize?: (sizes: number[]) => void; onResizeEnd?: (sizes: number[]) => void; + lazy?: boolean; } export interface PanelProps { diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts index 59f1ff6268..395e6624b3 100644 --- a/components/splitter/style/index.ts +++ b/components/splitter/style/index.ts @@ -83,6 +83,7 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C controlItemBgHover, controlItemBgActive, controlItemBgActiveHover, + prefixCls, } = token; const splitBarCls = `${componentCls}-bar`; @@ -91,6 +92,18 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal(); + const splitterBarPreviewOffsetVar = `${prefixCls}-bar-preview-offset`; + + const splitterBarPreviewStyle: CSSObject = { + position: 'absolute', + background: token.colorPrimary, + opacity: 0.2, + pointerEvents: 'none', + transition: 'none', + zIndex: 1, + display: 'none', + }; + return { [componentCls]: { ...resetComponent(token), @@ -217,6 +230,18 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C [`> ${splitBarCls}`]: { width: 0, + // ======================= Preview ======================= + [`${splitBarCls}-preview`]: { + height: '100%', + width: splitBarSize, + ...splitterBarPreviewStyle, + + [`&${splitBarCls}-preview-active`]: { + display: 'block', + transform: `translateX(var(--${splitterBarPreviewOffsetVar}))`, + }, + }, + // ======================= Dragger ======================= [`${splitBarCls}-dragger`]: { cursor: 'col-resize', @@ -272,6 +297,18 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C [`> ${splitBarCls}`]: { height: 0, + // ======================= Preview ======================= + [`${splitBarCls}-preview`]: { + height: splitBarSize, + width: '100%', + ...splitterBarPreviewStyle, + + [`&${splitBarCls}-preview-active`]: { + display: 'block', + transform: `translateY(var(--${splitterBarPreviewOffsetVar}))`, + }, + }, + // ======================= Dragger ======================= [`${splitBarCls}-dragger`]: { cursor: 'row-resize', From fdb07d186465094ff1ac5e75e999546f47fd9055 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: Mon, 18 Nov 2024 10:27:59 +0800 Subject: [PATCH 03/41] feat: Modal `width` support responsive size (#51653) * feat: Modal support responsive width * docs: update doc * test: update snapshot --- components/grid/col.tsx | 11 +++---- components/grid/style/index.ts | 28 ++++++++++------ components/modal/Modal.tsx | 29 +++++++++++++++-- components/modal/__tests__/Modal.test.tsx | 16 ++++++++++ .../__snapshots__/demo-extend.test.ts.snap | 26 +++++++++++---- .../__snapshots__/demo.test.tsx.snap | 26 +++++++++++---- components/modal/demo/width.tsx | 32 +++++++++++++++++-- components/modal/index.en-US.md | 2 +- components/modal/index.zh-CN.md | 2 +- components/modal/interface.ts | 5 +-- components/modal/style/index.ts | 26 +++++++++++++++ 11 files changed, 163 insertions(+), 40 deletions(-) diff --git a/components/grid/col.tsx b/components/grid/col.tsx index fc82d268e7..95063d5150 100644 --- a/components/grid/col.tsx +++ b/components/grid/col.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; +import type { Breakpoint } from '../_util/responsiveObserver'; import type { LiteralUnion } from '../_util/type'; import { ConfigContext } from '../config-provider'; import RowContext from './RowContext'; @@ -20,19 +21,15 @@ export interface ColSize { pull?: ColSpanType; } -export interface ColProps extends React.HTMLAttributes { +export interface ColProps + extends React.HTMLAttributes, + Partial> { flex?: FlexType; span?: ColSpanType; order?: ColSpanType; offset?: ColSpanType; push?: ColSpanType; pull?: ColSpanType; - xs?: ColSpanType | ColSize; - sm?: ColSpanType | ColSize; - md?: ColSpanType | ColSize; - lg?: ColSpanType | ColSize; - xl?: ColSpanType | ColSize; - xxl?: ColSpanType | ColSize; prefixCls?: string; } diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts index 1f2c16c29a..3103ff0e99 100644 --- a/components/grid/style/index.ts +++ b/components/grid/style/index.ts @@ -1,7 +1,7 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; -import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; +import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default @@ -183,26 +183,34 @@ export const prepareColComponentToken: GetDefaultToken<'Grid'> = () => ({}); // ============================== Export ============================== export const useRowStyle = genStyleHooks('Grid', genGridRowStyle, prepareRowComponentToken); +export const getMediaSize = (token: AliasToken) => { + const mediaSizesMap = { + xs: token.screenXSMin, + sm: token.screenSMMin, + md: token.screenMDMin, + lg: token.screenLGMin, + xl: token.screenXLMin, + xxl: token.screenXXLMin, + } as const; + + return mediaSizesMap; +}; + export const useColStyle = genStyleHooks( 'Grid', (token) => { const gridToken: GridColToken = mergeToken(token, { gridColumns: 24, // Row is divided into 24 parts in Grid }); - const gridMediaSizesMap = { - '-sm': gridToken.screenSMMin, - '-md': gridToken.screenMDMin, - '-lg': gridToken.screenLGMin, - '-xl': gridToken.screenXLMin, - '-xxl': gridToken.screenXXLMin, - } as const; - type GridMediaSize = keyof typeof gridMediaSizesMap; + const gridMediaSizesMap: Record = getMediaSize(gridToken); + delete gridMediaSizesMap.xs; + return [ genGridColStyle(gridToken), genGridStyle(gridToken, ''), genGridStyle(gridToken, '-xs'), Object.keys(gridMediaSizesMap) - .map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key as GridMediaSize], key)) + .map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key], `-${key}`)) .reduce((pre, cur) => ({ ...pre, ...cur }), {}), ]; }, diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 3533c01568..367fceb15d 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -7,6 +7,7 @@ import ContextIsolator from '../_util/ContextIsolator'; import useClosable, { pickClosable } from '../_util/hooks/useClosable'; import { useZIndex } from '../_util/hooks/useZIndex'; import { getTransitionName } from '../_util/motion'; +import { Breakpoint } from '../_util/responsiveObserver'; import { canUseDocElement } from '../_util/styleChecker'; import { devUseWarning } from '../_util/warning'; import zIndexContext from '../_util/zindexContext'; @@ -124,12 +125,36 @@ const Modal: React.FC = (props) => { // ============================ zIndex ============================ const [zIndex, contextZIndex] = useZIndex('Modal', restProps.zIndex); + // =========================== Width ============================ + const [numWidth, responsiveWidth] = React.useMemo< + [string | number | undefined, Partial> | undefined] + >(() => { + if (width && typeof width === 'object') { + return [undefined, width]; + } + return [width, undefined]; + }, [width]); + + const responsiveWidthVars = React.useMemo(() => { + const vars: Record = {}; + if (responsiveWidth) { + Object.keys(responsiveWidth).forEach((breakpoint) => { + const breakpointWidth = responsiveWidth[breakpoint as Breakpoint]; + if (breakpointWidth !== undefined) { + vars[`--${prefixCls}-${breakpoint}-width`] = + typeof breakpointWidth === 'number' ? `${breakpointWidth}px` : breakpointWidth; + } + }); + } + return vars; + }, [responsiveWidth]); + // =========================== Render =========================== return wrapCSSVar( = (props) => { transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)} maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)} className={classNames(hashId, className, modalContext?.className)} - style={{ ...modalContext?.style, ...style }} + style={{ ...modalContext?.style, ...style, ...responsiveWidthVars }} classNames={{ ...modalContext?.classNames, ...modalClassNames, diff --git a/components/modal/__tests__/Modal.test.tsx b/components/modal/__tests__/Modal.test.tsx index c432b9446c..134d126bd2 100644 --- a/components/modal/__tests__/Modal.test.tsx +++ b/components/modal/__tests__/Modal.test.tsx @@ -192,4 +192,20 @@ describe('Modal', () => { expect(document.querySelector('.first-origin')).toMatchSnapshot(); expect(document.querySelector('.second-props-origin')).toMatchSnapshot(); }); + + it('responsive width', () => { + render( + , + ); + + const modalEle = document.querySelector('.ant-modal')!; + expect(modalEle).toHaveStyle({ + '--ant-modal-xs-width': '90%', + '--ant-modal-sm-width': '80%', + '--ant-modal-md-width': '70%', + '--ant-modal-lg-width': '60%', + '--ant-modal-xl-width': '50%', + '--ant-modal-xxl-width': '40%', + }); + }); }); diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap index f4a9d63ee1..0235718a76 100644 --- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1228,14 +1228,26 @@ exports[`renders components/modal/demo/static-info.tsx extend context correctly exports[`renders components/modal/demo/static-info.tsx extend context correctly 2`] = `[]`; exports[`renders components/modal/demo/width.tsx extend context correctly 1`] = ` - + + +
`; exports[`renders components/modal/demo/width.tsx extend context correctly 2`] = `[]`; diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap index f2c84908be..17817d8707 100644 --- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap @@ -1188,14 +1188,26 @@ exports[`renders components/modal/demo/static-info.tsx correctly 1`] = ` `; exports[`renders components/modal/demo/width.tsx correctly 1`] = ` - + + +
`; exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = ` diff --git a/components/modal/demo/width.tsx b/components/modal/demo/width.tsx index 9a353f98ee..f492e4194c 100644 --- a/components/modal/demo/width.tsx +++ b/components/modal/demo/width.tsx @@ -1,11 +1,13 @@ import React, { useState } from 'react'; -import { Button, Modal } from 'antd'; +import { Button, Flex, Modal } from 'antd'; const App: React.FC = () => { const [open, setOpen] = useState(false); + const [openResponsive, setOpenResponsive] = useState(false); return ( - <> + + {/* Basic */} @@ -21,7 +23,31 @@ const App: React.FC = () => {

some contents...

some contents...

- + + {/* Responsive */} + + setOpenResponsive(false)} + onCancel={() => setOpenResponsive(false)} + width={{ + xs: '90%', + sm: '80%', + md: '70%', + lg: '60%', + xl: '50%', + xxl: '40%', + }} + > +

some contents...

+

some contents...

+

some contents...

+ + ); }; diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index b27d6e714f..bd04d5c6d5 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -72,7 +72,7 @@ Common props ref：[Common props](/docs/react/common-props) | loading | Show the skeleton | boolean | | 5.18.0 | | title | The modal dialog's title | ReactNode | - | | | open | Whether the modal dialog is visible or not | boolean | false | | -| width | Width of the modal dialog | string \| number | 520 | | +| width | Width of the modal dialog | string \| number \| [Breakpoint](/components/grid-cn#col) | 520 | Breakpoint: 5.23.0 | | wrapClassName | The class name of the container of the modal dialog | string | - | | | zIndex | The `z-index` of the Modal | number | 1000 | | | onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - | | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 4fbac6ecc6..7f2446217e 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -73,7 +73,7 @@ demo: | loading | 显示骨架屏 | boolean | | 5.18.0 | | title | 标题 | ReactNode | - | | | open | 对话框是否可见 | boolean | - | | -| width | 宽度 | string \| number | 520 | | +| width | 宽度 | string \| number \| [Breakpoint](/components/grid-cn#col) | 520 | Breakpoint: 5.23.0 | | wrapClassName | 对话框外层容器的类名 | string | - | | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | | diff --git a/components/modal/interface.ts b/components/modal/interface.ts index 6064820d41..c37268ca7b 100644 --- a/components/modal/interface.ts +++ b/components/modal/interface.ts @@ -1,10 +1,11 @@ import type React from 'react'; import type { DialogProps } from 'rc-dialog'; +import { Breakpoint } from '../_util/responsiveObserver'; import type { ButtonProps, LegacyButtonType } from '../button/button'; import type { DirectionType } from '../config-provider'; -interface ModalCommonProps extends Omit { +interface ModalCommonProps extends Omit { footer?: | React.ReactNode | (( @@ -30,7 +31,7 @@ export interface ModalProps extends ModalCommonProps { /** Centered Modal */ centered?: boolean; /** Width of the modal dialog */ - width?: string | number; + width?: string | number | Partial>; /** Text of the OK button */ okText?: React.ReactNode; /** Button `type` of the OK button */ diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts index 1c37558a6b..602779d1dd 100644 --- a/components/modal/style/index.ts +++ b/components/modal/style/index.ts @@ -1,6 +1,7 @@ import type React from 'react'; import { unit } from '@ant-design/cssinjs'; +import { getMediaSize } from '../../grid/style'; import { genFocusStyle, resetComponent } from '../../style'; import { initFadeMotion, initZoomMotion } from '../../style/motion'; import type { @@ -386,6 +387,30 @@ const genRTLStyle: GenerateStyle = (token) => { }; }; +const genResponsiveWidthStyle: GenerateStyle = (token) => { + const { componentCls } = token; + + const gridMediaSizesMap: Record = getMediaSize(token); + delete gridMediaSizesMap.xs; + + const responsiveStyles = Object.keys(gridMediaSizesMap).map((key) => ({ + [`@media (min-width: ${unit(gridMediaSizesMap[key])})`]: { + width: `var(--${componentCls.replace('.', '')}-${key}-width)`, + }, + })); + + return { + [`${componentCls}-root`]: { + [componentCls]: [ + { + width: `var(--${componentCls.replace('.', '')}-xs-width)`, + }, + ...responsiveStyles, + ], + }, + }; +}; + // ============================== Export ============================== export const prepareToken: (token: Parameters>[0]) => ModalToken = (token) => { const headerPaddingVertical = token.padding; @@ -453,6 +478,7 @@ export default genStyleHooks( genRTLStyle(modalToken), genModalMaskStyle(modalToken), initZoomMotion(modalToken, 'zoom'), + genResponsiveWidthStyle(modalToken), ]; }, prepareComponentToken, From 291cb21ea40294485249d112f578c83ebee1dad3 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 22 Nov 2024 17:08:30 +0800 Subject: [PATCH 04/41] feat(Segmented): support `name` prop to enable grouping (#51725) --- .../__snapshots__/demo-extend.test.ts.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 9 + .../__tests__/__snapshots__/demo.test.ts.snap | 9 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 6 + .../__tests__/__snapshots__/demo.test.ts.snap | 6 + .../__snapshots__/demo-extend.test.ts.snap | 176 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 174 +++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 40 ++++ components/segmented/__tests__/index.test.tsx | 11 ++ components/segmented/demo/with-name.md | 7 + components/segmented/demo/with-name.tsx | 8 + components/segmented/index.en-US.md | 17 +- components/segmented/index.zh-CN.md | 2 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__tests__/__snapshots__/demo.test.ts.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + package.json | 2 +- 22 files changed, 484 insertions(+), 9 deletions(-) create mode 100644 components/segmented/demo/with-name.md create mode 100644 components/segmented/demo/with-name.tsx diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 97636aaef0..9bb52a7925 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3990,6 +3990,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c class="ant-segmented-item" > diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap index 28269eef86..c2aff8a9b4 100644 --- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -19,6 +19,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -52,6 +54,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -68,6 +71,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -84,6 +88,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -100,6 +105,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -129,6 +135,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -162,6 +170,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap index 2834493b42..6f554e02f6 100644 --- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap @@ -19,6 +19,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -52,6 +54,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -68,6 +71,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -84,6 +88,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -100,6 +105,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -129,6 +135,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -162,6 +170,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 0e32f7d2f5..552325e25f 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -30843,6 +30843,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item" > @@ -30859,6 +30860,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 073d0bbb64..b2d464e83e 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -13088,6 +13088,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -13104,6 +13105,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index b58dcb581e..18794b564f 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap index 0404d1b67f..770d94eba7 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap index db44c8a9ee..1b8cd8073b 100644 --- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -398,6 +398,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -488,6 +490,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -521,6 +525,7 @@ Array [ class="ant-segmented-item" > @@ -537,6 +542,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap index f3accc9587..19a889e18c 100644 --- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap @@ -356,6 +356,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -444,6 +446,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -477,6 +481,7 @@ Array [ class="ant-segmented-item" > @@ -493,6 +498,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap index 49c12e8a1c..719dc91502 100644 --- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -13,6 +13,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item ant-segmented-item-selected" > @@ -46,6 +48,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -62,6 +65,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -78,6 +82,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -109,6 +114,7 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item ant-segmented-item-selected" > @@ -142,6 +149,7 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item" > @@ -173,6 +181,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item ant-segmented-item-selected" > @@ -206,6 +216,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -222,6 +233,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -238,6 +250,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -269,6 +282,7 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item ant-segmented-item-selected" > @@ -302,6 +317,7 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item" > @@ -334,6 +350,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -367,6 +385,7 @@ Array [ class="ant-segmented-item" > @@ -394,6 +413,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -427,6 +448,7 @@ Array [ class="ant-segmented-item" > @@ -462,6 +484,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -523,6 +547,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -578,6 +603,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -627,6 +654,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -651,6 +679,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -694,6 +723,7 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -806,6 +841,7 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > @@ -858,6 +895,7 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected" > @@ -891,6 +930,7 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item" > @@ -931,6 +971,7 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl class="ant-segmented-item ant-segmented-item-selected" > @@ -1024,6 +1066,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1057,6 +1101,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1073,6 +1118,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1089,6 +1135,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1115,6 +1162,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1148,6 +1197,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1164,6 +1214,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1180,6 +1231,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1206,6 +1258,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1239,6 +1293,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1255,6 +1310,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1271,6 +1327,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1308,6 +1365,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1341,6 +1400,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1378,6 +1438,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1411,6 +1473,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1447,6 +1510,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1480,6 +1545,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1633,6 +1699,7 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected" > @@ -1723,6 +1791,7 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl class="ant-segmented-item ant-segmented-item-selected" > @@ -1805,3 +1875,109 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl `; exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/segmented/demo/with-name.tsx extend context correctly 1`] = ` +
+
+ + + + + +
+
+`; + +exports[`renders components/segmented/demo/with-name.tsx extend context correctly 2`] = `[]`; diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap index 9e24cc69c7..1e14b635d8 100644 --- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap @@ -13,6 +13,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -46,6 +48,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -62,6 +65,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -78,6 +82,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -107,6 +112,7 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -140,6 +147,7 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -169,6 +177,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -202,6 +212,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -218,6 +229,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -234,6 +246,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -263,6 +276,7 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -296,6 +311,7 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -326,6 +342,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -359,6 +377,7 @@ Array [ class="ant-segmented-item" > @@ -386,6 +405,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -419,6 +440,7 @@ Array [ class="ant-segmented-item" > @@ -452,6 +474,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -513,6 +537,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -568,6 +593,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -617,6 +644,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -641,6 +669,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -682,6 +711,7 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -794,6 +829,7 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > @@ -844,6 +881,7 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -877,6 +916,7 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -915,6 +955,7 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1006,6 +1048,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1039,6 +1083,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1055,6 +1100,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1071,6 +1117,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1097,6 +1144,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1130,6 +1179,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1146,6 +1196,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1162,6 +1213,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1188,6 +1240,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1221,6 +1275,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1237,6 +1292,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1253,6 +1309,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1288,6 +1345,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1321,6 +1380,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1358,6 +1418,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1391,6 +1453,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1427,6 +1490,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1460,6 +1525,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1555,6 +1621,7 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1643,6 +1711,7 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1723,3 +1793,107 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
`; + +exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` +
+
+ + + + + +
+
+`; diff --git a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap index 4e55403f85..572aa1c9ba 100644 --- a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap @@ -25,6 +25,7 @@ exports[`Segmented render label with ReactNode 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -61,6 +63,7 @@ exports[`Segmented render label with ReactNode 1`] = ` class="ant-segmented-item" > @@ -93,6 +96,7 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -126,6 +131,7 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item" > @@ -155,6 +161,7 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -188,6 +196,7 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item" > @@ -217,6 +226,7 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -250,6 +261,7 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item" > @@ -279,6 +291,7 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -312,6 +326,7 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item" > @@ -341,6 +356,7 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -374,6 +391,7 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item" > @@ -403,6 +421,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -436,6 +456,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -452,6 +473,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -468,6 +490,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -497,6 +520,7 @@ exports[`Segmented render segmented with options null/undefined 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -617,6 +646,7 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -650,6 +681,7 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item" > @@ -679,6 +711,7 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -712,6 +746,7 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item" > @@ -741,6 +776,7 @@ exports[`Segmented render segmented: disabled 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > diff --git a/components/segmented/__tests__/index.test.tsx b/components/segmented/__tests__/index.test.tsx index c80948ce62..5de419790f 100644 --- a/components/segmented/__tests__/index.test.tsx +++ b/components/segmented/__tests__/index.test.tsx @@ -346,4 +346,15 @@ describe('Segmented', () => { .textContent?.includes('KanbanYes'), ).toBeTruthy(); }); + + it('all children should have a name property', () => { + const GROUP_NAME = 'GROUP_NAME'; + const { container } = render( + , + ); + + container.querySelectorAll('input[type="radio"]').forEach((el) => { + expect(el.name).toEqual(GROUP_NAME); + }); + }); }); diff --git a/components/segmented/demo/with-name.md b/components/segmented/demo/with-name.md new file mode 100644 index 0000000000..b0654a9512 --- /dev/null +++ b/components/segmented/demo/with-name.md @@ -0,0 +1,7 @@ +## zh-CN + +可以为 Segmented 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 Segmented 下的 input 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。 + +## en-US + +Passing the `name` property to all `input[type="radio"]` that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented. diff --git a/components/segmented/demo/with-name.tsx b/components/segmented/demo/with-name.tsx new file mode 100644 index 0000000000..14e88df9d7 --- /dev/null +++ b/components/segmented/demo/with-name.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Segmented } from 'antd'; + +const Demo: React.FC = () => ( + options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="group" /> +); + +export default Demo; diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md index 4384777bf2..dfe9ca5d3e 100644 --- a/components/segmented/index.en-US.md +++ b/components/segmented/index.en-US.md @@ -29,6 +29,7 @@ This component is available since `antd@4.20.0`. Three sizes of Segmented With Icon With Icon only +With name Controlled Synced mode Consistent height Custom component token @@ -49,17 +50,17 @@ Common props ref：[Common props](/docs/react/common-props) | size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` | | | vertical | Orientation | boolean | `false` | 5.21.0 | | value | Currently selected value | string \| number | | | +| name | The `name` property of all `input[type="radio"]` children | string | | 5.23.0 | ### SegmentedItemType - -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| label | Display text for Segmented item | ReactNode | - | | -| value | Value for Segmented item | string \| number | - | | -| icon | Display icon for Segmented item | ReactNode | - | | -| disabled | Disabled state of segmented item | boolean | false | | -| className | The additional css class | string | - | | +| Property | Description | Type | Default | Version | +| --------- | -------------------------------- | ---------------- | ------- | ------- | +| label | Display text for Segmented item | ReactNode | - | | +| value | Value for Segmented item | string \| number | - | | +| icon | Display icon for Segmented item | ReactNode | - | | +| disabled | Disabled state of segmented item | boolean | false | | +| className | The additional css class | string | - | | ## Design Token diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index f0f84e65b2..f9e159c9ed 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -30,6 +30,7 @@ demo: 三种大小 设置图标 只设置图标 +配合 name 使用 受控同步模式 统一高度 自定义组件 Token @@ -52,6 +53,7 @@ demo: | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | vertical | 排列方向 | boolean | `false` | 5.21.0 | | value | 当前选中的值 | string \| number | | | +| name | Segmented 下所有 `input[type="radio"]` 的 `name` 属性 | string | | 5.23.0 | ### SegmentedItemType diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 2e3e417175..8e0f89e0cb 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2006,6 +2006,7 @@ Array [ class="ant-segmented-item" > @@ -2022,6 +2023,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index aae5df9174..9cfb8ba413 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -1675,6 +1675,7 @@ Array [ class="ant-segmented-item" > @@ -1691,6 +1692,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap index 51016ed388..023b0befdb 100644 --- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap index 4f9b7c8a3a..39547a7ef6 100644 --- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/package.json b/package.json index d7aac2aec8..093b43ef64 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "rc-progress": "~4.0.0", "rc-rate": "~2.13.0", "rc-resize-observer": "^1.4.0", - "rc-segmented": "~2.5.0", + "rc-segmented": "~2.6.0", "rc-select": "~14.16.3", "rc-slider": "~11.1.7", "rc-steps": "~6.0.1", From f17b761ae39ec67d21ee473c0437b2fa499a2441 Mon Sep 17 00:00:00 2001 From: zhangchao <13170027668@163.com> Date: Mon, 25 Nov 2024 10:08:50 +0800 Subject: [PATCH 05/41] feat: Button support custom loading icon (#51758) Co-authored-by: wooc --- ...LoadingIcon.tsx => DefaultLoadingIcon.tsx} | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 62 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 62 +++++++++++++++++++ components/button/button.tsx | 10 ++- components/button/demo/loading.md | 4 +- components/button/demo/loading.tsx | 13 +++- components/button/index.en-US.md | 2 +- components/button/index.zh-CN.md | 2 +- 8 files changed, 150 insertions(+), 11 deletions(-) rename components/button/{LoadingIcon.tsx => DefaultLoadingIcon.tsx} (93%) diff --git a/components/button/LoadingIcon.tsx b/components/button/DefaultLoadingIcon.tsx similarity index 93% rename from components/button/LoadingIcon.tsx rename to components/button/DefaultLoadingIcon.tsx index 5497f2abbc..9cc19f12f3 100644 --- a/components/button/LoadingIcon.tsx +++ b/components/button/DefaultLoadingIcon.tsx @@ -23,7 +23,7 @@ const InnerLoadingIcon = forwardRef((pro ); }); -export type LoadingIconProps = { +export type DefaultLoadingIconProps = { prefixCls: string; existIcon: boolean; loading?: boolean | object; @@ -43,7 +43,7 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({ transform: 'scale(1)', }); -const LoadingIcon: React.FC = (props) => { +const DefaultLoadingIcon: React.FC = (props) => { const { prefixCls, loading, existIcon, className, style } = props; const visible = !!loading; @@ -78,4 +78,4 @@ const LoadingIcon: React.FC = (props) => { ); }; -export default LoadingIcon; +export default DefaultLoadingIcon; diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index ed0420ec52..27e42b1043 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2844,6 +2844,37 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`] +
+
`; diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index 1d7d4ce349..6d06037e53 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -2466,6 +2466,37 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = ` +
+
`; diff --git a/components/button/button.tsx b/components/button/button.tsx index a2241acea2..a5be0c0f75 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -20,7 +20,7 @@ import type { } from './buttonHelpers'; import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers'; import IconWrapper from './IconWrapper'; -import LoadingIcon from './LoadingIcon'; +import DefaultLoadingIcon from './DefaultLoadingIcon'; import useStyle from './style'; import Compact from './style/compact'; @@ -35,7 +35,7 @@ export interface BaseButtonProps { shape?: ButtonShape; size?: SizeType; disabled?: boolean; - loading?: boolean | { delay?: number }; + loading?: boolean | { delay?: number; icon?: React.ReactNode }; prefixCls?: string; className?: string; rootClassName?: string; @@ -299,8 +299,12 @@ const InternalCompoundedButton = React.forwardRef< {icon} + ) : typeof loading === 'object' && loading.icon ? ( + + {loading.icon} + ) : ( - + ); const kids = diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index b78725001d..37024ec5c4 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -1,7 +1,7 @@ ## zh-CN -添加 `loading` 属性即可让按钮处于加载状态，最后三个按钮演示点击后进入加载状态。 +添加 `loading` 属性即可让按钮处于加载状态，`loading.icon` 可以自定义加载图标，最后三个按钮演示点击后进入加载状态。 ## en-US -A loading indicator can be added to a button by setting the `loading` property on the `Button`. +A loading indicator can be added to a button by setting the `loading` property on the `Button`. The `loading.icon` can be used to customize the loading icon. diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx index 50b5b62153..656d2e9ca3 100644 --- a/components/button/demo/loading.tsx +++ b/components/button/demo/loading.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { PoweroffOutlined } from '@ant-design/icons'; +import { PoweroffOutlined, SyncOutlined } from '@ant-design/icons'; import { Button, Flex } from 'antd'; const App: React.FC = () => { @@ -31,6 +31,9 @@ const App: React.FC = () => { Loading ); diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 8952aadd35..e8ffea01b2 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -71,7 +71,7 @@ Different button styles generated by setting Button properties. The recommended | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | | | icon | Set the icon component of button | ReactNode | - | | | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 | -| loading | Set the loading status of button | boolean \| { delay: number } | false | | +| loading | Set the loading status of button | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 | | shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` | | | size | Set the size of button | `large` \| `middle` \| `small` | `middle` | | | styles | Semantic DOM style | [Record](#semantic-dom) | - | 5.4.0 | diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 560622c894..af4507486f 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -77,7 +77,7 @@ group: | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | | | icon | 设置按钮的图标组件 | ReactNode | - | | | iconPosition | 设置按钮图标组件的位置 | `start` \| `end` | `start` | 5.17.0 | -| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | | +| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 | | shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` | | | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | | | styles | 语义化结构 style | [Record](#semantic-dom) | - | 5.4.0 | From c1f2aad2f9c95192844c9801b098ad387fd3214d Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 26 Nov 2024 11:06:08 +0800 Subject: [PATCH 06/41] feat: Cascader add `optionSelectedColor` token (#51769) --- .../__snapshots__/demo-extend.test.ts.snap | 156 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 65 ++++++++ components/cascader/demo/component-token.md | 7 + components/cascader/demo/component-token.tsx | 64 +++++++ components/cascader/index.en-US.md | 1 + components/cascader/index.zh-CN.md | 1 + components/cascader/style/columns.ts | 1 + components/cascader/style/index.ts | 6 + 8 files changed, 301 insertions(+) create mode 100644 components/cascader/demo/component-token.md create mode 100644 components/cascader/demo/component-token.tsx diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap index 4191ac57cd..6133c41249 100644 --- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -310,6 +310,162 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 2`] = `[]`; +exports[`renders components/cascader/demo/component-token.tsx extend context correctly 1`] = ` +
+
+ + + + + + Please select + + +
+
+
+
+ +
+
+
+ +
+`; + +exports[`renders components/cascader/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
`; +exports[`renders components/cascader/demo/component-token.tsx correctly 1`] = ` +
+
+ + + + + + Please select + + +
+ +
+`; + exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
['onChange'] = (value) => { + console.log(value); +}; + +const App: React.FC = () => ( + + + +); + +export default App; diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 70b4656f1f..c3fca686a3 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -37,6 +37,7 @@ demo: Status Panel _InternalPanelDoNotUseOrYouWillBeFired +Component Token ## API diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index cedd36f33b..fdb5b0929d 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -38,6 +38,7 @@ demo: 自定义状态 面板使用 _InternalPanelDoNotUseOrYouWillBeFired +Component Token ## API diff --git a/components/cascader/style/columns.ts b/components/cascader/style/columns.ts index adc24abafc..dbb4887ad7 100644 --- a/components/cascader/style/columns.ts +++ b/components/cascader/style/columns.ts @@ -92,6 +92,7 @@ const getColumnsStyle: GenerateStyle = (token: CascaderToken): CS [`&-active:not(${cascaderMenuItemCls}-disabled)`]: { '&, &:hover': { + color: token.optionSelectedColor, fontWeight: token.optionSelectedFontWeight, backgroundColor: token.optionSelectedBg, }, diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts index 663d396132..23592e89a1 100644 --- a/components/cascader/style/index.ts +++ b/components/cascader/style/index.ts @@ -26,6 +26,11 @@ export interface ComponentToken { * @descEN Background color of selected item */ optionSelectedBg: string; + /** + * @desc 选项选中时文本颜色 + * @descEN Text color when option is selected + */ + optionSelectedColor: string; /** * @desc 选项选中时字重 * @descEN Font weight of selected item @@ -100,6 +105,7 @@ export const prepareComponentToken = (token: GlobalToken) => { optionSelectedFontWeight: token.fontWeightStrong, optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`, menuPadding: token.paddingXXS, + optionSelectedColor: token.colorText, }; }; From 626b46b80cb97a9d13e32b5a9b17a448702fd032 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 26 Nov 2024 12:08:56 +0800 Subject: [PATCH 07/41] docs: add loading icon description for Dropdown.Button (#51783) --- components/dropdown/index.en-US.md | 2 +- components/dropdown/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index ec8cf0467c..f813f73743 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -66,7 +66,7 @@ Same props from Dropdown. And includes additional props: | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - | | -| loading | Set the loading status of button | boolean \| { delay: number } | false | | +| loading | Set the loading status of button, the same as [Button](/components/button/#api) | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 | | danger | Set the danger status of button | boolean | - | 4.23.0 | | icon | Icon (appears on the right) | ReactNode | - | | | size | Size of the button, the same as [Button](/components/button/#api) | string | `default` | | diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index d198bb0380..04d8e025a6 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -70,7 +70,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - | | -| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | | +| loading | 设置按钮载入状态，和 [Button](/components/button-cn#api) 一致 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 | | danger | 设置危险按钮 | boolean | - | 4.23.0 | | icon | 右侧的 icon | ReactNode | - | | | size | 按钮大小，和 [Button](/components/button-cn#api) 一致 | string | `default` | | From e18d7707f123a38419fdb82959bf643c2788bbcc Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 28 Nov 2024 09:53:08 +0800 Subject: [PATCH 08/41] feat: ColorPicker presets should support key (#51794) --- .../index/components/Theme/ColorPicker.tsx | 4 +-- .../color-picker/__tests__/index.test.tsx | 25 +++++++++++++++++-- .../color-picker/components/ColorPresets.tsx | 15 +++++++---- components/color-picker/demo/panel-render.tsx | 8 +++--- components/color-picker/demo/presets.tsx | 5 ++-- components/color-picker/interface.ts | 7 ++++++ 6 files changed, 48 insertions(+), 16 deletions(-) diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx index 4db445a449..68262526b9 100644 --- a/.dumi/pages/index/components/Theme/ColorPicker.tsx +++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { ColorPicker, Flex, Input } from 'antd'; -import { createStyles } from 'antd-style'; import type { ColorPickerProps, GetProp } from 'antd'; +import { createStyles } from 'antd-style'; import { generateColor } from 'antd/es/color-picker/util'; import classNames from 'classnames'; @@ -61,7 +61,7 @@ const DebouncedColorPicker: React.FC {children} diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index f98a1a90db..45ee9dbe29 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -12,7 +12,7 @@ import Form from '../../form'; import theme from '../../theme'; import { AggregationColor } from '../color'; import ColorPicker from '../ColorPicker'; -import type { ColorPickerProps, ColorValueType } from '../interface'; +import type { ColorPickerProps, ColorValueType, PresetsItem } from '../interface'; import { generateColor } from '../util'; function doMouseMove( @@ -178,6 +178,7 @@ describe('ColorPicker', () => { onChange={handleColorChange} presets={[ { + key: 'Recommended', label: 'Recommended', colors: [ '#000000', @@ -193,6 +194,7 @@ describe('ColorPicker', () => { ], }, { + key: 'Recent', label: 'Recent', colors: [], }, @@ -243,7 +245,8 @@ describe('ColorPicker', () => { }); describe('preset collapsed', () => { - const recommendedPreset = { + const recommendedPreset: PresetsItem = { + key: 'Recommended', label: 'Recommended', colors: ['#f00', '#0f0', '#00f'], }; @@ -263,6 +266,7 @@ describe('ColorPicker', () => { presets={[ recommendedPreset, { + key: 'Recent', label: 'Recent', colors: ['#f00d', '#0f0d', '#00fd'], defaultOpen: false, @@ -381,6 +385,7 @@ describe('ColorPicker', () => { open presets={[ { + key: 'test', label: 'test', colors: ['#0000001A'], }, @@ -949,6 +954,22 @@ describe('ColorPicker', () => { expect(onChangeColor.toHexString()).toBe('#2ddcb4'); }); + it('test the same key', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render( + aaa, colors: ['#333'], key: 'a', defaultOpen: true }, + { label: bbb, colors: ['#666'], key: 'b', defaultOpen: true }, + { label: ccc, colors: ['#999'], key: 'c', defaultOpen: true }, + ]} + />, + ); + expect(errorSpy).not.toHaveBeenCalled(); + errorSpy.mockRestore(); + }); + describe('should disable colorInput', () => { it('Should defaultValue work with disabledFormat', async () => { const { container } = render(); diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index c3cd041777..37df7f55ad 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/components/color-picker/components/ColorPresets.tsx @@ -35,7 +35,10 @@ export const isBright = (value: AggregationColor, bgColorToken: string) => { return r * 0.299 + g * 0.587 + b * 0.114 > 192; }; -const genCollapsePanelKey = ({ label }: PresetsItem) => `panel-${label}`; +const genCollapsePanelKey = (preset: PresetsItem, index: number) => { + const mergedKey = preset.key ?? index; + return `panel-${mergedKey}`; +}; const ColorPresets: FC = ({ prefixCls, presets, value: color, onChange }) => { const [locale] = useLocale('ColorPicker'); @@ -48,9 +51,11 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, const activeKeys = useMemo( () => - presetsValue.reduce((acc, preset) => { + presetsValue.reduce((acc, preset, i) => { const { defaultOpen = true } = preset; - if (defaultOpen) acc.push(genCollapsePanelKey(preset)); + if (defaultOpen) { + acc.push(genCollapsePanelKey(preset, i)); + } return acc; }, []), [presetsValue], @@ -60,8 +65,8 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, onChange?.(colorValue); }; - const items: CollapseProps['items'] = presetsValue.map((preset) => ({ - key: genCollapsePanelKey(preset), + const items = presetsValue.map[number]>((preset, i) => ({ + key: genCollapsePanelKey(preset, i), label:
{preset?.label}
, children: (
diff --git a/components/color-picker/demo/panel-render.tsx b/components/color-picker/demo/panel-render.tsx index db229ec9c6..a815e15cef 100644 --- a/components/color-picker/demo/panel-render.tsx +++ b/components/color-picker/demo/panel-render.tsx @@ -5,11 +5,9 @@ import type { ColorPickerProps } from 'antd'; type Presets = Required['presets'][number]; -const genPresets = (presets = presetPalettes) => - Object.entries(presets).map(([label, colors]) => ({ - label, - colors, - })); +function genPresets(presets = presetPalettes) { + return Object.entries(presets).map(([label, colors]) => ({ label, colors, key: label })); +} const HorizontalLayoutDemo = () => { const { token } = theme.useToken(); diff --git a/components/color-picker/demo/presets.tsx b/components/color-picker/demo/presets.tsx index ad9cb83c21..23cdba1a3e 100644 --- a/components/color-picker/demo/presets.tsx +++ b/components/color-picker/demo/presets.tsx @@ -5,8 +5,9 @@ import type { ColorPickerProps } from 'antd'; type Presets = Required['presets'][number]; -const genPresets = (presets = presetPalettes) => - Object.entries(presets).map(([label, colors]) => ({ label, colors })); +function genPresets(presets = presetPalettes) { + return Object.entries(presets).map(([label, colors]) => ({ label, colors, key: label })); +} const Demo: React.FC = () => { const { token } = theme.useToken(); diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index 24c5e982fd..3523b94c43 100644 --- a/components/color-picker/interface.ts +++ b/components/color-picker/interface.ts @@ -1,4 +1,5 @@ import type { CSSProperties, FC, ReactNode } from 'react'; +import React from 'react'; import type { ColorGenInput, ColorPickerProps as RcColorPickerProps, @@ -33,7 +34,13 @@ export interface PresetsItem { * @default true */ defaultOpen?: boolean; + /** + * The key of the panel + * @since 5.23.0 + */ + key: React.Key; } + export type TriggerType = 'click' | 'hover'; export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes. From be7a3be83871fc86329bf122935842ba82eb9dc9 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 28 Nov 2024 10:20:24 +0800 Subject: [PATCH 09/41] docs: update presets key doc (#51806) --- components/color-picker/index.en-US.md | 2 +- components/color-picker/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index 9a4fd171e3..f6cfdef3c3 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props) | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | | | mode | Configure single or gradient color | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 | | open | Whether to show popup | boolean | - | | -| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` | +| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | | placement | Placement of popup | The design of the [placement](/components/tooltip/#api) parameter is the same as the `Tooltips` component. | `bottomLeft` | | | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 69467b80e0..06524deca6 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -55,7 +55,7 @@ group: | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | | | mode | 选择器模式，用于配置单色与渐变 | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 | | open | 是否显示弹出窗口 | boolean | - | | -| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` | +| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | | placement | 弹出窗口的位置 | 同 `Tooltips` 组件的 [placement](/components/tooltip-cn/#api) 参数设计 | `bottomLeft` | | | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | From 74a1782976a931672f3dcb76a1568f3101178554 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 28 Nov 2024 11:05:53 +0800 Subject: [PATCH 10/41] type: update key type (#51807) --- components/color-picker/index.en-US.md | 2 +- components/color-picker/index.zh-CN.md | 2 +- components/color-picker/interface.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index f6cfdef3c3..23217bdbaa 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props) | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | | | mode | Configure single or gradient color | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 | | open | Whether to show popup | boolean | - | | -| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | +| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | | placement | Placement of popup | The design of the [placement](/components/tooltip/#api) parameter is the same as the `Tooltips` component. | `bottomLeft` | | | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 06524deca6..d8d653386a 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -55,7 +55,7 @@ group: | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | | | mode | 选择器模式，用于配置单色与渐变 | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 | | open | 是否显示弹出窗口 | boolean | - | | -| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | +| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` | | placement | 弹出窗口的位置 | 同 `Tooltips` 组件的 [placement](/components/tooltip-cn/#api) 参数设计 | `bottomLeft` | | | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index 3523b94c43..d213c8c712 100644 --- a/components/color-picker/interface.ts +++ b/components/color-picker/interface.ts @@ -38,7 +38,7 @@ export interface PresetsItem { * The key of the panel * @since 5.23.0 */ - key: React.Key; + key?: React.Key; } export type TriggerType = 'click' | 'hover'; From 1f1359d418beca62c8f967fd121bd28806359db0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Thu, 28 Nov 2024 18:04:08 +0800 Subject: [PATCH 11/41] chore: lock typedoc version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 232042c1ed..229d7542b9 100644 --- a/package.json +++ b/package.json @@ -317,7 +317,7 @@ "tar-fs": "^3.0.6", "terser": "^5.36.0", "tsx": "4.11.2", - "typedoc": "^0.27.1", + "typedoc": "~0.26.11", "typescript": "~5.7.2", "vanilla-jsoneditor": "^2.3.1", "vanilla-tilt": "^1.8.1", From a42b9a29b1c7d05168e9d3847f66977479c32615 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 29 Nov 2024 15:31:55 +0800 Subject: [PATCH 12/41] feat: Card add bodyPaddingSM/headerPaddingSM/bodyPadding/headerPadding tokens (#51762) --- components/card/demo/component-token.tsx | 4 ++ components/card/style/index.ts | 50 ++++++++++++++++-------- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/components/card/demo/component-token.tsx b/components/card/demo/component-token.tsx index 1c15e239f0..a54498b342 100644 --- a/components/card/demo/component-token.tsx +++ b/components/card/demo/component-token.tsx @@ -8,6 +8,10 @@ export default () => ( components: { Card: { headerBg: '#e6f4ff', + bodyPaddingSM: 22, + headerPaddingSM: 20, + headerPadding: 18, + bodyPadding: 26, headerFontSize: 20, headerFontSizeSM: 20, headerHeight: 60, diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 3aabdb985d..99d21908ce 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -31,6 +31,26 @@ export interface ComponentToken { * @descEN Height of small card header */ headerHeightSM: number | string; + /** + * @desc 小号卡片内边距 + * @descEN Padding of small card body + */ + bodyPaddingSM: number; + /** + * @desc 小号卡片头部内边距 + * @descEN Padding of small card head + */ + headerPaddingSM: number; + /** + * @desc 卡片内边距 + * @descEN Padding of card body + */ + bodyPadding: number; + /** + * @desc 卡片头部内边距 + * @descEN Padding of card head + */ + headerPadding: number; /** * @desc 操作区背景色 * @descEN Background color of card actions @@ -64,11 +84,6 @@ interface CardToken extends FullToken<'Card'> { * @descEN Padding of card header */ cardHeadPadding: number; - /** - * @desc 小号卡片内边距 - * @descEN Padding of small card - */ - cardPaddingSM: number; /** * @desc 卡片基础内边距 * @descEN Padding of base card @@ -85,7 +100,7 @@ interface CardToken extends FullToken<'Card'> { // ============================== Head ============================== const genCardHeadStyle: GenerateStyle = (token): CSSObject => { - const { antCls, componentCls, headerHeight, cardPaddingBase, tabsMarginBottom } = token; + const { antCls, componentCls, headerHeight, headerPadding, tabsMarginBottom } = token; return { display: 'flex', @@ -93,7 +108,7 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { flexDirection: 'column', minHeight: headerHeight, marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png - padding: `0 ${unit(cardPaddingBase)}`, + padding: `0 ${unit(headerPadding)}`, color: token.colorTextHeading, fontWeight: token.fontWeightStrong, fontSize: token.headerFontSize, @@ -259,11 +274,11 @@ const genCardMetaStyle: GenerateStyle = (token): CSSObject => ({ // ============================== Inner ============================== const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingBase, colorFillAlter } = token; + const { componentCls, colorFillAlter, headerPadding, bodyPadding } = token; return { [`${componentCls}-head`]: { - padding: `0 ${unit(cardPaddingBase)}`, + padding: `0 ${unit(headerPadding)}`, background: colorFillAlter, '&-title': { @@ -272,7 +287,7 @@ const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-body`]: { - padding: `${unit(token.padding)} ${unit(cardPaddingBase)}`, + padding: `${unit(token.padding)} ${unit(bodyPadding)}`, }, }; }; @@ -298,7 +313,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { cardHeadPadding, colorBorderSecondary, boxShadowTertiary, - cardPaddingBase, + bodyPadding, extraColor, } = token; @@ -325,7 +340,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-body`]: { - padding: cardPaddingBase, + padding: bodyPadding, borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`, ...clearFix(), }, @@ -400,13 +415,13 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { // ============================== Size ============================== const genCardSizeStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingSM, headerHeightSM, headerFontSizeSM } = token; + const { componentCls, bodyPaddingSM, headerPaddingSM, headerHeightSM, headerFontSizeSM } = token; return { [`${componentCls}-small`]: { [`> ${componentCls}-head`]: { minHeight: headerHeightSM, - padding: `0 ${unit(cardPaddingSM)}`, + padding: `0 ${unit(headerPaddingSM)}`, fontSize: headerFontSizeSM, [`> ${componentCls}-head-wrapper`]: { @@ -417,7 +432,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { }, [`> ${componentCls}-body`]: { - padding: cardPaddingSM, + padding: bodyPaddingSM, }, }, [`${componentCls}-small${componentCls}-contain-tabs`]: { @@ -442,6 +457,10 @@ export const prepareComponentToken: GetDefaultToken<'Card'> = (token) => ({ actionsLiMargin: `${token.paddingSM}px 0`, tabsMarginBottom: -token.padding - token.lineWidth, extraColor: token.colorText, + bodyPaddingSM: 12, // Fixed padding. + headerPaddingSM: 12, + bodyPadding: token.bodyPadding ?? token.paddingLG, + headerPadding: token.headerPadding ?? token.paddingLG, }); // ============================== Export ============================== @@ -453,7 +472,6 @@ export default genStyleHooks( cardHeadPadding: token.padding, cardPaddingBase: token.paddingLG, cardActionsIconSize: token.fontSize, - cardPaddingSM: 12, // Fixed padding. }); return [ From e7afced9c1cae9cdd290333d758ea1a3457ce710 Mon Sep 17 00:00:00 2001 From: Oyster Lee Date: Mon, 2 Dec 2024 20:04:33 +0800 Subject: [PATCH 13/41] feat(mentions): add onPopupScroll (#51858) * feat(mentions): add onPopupScroll * docs(mentions): fix version --- components/mentions/index.en-US.md | 1 + components/mentions/index.zh-CN.md | 1 + package.json | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md index 10b50ef784..aeed53f00d 100644 --- a/components/mentions/index.en-US.md +++ b/components/mentions/index.en-US.md @@ -79,6 +79,7 @@ Common props ref：[Common props](/docs/react/common-props) | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | | | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | | | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | | +| onPopupScroll | Trigger when mentions scroll | (e: Event) => void | - | 5.23.0 | | options | Option Configuration | [Options](#option) | \[] | 5.1.0 | ### Mention methods diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index efadfd3b37..f3eef8cd36 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -80,6 +80,7 @@ return ( | onResize | resize 回调 | function({ width, height }) | - | | | onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | | | onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | | +| onPopupScroll | 滚动时触发 | (event: Event) => void | - | 5.23.0 | | options | 选项配置 | [Options](#option) | [] | 5.1.0 | ### Mentions 方法 diff --git a/package.json b/package.json index 2db1123990..65fca299f6 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "rc-image": "~7.11.0", "rc-input": "~1.6.4", "rc-input-number": "~9.3.0", - "rc-mentions": "~2.17.0", + "rc-mentions": "~2.18.0", "rc-menu": "~9.16.0", "rc-motion": "^2.9.3", "rc-notification": "~5.6.2", From 6b98f84c6287fe677cc1d4c09eebcc987b78ec50 Mon Sep 17 00:00:00 2001 From: Oyster Lee Date: Mon, 9 Dec 2024 14:27:07 +0800 Subject: [PATCH 14/41] feat(Button): support color from Antd's colors (#51550) * feat(button): add antd preset colors * chore(button): add colors to docs * test(button): add tests for colors * refactor: remove LiteralUnion * test: add const to colors * refactor(button): import from preset colors * chore(button): update docs * test(button): test with preset colors * test(button): import from relative path * fix(button): color * fix(button): add missing box shadow * test(button): merge preset colors and variants test case * refactor(button): use light color as box shadow * refactor(button): set hover color to 5 * docs(button): update doc * docs(button): update doc --------- Co-authored-by: ice <49827327+coding-ice@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 156 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 156 ++++++++++++++++++ components/button/__tests__/index.test.tsx | 17 +- components/button/buttonHelpers.tsx | 4 +- components/button/demo/color-variant.tsx | 61 +++++++ components/button/index.en-US.md | 6 +- components/button/index.zh-CN.md | 6 +- components/button/style/index.ts | 95 ++++++++++- 8 files changed, 496 insertions(+), 5 deletions(-) diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index e7a7d439ba..4d9f05b720 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -472,6 +472,162 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
`; diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index 20499a6642..d05efa4543 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -461,6 +461,162 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
`; diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx index f5ae30c8c5..3b2f9fae4d 100644 --- a/components/button/__tests__/index.test.tsx +++ b/components/button/__tests__/index.test.tsx @@ -2,13 +2,14 @@ import React, { Suspense, useRef, useState } from 'react'; import { SearchOutlined } from '@ant-design/icons'; import { resetWarned } from 'rc-util/lib/warning'; -import Button from '..'; +import Button, { _ButtonVariantTypes } from '..'; import type { GetRef } from '../../_util/type'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import ConfigProvider from '../../config-provider'; import theme from '../../theme'; +import { PresetColors } from '../../theme/interface'; import type { BaseButtonProps } from '../button'; describe('Button', () => { @@ -475,6 +476,20 @@ describe('Button', () => { }); }); + it('should render preset colors and variants correctly', () => { + PresetColors.forEach((color) => { + _ButtonVariantTypes.forEach((variant) => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveClass(`ant-btn-color-${color}`); + expect(container.firstChild).toHaveClass(`ant-btn-variant-${variant}`); + }); + }); + }); + it('autoFocus should work', () => { const { container } = render(); diff --git a/components/button/buttonHelpers.tsx b/components/button/buttonHelpers.tsx index b0af751a5c..dea63b7e42 100644 --- a/components/button/buttonHelpers.tsx +++ b/components/button/buttonHelpers.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { cloneElement, isFragment } from '../_util/reactNode'; +import { PresetColors } from '../theme/interface'; import type { BaseButtonProps, LegacyButtonType } from './button'; const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/; @@ -94,5 +95,6 @@ export const _ButtonVariantTypes = [ ] as const; export type ButtonVariantType = (typeof _ButtonVariantTypes)[number]; -export const _ButtonColorTypes = ['default', 'primary', 'danger'] as const; +export const _ButtonColorTypes = ['default', 'primary', 'danger', ...PresetColors] as const; + export type ButtonColorType = (typeof _ButtonColorTypes)[number]; diff --git a/components/button/demo/color-variant.tsx b/components/button/demo/color-variant.tsx index 46ae2ac8b0..fa6b75546c 100644 --- a/components/button/demo/color-variant.tsx +++ b/components/button/demo/color-variant.tsx @@ -68,6 +68,67 @@ const App: React.FC = () => { Link + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index e8ffea01b2..3c7964fda6 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -63,7 +63,7 @@ Different button styles generated by setting Button properties. The recommended | autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 | | block | Option to fit button width to its parent width | boolean | false | | | classNames | Semantic DOM class | [Record](#semantic-dom) | - | 5.4.0 | -| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 | +| color | Set button color | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.0 | | danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false | | | disabled | Disabled state of button | boolean | false | | | ghost | Make background transparent and invert text and border colors | boolean | false | | @@ -82,6 +82,10 @@ Different button styles generated by setting Button properties. The recommended It accepts all props which native buttons support. +### PresetColors + +> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold'; + ## Semantic DOM diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index af4507486f..bb57303a45 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -69,7 +69,7 @@ group: | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 | | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | | | classNames | 语义化结构 class | [Record](#semantic-dom) | - | 5.4.0 | -| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` | - | 5.21.0 | +| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`、`primary` 和 `danger`: 5.21.0, `PresetColors`: 5.23.0 | | danger | 语法糖，设置危险按钮。当设置 `color` 时会以后者为准 | boolean | false | | | disabled | 设置按钮失效状态 | boolean | false | | | ghost | 幽灵属性，使按钮背景透明 | boolean | false | | @@ -88,6 +88,10 @@ group: 支持原生 button 的其他所有属性。 +### PresetColors + +> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold'; + ## Semantic DOM diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 7a3346d09c..16b8cb8768 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -2,7 +2,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs'; import { genFocusStyle } from '../../style'; -import type { GenerateStyle } from '../../theme/internal'; +import { PresetColors } from '../../theme/interface'; +import type { GenerateStyle, PresetColorKey } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; import type { ButtonVariantType } from '../buttonHelpers'; import genGroupStyle from './group'; @@ -14,6 +15,7 @@ export type { ComponentToken }; // ============================== Shared ============================== const genSharedButtonStyle: GenerateStyle = (token): CSSObject => { const { componentCls, iconCls, fontWeight } = token; + return { [componentCls]: { outline: 'none', @@ -234,6 +236,95 @@ const genTextLinkButtonStyle = ( }); // =============================== Color ============================== +const genPresetColorStyle: GenerateStyle = (token) => { + const { componentCls } = token; + + return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => { + const darkColor = token[`${colorKey}6`]; + const lightColor = token[`${colorKey}1`]; + const hoverColor = token[`${colorKey}5`]; + const lightHoverColor = token[`${colorKey}2`]; + const lightBorderColor = token[`${colorKey}3`]; + const activeColor = token[`${colorKey}7`]; + const boxShadow = `0 ${token.controlOutlineWidth} 0 ${token[`${colorKey}1`]}`; + + return { + ...prev, + [`&${componentCls}-color-${colorKey}`]: { + color: darkColor, + boxShadow, + + ...genSolidButtonStyle( + token, + token.colorTextLightSolid, + darkColor, + { + background: hoverColor, + }, + { + background: activeColor, + }, + ), + + ...genOutlinedDashedButtonStyle( + token, + darkColor, + token.colorBgContainer, + { + color: hoverColor, + borderColor: hoverColor, + background: token.colorBgContainer, + }, + { + color: activeColor, + borderColor: activeColor, + background: token.colorBgContainer, + }, + ), + + ...genDashedButtonStyle(token), + + ...genFilledButtonStyle( + token, + lightColor, + { + background: lightHoverColor, + }, + { + background: lightBorderColor, + }, + ), + + ...genTextLinkButtonStyle( + token, + darkColor, + 'link', + { + color: hoverColor, + }, + { + color: activeColor, + }, + ), + + ...genTextLinkButtonStyle( + token, + darkColor, + 'text', + { + color: hoverColor, + background: lightColor, + }, + { + color: activeColor, + background: lightBorderColor, + }, + ), + }, + }; + }, {}); +}; + const genDefaultButtonStyle: GenerateStyle = (token) => ({ color: token.defaultColor, @@ -447,6 +538,8 @@ const genColorButtonStyle: GenerateStyle = (token) => { [`${componentCls}-color-default`]: genDefaultButtonStyle(token), [`${componentCls}-color-primary`]: genPrimaryButtonStyle(token), [`${componentCls}-color-dangerous`]: genDangerousStyle(token), + + ...genPresetColorStyle(token), }; }; From 1b1ffb9d41c8281b7b0bbd9812793004e8d70b03 Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Mon, 9 Dec 2024 15:24:51 +0800 Subject: [PATCH 15/41] feat(segmented): add missing focus style for a11y (#51934) * feat: add missing focus style for a11y * chore: update rc-segmented dependency to version 2.7.0 in package.json * test: update snapshot * style: adjust focus style --- .../__snapshots__/demo-extend.test.ts.snap | 7 +- .../__snapshots__/demo-extend.test.ts.snap | 24 +- .../__tests__/__snapshots__/demo.test.ts.snap | 24 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__snapshots__/demo.test.tsx.snap | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__snapshots__/demo.test.tsx.snap | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 18 +- .../__tests__/__snapshots__/demo.test.ts.snap | 18 +- .../__snapshots__/demo-extend.test.ts.snap | 212 ++++-------------- .../__tests__/__snapshots__/demo.test.ts.snap | 212 ++++-------------- .../__snapshots__/index.test.tsx.snap | 123 +++------- components/segmented/style/index.ts | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__tests__/__snapshots__/demo.test.ts.snap | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__snapshots__/demo.test.tsx.snap | 9 +- package.json | 4 +- 18 files changed, 151 insertions(+), 569 deletions(-) diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 9bb52a7925..95e40bc56f 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3981,7 +3981,8 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
Single @@ -4008,14 +4007,12 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c class="ant-segmented-item ant-segmented-item-selected" >
Gradient diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap index c2aff8a9b4..babf051248 100644 --- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -10,7 +10,8 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
flex-start @@ -37,14 +36,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
center @@ -54,14 +51,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
flex-end @@ -71,14 +66,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
space-between @@ -88,14 +81,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
space-around @@ -105,14 +96,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
space-evenly @@ -126,7 +115,8 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
flex-start @@ -153,14 +141,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
center @@ -170,14 +156,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" >
flex-end diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap index 6f554e02f6..1d9988b11f 100644 --- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap @@ -10,7 +10,8 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
flex-start @@ -37,14 +36,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
center @@ -54,14 +51,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
flex-end @@ -71,14 +66,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
space-between @@ -88,14 +81,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
space-around @@ -105,14 +96,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
space-evenly @@ -126,7 +115,8 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
flex-start @@ -153,14 +141,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
center @@ -170,14 +156,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" >
flex-end diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index ff8c6850bd..b6ff3eea80 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -30838,7 +30838,8 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = aria-label="segmented control" class="ant-segmented" id="variant" - role="listbox" + role="radiogroup" + tabindex="0" >
outlined @@ -30864,7 +30863,6 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item ant-segmented-item-selected" > filled @@ -30882,14 +30879,12 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item" >
borderless diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index ba72d0eab8..d8d83289c0 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -13083,7 +13083,8 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` aria-label="segmented control" class="ant-segmented" id="variant" - role="listbox" + role="radiogroup" + tabindex="0" >
outlined @@ -13109,7 +13108,6 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > filled @@ -13127,14 +13124,12 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item" >
borderless diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index 18794b564f..393bf7f22a 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5,8 +5,9 @@ Array [
Show @@ -33,14 +32,12 @@ Array [ class="ant-segmented-item" >
Hide @@ -50,14 +47,12 @@ Array [ class="ant-segmented-item" >
Center diff --git a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap index 770d94eba7..2490983a72 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap @@ -5,8 +5,9 @@ Array [
Show @@ -33,14 +32,12 @@ Array [ class="ant-segmented-item" >
Hide @@ -50,14 +47,12 @@ Array [ class="ant-segmented-item" >
Center diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap index 1b8cd8073b..a361fe5902 100644 --- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -389,7 +389,8 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
canvas @@ -416,14 +415,12 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1 class="ant-segmented-item" >
svg @@ -481,7 +478,8 @@ Array [
L @@ -508,14 +504,12 @@ Array [ class="ant-segmented-item" >
M @@ -525,14 +519,12 @@ Array [ class="ant-segmented-item" >
Q @@ -542,14 +534,12 @@ Array [ class="ant-segmented-item" >
H diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap index 19a889e18c..102e1c8471 100644 --- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap @@ -347,7 +347,8 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
canvas @@ -374,14 +373,12 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = ` class="ant-segmented-item" >
svg @@ -437,7 +434,8 @@ Array [
L @@ -464,14 +460,12 @@ Array [ class="ant-segmented-item" >
M @@ -481,14 +475,12 @@ Array [ class="ant-segmented-item" >
Q @@ -498,14 +490,12 @@ Array [ class="ant-segmented-item" >
H diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap index 719dc91502..0ed4173016 100644 --- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4,7 +4,8 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
Daily @@ -31,14 +30,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" >
Weekly @@ -48,14 +45,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" >
Monthly @@ -65,14 +60,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" >
Quarterly @@ -82,14 +75,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" >
Yearly @@ -105,7 +96,8 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
123 @@ -132,14 +122,12 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item" >
456 @@ -149,14 +137,12 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item" >
longtext-longtext-longtext-longtext @@ -172,7 +158,8 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
Daily @@ -199,14 +184,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" >
Weekly @@ -216,14 +199,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" >
Monthly @@ -233,14 +214,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" >
Quarterly @@ -250,14 +229,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" >
Yearly @@ -273,7 +250,8 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
Map @@ -300,14 +276,12 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item" >
Transit @@ -317,14 +291,12 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item" >
Satellite @@ -341,7 +313,8 @@ Array [
AND @@ -368,14 +339,12 @@ Array [ class="ant-segmented-item" >
OR @@ -385,14 +354,12 @@ Array [ class="ant-segmented-item" >
NOT @@ -404,7 +371,8 @@ Array [
AND @@ -431,14 +397,12 @@ Array [ class="ant-segmented-item" >
OR @@ -448,14 +412,12 @@ Array [ class="ant-segmented-item" >
NOT @@ -475,7 +437,8 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
Map @@ -742,7 +690,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > Transit @@ -760,7 +706,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > Satellite @@ -779,7 +723,8 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
Daily @@ -806,7 +749,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > Weekly @@ -824,14 +765,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item" >
Monthly @@ -841,7 +780,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > Quarterly @@ -859,14 +796,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item" >
Yearly @@ -886,7 +821,8 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
Daily @@ -913,14 +847,12 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item" >
Weekly @@ -930,14 +862,12 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item" >
Monthly @@ -962,7 +892,8 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
Daily @@ -1084,14 +1010,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Weekly @@ -1101,14 +1025,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Monthly @@ -1118,14 +1040,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Quarterly @@ -1135,14 +1055,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Yearly @@ -1153,7 +1071,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
Daily @@ -1180,14 +1097,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Weekly @@ -1197,14 +1112,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Monthly @@ -1214,14 +1127,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Quarterly @@ -1231,14 +1142,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Yearly @@ -1249,7 +1158,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
Daily @@ -1276,14 +1184,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Weekly @@ -1293,14 +1199,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Monthly @@ -1310,14 +1214,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Quarterly @@ -1327,14 +1229,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" >
Yearly @@ -1355,8 +1255,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
Daily @@ -1383,14 +1282,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Weekly @@ -1400,14 +1297,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Monthly @@ -1428,8 +1323,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
Daily @@ -1456,14 +1350,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Weekly @@ -1473,14 +1365,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Monthly @@ -1500,8 +1390,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
Daily @@ -1528,14 +1417,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Weekly @@ -1545,14 +1432,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" >
Monthly @@ -1690,7 +1575,8 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly
Daily @@ -1908,7 +1786,6 @@ exports[`renders components/segmented/demo/with-name.tsx extend context correctl class="ant-segmented-item" > Weekly @@ -1926,7 +1802,6 @@ exports[`renders components/segmented/demo/with-name.tsx extend context correctl class="ant-segmented-item" > Monthly @@ -1944,7 +1818,6 @@ exports[`renders components/segmented/demo/with-name.tsx extend context correctl class="ant-segmented-item" > Quarterly @@ -1962,7 +1834,6 @@ exports[`renders components/segmented/demo/with-name.tsx extend context correctl class="ant-segmented-item" > Yearly diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap index 1e14b635d8..f85552799e 100644 --- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap @@ -4,7 +4,8 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
Daily @@ -31,14 +30,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -48,14 +45,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -65,14 +60,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" >
Quarterly @@ -82,14 +75,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -103,7 +94,8 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
123 @@ -130,14 +120,12 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item" >
456 @@ -147,14 +135,12 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item" >
longtext-longtext-longtext-longtext @@ -168,7 +154,8 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
Daily @@ -195,14 +180,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -212,14 +195,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -229,14 +210,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" >
Quarterly @@ -246,14 +225,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -267,7 +244,8 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
Map @@ -294,14 +270,12 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item" >
Transit @@ -311,14 +285,12 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item" >
Satellite @@ -333,7 +305,8 @@ Array [
AND @@ -360,14 +331,12 @@ Array [ class="ant-segmented-item" >
OR @@ -377,14 +346,12 @@ Array [ class="ant-segmented-item" >
NOT @@ -396,7 +363,8 @@ Array [
AND @@ -423,14 +389,12 @@ Array [ class="ant-segmented-item" >
OR @@ -440,14 +404,12 @@ Array [ class="ant-segmented-item" >
NOT @@ -465,7 +427,8 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
Map @@ -730,7 +678,6 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Transit @@ -748,7 +694,6 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Satellite @@ -767,7 +711,8 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
Daily @@ -794,7 +737,6 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Weekly @@ -812,14 +753,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -829,7 +768,6 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Quarterly @@ -847,14 +784,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -872,7 +807,8 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
Daily @@ -899,14 +833,12 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -916,14 +848,12 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -946,7 +876,8 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
Daily @@ -1066,14 +992,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1083,14 +1007,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1100,14 +1022,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Quarterly @@ -1117,14 +1037,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -1135,7 +1053,8 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
Daily @@ -1162,14 +1079,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1179,14 +1094,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1196,14 +1109,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Quarterly @@ -1213,14 +1124,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -1231,7 +1140,8 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
Daily @@ -1258,14 +1166,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1275,14 +1181,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1292,14 +1196,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Quarterly @@ -1309,14 +1211,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" >
Yearly @@ -1335,8 +1235,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
Daily @@ -1363,14 +1262,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1380,14 +1277,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1408,8 +1303,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
Daily @@ -1436,14 +1330,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1453,14 +1345,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1480,8 +1370,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
Daily @@ -1508,14 +1397,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Weekly @@ -1525,14 +1412,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" >
Monthly @@ -1612,7 +1497,8 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = `
Daily @@ -1826,7 +1704,6 @@ exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` class="ant-segmented-item" > Weekly @@ -1844,7 +1720,6 @@ exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` class="ant-segmented-item" > Monthly @@ -1862,7 +1736,6 @@ exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` class="ant-segmented-item" > Quarterly @@ -1880,7 +1752,6 @@ exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` class="ant-segmented-item" > Yearly diff --git a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap index 572aa1c9ba..8e2d8ff0fc 100644 --- a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap @@ -4,7 +4,8 @@ exports[`Segmented render empty segmented 1`] = `
Daily @@ -43,14 +43,12 @@ exports[`Segmented render label with ReactNode 1`] = ` class="ant-segmented-item" >
Daily @@ -114,14 +109,12 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item" >
Weekly @@ -131,14 +124,12 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item" >
Monthly @@ -152,7 +143,8 @@ exports[`Segmented render segmented with \`block\` 1`] = `
Daily @@ -179,14 +169,12 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item" >
Weekly @@ -196,14 +184,12 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item" >
Monthly @@ -217,7 +203,8 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
Daily @@ -244,14 +229,12 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item" >
Weekly @@ -261,14 +244,12 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item" >
Monthly @@ -282,7 +263,8 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
Daily @@ -309,14 +289,12 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item" >
Weekly @@ -326,14 +304,12 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item" >
Monthly @@ -347,7 +323,8 @@ exports[`Segmented render segmented with mixed options 1`] = `
Daily @@ -374,14 +349,12 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item" >
Weekly @@ -391,14 +364,12 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item" >
Monthly @@ -412,7 +383,8 @@ exports[`Segmented render segmented with numeric options 1`] = `
1 @@ -439,14 +409,12 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" >
2 @@ -456,14 +424,12 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" >
3 @@ -473,14 +439,12 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" >
4 @@ -490,14 +454,12 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" >
5 @@ -511,7 +473,7 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
@@ -571,7 +527,8 @@ exports[`Segmented render segmented with options: disabled 1`] = `
Daily @@ -598,7 +553,6 @@ exports[`Segmented render segmented with options: disabled 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Weekly @@ -616,14 +569,12 @@ exports[`Segmented render segmented with options: disabled 1`] = ` class="ant-segmented-item" >
Monthly @@ -637,7 +588,8 @@ exports[`Segmented render segmented with string options 1`] = `
Daily @@ -664,14 +614,12 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item" >
Weekly @@ -681,14 +629,12 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item" >
Monthly @@ -702,7 +648,8 @@ exports[`Segmented render segmented with thumb 1`] = `
Map @@ -729,14 +674,12 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item" >
Transit @@ -746,14 +689,12 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item" >
Satellite @@ -767,7 +708,7 @@ exports[`Segmented render segmented: disabled 1`] = `
Daily @@ -795,7 +734,6 @@ exports[`Segmented render segmented: disabled 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Weekly @@ -813,7 +750,6 @@ exports[`Segmented render segmented: disabled 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > Monthly @@ -835,7 +770,8 @@ exports[`Segmented render with icons 1`] = `
= (token: SegmentedToken) color: token.itemSelectedColor, }, + '&-focused': { + ...genFocusOutline(token), + }, + '&::after': { content: '""', position: 'absolute', diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 252c58ade2..24c28ed743 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1996,8 +1996,9 @@ Array [
start @@ -2023,7 +2022,6 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > center @@ -2041,14 +2038,12 @@ Array [ class="ant-segmented-item" >
end diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index 9cfb8ba413..8667efbde7 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -1665,8 +1665,9 @@ Array [
start @@ -1692,7 +1691,6 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > center @@ -1710,14 +1707,12 @@ Array [ class="ant-segmented-item" >
end diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap index 023b0befdb..1ac75f31d3 100644 --- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5,8 +5,9 @@ Array [
Show @@ -33,14 +32,12 @@ Array [ class="ant-segmented-item" >
Hide @@ -50,14 +47,12 @@ Array [ class="ant-segmented-item" >
Center diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap index 39547a7ef6..1c95a038a4 100644 --- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap @@ -5,8 +5,9 @@ Array [
Show @@ -33,14 +32,12 @@ Array [ class="ant-segmented-item" >
Hide @@ -50,14 +47,12 @@ Array [ class="ant-segmented-item" >
Center diff --git a/package.json b/package.json index 44c8e6d8c7..952099c1ae 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "rc-progress": "~4.0.0", "rc-rate": "~2.13.0", "rc-resize-observer": "^1.4.0", - "rc-segmented": "~2.6.0", + "rc-segmented": "~2.7.0", "rc-select": "~14.16.4", "rc-slider": "~11.1.7", "rc-steps": "~6.0.1", @@ -349,4 +349,4 @@ "resolutions": { "nwsapi": "2.2.13" } -} +} \ No newline at end of file From 518c57d0a3eaea85f92f0e8f9f14c7f32ead234b Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Thu, 19 Dec 2024 19:38:29 +0800 Subject: [PATCH 16/41] feat(tabs): add focus style for keyboard operation (#52002) * feat(tabs): add focus style for keyboard operation * style: add missing focus style for tabpane * style: add focus style for remove button * chore: update rc-tabs dependency to version 15.5.0 * test: update snapshot * chore: empty commit * chore: empty commit * chore: empty commit for triggering CI --- .../__snapshots__/demo-extend.test.ts.snap | 11 +- .../__tests__/__snapshots__/demo.test.ts.snap | 11 +- .../__snapshots__/index.test.tsx.snap | 7 +- .../__snapshots__/components.test.tsx.snap | 7 + .../__snapshots__/demo-extend.test.ts.snap | 3 +- .../__tests__/__snapshots__/demo.test.ts.snap | 3 +- components/style/index.tsx | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 220 ++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 220 ++++++++++-------- .../__snapshots__/index.test.tsx.snap | 4 + components/tabs/style/index.ts | 20 +- package.json | 2 +- 12 files changed, 303 insertions(+), 214 deletions(-) diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap index b8a7b4b5a6..d123508745 100644 --- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -160,6 +160,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs" >
@@ -195,7 +196,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-tab2" role="tab" - tabindex="0" + tabindex="-1" > tab2
@@ -1127,6 +1128,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs" >
@@ -1162,7 +1164,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-tab2" role="tab" - tabindex="0" + tabindex="-1" > tab2
@@ -1267,6 +1269,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs" >
@@ -1287,7 +1290,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-article" role="tab" - tabindex="0" + tabindex="-1" > article
@@ -1317,7 +1320,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-project" role="tab" - tabindex="0" + tabindex="-1" > project
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap index ac2919c40e..fe9f5f0186 100644 --- a/components/card/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap @@ -156,6 +156,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs" >
@@ -187,7 +188,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > tab2
@@ -1084,6 +1085,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs" >
@@ -1115,7 +1117,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > tab2
@@ -1201,6 +1203,7 @@ Array [ class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs" >
@@ -1219,7 +1222,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > article
@@ -1245,7 +1248,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > project
diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap index 838b3c0b47..f074d43f4e 100644 --- a/components/card/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -14,6 +14,7 @@ exports[`Card correct pass tabList props 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-large ant-tabs-card ant-tabs-editable-card ant-card-head-tabs" >
@@ -76,14 +77,14 @@ exports[`Card correct pass tabList props 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-deprecated" role="tab" - tabindex="0" + tabindex="-1" > Deprecated
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index afce1338a8..a8b3e08f46 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -28935,6 +28935,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = ` class="config-tabs config-tabs-top" >
@@ -29025,6 +29026,7 @@ exports[`ConfigProvider components Tabs configProvider componentDisabled 1`] = ` class="config-tabs config-tabs-top" >
@@ -29115,6 +29117,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] = class="config-tabs config-tabs-top config-tabs-large" >
@@ -29205,6 +29208,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize middle 1`] class="config-tabs config-tabs-top config-tabs-middle" >
@@ -29295,6 +29299,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize small 1`] = class="config-tabs config-tabs-top config-tabs-small" >
@@ -29385,6 +29390,7 @@ exports[`ConfigProvider components Tabs normal 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -29475,6 +29481,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = ` class="prefix-Tabs prefix-Tabs-top" >
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap index 68abd5e69b..6e1bae7f45 100644 --- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -769,6 +769,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr class="ant-tabs ant-tabs-top" >
@@ -804,7 +805,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Splitter Tab
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap index efbd1fd577..12cf7a134b 100644 --- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap @@ -783,6 +783,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -814,7 +815,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Splitter Tab
diff --git a/components/style/index.tsx b/components/style/index.tsx index b79230410a..528665324a 100644 --- a/components/style/index.tsx +++ b/components/style/index.tsx @@ -1,5 +1,6 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; + import type { AliasToken } from '../theme/internal'; export const textEllipsis: CSSObject = { @@ -131,15 +132,15 @@ export const genCommonStyle = ( }; }; -export const genFocusOutline = (token: AliasToken): CSSObject => ({ +export const genFocusOutline = (token: AliasToken, offset?: number): CSSObject => ({ outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`, - outlineOffset: 1, + outlineOffset: offset ?? 1, transition: 'outline-offset 0s, outline 0s', }); -export const genFocusStyle = (token: AliasToken): CSSObject => ({ +export const genFocusStyle = (token: AliasToken, offset?: number): CSSObject => ({ '&:focus-visible': { - ...genFocusOutline(token), + ...genFocusOutline(token, offset), }, }); diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index d2e099ca92..0c0bc5e44f 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -66,6 +66,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -101,7 +102,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Little
@@ -116,7 +117,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Light
@@ -209,6 +210,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -244,7 +246,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -259,7 +261,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -350,6 +352,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-card" >
@@ -385,7 +388,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -400,7 +403,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -494,6 +497,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`] class="ant-tabs ant-tabs-top ant-tabs-card" >
@@ -529,7 +533,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`] class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab Title 2
@@ -544,7 +548,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`] class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab Title 3
@@ -644,6 +648,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`] class="ant-tabs ant-tabs-top ant-tabs-centered" >
@@ -679,7 +684,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`] class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -694,7 +699,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`] class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -787,6 +792,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct style="margin-bottom: 32px;" >
@@ -822,7 +828,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -837,7 +843,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -936,6 +942,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct style="margin-bottom: 32px;" >
@@ -971,7 +978,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -986,7 +993,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1085,6 +1092,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct style="margin-bottom: 32px;" >
@@ -1120,7 +1128,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1135,7 +1143,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1234,6 +1242,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct style="margin-bottom: 32px;" >
@@ -1269,7 +1278,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1284,7 +1293,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1382,6 +1391,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered" >
@@ -1419,7 +1429,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1520,6 +1530,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered" >
@@ -1557,7 +1568,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1658,6 +1669,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered" >
@@ -1695,7 +1707,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1815,6 +1827,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card" >
@@ -1877,14 +1890,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2200,6 +2214,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl style="z-index: 1;" >
Tab 2
@@ -2251,7 +2266,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2345,6 +2360,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor class="ant-tabs ant-tabs-top" >
@@ -2392,7 +2408,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2413,7 +2429,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2519,6 +2535,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`] class="ant-tabs ant-tabs-top" >
@@ -2569,7 +2586,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`] class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2660,6 +2677,7 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card" >
@@ -2722,14 +2740,14 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2912,6 +2930,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -2947,7 +2966,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2962,7 +2981,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -3116,6 +3135,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -3163,7 +3183,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -3178,7 +3198,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -3282,6 +3302,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -3302,7 +3323,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-1" role="tab" - tabindex="0" + tabindex="-1" >
@@ -4152,7 +4174,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -4234,6 +4256,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` style="height: 300px;" >
@@ -4254,7 +4277,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-0" role="tab" - tabindex="0" + tabindex="-1" > Tab 0
@@ -4284,7 +4307,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -4299,7 +4322,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -4314,7 +4337,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-4" role="tab" - tabindex="0" + tabindex="-1" > Tab 4
@@ -4329,7 +4352,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-5" role="tab" - tabindex="0" + tabindex="-1" > Tab 5
@@ -4344,7 +4367,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-6" role="tab" - tabindex="0" + tabindex="-1" > Tab 6
@@ -4359,7 +4382,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-7" role="tab" - tabindex="0" + tabindex="-1" > Tab 7
@@ -4374,7 +4397,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-8" role="tab" - tabindex="0" + tabindex="-1" > Tab 8
@@ -4389,7 +4412,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-9" role="tab" - tabindex="0" + tabindex="-1" > Tab 9
@@ -4404,7 +4427,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-10" role="tab" - tabindex="0" + tabindex="-1" > Tab 10
@@ -4419,7 +4442,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-11" role="tab" - tabindex="0" + tabindex="-1" > Tab 11
@@ -4434,7 +4457,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-12" role="tab" - tabindex="0" + tabindex="-1" > Tab 12
@@ -4449,7 +4472,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-13" role="tab" - tabindex="0" + tabindex="-1" > Tab 13
@@ -4464,7 +4487,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-14" role="tab" - tabindex="0" + tabindex="-1" > Tab 14
@@ -4479,7 +4502,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-15" role="tab" - tabindex="0" + tabindex="-1" > Tab 15
@@ -4494,7 +4517,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-16" role="tab" - tabindex="0" + tabindex="-1" > Tab 16
@@ -4509,7 +4532,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-17" role="tab" - tabindex="0" + tabindex="-1" > Tab 17
@@ -4524,7 +4547,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-18" role="tab" - tabindex="0" + tabindex="-1" > Tab 18
@@ -4539,7 +4562,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-19" role="tab" - tabindex="0" + tabindex="-1" > Tab 19
@@ -4731,6 +4754,7 @@ Array [ class="ant-tabs ant-tabs-left" >
@@ -4766,7 +4790,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -4781,7 +4805,7 @@ Array [ class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -4938,6 +4962,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` style="margin-bottom: 32px;" >
@@ -4973,7 +4998,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -4988,7 +5013,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -5075,6 +5100,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` style="margin-bottom: 32px;" >
@@ -5110,7 +5136,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Card Tab 2
@@ -5125,7 +5151,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Card Tab 3
@@ -5211,6 +5237,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card" >
@@ -5273,14 +5300,14 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-2" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -5605,7 +5633,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-3" role="tab" - tabindex="0" + tabindex="-1" > Tab-3
@@ -5621,7 +5649,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-4" role="tab" - tabindex="0" + tabindex="-1" > Tab-4
@@ -5637,7 +5665,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-5" role="tab" - tabindex="0" + tabindex="-1" > Tab-5
@@ -5653,7 +5681,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-6" role="tab" - tabindex="0" + tabindex="-1" > Tab-6
@@ -5669,7 +5697,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-7" role="tab" - tabindex="0" + tabindex="-1" > Tab-7
@@ -5685,7 +5713,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-8" role="tab" - tabindex="0" + tabindex="-1" > Tab-8
@@ -5701,7 +5729,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-9" role="tab" - tabindex="0" + tabindex="-1" > Tab-9
@@ -5717,7 +5745,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-10" role="tab" - tabindex="0" + tabindex="-1" > Tab-10
@@ -5733,7 +5761,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-11" role="tab" - tabindex="0" + tabindex="-1" > Tab-11
@@ -5749,7 +5777,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-12" role="tab" - tabindex="0" + tabindex="-1" > Tab-12
@@ -5765,7 +5793,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-13" role="tab" - tabindex="0" + tabindex="-1" > Tab-13
@@ -5781,7 +5809,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-14" role="tab" - tabindex="0" + tabindex="-1" > Tab-14
@@ -5797,7 +5825,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-15" role="tab" - tabindex="0" + tabindex="-1" > Tab-15
@@ -5813,7 +5841,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-16" role="tab" - tabindex="0" + tabindex="-1" > Tab-16
@@ -5829,7 +5857,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-17" role="tab" - tabindex="0" + tabindex="-1" > Tab-17
@@ -5845,7 +5873,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-18" role="tab" - tabindex="0" + tabindex="-1" > Tab-18
@@ -5861,7 +5889,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-19" role="tab" - tabindex="0" + tabindex="-1" > Tab-19
@@ -5877,7 +5905,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-20" role="tab" - tabindex="0" + tabindex="-1" > Tab-20
@@ -5893,7 +5921,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-21" role="tab" - tabindex="0" + tabindex="-1" > Tab-21
@@ -5909,7 +5937,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-22" role="tab" - tabindex="0" + tabindex="-1" > Tab-22
@@ -5925,7 +5953,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-23" role="tab" - tabindex="0" + tabindex="-1" > Tab-23
@@ -5941,7 +5969,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-24" role="tab" - tabindex="0" + tabindex="-1" > Tab-24
@@ -5957,7 +5985,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-25" role="tab" - tabindex="0" + tabindex="-1" > Tab-25
@@ -5973,7 +6001,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-26" role="tab" - tabindex="0" + tabindex="-1" > Tab-26
@@ -5989,7 +6017,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-27" role="tab" - tabindex="0" + tabindex="-1" > Tab-27
@@ -6020,7 +6048,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` class="ant-tabs-tab-btn" id="rc-tabs-test-tab-29" role="tab" - tabindex="0" + tabindex="-1" > Tab-29
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index 3a6865195c..68e4cc70b8 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -66,6 +66,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -97,7 +98,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Little
@@ -110,7 +111,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Light
@@ -182,6 +183,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -213,7 +215,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -226,7 +228,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -296,6 +298,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-card" >
@@ -327,7 +330,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -340,7 +343,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -413,6 +416,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-card" >
@@ -444,7 +448,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab Title 2
@@ -457,7 +461,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab Title 3
@@ -542,6 +546,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-centered" >
@@ -573,7 +578,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -586,7 +591,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -658,6 +663,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -689,7 +695,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -702,7 +708,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -782,6 +788,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -813,7 +820,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -826,7 +833,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -906,6 +913,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -937,7 +945,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -950,7 +958,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1030,6 +1038,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -1061,7 +1070,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1074,7 +1083,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1153,6 +1162,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered" >
@@ -1186,7 +1196,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1266,6 +1276,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered" >
@@ -1299,7 +1310,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1379,6 +1390,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered" >
@@ -1412,7 +1424,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1509,6 +1521,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card" >
@@ -1567,14 +1580,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -1842,6 +1856,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = ` style="z-index:1" >
Tab 2
@@ -1887,7 +1902,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -1960,6 +1975,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -2003,7 +2019,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2022,7 +2038,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2092,6 +2108,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -2136,7 +2153,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2206,6 +2223,7 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card" >
@@ -2264,14 +2282,14 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2431,6 +2449,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -2462,7 +2481,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2475,7 +2494,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2610,6 +2629,7 @@ Array [ class="ant-tabs ant-tabs-top" >
@@ -2653,7 +2673,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -2666,7 +2686,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -2749,6 +2769,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -2767,7 +2788,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" >
@@ -3176,7 +3198,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -3239,6 +3261,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` style="height:300px" >
@@ -3257,7 +3280,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 0
@@ -3283,7 +3306,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -3296,7 +3319,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -3309,7 +3332,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 4
@@ -3322,7 +3345,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 5
@@ -3335,7 +3358,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 6
@@ -3348,7 +3371,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 7
@@ -3361,7 +3384,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 8
@@ -3374,7 +3397,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 9
@@ -3387,7 +3410,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 10
@@ -3400,7 +3423,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 11
@@ -3413,7 +3436,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 12
@@ -3426,7 +3449,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 13
@@ -3439,7 +3462,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 14
@@ -3452,7 +3475,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 15
@@ -3465,7 +3488,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 16
@@ -3478,7 +3501,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 17
@@ -3491,7 +3514,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 18
@@ -3504,7 +3527,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 19
@@ -3675,6 +3698,7 @@ Array [ class="ant-tabs ant-tabs-left" >
@@ -3706,7 +3730,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -3719,7 +3743,7 @@ Array [ aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -3855,6 +3879,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -3886,7 +3911,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -3899,7 +3924,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 3
@@ -3967,6 +3992,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` style="margin-bottom:32px" >
@@ -3998,7 +4024,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Card Tab 2
@@ -4011,7 +4037,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Card Tab 3
@@ -4078,6 +4104,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card" >
@@ -4136,14 +4163,14 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab 2
@@ -4437,7 +4465,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-3
@@ -4451,7 +4479,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-4
@@ -4465,7 +4493,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-5
@@ -4479,7 +4507,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-6
@@ -4493,7 +4521,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-7
@@ -4507,7 +4535,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-8
@@ -4521,7 +4549,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-9
@@ -4535,7 +4563,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-10
@@ -4549,7 +4577,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-11
@@ -4563,7 +4591,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-12
@@ -4577,7 +4605,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-13
@@ -4591,7 +4619,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-14
@@ -4605,7 +4633,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-15
@@ -4619,7 +4647,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-16
@@ -4633,7 +4661,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-17
@@ -4647,7 +4675,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-18
@@ -4661,7 +4689,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-19
@@ -4675,7 +4703,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-20
@@ -4689,7 +4717,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-21
@@ -4703,7 +4731,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-22
@@ -4717,7 +4745,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-23
@@ -4731,7 +4759,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-24
@@ -4745,7 +4773,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-25
@@ -4759,7 +4787,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-26
@@ -4773,7 +4801,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-27
@@ -4800,7 +4828,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` aria-selected="false" class="ant-tabs-tab-btn" role="tab" - tabindex="0" + tabindex="-1" > Tab-29
diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap index 5610da2e8e..afe523590d 100644 --- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap @@ -33,6 +33,7 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction class="ant-tabs ant-tabs-top ant-tabs-rtl" >
@@ -123,6 +124,7 @@ exports[`Tabs tabBarGutter should work 1`] = ` class="ant-tabs ant-tabs-top" >
@@ -255,6 +257,7 @@ exports[`Tabs tabBarGutter should work 2`] = ` class="ant-tabs ant-tabs-left" >
@@ -387,6 +390,7 @@ exports[`Tabs tabPosition remove card 1`] = ` class="ant-tabs ant-tabs-left" >
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index 7ad2af0414..0f120de1fa 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -1,7 +1,7 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; -import { genFocusStyle, resetComponent, textEllipsis } from '../../style'; +import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; import genMotionStyle from './motion'; @@ -165,9 +165,17 @@ const genCardStyle: GenerateStyle = (token: TabsToken): CSSObject => background: token.colorBgContainer, }, + [`${componentCls}-tab-focus`]: { + ...genFocusOutline(token, -3), + }, + [`${componentCls}-ink-bar`]: { visibility: 'hidden', }, + + [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn`]: { + outline: 'none', + }, }, // ========================== Top & Bottom ========================== @@ -687,7 +695,6 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { '&:focus:not(:focus-visible), &:active': { color: itemActiveColor, }, - ...genFocusStyle(token), }, '&-btn': { outline: 'none', @@ -716,6 +723,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { '&:hover': { color: token.colorTextHeading, }, + ...genFocusStyle(token), }, '&:hover': { color: itemHoverColor, @@ -726,6 +734,10 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { textShadow: token.tabsActiveTextShadow, }, + [`&${tabCls}-focus ${tabCls}-btn`]: { + ...genFocusOutline(token), + }, + [`&${tabCls}-disabled`]: { color: token.colorTextDisabled, cursor: 'not-allowed', @@ -961,7 +973,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => color: itemActiveColor, }, - ...genFocusStyle(token), + ...genFocusStyle(token, -3), }, }, @@ -992,7 +1004,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => }, [`${componentCls}-tabpane`]: { - outline: 'none', + ...genFocusStyle(token), '&-hidden': { display: 'none', }, diff --git a/package.json b/package.json index 781a47f403..4563bf552a 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.49.0", - "rc-tabs": "~15.4.0", + "rc-tabs": "~15.5.0", "rc-textarea": "~1.8.2", "rc-tooltip": "~6.2.1", "rc-tree": "~5.10.1", From f96dacd7121ae8695166ed6cdad5f7050827fce6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Dec 2024 23:13:45 +0800 Subject: [PATCH 17/41] feat: Calendar support showWeek prop (#52072) --- .../__snapshots__/demo-extend.test.ts.snap | 3292 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 2014 ++++++++++ components/calendar/demo/week.md | 7 + components/calendar/demo/week.tsx | 12 + components/calendar/generateCalendar.tsx | 3 + components/calendar/index.en-US.md | 2 + components/calendar/index.zh-CN.md | 2 + components/calendar/style/index.ts | 12 + 8 files changed, 5344 insertions(+) create mode 100644 components/calendar/demo/week.md create mode 100644 components/calendar/demo/week.tsx diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index 1f0898e341..d93e9221d0 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -11598,3 +11598,3295 @@ Array [ `; exports[`renders components/calendar/demo/select.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/calendar/demo/week.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+ + + + + + 2016 + + +
+
+
+
+
+ 2006 +
+
+ 2007 +
+
+
+
+
+
+
+
+ 2006 +
+
+
+
+ 2007 +
+
+
+
+ 2008 +
+
+
+
+ 2009 +
+
+
+
+ 2010 +
+
+
+
+ 2011 +
+
+
+
+ 2012 +
+
+
+
+ 2013 +
+
+
+
+ 2014 +
+
+
+
+ 2015 +
+
+
+
+ 2016 +
+
+
+
+ 2017 +
+
+
+
+ 2018 +
+
+
+
+ 2019 +
+
+
+
+ 2020 +
+
+
+
+ 2021 +
+
+
+
+ 2022 +
+
+
+
+ 2023 +
+
+
+
+ 2024 +
+
+
+
+ 2025 +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + Nov + + +
+
+
+
+
+ 0 +
+
+ 1 +
+
+
+
+
+
+
+
+ Jan +
+
+
+
+ Feb +
+
+
+
+ Mar +
+
+
+
+ Apr +
+
+
+
+ May +
+
+
+
+ Jun +
+
+
+
+ Jul +
+
+
+
+ Aug +
+
+
+
+ Sep +
+
+
+
+ Oct +
+
+
+
+ Nov +
+
+
+
+ Dec +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +
, +
+
+
+
+ + + + + + 2016 + + +
+
+
+
+
+ 2006 +
+
+ 2007 +
+
+
+
+
+
+
+
+ 2006 +
+
+
+
+ 2007 +
+
+
+
+ 2008 +
+
+
+
+ 2009 +
+
+
+
+ 2010 +
+
+
+
+ 2011 +
+
+
+
+ 2012 +
+
+
+
+ 2013 +
+
+
+
+ 2014 +
+
+
+
+ 2015 +
+
+
+
+ 2016 +
+
+
+
+ 2017 +
+
+
+
+ 2018 +
+
+
+
+ 2019 +
+
+
+
+ 2020 +
+
+
+
+ 2021 +
+
+
+
+ 2022 +
+
+
+
+ 2023 +
+
+
+
+ 2024 +
+
+
+
+ 2025 +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + Nov + + +
+
+
+
+
+ 0 +
+
+ 1 +
+
+
+
+
+
+
+
+ Jan +
+
+
+
+ Feb +
+
+
+
+ Mar +
+
+
+
+ Apr +
+
+
+
+ May +
+
+
+
+ Jun +
+
+
+
+ Jul +
+
+
+
+ Aug +
+
+
+
+ Sep +
+
+
+
+ Oct +
+
+
+
+ Nov +
+
+
+
+ Dec +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +] +`; + +exports[`renders components/calendar/demo/week.tsx extend context correctly 2`] = `[]`; diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index afcaa40c6d..93792dcd33 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -7096,3 +7096,2017 @@ Array [
, ] `; + +exports[`renders components/calendar/demo/week.tsx correctly 1`] = ` +Array [ +
+
+
+
+ + + + + + 2016 + + +
+ +
+
+
+ + + + + + Nov + + +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +
, +
+
+
+
+ + + + + + 2016 + + +
+ +
+
+
+ + + + + + Nov + + +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 45 +
+ 		+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+ 46 +
+ 		+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+ 47 +
+ 		+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+ 48 +
+ 		+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+ 49 +
+ 		+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+ 50 +
+ 		+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
, +] +`; diff --git a/components/calendar/demo/week.md b/components/calendar/demo/week.md new file mode 100644 index 0000000000..cba80646e7 --- /dev/null +++ b/components/calendar/demo/week.md @@ -0,0 +1,7 @@ +## zh-CN + +通过将 `showWeek` 属性设置为 `true`，在全屏日历中显示周数。 + +## en-US + +Show week number in fullscreen calendar by setting `showWeek` prop to `true`. diff --git a/components/calendar/demo/week.tsx b/components/calendar/demo/week.tsx new file mode 100644 index 0000000000..ccd28a21f9 --- /dev/null +++ b/components/calendar/demo/week.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Calendar } from 'antd'; + +const App: React.FC = () => ( + <> + +
+ + +); + +export default App; diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index cb47428d20..96ed4afa33 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -49,6 +49,7 @@ export interface CalendarProps { defaultValue?: DateType; mode?: CalendarMode; fullscreen?: boolean; + showWeek?: boolean; onChange?: (date: DateType) => void; onPanelChange?: (date: DateType, mode: CalendarMode) => void; onSelect?: (date: DateType, selectInfo: SelectInfo) => void; @@ -89,6 +90,7 @@ const generateCalendar = (generateConfig: GenerateCo mode, validRange, fullscreen = true, + showWeek, onChange, onPanelChange, onSelect, @@ -299,6 +301,7 @@ const generateCalendar = (generateConfig: GenerateCo picker={panelMode} disabledDate={mergedDisabledDate} hideHeader + showWeek={showWeek} />
, ); diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index ddf4655bac..87cf2c9885 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Card Selectable Calendar Lunar Calendar +Show Week Customize Header Component Token @@ -45,6 +46,7 @@ Common props ref：[Common props](/docs/react/common-props) | defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - | | | disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | | | fullscreen | Whether to display in full-screen | boolean | true | | +| showWeek | Whether to display week number | boolean | false | 5.23.0 | | headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | | | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | The display mode of the calendar | `month` \| `year` | `month` | | diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 3e76ce755a..46217865b6 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 卡片模式 选择功能 农历日历 +周数 自定义头部 组件 Token @@ -46,6 +47,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | defaultValue | 默认展示的日期 | [dayjs](https://day.js.org/) | - | | | disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | | | fullscreen | 是否全屏显示 | boolean | true | | +| showWeek | 是否显示周数列 | boolean | false | 5.23.0 | | headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | | | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | 初始模式 | `month` \| `year` | `month` | | diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index fdeec49379..180da3d1e6 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -149,6 +149,18 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => { }, }, }, + [`${componentCls}-cell-week ${componentCls}-cell-inner`]: { + display: 'block', + borderRadius: 0, + borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`, + width: '100%', + height: token + .calc(token.dateValueHeight) + .add(token.dateContentHeight) + .add(token.calc(token.paddingXS).div(2)) + .add(token.lineWidthBold) + .equal(), + }, [`${componentCls}-cell`]: { '&::before': { display: 'none', From 02792b8973b13c5a8126c487699eb91ac2bd48a3 Mon Sep 17 00:00:00 2001 From: SummerBetter <92348692+Kaikiat1126@users.noreply.github.com> Date: Mon, 23 Dec 2024 09:49:09 +0800 Subject: [PATCH 18/41] feat: update input.search type (#52077) (#52083) * feat: update input.search type and role (#52077) * fix: remove input.search role --- .../__snapshots__/components.test.tsx.snap | 14 +++++------ components/input/Search.tsx | 11 ++++++--- .../__snapshots__/Search.test.tsx.snap | 24 +++++++++---------- .../__snapshots__/demo-extend.test.ts.snap | 24 +++++++++---------- .../__snapshots__/demo.test.tsx.snap | 24 +++++++++---------- .../__snapshots__/demo-extend.test.ts.snap | 12 +++++----- .../__snapshots__/demo.test.tsx.snap | 12 +++++----- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- 9 files changed, 65 insertions(+), 60 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index a8b3e08f46..98e2b500f3 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -16125,7 +16125,7 @@ exports[`ConfigProvider components Input configProvider 1`] = ` > ((props, ref) => { className, ); + const newProps: InputProps = { + ...restProps, + className: cls, + prefixCls: inputPrefixCls, + type: 'search', + }; + const handleOnCompositionStart: React.CompositionEventHandler = (e) => { composedRef.current = true; onCompositionStart?.(e); @@ -164,15 +171,13 @@ const Search = React.forwardRef((props, ref) => { (inputRef, ref)} onPressEnter={onPressEnter} - {...restProps} + {...newProps} size={size} onCompositionStart={handleOnCompositionStart} onCompositionEnd={handleOnCompositionEnd} - prefixCls={inputPrefixCls} addonAfter={button} suffix={suffix} onChange={onChange} - className={cls} disabled={disabled} /> ); diff --git a/components/input/__tests__/__snapshots__/Search.test.tsx.snap b/components/input/__tests__/__snapshots__/Search.test.tsx.snap index b2309a885e..1225315584 100644 --- a/components/input/__tests__/__snapshots__/Search.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/Search.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d > Date: Mon, 23 Dec 2024 10:55:45 +0800 Subject: [PATCH 19/41] feat: add default name generation for RadioGroup component better a11y (#52076) * feat: add default name generation for RadioGroup component better a11y * feat(radio): implement useStableId hook for consistent ID generation in RadioGroup * test: update snapshot * chore: remove unused demo code snippet from form documentation * test: enhance demo testing by adding ignoreAttributes option for snapshot matching * fix(tests): correct logic for skipping tests and enhance snapshot matching for demo tests * Revert "test: enhance demo testing by adding ignoreAttributes option for snapshot matching" * test: mock useId for stable ID generation in snapshot tests * chore: trigger CI build * docs(radio): update name property description to clarify fallback behavior for RadioGroup * Update index.zh-CN.md Signed-off-by: Jony J <1844749591@qq.com> --------- Signed-off-by: Jony J <1844749591@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 8 + .../__tests__/__snapshots__/demo.test.ts.snap | 8 + .../__snapshots__/demo-extend.test.ts.snap | 18 +++ .../__tests__/__snapshots__/demo.test.ts.snap | 18 +++ .../__snapshots__/index.test.tsx.snap | 8 + .../__snapshots__/demo-extend.test.ts.snap | 4 + .../__tests__/__snapshots__/demo.test.ts.snap | 4 + .../__snapshots__/demo-extend.test.ts.snap | 4 + .../__snapshots__/demo.test.tsx.snap | 4 + .../__snapshots__/components.test.tsx.snap | 42 ++++++ .../__snapshots__/demo-extend.test.ts.snap | 7 + .../__snapshots__/demo.test.tsx.snap | 7 + .../__snapshots__/demo-extend.test.ts.snap | 8 + .../__tests__/__snapshots__/demo.test.ts.snap | 8 + .../__snapshots__/demo-extend.test.tsx.snap | 8 + .../__tests__/__snapshots__/demo.test.ts.snap | 8 + .../__snapshots__/demo-extend.test.ts.snap | 6 + .../__tests__/__snapshots__/demo.test.ts.snap | 6 + .../__snapshots__/demo-extend.test.ts.snap | 18 +++ .../__snapshots__/demo.test.tsx.snap | 18 +++ .../__snapshots__/index.test.tsx.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 2 + .../__snapshots__/demo.test.tsx.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 6 + .../__tests__/__snapshots__/demo.test.ts.snap | 6 + .../__snapshots__/index.test.tsx.snap | 140 ++++++++++++++++++ .../__snapshots__/demo-extend.test.ts.snap | 83 +++++++++++ .../__snapshots__/demo.test.tsx.snap | 83 +++++++++++ .../__snapshots__/group.test.tsx.snap | 2 + .../__snapshots__/radio-button.test.tsx.snap | 2 + components/radio/group.tsx | 5 +- components/radio/index.en-US.md | 2 +- components/radio/index.zh-CN.md | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 11 ++ .../__snapshots__/demo.test.tsx.snap | 11 ++ .../__snapshots__/demo-extend.test.ts.snap | 9 ++ .../__snapshots__/demo.test.tsx.snap | 9 ++ .../__snapshots__/demo-extend.test.ts.snap | 4 + .../__snapshots__/demo.test.tsx.snap | 4 + .../__snapshots__/demo-extend.test.ts.snap | 2 + .../__tests__/__snapshots__/demo.test.ts.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 42 ++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 42 ++++++ .../__snapshots__/demo-extend.test.ts.snap | 9 ++ .../__tests__/__snapshots__/demo.test.ts.snap | 9 ++ .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__tests__/__snapshots__/demo.test.ts.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 4 + .../__snapshots__/demo.test.tsx.snap | 4 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + tests/setup.ts | 6 + 52 files changed, 726 insertions(+), 3 deletions(-) diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d9f05b720..7d9e4971b8 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -879,6 +879,7 @@ Array [ @@ -898,6 +899,7 @@ Array [ > @@ -917,6 +919,7 @@ Array [ > @@ -2051,6 +2054,7 @@ Array [ > @@ -2071,6 +2075,7 @@ Array [ @@ -3349,6 +3354,7 @@ Array [ @@ -3368,6 +3374,7 @@ Array [ > @@ -3387,6 +3394,7 @@ Array [ > diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index d05efa4543..ad96b58760 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -860,6 +860,7 @@ Array [ @@ -879,6 +880,7 @@ Array [ > @@ -898,6 +900,7 @@ Array [ > @@ -1872,6 +1875,7 @@ Array [ > @@ -1892,6 +1896,7 @@ Array [ @@ -2862,6 +2867,7 @@ Array [ @@ -2881,6 +2887,7 @@ Array [ > @@ -2900,6 +2907,7 @@ Array [ > diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index d93e9221d0..f4f104613c 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -783,6 +783,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`] @@ -802,6 +803,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`] > @@ -2376,6 +2378,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`] @@ -2395,6 +2398,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`] > @@ -3968,6 +3972,7 @@ Array [ @@ -3987,6 +3992,7 @@ Array [ > @@ -5554,6 +5560,7 @@ Array [ @@ -5573,6 +5580,7 @@ Array [ > @@ -6397,6 +6405,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co @@ -6416,6 +6425,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co > @@ -8788,6 +8798,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor @@ -8807,6 +8818,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor > @@ -10791,6 +10803,7 @@ Array [ @@ -10810,6 +10823,7 @@ Array [ > @@ -12383,6 +12397,7 @@ Array [ @@ -12402,6 +12417,7 @@ Array [ > @@ -14026,6 +14042,7 @@ Array [ @@ -14045,6 +14062,7 @@ Array [ > diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index 93792dcd33..7b033caebb 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -145,6 +145,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = ` @@ -164,6 +165,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = ` > @@ -1098,6 +1100,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = ` @@ -1117,6 +1120,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = ` > @@ -2050,6 +2054,7 @@ Array [ @@ -2069,6 +2074,7 @@ Array [ > @@ -2998,6 +3004,7 @@ Array [ @@ -3017,6 +3024,7 @@ Array [ > @@ -3839,6 +3847,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = ` @@ -3858,6 +3867,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = ` > @@ -4928,6 +4938,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = ` @@ -4947,6 +4958,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = ` > @@ -6291,6 +6303,7 @@ Array [ @@ -6310,6 +6323,7 @@ Array [ > @@ -7243,6 +7257,7 @@ Array [ @@ -7262,6 +7277,7 @@ Array [ > @@ -8248,6 +8264,7 @@ Array [ @@ -8267,6 +8284,7 @@ Array [ > diff --git a/components/calendar/__tests__/__snapshots__/index.test.tsx.snap b/components/calendar/__tests__/__snapshots__/index.test.tsx.snap index a348a96a68..b1be928a0a 100644 --- a/components/calendar/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/calendar/__tests__/__snapshots__/index.test.tsx.snap @@ -147,6 +147,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = ` @@ -166,6 +167,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = ` > @@ -1099,6 +1101,7 @@ exports[`Calendar Calendar should support locale 1`] = ` @@ -1118,6 +1121,7 @@ exports[`Calendar Calendar should support locale 1`] = ` > @@ -2051,6 +2055,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc @@ -2070,6 +2075,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc > @@ -3003,6 +3009,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = ` @@ -3022,6 +3029,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = ` > diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap index 7986e72923..2d7ef550c7 100644 --- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1158,6 +1158,7 @@ Array [ @@ -1177,6 +1178,7 @@ Array [ > @@ -1196,6 +1198,7 @@ Array [ > @@ -1215,6 +1218,7 @@ Array [ > diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap index 50751a7206..e1fca0f462 100644 --- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap @@ -1147,6 +1147,7 @@ Array [ @@ -1166,6 +1167,7 @@ Array [ > @@ -1185,6 +1187,7 @@ Array [ > @@ -1204,6 +1207,7 @@ Array [ > diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap index f9930e2787..134883a736 100644 --- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2199,6 +2199,7 @@ Array [ @@ -2218,6 +2219,7 @@ Array [ > @@ -2237,6 +2239,7 @@ Array [ > @@ -2256,6 +2259,7 @@ Array [ > diff --git a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap index 53a90aa216..52befde46b 100644 --- a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap @@ -1087,6 +1087,7 @@ Array [ @@ -1106,6 +1107,7 @@ Array [ > @@ -1125,6 +1127,7 @@ Array [ > @@ -1144,6 +1147,7 @@ Array [ > diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 98e2b500f3..cda8f903c3 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -1755,6 +1755,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` @@ -1774,6 +1775,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` > @@ -2639,6 +2641,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` > @@ -2659,6 +2662,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` @@ -3058,6 +3062,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`] checked="" class="config-radio-button-input" disabled="" + name="test-id" type="radio" value="month" /> @@ -3078,6 +3083,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`] @@ -3945,6 +3951,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`] @@ -3966,6 +3973,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`] checked="" class="config-radio-button-input" disabled="" + name="test-id" type="radio" value="year" /> @@ -4362,6 +4370,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1 @@ -4381,6 +4390,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1 > @@ -5246,6 +5256,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1 > @@ -5266,6 +5277,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1 @@ -5662,6 +5674,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle @@ -5681,6 +5694,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle > @@ -6546,6 +6560,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle > @@ -6566,6 +6581,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle @@ -6962,6 +6978,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1 @@ -6981,6 +6998,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1 > @@ -7846,6 +7864,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1 > @@ -7866,6 +7885,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1 @@ -8262,6 +8282,7 @@ exports[`ConfigProvider components Calendar normal 1`] = ` @@ -8281,6 +8302,7 @@ exports[`ConfigProvider components Calendar normal 1`] = ` > @@ -9146,6 +9168,7 @@ exports[`ConfigProvider components Calendar normal 1`] = ` > @@ -9166,6 +9189,7 @@ exports[`ConfigProvider components Calendar normal 1`] = ` @@ -9562,6 +9586,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = ` @@ -9581,6 +9606,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = ` > @@ -10446,6 +10472,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = ` > @@ -10466,6 +10493,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = ` @@ -22174,6 +22202,7 @@ exports[`ConfigProvider components Radio configProvider 1`] = ` @@ -47249,6 +47250,7 @@ Array [ > @@ -47268,6 +47270,7 @@ Array [ > @@ -47287,6 +47290,7 @@ Array [ > @@ -61481,6 +61485,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1 > @@ -61501,6 +61506,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1 @@ -61520,6 +61526,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1 > diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap index 86a8a6ef6b..4598e02c0b 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap @@ -4782,6 +4782,7 @@ Array [ @@ -4801,6 +4802,7 @@ Array [ > @@ -4820,6 +4822,7 @@ Array [ > @@ -4839,6 +4842,7 @@ Array [ > @@ -5999,6 +6003,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = ` > @@ -6019,6 +6024,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = ` @@ -6038,6 +6044,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = ` > diff --git a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap index f9d0138ec4..bf73b04f5e 100644 --- a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -513,6 +513,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context @@ -532,6 +533,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context > @@ -551,6 +553,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context > @@ -1604,6 +1607,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly @@ -1623,6 +1627,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly > @@ -1642,6 +1647,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly > @@ -2060,6 +2066,7 @@ Array [ @@ -2079,6 +2086,7 @@ Array [ > diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap index 2789a29bdc..fbdedee93b 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap @@ -467,6 +467,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`] @@ -486,6 +487,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`] > @@ -505,6 +507,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`] > @@ -1486,6 +1489,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = ` @@ -1505,6 +1509,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = ` > @@ -1524,6 +1529,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = ` > @@ -1908,6 +1914,7 @@ Array [ @@ -1927,6 +1934,7 @@ Array [ > diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap index 8db6c7b085..684c3af207 100644 --- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap @@ -500,6 +500,7 @@ Array [ > @@ -520,6 +521,7 @@ Array [ @@ -539,6 +541,7 @@ Array [ > @@ -558,6 +561,7 @@ Array [ > @@ -3150,6 +3154,7 @@ Array [ > @@ -3169,6 +3174,7 @@ Array [ > @@ -3188,6 +3194,7 @@ Array [ > @@ -3208,6 +3215,7 @@ Array [ diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap index f656c8d563..a6222dd9cd 100644 --- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap @@ -136,6 +136,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = ` > @@ -156,6 +157,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = ` @@ -175,6 +177,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = ` > @@ -194,6 +197,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = ` > @@ -310,6 +314,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = ` > @@ -329,6 +334,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = ` > @@ -348,6 +354,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = ` > @@ -368,6 +375,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = ` diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap index babf051248..65fa6ddb4d 100644 --- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -227,6 +227,7 @@ exports[`renders components/flex/demo/basic.tsx extend context correctly 1`] = ` @@ -246,6 +247,7 @@ exports[`renders components/flex/demo/basic.tsx extend context correctly 1`] = ` > @@ -379,6 +381,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = ` @@ -398,6 +401,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = ` > @@ -417,6 +421,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = ` > @@ -436,6 +441,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = ` > diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap index 1d9988b11f..3d730e67f0 100644 --- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap @@ -225,6 +225,7 @@ exports[`renders components/flex/demo/basic.tsx correctly 1`] = ` @@ -244,6 +245,7 @@ exports[`renders components/flex/demo/basic.tsx correctly 1`] = ` > @@ -371,6 +373,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = ` @@ -390,6 +393,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = ` > @@ -409,6 +413,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = ` > @@ -428,6 +433,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = ` > diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index b6ff3eea80..2a0b9aded8 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2469,6 +2469,7 @@ Array [ @@ -2489,6 +2490,7 @@ Array [ @@ -8875,6 +8877,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] = @@ -8894,6 +8897,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] = > @@ -8913,6 +8917,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] = > @@ -11367,6 +11372,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly > @@ -11387,6 +11393,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly @@ -11406,6 +11413,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly > @@ -11425,6 +11433,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly > @@ -11680,6 +11689,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = ` > @@ -11700,6 +11710,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = ` @@ -11719,6 +11730,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = ` > @@ -22224,6 +22236,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > @@ -22243,6 +22256,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > @@ -22262,6 +22276,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > @@ -22318,6 +22333,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > @@ -22337,6 +22353,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > @@ -22356,6 +22373,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl > diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index d8d83289c0..acb1d999bf 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -1871,6 +1871,7 @@ Array [ @@ -1891,6 +1892,7 @@ Array [ @@ -5219,6 +5221,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = ` @@ -5238,6 +5241,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = ` > @@ -5257,6 +5261,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = ` > @@ -7321,6 +7326,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = ` > @@ -7341,6 +7347,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = ` @@ -7360,6 +7367,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = ` > @@ -7379,6 +7387,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = ` > @@ -7594,6 +7603,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = ` > @@ -7614,6 +7624,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = ` @@ -7633,6 +7644,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = ` > @@ -9644,6 +9656,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > @@ -9663,6 +9676,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > @@ -9682,6 +9696,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > @@ -9738,6 +9753,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > @@ -9757,6 +9773,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > @@ -9776,6 +9793,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = ` > diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap index 87c7445620..81f75f574e 100644 --- a/components/form/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/index.test.tsx.snap @@ -189,6 +189,7 @@ exports[`Form form should support disabled 1`] = ` @@ -209,6 +210,7 @@ exports[`Form form should support disabled 1`] = ` diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index d886fc042f..5190bf28e6 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5245,6 +5245,7 @@ Array [ @@ -5264,6 +5265,7 @@ Array [ > diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap index 3aa145e6a4..54605ab67d 100644 --- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap @@ -1153,6 +1153,7 @@ Array [ @@ -1172,6 +1173,7 @@ Array [ > diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap index 2930ce244b..02c1f1b1b9 100644 --- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1872,6 +1872,7 @@ Array [ > @@ -1892,6 +1893,7 @@ Array [ @@ -1911,6 +1913,7 @@ Array [ > @@ -1953,6 +1956,7 @@ Array [ > @@ -1973,6 +1977,7 @@ Array [ @@ -1992,6 +1997,7 @@ Array [ > diff --git a/components/list/__tests__/__snapshots__/demo.test.ts.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap index 44cec7d7a0..caeac6807c 100644 --- a/components/list/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/list/__tests__/__snapshots__/demo.test.ts.snap @@ -1865,6 +1865,7 @@ Array [ > @@ -1885,6 +1886,7 @@ Array [ @@ -1904,6 +1906,7 @@ Array [ > @@ -1946,6 +1949,7 @@ Array [ > @@ -1966,6 +1970,7 @@ Array [ @@ -1985,6 +1990,7 @@ Array [ > diff --git a/components/locale/__tests__/__snapshots__/index.test.tsx.snap b/components/locale/__tests__/__snapshots__/index.test.tsx.snap index 339a02196b..c3b1c7a8a0 100644 --- a/components/locale/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/locale/__tests__/__snapshots__/index.test.tsx.snap @@ -6195,6 +6195,7 @@ exports[`Locale Provider should display the text as ar 1`] = ` @@ -6214,6 +6215,7 @@ exports[`Locale Provider should display the text as ar 1`] = ` > @@ -11508,6 +11510,7 @@ exports[`Locale Provider should display the text as az 1`] = ` @@ -11527,6 +11530,7 @@ exports[`Locale Provider should display the text as az 1`] = ` > @@ -16821,6 +16825,7 @@ exports[`Locale Provider should display the text as bg 1`] = ` @@ -16840,6 +16845,7 @@ exports[`Locale Provider should display the text as bg 1`] = ` > @@ -22134,6 +22140,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = ` @@ -22153,6 +22160,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = ` > @@ -27447,6 +27455,7 @@ exports[`Locale Provider should display the text as by 1`] = ` @@ -27466,6 +27475,7 @@ exports[`Locale Provider should display the text as by 1`] = ` > @@ -32760,6 +32770,7 @@ exports[`Locale Provider should display the text as ca 1`] = ` @@ -32779,6 +32790,7 @@ exports[`Locale Provider should display the text as ca 1`] = ` > @@ -38073,6 +38085,7 @@ exports[`Locale Provider should display the text as cs 1`] = ` @@ -38092,6 +38105,7 @@ exports[`Locale Provider should display the text as cs 1`] = ` > @@ -43386,6 +43400,7 @@ exports[`Locale Provider should display the text as da 1`] = ` @@ -43405,6 +43420,7 @@ exports[`Locale Provider should display the text as da 1`] = ` > @@ -48699,6 +48715,7 @@ exports[`Locale Provider should display the text as de 1`] = ` @@ -48718,6 +48735,7 @@ exports[`Locale Provider should display the text as de 1`] = ` > @@ -54012,6 +54030,7 @@ exports[`Locale Provider should display the text as el 1`] = ` @@ -54031,6 +54050,7 @@ exports[`Locale Provider should display the text as el 1`] = ` > @@ -59325,6 +59345,7 @@ exports[`Locale Provider should display the text as en 1`] = ` @@ -59344,6 +59365,7 @@ exports[`Locale Provider should display the text as en 1`] = ` > @@ -64638,6 +64660,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = ` @@ -64657,6 +64680,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = ` > @@ -69951,6 +69975,7 @@ exports[`Locale Provider should display the text as es 1`] = ` @@ -69970,6 +69995,7 @@ exports[`Locale Provider should display the text as es 1`] = ` > @@ -75264,6 +75290,7 @@ exports[`Locale Provider should display the text as et 1`] = ` @@ -75283,6 +75310,7 @@ exports[`Locale Provider should display the text as et 1`] = ` > @@ -80577,6 +80605,7 @@ exports[`Locale Provider should display the text as eu 1`] = ` @@ -80596,6 +80625,7 @@ exports[`Locale Provider should display the text as eu 1`] = ` > @@ -85890,6 +85920,7 @@ exports[`Locale Provider should display the text as fa 1`] = ` @@ -85909,6 +85940,7 @@ exports[`Locale Provider should display the text as fa 1`] = ` > @@ -91203,6 +91235,7 @@ exports[`Locale Provider should display the text as fi 1`] = ` @@ -91222,6 +91255,7 @@ exports[`Locale Provider should display the text as fi 1`] = ` > @@ -96516,6 +96550,7 @@ exports[`Locale Provider should display the text as fr 1`] = ` @@ -96535,6 +96570,7 @@ exports[`Locale Provider should display the text as fr 1`] = ` > @@ -101829,6 +101865,7 @@ exports[`Locale Provider should display the text as fr 2`] = ` @@ -101848,6 +101885,7 @@ exports[`Locale Provider should display the text as fr 2`] = ` > @@ -107142,6 +107180,7 @@ exports[`Locale Provider should display the text as fr 3`] = ` @@ -107161,6 +107200,7 @@ exports[`Locale Provider should display the text as fr 3`] = ` > @@ -112455,6 +112495,7 @@ exports[`Locale Provider should display the text as ga 1`] = ` @@ -112474,6 +112515,7 @@ exports[`Locale Provider should display the text as ga 1`] = ` > @@ -117768,6 +117810,7 @@ exports[`Locale Provider should display the text as gl 1`] = ` @@ -117787,6 +117830,7 @@ exports[`Locale Provider should display the text as gl 1`] = ` > @@ -123081,6 +123125,7 @@ exports[`Locale Provider should display the text as he 1`] = ` @@ -123100,6 +123145,7 @@ exports[`Locale Provider should display the text as he 1`] = ` > @@ -128394,6 +128440,7 @@ exports[`Locale Provider should display the text as hi 1`] = ` @@ -128413,6 +128460,7 @@ exports[`Locale Provider should display the text as hi 1`] = ` > @@ -133707,6 +133755,7 @@ exports[`Locale Provider should display the text as hr 1`] = ` @@ -133726,6 +133775,7 @@ exports[`Locale Provider should display the text as hr 1`] = ` > @@ -139020,6 +139070,7 @@ exports[`Locale Provider should display the text as hu 1`] = ` @@ -139039,6 +139090,7 @@ exports[`Locale Provider should display the text as hu 1`] = ` > @@ -144333,6 +144385,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = ` @@ -144352,6 +144405,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = ` > @@ -149646,6 +149700,7 @@ exports[`Locale Provider should display the text as id 1`] = ` @@ -149665,6 +149720,7 @@ exports[`Locale Provider should display the text as id 1`] = ` > @@ -154959,6 +155015,7 @@ exports[`Locale Provider should display the text as is 1`] = ` @@ -154978,6 +155035,7 @@ exports[`Locale Provider should display the text as is 1`] = ` > @@ -160272,6 +160330,7 @@ exports[`Locale Provider should display the text as it 1`] = ` @@ -160291,6 +160350,7 @@ exports[`Locale Provider should display the text as it 1`] = ` > @@ -165585,6 +165645,7 @@ exports[`Locale Provider should display the text as ja 1`] = ` @@ -165604,6 +165665,7 @@ exports[`Locale Provider should display the text as ja 1`] = ` > @@ -170898,6 +170960,7 @@ exports[`Locale Provider should display the text as ka 1`] = ` @@ -170917,6 +170980,7 @@ exports[`Locale Provider should display the text as ka 1`] = ` > @@ -176211,6 +176275,7 @@ exports[`Locale Provider should display the text as kk 1`] = ` @@ -176230,6 +176295,7 @@ exports[`Locale Provider should display the text as kk 1`] = ` > @@ -181522,6 +181588,7 @@ exports[`Locale Provider should display the text as km 1`] = ` @@ -181541,6 +181608,7 @@ exports[`Locale Provider should display the text as km 1`] = ` > @@ -186835,6 +186903,7 @@ exports[`Locale Provider should display the text as kn 1`] = ` @@ -186854,6 +186923,7 @@ exports[`Locale Provider should display the text as kn 1`] = ` > @@ -192148,6 +192218,7 @@ exports[`Locale Provider should display the text as ko 1`] = ` @@ -192167,6 +192238,7 @@ exports[`Locale Provider should display the text as ko 1`] = ` > @@ -197461,6 +197533,7 @@ exports[`Locale Provider should display the text as ku 1`] = ` @@ -197480,6 +197553,7 @@ exports[`Locale Provider should display the text as ku 1`] = ` > @@ -202774,6 +202848,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = ` @@ -202793,6 +202868,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = ` > @@ -208087,6 +208163,7 @@ exports[`Locale Provider should display the text as lt 1`] = ` @@ -208106,6 +208183,7 @@ exports[`Locale Provider should display the text as lt 1`] = ` > @@ -213400,6 +213478,7 @@ exports[`Locale Provider should display the text as lv 1`] = ` @@ -213419,6 +213498,7 @@ exports[`Locale Provider should display the text as lv 1`] = ` > @@ -218713,6 +218793,7 @@ exports[`Locale Provider should display the text as mk 1`] = ` @@ -218732,6 +218813,7 @@ exports[`Locale Provider should display the text as mk 1`] = ` > @@ -224026,6 +224108,7 @@ exports[`Locale Provider should display the text as ml 1`] = ` @@ -224045,6 +224128,7 @@ exports[`Locale Provider should display the text as ml 1`] = ` > @@ -229339,6 +229423,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = ` @@ -229358,6 +229443,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = ` > @@ -234652,6 +234738,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = ` @@ -234671,6 +234758,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = ` > @@ -239965,6 +240053,7 @@ exports[`Locale Provider should display the text as my 1`] = ` @@ -239984,6 +240073,7 @@ exports[`Locale Provider should display the text as my 1`] = ` > @@ -245278,6 +245368,7 @@ exports[`Locale Provider should display the text as nb 1`] = ` @@ -245297,6 +245388,7 @@ exports[`Locale Provider should display the text as nb 1`] = ` > @@ -250591,6 +250683,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = ` @@ -250610,6 +250703,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = ` > @@ -255904,6 +255998,7 @@ exports[`Locale Provider should display the text as nl 1`] = ` @@ -255923,6 +256018,7 @@ exports[`Locale Provider should display the text as nl 1`] = ` > @@ -261217,6 +261313,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = ` @@ -261236,6 +261333,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = ` > @@ -266530,6 +266628,7 @@ exports[`Locale Provider should display the text as pl 1`] = ` @@ -266549,6 +266648,7 @@ exports[`Locale Provider should display the text as pl 1`] = ` > @@ -271843,6 +271943,7 @@ exports[`Locale Provider should display the text as pt 1`] = ` @@ -271862,6 +271963,7 @@ exports[`Locale Provider should display the text as pt 1`] = ` > @@ -277156,6 +277258,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = ` @@ -277175,6 +277278,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = ` > @@ -282469,6 +282573,7 @@ exports[`Locale Provider should display the text as ro 1`] = ` @@ -282488,6 +282593,7 @@ exports[`Locale Provider should display the text as ro 1`] = ` > @@ -287782,6 +287888,7 @@ exports[`Locale Provider should display the text as ru 1`] = ` @@ -287801,6 +287908,7 @@ exports[`Locale Provider should display the text as ru 1`] = ` > @@ -293095,6 +293203,7 @@ exports[`Locale Provider should display the text as si 1`] = ` @@ -293114,6 +293223,7 @@ exports[`Locale Provider should display the text as si 1`] = ` > @@ -298408,6 +298518,7 @@ exports[`Locale Provider should display the text as sk 1`] = ` @@ -298427,6 +298538,7 @@ exports[`Locale Provider should display the text as sk 1`] = ` > @@ -303721,6 +303833,7 @@ exports[`Locale Provider should display the text as sl 1`] = ` @@ -303740,6 +303853,7 @@ exports[`Locale Provider should display the text as sl 1`] = ` > @@ -309034,6 +309148,7 @@ exports[`Locale Provider should display the text as sr 1`] = ` @@ -309053,6 +309168,7 @@ exports[`Locale Provider should display the text as sr 1`] = ` > @@ -314347,6 +314463,7 @@ exports[`Locale Provider should display the text as sv 1`] = ` @@ -314366,6 +314483,7 @@ exports[`Locale Provider should display the text as sv 1`] = ` > @@ -319660,6 +319778,7 @@ exports[`Locale Provider should display the text as ta 1`] = ` @@ -319679,6 +319798,7 @@ exports[`Locale Provider should display the text as ta 1`] = ` > @@ -324973,6 +325093,7 @@ exports[`Locale Provider should display the text as th 1`] = ` @@ -324992,6 +325113,7 @@ exports[`Locale Provider should display the text as th 1`] = ` > @@ -330286,6 +330408,7 @@ exports[`Locale Provider should display the text as tk 1`] = ` @@ -330305,6 +330428,7 @@ exports[`Locale Provider should display the text as tk 1`] = ` > @@ -335599,6 +335723,7 @@ exports[`Locale Provider should display the text as tr 1`] = ` @@ -335618,6 +335743,7 @@ exports[`Locale Provider should display the text as tr 1`] = ` > @@ -340912,6 +341038,7 @@ exports[`Locale Provider should display the text as uk 1`] = ` @@ -340931,6 +341058,7 @@ exports[`Locale Provider should display the text as uk 1`] = ` > @@ -346225,6 +346353,7 @@ exports[`Locale Provider should display the text as ur 1`] = ` @@ -346244,6 +346373,7 @@ exports[`Locale Provider should display the text as ur 1`] = ` > @@ -351538,6 +351668,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = ` @@ -351557,6 +351688,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = ` > @@ -356851,6 +356983,7 @@ exports[`Locale Provider should display the text as vi 1`] = ` @@ -356870,6 +357003,7 @@ exports[`Locale Provider should display the text as vi 1`] = ` > @@ -362164,6 +362298,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = ` @@ -362183,6 +362318,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = ` > @@ -367477,6 +367613,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = ` @@ -367496,6 +367633,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = ` > @@ -372790,6 +372928,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = ` @@ -372809,6 +372948,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = ` > diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap index e57e46a5f9..66c9ed7385 100644 --- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -15,6 +15,7 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = > @@ -56,6 +57,7 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = > @@ -180,6 +182,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc @@ -199,6 +202,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -218,6 +222,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -237,6 +242,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -266,6 +272,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc checked="" class="ant-radio-button-input" disabled="" + name="test-id" type="radio" value="a" /> @@ -286,6 +293,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc @@ -306,6 +314,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc @@ -326,6 +335,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc @@ -354,6 +364,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc @@ -373,6 +384,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -392,6 +404,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -411,6 +424,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc > @@ -596,6 +610,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -615,6 +630,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly > @@ -634,6 +650,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly > @@ -653,6 +670,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly > @@ -677,6 +695,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -697,6 +716,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -716,6 +736,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly > @@ -735,6 +756,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly > @@ -760,6 +782,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly checked="" class="ant-radio-button-input" disabled="" + name="test-id" type="radio" value="a" /> @@ -780,6 +803,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -800,6 +824,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -820,6 +845,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly @@ -853,6 +879,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr @@ -872,6 +899,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr > @@ -891,6 +919,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr > @@ -910,6 +939,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr > @@ -933,6 +963,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr > @@ -953,6 +984,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr @@ -973,6 +1005,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr @@ -992,6 +1025,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr > @@ -1022,6 +1056,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1 @@ -1041,6 +1076,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1 > @@ -1060,6 +1096,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1 > @@ -1079,6 +1116,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1 > @@ -1111,6 +1149,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre @@ -1130,6 +1169,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1149,6 +1189,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1173,6 +1214,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre @@ -1192,6 +1234,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1211,6 +1254,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1234,6 +1278,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1254,6 +1299,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre @@ -1273,6 +1319,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre > @@ -1309,6 +1356,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc @@ -1332,6 +1380,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc > @@ -1355,6 +1404,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc > @@ -1378,6 +1428,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc > @@ -1410,6 +1461,7 @@ Array [ @@ -1429,6 +1481,7 @@ Array [ > @@ -1448,6 +1501,7 @@ Array [ > @@ -1473,6 +1527,7 @@ Array [ @@ -1492,6 +1547,7 @@ Array [ > @@ -1512,6 +1568,7 @@ Array [ @@ -1538,6 +1595,7 @@ Array [ @@ -1557,6 +1615,7 @@ Array [ > @@ -1577,6 +1636,7 @@ Array [ > @@ -1603,6 +1663,7 @@ Array [ @@ -1622,6 +1683,7 @@ Array [ > @@ -1642,6 +1704,7 @@ Array [ @@ -1765,6 +1828,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` @@ -1784,6 +1848,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1803,6 +1868,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1822,6 +1888,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1846,6 +1913,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` @@ -1865,6 +1933,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1884,6 +1953,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1903,6 +1973,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1927,6 +1998,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` @@ -1946,6 +2018,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1965,6 +2038,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -1984,6 +2058,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = ` > @@ -2015,6 +2090,7 @@ Array [ @@ -2034,6 +2110,7 @@ Array [ > @@ -2053,6 +2130,7 @@ Array [ > @@ -2072,6 +2150,7 @@ Array [ > @@ -2098,6 +2177,7 @@ Array [ checked="" class="ant-radio-input" disabled="" + name="test-id" type="radio" value="1" /> @@ -2118,6 +2198,7 @@ Array [ @@ -2138,6 +2219,7 @@ Array [ @@ -2158,6 +2240,7 @@ Array [ diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap index 0af63668bb..737bfc7187 100644 --- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap @@ -15,6 +15,7 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = ` > @@ -56,6 +57,7 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = ` > @@ -176,6 +178,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` @@ -195,6 +198,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -214,6 +218,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -233,6 +238,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -262,6 +268,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` checked="" class="ant-radio-button-input" disabled="" + name="test-id" type="radio" value="a" /> @@ -282,6 +289,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` @@ -302,6 +310,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` @@ -322,6 +331,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` @@ -350,6 +360,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` @@ -369,6 +380,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -388,6 +400,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -407,6 +420,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = ` > @@ -586,6 +600,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -605,6 +620,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` > @@ -624,6 +640,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` > @@ -643,6 +660,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` > @@ -667,6 +685,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -687,6 +706,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -706,6 +726,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` > @@ -725,6 +746,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` > @@ -750,6 +772,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` checked="" class="ant-radio-button-input" disabled="" + name="test-id" type="radio" value="a" /> @@ -770,6 +793,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -790,6 +814,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -810,6 +835,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = ` @@ -841,6 +867,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` @@ -860,6 +887,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` > @@ -879,6 +907,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` > @@ -898,6 +927,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` > @@ -921,6 +951,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` > @@ -941,6 +972,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` @@ -961,6 +993,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` @@ -980,6 +1013,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = ` > @@ -1008,6 +1042,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = ` @@ -1027,6 +1062,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = ` > @@ -1046,6 +1082,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = ` > @@ -1065,6 +1102,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = ` > @@ -1095,6 +1133,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` @@ -1114,6 +1153,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1133,6 +1173,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1157,6 +1198,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` @@ -1176,6 +1218,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1195,6 +1238,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1218,6 +1262,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1238,6 +1283,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` @@ -1257,6 +1303,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = ` > @@ -1291,6 +1338,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = ` @@ -1314,6 +1362,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = ` > @@ -1337,6 +1386,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = ` > @@ -1360,6 +1410,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = ` > @@ -1390,6 +1441,7 @@ Array [ @@ -1409,6 +1461,7 @@ Array [ > @@ -1428,6 +1481,7 @@ Array [ > @@ -1453,6 +1507,7 @@ Array [ @@ -1472,6 +1527,7 @@ Array [ > @@ -1492,6 +1548,7 @@ Array [ @@ -1518,6 +1575,7 @@ Array [ @@ -1537,6 +1595,7 @@ Array [ > @@ -1557,6 +1616,7 @@ Array [ > @@ -1583,6 +1643,7 @@ Array [ @@ -1602,6 +1663,7 @@ Array [ > @@ -1622,6 +1684,7 @@ Array [ @@ -1741,6 +1804,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` @@ -1760,6 +1824,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1779,6 +1844,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1798,6 +1864,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1822,6 +1889,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` @@ -1841,6 +1909,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1860,6 +1929,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1879,6 +1949,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1903,6 +1974,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` @@ -1922,6 +1994,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1941,6 +2014,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1960,6 +2034,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = ` > @@ -1989,6 +2064,7 @@ Array [ @@ -2008,6 +2084,7 @@ Array [ > @@ -2027,6 +2104,7 @@ Array [ > @@ -2046,6 +2124,7 @@ Array [ > @@ -2072,6 +2151,7 @@ Array [ checked="" class="ant-radio-input" disabled="" + name="test-id" type="radio" value="1" /> @@ -2092,6 +2172,7 @@ Array [ @@ -2112,6 +2193,7 @@ Array [ @@ -2132,6 +2214,7 @@ Array [ diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap index f6975f15fd..1b26b9c947 100644 --- a/components/radio/__tests__/__snapshots__/group.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/group.test.tsx.snap @@ -12,6 +12,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = ` > @@ -32,6 +33,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = ` > diff --git a/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap b/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap index 384f28e528..b472c87601 100644 --- a/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap @@ -51,6 +51,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = ` > @@ -71,6 +72,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = ` > diff --git a/components/radio/group.tsx b/components/radio/group.tsx index c8c72f562e..f66ab52f22 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -15,10 +15,13 @@ import type { } from './interface'; import Radio from './radio'; import useStyle from './style'; +import useId from 'rc-util/lib/hooks/useId'; const RadioGroup = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); + const defaultName = useId(); + const { prefixCls: customizePrefixCls, className, @@ -31,7 +34,7 @@ const RadioGroup = React.forwardRef((props, ref style, id, optionType, - name, + name = defaultName, defaultValue, value: customizedValue, block = false, diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md index 8a348ed5da..a688b2818f 100644 --- a/components/radio/index.en-US.md +++ b/components/radio/index.en-US.md @@ -56,7 +56,7 @@ Radio group can wrap a group of `Radio`。 | buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` | | | defaultValue | Default selected value | any | - | | | disabled | Disable all radio buttons | boolean | false | | -| name | The `name` property of all `input[type="radio"]` children | string | - | | +| name | The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name | string | - | | | options | Set children optional | string\[] \| number\[] \| Array<[CheckboxOptionType](#checkboxoptiontype)> | - | | | optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 | | size | The size of radio button style | `large` \| `middle` \| `small` | - | | diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index 74c1d1d22f..bd4e44a838 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -59,7 +59,7 @@ demo: | buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` | | | | defaultValue | 默认选中的值 | any | - | | | | disabled | 禁选所有子单选器 | boolean | false | | | -| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - | | | +| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性。若未设置，则将回退到随机生成的名称 | string | - | | | | options | 以配置形式设置子元素 | string\[] \| number\[] \| Array<[CheckboxOptionType](#checkboxoptiontype)> | - | | | | optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 | | | size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - | | | diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap index 39fdbb33ec..017687cee0 100644 --- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -11670,6 +11670,7 @@ Array [ @@ -11689,6 +11690,7 @@ Array [ > @@ -11708,6 +11710,7 @@ Array [ > @@ -11727,6 +11730,7 @@ Array [ > @@ -11917,6 +11921,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre @@ -11936,6 +11941,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre > @@ -11955,6 +11961,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre > @@ -11974,6 +11981,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre > @@ -14445,6 +14453,7 @@ Array [ > @@ -14465,6 +14474,7 @@ Array [ @@ -14484,6 +14494,7 @@ Array [ > diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap index 8786b5a7d1..e50b6ca6bb 100644 --- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap @@ -4524,6 +4524,7 @@ Array [ @@ -4543,6 +4544,7 @@ Array [ > @@ -4562,6 +4564,7 @@ Array [ > @@ -4581,6 +4584,7 @@ Array [ > @@ -4685,6 +4689,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = ` @@ -4704,6 +4709,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = ` > @@ -4723,6 +4729,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = ` > @@ -4742,6 +4749,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = ` > @@ -5452,6 +5460,7 @@ Array [ > @@ -5472,6 +5481,7 @@ Array [ @@ -5491,6 +5501,7 @@ Array [ > diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap index fb4cdd1c26..97976c755f 100644 --- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -432,6 +432,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 @@ -451,6 +452,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -470,6 +472,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -528,6 +531,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 @@ -547,6 +551,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -566,6 +571,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -585,6 +591,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -642,6 +649,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 > @@ -662,6 +670,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1 diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap b/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap index 95029ca234..f242d8b647 100644 --- a/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap @@ -422,6 +422,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` @@ -441,6 +442,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -460,6 +462,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -518,6 +521,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` @@ -537,6 +541,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -556,6 +561,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -575,6 +581,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -632,6 +639,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` > @@ -652,6 +660,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = ` diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 16f724628a..0de123d44b 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -16659,6 +16659,7 @@ Array [ @@ -16678,6 +16679,7 @@ Array [ > @@ -16697,6 +16699,7 @@ Array [ > @@ -16716,6 +16719,7 @@ Array [ > diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap index 9369a4bc0d..0f49e74b32 100644 --- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap @@ -4505,6 +4505,7 @@ Array [ @@ -4524,6 +4525,7 @@ Array [ > @@ -4543,6 +4545,7 @@ Array [ > @@ -4562,6 +4565,7 @@ Array [ > diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap index b0abb84c8b..4ea9c04e7a 100644 --- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5341,6 +5341,7 @@ Array [ > @@ -5361,6 +5362,7 @@ Array [ diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap index 776aafb607..f285b0279c 100644 --- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap @@ -4983,6 +4983,7 @@ Array [ > @@ -5003,6 +5004,7 @@ Array [ diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 597eaf6d27..2b278abc11 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1407,6 +1407,7 @@ Array [ @@ -1426,6 +1427,7 @@ Array [ > @@ -1445,6 +1447,7 @@ Array [ > @@ -1499,6 +1502,7 @@ Array [ @@ -1518,6 +1522,7 @@ Array [ > @@ -1537,6 +1542,7 @@ Array [ > @@ -1591,6 +1597,7 @@ Array [ @@ -1610,6 +1617,7 @@ Array [ > @@ -1663,6 +1671,7 @@ Array [ > @@ -1682,6 +1691,7 @@ Array [ > @@ -1701,6 +1711,7 @@ Array [ > @@ -1721,6 +1732,7 @@ Array [ @@ -1774,6 +1786,7 @@ Array [ > @@ -1793,6 +1806,7 @@ Array [ > @@ -1813,6 +1827,7 @@ Array [ @@ -1832,6 +1847,7 @@ Array [ > @@ -5956,6 +5972,7 @@ Array [ @@ -5975,6 +5992,7 @@ Array [ > @@ -5994,6 +6012,7 @@ Array [ > @@ -6048,6 +6067,7 @@ Array [ @@ -6067,6 +6087,7 @@ Array [ > @@ -6086,6 +6107,7 @@ Array [ > @@ -6140,6 +6162,7 @@ Array [ @@ -6159,6 +6182,7 @@ Array [ > @@ -6212,6 +6236,7 @@ Array [ > @@ -6231,6 +6256,7 @@ Array [ > @@ -6250,6 +6276,7 @@ Array [ > @@ -6270,6 +6297,7 @@ Array [ @@ -6323,6 +6351,7 @@ Array [ > @@ -6342,6 +6371,7 @@ Array [ > @@ -6362,6 +6392,7 @@ Array [ @@ -6381,6 +6412,7 @@ Array [ > @@ -20752,6 +20784,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 @@ -20771,6 +20804,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -20790,6 +20824,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -20809,6 +20844,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -20834,6 +20870,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -20853,6 +20890,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -20873,6 +20911,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 @@ -20892,6 +20931,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1 > @@ -22655,6 +22695,7 @@ exports[`renders components/table/demo/row-selection.tsx extend context correctl @@ -22674,6 +22715,7 @@ exports[`renders components/table/demo/row-selection.tsx extend context correctl > diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 998a5cd3d5..0edce1dc59 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -1407,6 +1407,7 @@ Array [ @@ -1426,6 +1427,7 @@ Array [ > @@ -1445,6 +1447,7 @@ Array [ > @@ -1499,6 +1502,7 @@ Array [ @@ -1518,6 +1522,7 @@ Array [ > @@ -1537,6 +1542,7 @@ Array [ > @@ -1591,6 +1597,7 @@ Array [ @@ -1610,6 +1617,7 @@ Array [ > @@ -1663,6 +1671,7 @@ Array [ > @@ -1682,6 +1691,7 @@ Array [ > @@ -1701,6 +1711,7 @@ Array [ > @@ -1721,6 +1732,7 @@ Array [ @@ -1774,6 +1786,7 @@ Array [ > @@ -1793,6 +1806,7 @@ Array [ > @@ -1813,6 +1827,7 @@ Array [ @@ -1832,6 +1847,7 @@ Array [ > @@ -5279,6 +5295,7 @@ Array [ @@ -5298,6 +5315,7 @@ Array [ > @@ -5317,6 +5335,7 @@ Array [ > @@ -5371,6 +5390,7 @@ Array [ @@ -5390,6 +5410,7 @@ Array [ > @@ -5409,6 +5430,7 @@ Array [ > @@ -5463,6 +5485,7 @@ Array [ @@ -5482,6 +5505,7 @@ Array [ > @@ -5535,6 +5559,7 @@ Array [ > @@ -5554,6 +5579,7 @@ Array [ > @@ -5573,6 +5599,7 @@ Array [ > @@ -5593,6 +5620,7 @@ Array [ @@ -5646,6 +5674,7 @@ Array [ > @@ -5665,6 +5694,7 @@ Array [ > @@ -5685,6 +5715,7 @@ Array [ @@ -5704,6 +5735,7 @@ Array [ > @@ -20090,6 +20122,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` @@ -20109,6 +20142,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -20128,6 +20162,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -20147,6 +20182,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -20172,6 +20208,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -20191,6 +20228,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -20211,6 +20249,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` @@ -20230,6 +20269,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = ` > @@ -21649,6 +21689,7 @@ exports[`renders components/table/demo/row-selection.tsx correctly 1`] = ` @@ -21668,6 +21709,7 @@ exports[`renders components/table/demo/row-selection.tsx correctly 1`] = ` > diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 0c0bc5e44f..76452441fa 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4678,6 +4678,7 @@ Array [ > @@ -4697,6 +4698,7 @@ Array [ > @@ -4717,6 +4719,7 @@ Array [ @@ -4736,6 +4739,7 @@ Array [ > @@ -4907,6 +4911,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` @@ -4926,6 +4931,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` > @@ -4945,6 +4951,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = ` > @@ -5527,6 +5534,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` @@ -5546,6 +5554,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = ` > diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index 68e4cc70b8..6b2d9a4542 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -3622,6 +3622,7 @@ Array [ > @@ -3641,6 +3642,7 @@ Array [ > @@ -3661,6 +3663,7 @@ Array [ @@ -3680,6 +3683,7 @@ Array [ > @@ -3824,6 +3828,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` @@ -3843,6 +3848,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` > @@ -3862,6 +3868,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = ` > @@ -4367,6 +4374,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` @@ -4386,6 +4394,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = ` > diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap index d795481cc1..cf09a4b560 100644 --- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -561,6 +561,7 @@ Array [ @@ -580,6 +581,7 @@ Array [ > @@ -599,6 +601,7 @@ Array [ > diff --git a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap index b93bb135f4..0e48dccf76 100644 --- a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap @@ -551,6 +551,7 @@ Array [ @@ -570,6 +571,7 @@ Array [ > @@ -589,6 +591,7 @@ Array [ > diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap index 6698876601..3ab057e44c 100644 --- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1353,6 +1353,7 @@ Array [ @@ -1372,6 +1373,7 @@ Array [ > @@ -1391,6 +1393,7 @@ Array [ > @@ -1410,6 +1413,7 @@ Array [ > diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap index 82b5a88ccd..f8c133a616 100644 --- a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap @@ -342,6 +342,7 @@ Array [ @@ -361,6 +362,7 @@ Array [ > @@ -380,6 +382,7 @@ Array [ > @@ -399,6 +402,7 @@ Array [ > diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap index cb48319d35..1e48eeea5f 100644 --- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -895,6 +895,7 @@ Array [ @@ -914,6 +915,7 @@ Array [ > @@ -933,6 +935,7 @@ Array [ > diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap index 988f00112a..55df5bc979 100644 --- a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap @@ -725,6 +725,7 @@ Array [ @@ -744,6 +745,7 @@ Array [ > @@ -763,6 +765,7 @@ Array [ > diff --git a/tests/setup.ts b/tests/setup.ts index 8c8868f5ee..56904327b9 100644 --- a/tests/setup.ts +++ b/tests/setup.ts @@ -74,3 +74,9 @@ if (typeof MessageChannel === 'undefined') { return { port1, port2 }; }; } + +// Mock useId to return a stable id for snapshot testing +jest.mock('react', () => ({ + ...jest.requireActual('react'), + useId: () => 'test-id', +})); From bc17268ff9ce1d151ed72671dcdb0dccc31f90c3 Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Mon, 23 Dec 2024 14:17:42 +0800 Subject: [PATCH 20/41] feat(segmented): enhance name prop behavior and adjust focus style (#52085) * feat(segmented): enhance name prop behavior and adjust focus style * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 9 +++ .../__tests__/__snapshots__/demo.test.ts.snap | 9 +++ .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 6 ++ .../__tests__/__snapshots__/demo.test.ts.snap | 6 ++ .../__snapshots__/demo-extend.test.ts.snap | 70 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 70 +++++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 40 +++++++++++ components/segmented/index.en-US.md | 2 +- components/segmented/index.tsx | 5 ++ components/segmented/index.zh-CN.md | 2 +- components/segmented/style/index.ts | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__tests__/__snapshots__/demo.test.ts.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + 20 files changed, 245 insertions(+), 3 deletions(-) diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 95e40bc56f..528b82de68 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3993,6 +3993,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
} const InternalSegmented = React.forwardRef((props, ref) => { + const defaultName = useId(); + const { prefixCls: customizePrefixCls, className, @@ -60,6 +63,7 @@ const InternalSegmented = React.forwardRef((prop size: customSize = 'middle', style, vertical, + name = defaultName, ...restProps } = props; @@ -111,6 +115,7 @@ const InternalSegmented = React.forwardRef((prop return wrapCSSVar( = (token: SegmentedToken) background: token.trackBg, borderRadius: token.borderRadius, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, + ...genFocusStyle(token), [`${componentCls}-group`]: { position: 'relative', diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 76452441fa..753db983e3 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2021,6 +2021,7 @@ Array [ >
Date: Mon, 23 Dec 2024 22:38:56 +0800 Subject: [PATCH 21/41] fix(collapse): enhance focus styles and border radius for collapse items (#52086) --- components/collapse/style/index.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts index ddac88cb7a..ef40116c75 100644 --- a/components/collapse/style/index.ts +++ b/components/collapse/style/index.ts @@ -1,7 +1,7 @@ import type { CSSProperties } from 'react'; import { unit } from '@ant-design/cssinjs'; -import { resetComponent, resetIcon } from '../../style'; +import { genFocusStyle, resetComponent, resetIcon } from '../../style'; import { genCollapseMotion } from '../../style/motion'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; @@ -95,6 +95,14 @@ export const genBaseStyle: GenerateStyle = (token) => { [`& > ${componentCls}-item`]: { borderBottom: borderBase, + '&:first-child': { + [` + &, + & > ${componentCls}-header`]: { + borderRadius: `${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)} 0 0`, + }, + }, + '&:last-child': { [` &, @@ -115,6 +123,7 @@ export const genBaseStyle: GenerateStyle = (token) => { lineHeight, cursor: 'pointer', transition: `all ${motionDurationSlow}, visibility 0s`, + ...genFocusStyle(token), [`> ${componentCls}-header-text`]: { flex: 'auto', From d8104505daedd0c0005036d48d6908967bc21bb4 Mon Sep 17 00:00:00 2001 From: zyf <81416635+Zyf665@users.noreply.github.com> Date: Tue, 24 Dec 2024 10:24:17 +0800 Subject: [PATCH 22/41] feat(DatePicker): upgrade rc-picker to 4.9.0 to require OK confirmation when switching RangePicker showTime fields (#52102) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d083ea243d..ed31f75036 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "rc-motion": "^2.9.5", "rc-notification": "~5.6.2", "rc-pagination": "~5.0.0", - "rc-picker": "~4.8.3", + "rc-picker": "~4.9.0", "rc-progress": "~4.0.0", "rc-rate": "~2.13.0", "rc-resize-observer": "^1.4.3", From ce87c614e1de83b075ed35bfc90b0a164235e1b7 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 24 Dec 2024 15:21:26 +0800 Subject: [PATCH 23/41] feat: ConfigProvider support tooltip (#51872) * feat: ConfigProvider support tooltip * fix * fix * fix * refactor: inner to body * revert SemanticPreview update * fix * clear unused * update Semantic demo * update locale content descrption --- .dumi/components/SemanticPreview.tsx | 2 + components/config-provider/context.ts | 4 ++ components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 4 ++ components/config-provider/index.zh-CN.md | 1 + components/menu/MenuItem.tsx | 2 +- components/tooltip/__tests__/tooltip.test.tsx | 29 +++++++++++ components/tooltip/demo/_semantic.tsx | 49 +++++++++++++++++++ components/tooltip/demo/config-debug.md | 7 +++ components/tooltip/demo/config-debug.tsx | 21 ++++++++ components/tooltip/index.en-US.md | 4 ++ components/tooltip/index.tsx | 47 ++++++++++++++---- components/tooltip/index.zh-CN.md | 5 ++ package.json | 2 +- 14 files changed, 167 insertions(+), 11 deletions(-) create mode 100644 components/tooltip/demo/_semantic.tsx create mode 100644 components/tooltip/demo/config-debug.md create mode 100644 components/tooltip/demo/config-debug.tsx diff --git a/.dumi/components/SemanticPreview.tsx b/.dumi/components/SemanticPreview.tsx index 3c734d73d3..ecdfa5442e 100644 --- a/.dumi/components/SemanticPreview.tsx +++ b/.dumi/components/SemanticPreview.tsx @@ -111,12 +111,14 @@ const SemanticPreview: React.FC = (props) => { const targetElement = containerRef.current?.querySelector(`.${targetClassName}`); const containerRect = containerRef.current?.getBoundingClientRect(); const targetRect = targetElement?.getBoundingClientRect(); + setMarkPos([ (targetRect?.left || 0) - (containerRect?.left || 0), (targetRect?.top || 0) - (containerRect?.top || 0), targetRect?.width || 0, targetRect?.height || 0, ]); + timerRef.current = setTimeout(() => { setPositionMotion(true); }, 10); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index cf94182c1a..2481af3c1a 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -34,6 +34,7 @@ import type { TourProps } from '../tour/interface'; import type { TransferProps } from '../transfer'; import type { TreeSelectProps } from '../tree-select'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; +import type { TooltipProps } from '../tooltip'; export const defaultPrefixCls = 'ant'; export const defaultIconPrefixCls = 'anticon'; @@ -176,6 +177,8 @@ export type SelectConfig = ComponentStyleConfig & Pick; +export type TooltipConfig = Pick; + export type SpinConfig = ComponentStyleConfig & Pick; export type InputNumberConfig = ComponentStyleConfig & Pick; @@ -289,6 +292,7 @@ export interface ConfigConsumerProps { timeline?: ComponentStyleConfig; timePicker?: TimePickerConfig; tour?: TourConfig; + tooltip?: TooltipConfig; upload?: ComponentStyleConfig; notification?: NotificationConfig; tree?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 1d091e8323..6fc2618f45 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -162,6 +162,7 @@ const { | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 | +| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 | | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 | | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 3014bffc80..4cb9af09cf 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -51,6 +51,7 @@ import type { Theme, ThemeConfig, TimePickerConfig, + TooltipConfig, TourConfig, TransferConfig, TreeSelectConfig, @@ -235,6 +236,7 @@ export interface ConfigProviderProps { */ wave?: WaveConfig; tour?: TourConfig; + tooltip?: TooltipConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -389,6 +391,7 @@ const ProviderChildren: React.FC = (props) => { dropdown, warning: warningConfig, tour, + tooltip, floatButtonGroup, variant, inputNumber, @@ -489,6 +492,7 @@ const ProviderChildren: React.FC = (props) => { dropdown, warning: warningConfig, tour, + tooltip, floatButtonGroup, variant, inputNumber, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 79b001f361..0894bc5f18 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -164,6 +164,7 @@ const { | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 | +| tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 | | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 | | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index 60b44af953..51b0c6af09 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -116,7 +116,7 @@ const MenuItem: GenericComponent = (props) => { {returnNode} diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index 39523c16b9..5a4f92aade 100644 --- a/components/tooltip/__tests__/tooltip.test.tsx +++ b/components/tooltip/__tests__/tooltip.test.tsx @@ -601,4 +601,33 @@ describe('Tooltip', () => { expect(error).toHaveBeenCalled(); error.mockRestore(); }); + + it('should apply custom styles to Tooltip', () => { + const customClassNames = { + body: 'custom-body', + root: 'custom-root', + }; + + const customStyles = { + body: { color: 'red' }, + root: { backgroundColor: 'blue' }, + }; + + const { container } = render( + } styles={customStyles} visible> + + , + ); + + const tooltipElement = container.querySelector('.ant-tooltip') as HTMLElement; + const tooltipBodyElement = container.querySelector('.ant-tooltip-inner') as HTMLElement; + + // 验证 classNames + expect(tooltipElement.classList).toContain('custom-root'); + expect(tooltipBodyElement.classList).toContain('custom-body'); + + // 验证 styles + expect(tooltipElement.style.backgroundColor).toBe('blue'); + expect(tooltipBodyElement.style.color).toBe('red'); + }); }); diff --git a/components/tooltip/demo/_semantic.tsx b/components/tooltip/demo/_semantic.tsx new file mode 100644 index 0000000000..bcf321e703 --- /dev/null +++ b/components/tooltip/demo/_semantic.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { Tooltip } from 'antd'; + +import SemanticPreview from '../../../.dumi/components/SemanticPreview'; +import useLocale from '../../../.dumi/hooks/useLocale'; + +const locales = { + cn: { + root: '根节点 (包含箭头、内容元素)', + body: '内容元素', + }, + en: { + root: 'Root element (including arrows, content elements)', + body: 'Body element', + }, +}; + +const BlockList: React.FC = (props: any) => { + const divRef = React.useRef(null); + + return ( +
+ divRef.current} + {...props} + /> +
+ ); +}; + +const App: React.FC = () => { + const [locale] = useLocale(locales); + return ( + + + + ); +}; + +export default App; diff --git a/components/tooltip/demo/config-debug.md b/components/tooltip/demo/config-debug.md new file mode 100644 index 0000000000..ee6042345c --- /dev/null +++ b/components/tooltip/demo/config-debug.md @@ -0,0 +1,7 @@ +## zh-CN + +debug config provide + +## en-US + +debug config provide diff --git a/components/tooltip/demo/config-debug.tsx b/components/tooltip/demo/config-debug.tsx new file mode 100644 index 0000000000..86f75a484d --- /dev/null +++ b/components/tooltip/demo/config-debug.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { ConfigProvider, Tooltip } from 'antd'; + +const App: React.FC = () => ( +
+ + + Tooltip will show on mouse enter. + + +
+); + +export default App; diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md index 7637dcdc12..40b4ff75ed 100644 --- a/components/tooltip/index.en-US.md +++ b/components/tooltip/index.en-US.md @@ -41,6 +41,10 @@ Common props ref：[Common props](/docs/react/common-props) +## Semantic DOM + + + ## Design Token diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 55c63a139f..cc94987025 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -91,6 +91,14 @@ interface LegacyTooltipProps } export interface AbstractTooltipProps extends LegacyTooltipProps { + styles?: { + root?: React.CSSProperties; + body?: React.CSSProperties; + }; + classNames?: { + root?: string; + body?: string; + }; style?: React.CSSProperties; className?: string; rootClassName?: string; @@ -130,7 +138,6 @@ const InternalTooltip = React.forwardRef((props, ref) prefixCls: customizePrefixCls, openClassName, getTooltipContainer, - overlayClassName, color, overlayInnerStyle, children, @@ -153,6 +160,7 @@ const InternalTooltip = React.forwardRef((props, ref) getPopupContainer: getContextPopupContainer, getPrefixCls, direction, + tooltip, } = React.useContext(ConfigContext); // ============================== Ref =============================== @@ -181,6 +189,10 @@ const InternalTooltip = React.forwardRef((props, ref) ['onVisibleChange', 'onOpenChange'], ['afterVisibleChange', 'afterOpenChange'], ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'], + // todo: Warnings are not available yet, because popover and popconfirm are still in use. Wait until they are merged before processing. + // ['overlayStyle', 'styles={{ root: {} }}'], + // ['overlayInnerStyle', 'styles={{ body: {} }}'], + // ['overlayClassName', 'classNames={{ root: {} }}'], ].forEach(([deprecatedName, newName]) => { warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); @@ -253,6 +265,9 @@ const InternalTooltip = React.forwardRef((props, ref) mouseLeaveDelay = 0.1, overlayStyle, rootClassName, + overlayClassName, + styles, + classNames: tooltipClassNames, ...otherProps } = props; @@ -282,12 +297,8 @@ const InternalTooltip = React.forwardRef((props, ref) // Color const colorInfo = parseColor(prefixCls, color); const arrowContentStyle = colorInfo.arrowStyle; - const formattedOverlayInnerStyle: React.CSSProperties = { - ...overlayInnerStyle, - ...colorInfo.overlayStyle, - }; - const customOverlayClassName = classNames( + const rootClassNames = classNames( overlayClassName, { [`${prefixCls}-rtl`]: direction === 'rtl', @@ -296,8 +307,13 @@ const InternalTooltip = React.forwardRef((props, ref) rootClassName, hashId, cssVarCls, + tooltip?.className, + tooltip?.classNames?.root, + tooltipClassNames?.root, ); + const bodyClassnames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body); + // ============================ zIndex ============================ const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex); @@ -310,8 +326,22 @@ const InternalTooltip = React.forwardRef((props, ref) mouseEnterDelay={mouseEnterDelay} mouseLeaveDelay={mouseLeaveDelay} prefixCls={prefixCls} - overlayClassName={customOverlayClassName} - overlayStyle={{ ...arrowContentStyle, ...overlayStyle }} + classNames={{ root: rootClassNames, body: bodyClassnames }} + styles={{ + root: { + ...arrowContentStyle, + ...tooltip?.styles?.root, + ...tooltip?.style, + ...overlayStyle, + ...styles?.root, + }, + body: { + ...tooltip?.styles?.body, + ...overlayInnerStyle, + ...styles?.body, + ...colorInfo.overlayStyle, + }, + }} getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer} ref={tooltipRef} builtinPlacements={tooltipPlacements} @@ -319,7 +349,6 @@ const InternalTooltip = React.forwardRef((props, ref) visible={tempOpen} onVisibleChange={onOpenChange} afterVisibleChange={afterOpenChange ?? afterVisibleChange} - overlayInnerStyle={formattedOverlayInnerStyle} arrowContent={} motion={{ motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName), diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 9f97a65c8b..39ec823384 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -30,6 +30,7 @@ demo: Debug 禁用 禁用子元素 +ConfigProvider ## API @@ -43,6 +44,10 @@ demo: +## Semantic DOM + + + ## 主题变量（Design Token） diff --git a/package.json b/package.json index ed31f75036..dd0125869b 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,7 @@ "rc-table": "~7.49.0", "rc-tabs": "~15.5.0", "rc-textarea": "~1.8.2", - "rc-tooltip": "~6.2.1", + "rc-tooltip": "~6.3.2", "rc-tree": "~5.10.1", "rc-tree-select": "~5.24.5", "rc-upload": "~4.8.1", From 42f9789669e86c87f3641d9457800f4f9f4b964b Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Wed, 25 Dec 2024 10:41:58 +0800 Subject: [PATCH 24/41] feat: ConfigProvider support popover (#52110) * feat: ConfigProvider support popover * remove tooltip debug demo --- components/config-provider/context.ts | 4 ++ components/config-provider/index.en-US.md | 3 +- components/config-provider/index.tsx | 4 ++ components/config-provider/index.zh-CN.md | 1 + components/popover/__tests__/index.test.tsx | 29 ++++++++++++ components/popover/demo/_semantic.tsx | 49 +++++++++++++++++++++ components/popover/index.en-US.md | 4 ++ components/popover/index.tsx | 29 ++++++++++-- components/popover/index.zh-CN.md | 4 ++ components/tooltip/demo/config-debug.md | 7 --- components/tooltip/demo/config-debug.tsx | 21 --------- components/tooltip/index.tsx | 4 +- components/tooltip/index.zh-CN.md | 1 - 13 files changed, 124 insertions(+), 36 deletions(-) create mode 100644 components/popover/demo/_semantic.tsx delete mode 100644 components/tooltip/demo/config-debug.md delete mode 100644 components/tooltip/demo/config-debug.tsx diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 2481af3c1a..7a5f86b16d 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -35,6 +35,7 @@ import type { TransferProps } from '../transfer'; import type { TreeSelectProps } from '../tree-select'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; import type { TooltipProps } from '../tooltip'; +import type { PopoverProps } from '../popover'; export const defaultPrefixCls = 'ant'; export const defaultIconPrefixCls = 'anticon'; @@ -179,6 +180,8 @@ export type SpaceConfig = ComponentStyleConfig & Pick; +export type PopoverConfig = Pick; + export type SpinConfig = ComponentStyleConfig & Pick; export type InputNumberConfig = ComponentStyleConfig & Pick; @@ -293,6 +296,7 @@ export interface ConfigConsumerProps { timePicker?: TimePickerConfig; tour?: TourConfig; tooltip?: TooltipConfig; + popover?: PopoverConfig; upload?: ComponentStyleConfig; notification?: NotificationConfig; tree?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 6fc2618f45..3fed491527 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -162,7 +162,8 @@ const { | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 | -| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 | +| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 | +| popover | Set Popover common props | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover#api), styles?: [Popover\["styles"\]](/components/popover#api) } | - | 5.23.0 | | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 | | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 4cb9af09cf..91f43565db 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -52,6 +52,7 @@ import type { ThemeConfig, TimePickerConfig, TooltipConfig, + PopoverConfig, TourConfig, TransferConfig, TreeSelectConfig, @@ -237,6 +238,7 @@ export interface ConfigProviderProps { wave?: WaveConfig; tour?: TourConfig; tooltip?: TooltipConfig; + popover?: PopoverConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -392,6 +394,7 @@ const ProviderChildren: React.FC = (props) => { warning: warningConfig, tour, tooltip, + popover, floatButtonGroup, variant, inputNumber, @@ -493,6 +496,7 @@ const ProviderChildren: React.FC = (props) => { warning: warningConfig, tour, tooltip, + popover, floatButtonGroup, variant, inputNumber, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 0894bc5f18..76f765bbb9 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -165,6 +165,7 @@ const { | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 | | tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 | +| popover | 设置 Popover 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover-cn#api), styles?: [Popover\["styles"\]](/components/popover-cn#api) } | - | 5.23.0 | | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 | | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx index 2764ef002c..a5846bc279 100644 --- a/components/popover/__tests__/index.test.tsx +++ b/components/popover/__tests__/index.test.tsx @@ -137,4 +137,33 @@ describe('Popover', () => { expect(popup).toBe(null); }); }); + + it('should apply custom styles to Popover', () => { + const customClassNames = { + body: 'custom-body', + root: 'custom-root', + }; + + const customStyles = { + body: { color: 'red' }, + root: { backgroundColor: 'blue' }, + }; + + const { container } = render( + } styles={customStyles} open> + + , + ); + + const popoverElement = container.querySelector('.ant-popover') as HTMLElement; + const popoverBodyElement = container.querySelector('.ant-popover-inner') as HTMLElement; + + // 验证 classNames + expect(popoverElement.classList).toContain('custom-root'); + expect(popoverBodyElement.classList).toContain('custom-body'); + + // 验证 styles + expect(popoverElement.style.backgroundColor).toBe('blue'); + expect(popoverBodyElement.style.color).toBe('red'); + }); }); diff --git a/components/popover/demo/_semantic.tsx b/components/popover/demo/_semantic.tsx new file mode 100644 index 0000000000..18a3ed98cf --- /dev/null +++ b/components/popover/demo/_semantic.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { Popover } from 'antd'; + +import SemanticPreview from '../../../.dumi/components/SemanticPreview'; +import useLocale from '../../../.dumi/hooks/useLocale'; + +const locales = { + cn: { + root: '根节点 (包含箭头、内容元素)', + body: '内容元素', + }, + en: { + root: 'Root element (including arrows, content elements)', + body: 'Body element', + }, +}; + +const BlockList: React.FC = (props: any) => { + const divRef = React.useRef(null); + + return ( +
+ divRef.current} + {...props} + /> +
+ ); +}; + +const App: React.FC = () => { + const [locale] = useLocale(locales); + return ( + + + + ); +}; + +export default App; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index 6cdbce7bcb..176d551342 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -47,6 +47,10 @@ Common props ref：[Common props](/docs/react/common-props) Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events. +## Semantic DOM + + + ## Design Token diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 9d9de31591..d3d279f1f1 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -36,15 +36,25 @@ const InternalPopover = React.forwardRef((props, ref) mouseLeaveDelay = 0.1, onOpenChange, overlayStyle = {}, + styles, + classNames: popoverClassNames, ...otherProps } = props; - const { getPrefixCls } = React.useContext(ConfigContext); + const { popover, getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('popover', customizePrefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); const rootPrefixCls = getPrefixCls(); - const overlayCls = classNames(overlayClassName, hashId, cssVarCls); + const rootClassNames = classNames( + overlayClassName, + hashId, + cssVarCls, + popover?.classNames?.root, + popoverClassNames?.root, + ); + const bodyClassNames = classNames(popover?.classNames?.body, popoverClassNames?.body); + const [open, setOpen] = useMergedState(false, { value: props.open ?? props.visible, defaultValue: props.defaultOpen ?? props.defaultVisible, @@ -77,10 +87,21 @@ const InternalPopover = React.forwardRef((props, ref) trigger={trigger} mouseEnterDelay={mouseEnterDelay} mouseLeaveDelay={mouseLeaveDelay} - overlayStyle={overlayStyle} {...otherProps} prefixCls={prefixCls} - overlayClassName={overlayCls} + classNames={{ root: rootClassNames, body: bodyClassNames }} + styles={{ + root: { + ...popover?.styles?.root, + ...popover?.style, + ...overlayStyle, + ...styles?.root, + }, + body: { + ...popover?.styles?.body, + ...styles?.body, + }, + }} ref={ref} open={open} onOpenChange={onInternalOpenChange} diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 291c51bcc5..1400be912f 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -48,6 +48,10 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 +## Semantic DOM + + + ## 主题变量（Design Token） diff --git a/components/tooltip/demo/config-debug.md b/components/tooltip/demo/config-debug.md deleted file mode 100644 index ee6042345c..0000000000 --- a/components/tooltip/demo/config-debug.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -debug config provide - -## en-US - -debug config provide diff --git a/components/tooltip/demo/config-debug.tsx b/components/tooltip/demo/config-debug.tsx deleted file mode 100644 index 86f75a484d..0000000000 --- a/components/tooltip/demo/config-debug.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { ConfigProvider, Tooltip } from 'antd'; - -const App: React.FC = () => ( -
- - - Tooltip will show on mouse enter. - - -
-); - -export default App; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index cc94987025..b17e48d01d 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -312,7 +312,7 @@ const InternalTooltip = React.forwardRef((props, ref) tooltipClassNames?.root, ); - const bodyClassnames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body); + const bodyClassNames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body); // ============================ zIndex ============================ const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex); @@ -326,7 +326,7 @@ const InternalTooltip = React.forwardRef((props, ref) mouseEnterDelay={mouseEnterDelay} mouseLeaveDelay={mouseLeaveDelay} prefixCls={prefixCls} - classNames={{ root: rootClassNames, body: bodyClassnames }} + classNames={{ root: rootClassNames, body: bodyClassNames }} styles={{ root: { ...arrowContentStyle, diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 39ec823384..b9ba9c3c0e 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -30,7 +30,6 @@ demo: Debug 禁用 禁用子元素 -ConfigProvider ## API From ca1ab9bf473b2b0132fcec82383b69a0da509fbe Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Wed, 25 Dec 2024 14:39:50 +0800 Subject: [PATCH 25/41] feat: TreeSelect support maxCount (#51759) * feat: TreeSelect support maxCount * Update components/tree-select/index.zh-CN.md Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: lijianan <574980606@qq.com> * chore: bump tree & tree-select version for supporting maxCount * test: update snapshot * chore: bump rc-cascader version to 3.31.0 * :wqhe commit message for your changes. Lines starting * rerun ci * rerun ci * docs: update doc * docs: improve demo * fix: add demo * docs: add demo * chore: trigger CI build --------- Signed-off-by: lijianan <574980606@qq.com> Signed-off-by: Jony J <1844749591@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: thinkasany <480968828@qq.com> --- .../__snapshots__/components.test.tsx.snap | 100 ++- .../__snapshots__/demo-extend.test.ts.snap | 15 +- .../__snapshots__/demo-extend.test.ts.snap | 14 +- .../__snapshots__/demo-extend.test.ts.snap | 20 +- .../__snapshots__/demo-extend.test.ts.snap | 64 +- .../__snapshots__/demo-extend.test.ts.snap | 44 +- .../__tests__/__snapshots__/demo.test.ts.snap | 44 +- .../__snapshots__/demo-extend.test.ts.snap | 694 ++++++++++++++++-- .../__snapshots__/demo.test.tsx.snap | 213 ++++++ components/tree-select/demo/maxCount.md | 7 + components/tree-select/demo/maxCount.tsx | 70 ++ .../tree-select/demo/maxCountNoEffect.md | 7 + .../tree-select/demo/maxCountNoEffect.tsx | 71 ++ components/tree-select/index.en-US.md | 2 + components/tree-select/index.tsx | 17 + components/tree-select/index.zh-CN.md | 2 + .../__snapshots__/demo-extend.test.ts.snap | 331 ++++++--- .../__tests__/__snapshots__/demo.test.ts.snap | 331 ++++++--- .../__snapshots__/directory.test.tsx.snap | 132 ++-- .../__snapshots__/index.test.tsx.snap | 67 +- package.json | 8 +- 21 files changed, 1861 insertions(+), 392 deletions(-) create mode 100644 components/tree-select/demo/maxCount.md create mode 100644 components/tree-select/demo/maxCount.tsx create mode 100644 components/tree-select/demo/maxCountNoEffect.md create mode 100644 components/tree-select/demo/maxCountNoEffect.tsx diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index cda8f903c3..c7759d39e7 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -41483,7 +41483,6 @@ exports[`ConfigProvider components Tree configProvider 1`] = `