mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: merge master into feature

Browse Source
This commit is contained in:
栗嘉男 2024-08-08 22:39:36 +08:00
commit 7ca54f8902
51 changed files with 703 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.dumi/theme/builtins/Previewer/CodePreviewer.tsx
View File

@ -11,10 +11,10 @@ import LZString from 'lz-string';
import useLocation from '../../../hooks/useLocation';
import BrowserFrame from '../../common/BrowserFrame';
import ClientOnly from '../../common/ClientOnly';
import CodePenIcon from '../../icons/CodePenIcon';
import CodePreview from '../../common/CodePreview';
import CodeSandboxIcon from '../../icons/CodeSandboxIcon';
import EditButton from '../../common/EditButton';
import CodePenIcon from '../../icons/CodePenIcon';
import CodeSandboxIcon from '../../icons/CodeSandboxIcon';
import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
import RiddleIcon from '../../icons/RiddleIcon';
import DemoContext from '../../slots/DemoContext';
@ -308,7 +308,9 @@ ${parsedSourceCode}
.trim()
.replace(new RegExp(`#${asset.id}\\s*`, 'g'), '')
.replace('</style>', '')
.replace('<style>', '');
.replace('<style>', '')
.replace('```css', '')
.replace('```', '');
const indexJsContent = `import React from 'react';
import { createRoot } from 'react-dom/client';

63
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -6,51 +6,42 @@ Your pull requests will be merged after one of the collaborators approve.
Thank you!
-->
[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md?plain=1)
[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE_CN.md?plain=1)
### 🤔 This is a ...
- [ ] New feature
- [ ] Bug fix
- [ ] Site / documentation update
- [ ] Demo update
- [ ] Component style update
- [ ] TypeScript definition update
- [ ] Bundle size optimization
- [ ] Performance optimization
- [ ] Enhancement feature
- [ ] Internationalization
- [ ] Refactoring
- [ ] Code style optimization
- [ ] Test Case
- [ ] Branch merge
- [ ] Workflow
- [ ] Other (about what?)
- [ ] 🆕 New feature
- [ ] 🐞 Bug fix
- [ ] 📝 Site / documentation improvement
- [ ] 📽️ Demo improvement
- [ ] 💄 Component style improvement
- [ ] 🤖 TypeScript definition improvement
- [ ] 📦 Bundle size optimization
- [ ] ⚡️ Performance optimization
- [ ] ⭐️ Feature enhancement
- [ ] 🌐 Internationalization
- [ ] 🛠 Refactoring
- [ ] 🎨 Code style optimization
- [ ] ✅ Test Case
- [ ] 🔀 Branch merge
- [ ] ⏩ Workflow
- [ ] ❓ Other (about what?)
### 🔗 Related issue link
### 🔗 Related Issues
<!--
1. Put the related issue or discussion links here.
2. close #xxxx or fix #xxxx for instance.
-->
> - Describe the source of related requirements, such as links to relevant issue discussions.
> - For example: close #xxxx, fix #xxxx
### 💡 Background and solution
### 💡 Background and Solution
<!--
1. Describe the problem and the scenario.
2. GIF or snapshot should be provided if includes UI/interactive modification.
3. How to fix the problem, and list the final API implementation and usage sample if that is a new feature.
-->
> - The specific problem to be addressed.
> - List the final API implementation and usage if needed.
> - If there are UI/interaction changes, consider providing screenshots or GIFs.
### 📝 Changelog
### 📝 Change Log
<!--
Describe changes from the user side, and list all potential break changes or other risks.
--->
- Use a developer-oriented tone and narrative style.
- Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
- Refer to: https://ant.design/changelog
> - Describe the impact of the changes on developers, not the solution approach.
> - Reference: https://ant.design/changelog
| Language | Changelog |
| ---------- | --------- |

58
.github/PULL_REQUEST_TEMPLATE/pr_cn.md vendored
View File

@ -1,58 +0,0 @@
<!--
首先，感谢你的贡献！😄
新特性请提交至 feature 分支，其余可提交至 master 分支。
在维护者审核通过后会合并。
请确保填写以下 pull request 的信息，谢谢！~
-->
[English Template / 英文模板](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE.md?plain=1)
### 🤔 这个变动的性质是？
- [ ] 新特性提交
- [ ] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] TypeScript 定义更新
- [ ] 包体积优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 国际化改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 工作流程
- [ ] 其他改动（是关于什么的改动？）
### 🔗 相关 Issue
<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
2. 例如 close #xxxx、 fix #xxxx
-->
### 💡 需求背景和解决方案
<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->
### 📝 更新日志
<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->
- 请用面向开发者的角度和叙述方式撰写 changelog
- 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
- 参考：https://ant.design/changelog-cn
| 语言 | 更新描述 |
| ------- | -------- |
| 🇺🇸 英文 | |
| 🇨🇳 中文 | |

49
.github/PULL_REQUEST_TEMPLATE_CN.md vendored Normal file
View File

@ -0,0 +1,49 @@
<!--
首先，感谢你的贡献！😄
新特性请提交至 feature 分支，其余可提交至 master 分支。
在维护者审核通过后会合并。
请确保填写以下 pull request 的信息，谢谢！~
-->
[English Template / 英文模板](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE.md?plain=1)
### 🤔 这个变动的性质是？
- [ ] 🆕 新特性提交
- [ ] 🐞 Bug 修复
- [ ] 📝 站点、文档改进
- [ ] 📽️ 演示代码改进
- [ ] 💄 组件样式/交互改进
- [ ] 🤖 TypeScript 定义更新
- [ ] 📦 包体积优化
- [ ] ⚡️ 性能优化
- [ ] ⭐️ 功能增强
- [ ] 🌐 国际化改进
- [ ] 🛠 重构
- [ ] 🎨 代码风格优化
- [ ] ✅ 测试用例
- [ ] 🔀 分支合并
- [ ] ⏩ 工作流程
- [ ] ❓ 其他改动（是关于什么的改动？）
### 🔗 相关 Issue
> 1. 描述相关需求的来源，如相关的 issue 讨论链接。
> 2. 例如 close #xxxx、 fix #xxxx
### 💡 需求背景和解决方案
> 1. 要解决的具体问题。
> 2. 列出最终的 API 实现和用法。
> 3. 涉及UI/交互变动建议提供截图或 GIF。
### 📝 更新日志
> - 描述改动对开发者有哪些影响，而非解决方式
> - 可参考：https://ant.design/changelog-cn
| 语言 | 更新描述 |
| ------- | -------- |
| 🇺🇸 英文 | |
| 🇨🇳 中文 | |

8
.github/workflows/issue-labeled.yml vendored
View File

@ -58,17 +58,17 @@ jobs:
你好 @${{ github.event.issue.user.login }}，Ant Design Issue 板块是用于 bug 反馈与需求讨论的地方。请[勿询问如何使用的问题](https://github.com/ant-design/ant-design/issues/2320)，你可以试着在 [antd discussions](https://github.com/ant-design/ant-design/discussions) 新开一个 discussion，选择 `Q&A` 类别进行提问，也可以在 [Stack Overflow](http://stackoverflow.com/questions/tagged/antd) 或者 [Segment Fault](https://segmentfault.com/t/antd) 中提问（记得添加 `antd` 和 `react` 标签哦~）。
- name: 3.x
if: github.event.label.name == '3.x'
- name: 3.x or 4.x
if: github.event.label.name == '3.x' || github.event.label.name == '4.x'
uses: actions-cool/issues-helper@v3
with:
actions: 'create-comment,close-issue'
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
Hi @${{ github.event.issue.user.login }}. Current version (3.x) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.
Hi @${{ github.event.issue.user.login }}. Current version (${{ github.event.label.name }}) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.
你好 @${{ github.event.issue.user.login }}，当前版本（3.x）已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。
你好 @${{ github.event.issue.user.login }}，当前版本（${{ github.event.label.name }}）已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。
- name: invalid
if: github.event.label.name == 'Invalid'

2
CHANGELOG.en-US.md
View File

@ -20,7 +20,7 @@ tag: vVERSION
`2024-08-03`
- 🛠 Replace ColorPicker internal `@ctrl/tiny-color` with `@ant-design/fast-color`. [#49846](https://github.com/ant-design/ant-design/pull/49846)
- 🛠 Replace ColorPicker internal `@ctrl/tinycolor` with `@ant-design/fast-color`. [#49846](https://github.com/ant-design/ant-design/pull/49846)
- 🆕 ConfigProvider support indicator property for Spin. [#50183](https://github.com/ant-design/ant-design/pull/50183) [@coding-ice](https://github.com/coding-ice)
- 🆕 Upload `showUploadList` support `extra` for additional content. [#50098](https://github.com/ant-design/ant-design/pull/50098) [@guoyunhe](https://github.com/guoyunhe)
- 🆕 Tree support custom loading icon for tree nodes with new prop `switcherLoadingIcon`. [#49716](https://github.com/ant-design/ant-design/pull/49716) [@coding-ice](https://github.com/coding-ice)

2
CHANGELOG.zh-CN.md
View File

@ -19,7 +19,7 @@ tag: vVERSION
`2024-08-03`
- 🛠 替换 ColorPicker 内部使用的 `@ctrl/tiny-color` 为 `@ant-design/fast-color`。[#49846](https://github.com/ant-design/ant-design/pull/49846)
- 🛠 替换 ColorPicker 内部使用的 `@ctrl/tinycolor` 为 `@ant-design/fast-color`。[#49846](https://github.com/ant-design/ant-design/pull/49846)
- 🆕 ConfigProvider 支持配置 Spin 的 indicator 属性。[#50183](https://github.com/ant-design/ant-design/pull/50183) [@coding-ice](https://github.com/coding-ice)
- 🆕 Upload `showUploadList` 添加 `extra` 以支持渲染额外信息。[#50098](https://github.com/ant-design/ant-design/pull/50098) [@guoyunhe](https://github.com/guoyunhe)
- 🆕 Tree 新增 `switcherLoadingIcon` 属性以支持自定义树节点的加载图标[#49716](https://github.com/ant-design/ant-design/pull/49716) [@coding-ice](https://github.com/coding-ice)

6
components/_util/__tests__/getScroll.test.ts
View File

@ -49,4 +49,10 @@ describe('getScroll', () => {
expect(getScroll(div)).toBe(400);
scrollToSpy.mockRestore();
});
it('When window is undef, getScroll value is zero', () => {
const spy = jest.spyOn(global, 'window', 'get').mockImplementation(() => undefined as any);
expect(getScroll(null)).toBe(0);
spy.mockRestore();
});
});

2
components/badge/style/index.ts
View File

@ -298,7 +298,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
transformOrigin: '50% 50%',
},
},
[`${numberPrefixCls}`]: {
[numberPrefixCls]: {
overflow: 'hidden',
[`${numberPrefixCls}-only`]: {
position: 'relative',

4
components/badge/style/ribbon.ts
View File

@ -20,10 +20,10 @@ const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
}));
return {
[`${ribbonWrapperPrefixCls}`]: {
[ribbonWrapperPrefixCls]: {
position: 'relative',
},
[`${ribbonPrefixCls}`]: {
[ribbonPrefixCls]: {
...resetComponent(token),
position: 'absolute',
top: marginXS,

2
components/button/style/index.ts
View File

@ -402,7 +402,7 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
return [
{
[`${prefixCls}`]: {
[prefixCls]: {
fontSize,
lineHeight,
height: controlHeight,

18
components/calendar/__tests__/index.test.tsx
View File

@ -18,6 +18,7 @@ import Button from '../../radio/radioButton';
import Select from '../../select';
import Header from '../Header';
import type { CalendarHeaderProps } from '../Header';
import ConfigProvider from '../../config-provider';
const ref: {
calendarProps?: PickerPanelProps;
@ -208,6 +209,23 @@ describe('Calendar', () => {
MockDate.reset();
});
it('Calendar locale support should override ConfigProvider locale', () => {
MockDate.set(Dayjs('2018-10-19').valueOf());
// eslint-disable-next-line global-require
const zhCN = require('../locale/zh_CN').default;
// eslint-disable-next-line global-require
const enUs = require('../../locale/en_US').default;
const wrapper = render(
<ConfigProvider locale={enUs}>
<Calendar locale={zhCN} />
</ConfigProvider>,
);
expect(wrapper.container.querySelector('.ant-picker-content thead')?.textContent).toBe(
'一二三四五六日',
);
MockDate.reset();
});
describe('onPanelChange', () => {
it('trigger when click last month of date', () => {
const onPanelChange = jest.fn();

24
components/calendar/generateCalendar.tsx
View File

@ -172,20 +172,6 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
onSelect?.(date, { source });
};
// ====================== Locale ======================
const getDefaultLocale = () => {
const { locale } = props;
const result = {
...enUS,
...locale,
};
result.lang = {
...result.lang,
...locale?.lang,
};
return result;
};
// ====================== Render ======================
const dateRender = React.useCallback(
(date: DateType, info: CellRenderInfo<DateType>): React.ReactNode => {
@ -244,7 +230,9 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
[monthFullCellRender, monthCellRender, cellRender, fullCellRender],
);
const [contextLocale] = useLocale('Calendar', getDefaultLocale);
const [contextLocale] = useLocale('Calendar', enUS);
const locale = { ...contextLocale, ...props.locale! };
const mergedCellRender: RcBasePickerPanelProps['cellRender'] = (current, info) => {
if (info.type === 'date') {
@ -254,7 +242,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
if (info.type === 'month') {
return monthRender(current, {
...info,
locale: contextLocale?.lang,
locale: locale?.lang,
});
}
};
@ -292,7 +280,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
generateConfig={generateConfig}
mode={mergedMode}
fullscreen={fullscreen}
locale={contextLocale?.lang}
locale={locale?.lang}
validRange={validRange}
onChange={onInternalSelect}
onModeChange={triggerModeChange}
@ -301,7 +289,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
<RCPickerPanel
value={mergedValue}
prefixCls={prefixCls}
locale={contextLocale?.lang}
locale={locale?.lang}
generateConfig={generateConfig}
cellRender={mergedCellRender}
onSelect={(nextDate) => {

8
components/calendar/style/index.ts
View File

@ -107,7 +107,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
th: {
height: 'auto',
padding: 0,
lineHeight: `${unit(token.weekHeight)}`,
lineHeight: unit(token.weekHeight),
},
},
[`${componentCls}-cell::before`]: {
@ -129,7 +129,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
height: 'auto',
paddingInlineEnd: token.paddingSM,
paddingBottom: token.paddingXXS,
lineHeight: `${unit(token.weekHeight)}`,
lineHeight: unit(token.weekHeight),
},
},
},
@ -170,7 +170,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
borderRadius: 0,
transition: `background ${token.motionDurationSlow}`,
'&-value': {
lineHeight: `${unit(token.dateValueHeight)}`,
lineHeight: unit(token.dateValueHeight),
transition: `color ${token.motionDurationSlow}`,
},
'&-content': {
@ -191,7 +191,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
},
},
[`@media only screen and (max-width: ${unit(token.screenXS)}) `]: {
[`${calendarCls}`]: {
[calendarCls]: {
[`${calendarCls}-header`]: {
display: 'block',
[`${calendarCls}-year-select`]: {

8
components/color-picker/ColorPicker.tsx
View File

@ -14,6 +14,7 @@ import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import type { PopoverProps } from '../popover';
import Popover from '../popover';
import { useCompactItemContext } from '../space/Compact';
import { AggregationColor } from './color';
import type { ColorPickerPanelProps } from './ColorPickerPanel';
import ColorPickerPanel from './ColorPickerPanel';
@ -166,8 +167,12 @@ const ColorPicker: CompoundedComponent = (props) => {
// ================== Form Status ==================
const { status: contextStatus } = React.useContext(FormItemInputContext);
// ==================== Compact ====================
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
// ===================== Style =====================
const mergedSize = useSize(customizeSize);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const rtlCls = { [`${prefixCls}-rtl`]: direction };
@ -178,6 +183,7 @@ const ColorPicker: CompoundedComponent = (props) => {
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large',
},
compactItemClassnames,
colorPicker?.className,
mergedRootCls,
className,

4
components/color-picker/components/ColorTrigger.tsx
View File

@ -51,10 +51,6 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
}
if (color.isGradient()) {
// return color
// .getColors()
// .map((c) => `${c.color.toRgbString()} ${c.percent}%`)
// .join(', ');
return color.getColors().map((c, index) => {
const inactive = activeIndex !== -1 && activeIndex !== index;

5
components/color-picker/style/index.ts
View File

@ -1,6 +1,7 @@
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
import { genCompactItemStyle } from '../../style/compact-item';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import genColorBlockStyle from './color-block';
@ -284,6 +285,10 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
...genRtlStyle(token),
},
},
genCompactItemStyle(token, {
focusElCls: `${componentCls}-trigger-active`,
}),
];
};

2
components/color-picker/style/input.ts
View File

@ -56,7 +56,7 @@ const genInputStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
[`${antCls}-select-selection-item`]: {
paddingInlineEnd: token.calc(fontSizeIcon).add(marginXXS).equal(),
fontSize: fontSizeSM,
lineHeight: `${unit(controlHeightSM)}`,
lineHeight: unit(controlHeightSM),
},
[`${antCls}-select-item-option-content`]: {
fontSize: fontSizeSM,

3
components/color-picker/style/slider.ts
View File

@ -38,8 +38,7 @@ const genSliderStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
return {
// ======================== Slider ========================
[`${componentCls}-slider`]: [
getTransBg(`${unit(colorPickerSliderHeight)}`, token.colorFillSecondary),
getTransBg(unit(colorPickerSliderHeight), token.colorFillSecondary),
{
margin: 0,
padding: 0,

40
components/date-picker/demo/select-in-range.tsx
View File

@ -1,24 +1,52 @@
import React from 'react';
import { DatePicker, Space, Typography } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';
const { RangePicker } = DatePicker;
const getYearMonth = (date: Dayjs) => date.year() * 12 + date.month();
// Disabled 7 days from the selected date
const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from }) => {
const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
if (from) {
return Math.abs(current.diff(from, 'days')) >= 7;
const minDate = from.add(-6, 'days');
const maxDate = from.add(6, 'days');
switch (type) {
case 'year':
return current.year() < minDate.year() || current.year() > maxDate.year();
case 'month':
return (
getYearMonth(current) < getYearMonth(minDate) ||
getYearMonth(current) > getYearMonth(maxDate)
);
default:
return Math.abs(current.diff(from, 'days')) >= 7;
}
}
return false;
};
// Disabled 6 months from the selected date
const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from }) => {
const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
if (from) {
const curMonth = current.year() * 12 + current.month();
const fromMonth = from.year() * 12 + from.month();
return Math.abs(fromMonth - curMonth) >= 6;
const minDate = from.add(-5, 'months');
const maxDate = from.add(5, 'months');
switch (type) {
case 'year':
return current.year() < minDate.year() || current.year() > maxDate.year();
default:
return (
getYearMonth(current) < getYearMonth(minDate) ||
getYearMonth(current) > getYearMonth(maxDate)
);
}
}
return false;

2
components/form/index.zh-CN.md
View File

@ -154,7 +154,7 @@ const validateMessages = {
| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | |
| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是是 `checked`，否则无法获取这个两个组件的值。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | |
| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是 `checked`，否则无法获取这个两个组件的值。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#col) | - | |
| layout | 表单项布局 | `horizontal` \| `vertical` | - | 5.18.0 |

8
components/input/style/index.ts
View File

@ -201,7 +201,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
},
[`${componentCls}`]: {
[componentCls]: {
width: '100%',
marginBottom: 0,
textAlign: 'inherit',
@ -307,7 +307,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
},
// Undo float for .ant-input-group .ant-input
[`${componentCls}`]: {
[componentCls]: {
float: 'none',
},
@ -511,7 +511,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
content: '"\\a0"',
},
[`${componentCls}`]: {
[componentCls]: {
'&-prefix, &-suffix': {
display: 'flex',
flex: 'none',
@ -642,7 +642,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const searchPrefixCls = `${componentCls}-search`;
return {
[searchPrefixCls]: {
[`${componentCls}`]: {
[componentCls]: {
'&:hover, &:focus': {
borderColor: token.colorPrimaryHover,

2
components/input/style/otp.ts
View File

@ -8,7 +8,7 @@ const genOTPStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls, paddingXS } = token;
return {
[`${componentCls}`]: {
[componentCls]: {
display: 'inline-flex',
alignItems: 'center',
flexWrap: 'nowrap',

8
components/list/style/index.ts
View File

@ -81,7 +81,7 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
borderRadiusLG,
} = token;
return {
[`${listBorderedCls}`]: {
[listBorderedCls]: {
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
borderRadius: borderRadiusLG,
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
@ -109,7 +109,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
const { componentCls, screenSM, screenMD, marginLG, marginSM, margin } = token;
return {
[`@media screen and (max-width:${screenMD}px)`]: {
[`${componentCls}`]: {
[componentCls]: {
[`${componentCls}-item`]: {
[`${componentCls}-item-action`]: {
marginInlineStart: marginLG,
@ -127,7 +127,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
},
[`@media screen and (max-width: ${screenSM}px)`]: {
[`${componentCls}`]: {
[componentCls]: {
[`${componentCls}-item`]: {
flexWrap: 'wrap',
@ -184,7 +184,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
} = token;
return {
[`${componentCls}`]: {
[componentCls]: {
...resetComponent(token),
position: 'relative',
'*': {

2
components/menu/style/index.ts
View File

@ -535,7 +535,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
// Misc
{
'': {
[`${componentCls}`]: {
[componentCls]: {
...clearFix(),
// Hidden

4
components/modal/style/index.ts
View File

@ -7,8 +7,8 @@ import type {
AliasToken,
FullToken,
GenerateStyle,
GlobalToken,
GenStyleFn,
GlobalToken,
TokenWithCommonCls,
} from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
@ -242,7 +242,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
display: 'flex',
fontSize: token.fontSizeLG,
fontStyle: 'normal',
lineHeight: `${unit(token.modalCloseBtnSize)}`,
lineHeight: unit(token.modalCloseBtnSize),
justifyContent: 'center',
textTransform: 'none',
textRendering: 'auto',

4
components/pagination/style/index.ts
View File

@ -10,7 +10,7 @@ import {
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken, GenStyleFn } from '../../theme/internal';
import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
@ -400,7 +400,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
height: token.itemSize,
color: token.colorText,
fontFamily: token.fontFamily,
lineHeight: `${unit(token.itemSize)}`,
lineHeight: unit(token.itemSize),
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',

2
components/select/style/dropdown.ts
View File

@ -92,7 +92,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
display: 'none',
},
[`${selectItemCls}`]: {
[selectItemCls]: {
...genItemStyle(token),
cursor: 'pointer',
transition: `background ${token.motionDurationSlow} ease`,

22
components/skeleton/style/index.ts
View File

@ -1,7 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle, GetDefaultToken, CSSUtil } from '../../theme/internal';
import type { CSSUtil, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export type ComponentToken = {
@ -91,7 +91,7 @@ const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
token;
return {
[`${skeletonAvatarCls}`]: {
[skeletonAvatarCls]: {
display: 'inline-block',
verticalAlign: 'top',
background: gradientFromColor,
@ -120,7 +120,7 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
calc,
} = token;
return {
[`${skeletonInputCls}`]: {
[skeletonInputCls]: {
display: 'inline-block',
verticalAlign: 'top',
background: gradientFromColor,
@ -206,7 +206,7 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
calc,
} = token;
return {
[`${skeletonButtonCls}`]: {
[skeletonButtonCls]: {
display: 'inline-block',
verticalAlign: 'top',
background: gradientFromColor,
@ -254,7 +254,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
} = token;
return {
[`${componentCls}`]: {
[componentCls]: {
display: 'table',
width: '100%',
@ -264,7 +264,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
verticalAlign: 'top',
// Avatar
[`${skeletonAvatarCls}`]: {
[skeletonAvatarCls]: {
display: 'inline-block',
verticalAlign: 'top',
background: gradientFromColor,
@ -286,7 +286,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
verticalAlign: 'top',
// Title
[`${skeletonTitleCls}`]: {
[skeletonTitleCls]: {
width: '100%',
height: titleHeight,
background: gradientFromColor,
@ -297,7 +297,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
},
// paragraph
[`${skeletonParagraphCls}`]: {
[skeletonParagraphCls]: {
padding: 0,
'> li': {
width: '100%',
@ -324,7 +324,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
},
[`${componentCls}-with-avatar ${componentCls}-content`]: {
// Title
[`${skeletonTitleCls}`]: {
[skeletonTitleCls]: {
marginBlockStart: marginSM,
[`+ ${skeletonParagraphCls}`]: {
@ -346,11 +346,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
[`${componentCls}${componentCls}-block`]: {
width: '100%',
[`${skeletonButtonCls}`]: {
[skeletonButtonCls]: {
width: '100%',
},
[`${skeletonInputCls}`]: {
[skeletonInputCls]: {
width: '100%',
},
},

389
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8938,6 +8938,395 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<input
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
placeholder="input here"
type="text"
value=""
/>
<div
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
>
<div
class="ant-color-picker-clear"
/>
</div>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
>
<div
class="ant-color-picker-panel"
>
<div
class="ant-color-picker-select"
>
<div
class="ant-color-picker-palette"
style="position: relative;"
>
<div
style="position: absolute; left: 0%; top: 100%; z-index: 1; transform: translate(-50%, -50%);"
>
<div
class="ant-color-picker-handler"
style="background-color: rgba(0, 0, 0, 0);"
/>
</div>
<div
class="ant-color-picker-saturation"
style="background-color: rgb(255, 0, 0);"
/>
</div>
</div>
<div
class="ant-color-picker-slider-container"
>
<div
class="ant-color-picker-slider-group"
>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="359"
aria-valuemin="0"
aria-valuenow="0"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 0%; transform: translateX(-50%); background: rgb(255, 0, 0);"
tabindex="0"
/>
</div>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 0%; transform: translateX(-50%); background: rgba(0, 0, 0, 0);"
tabindex="0"
/>
</div>
</div>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background: rgba(0, 0, 0, 0);"
/>
</div>
</div>
</div>
<div
class="ant-color-picker-input-container"
>
<div
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="HEX"
>
HEX
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="HEX"
aria-selected="true"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
hex
</div>
<div
aria-label="HSB"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
hsb
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
title="HEX"
>
<div
class="ant-select-item-option-content"
>
HEX
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="HSB"
>
<div
class="ant-select-item-option-content"
>
HSB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="RGB"
>
<div
class="ant-select-item-option-content"
>
RGB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-color-picker-input"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input"
>
<span
class="ant-input-prefix"
>
#
</span>
<input
class="ant-input ant-input-sm"
type="text"
value="000000"
/>
</span>
</div>
<div
class="ant-input-number ant-input-number-sm ant-input-number-outlined ant-color-picker-steppers ant-color-picker-alpha-input"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="true"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="0%"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

21
components/space/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -1976,6 +1976,27 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<input
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
placeholder="input here"
type="text"
value=""
/>
<div
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
>
<div
class="ant-color-picker-clear"
/>
</div>
</div>
</div>
</div>
`;

5
components/space/demo/compact.tsx
View File

@ -4,6 +4,7 @@ import {
AutoComplete,
Button,
Cascader,
ColorPicker,
DatePicker,
Input,
InputNumber,
@ -197,6 +198,10 @@ const App: React.FC = () => (
<InputNumber placeholder="another input" addonBefore="$" />
<InputNumber placeholder="another input" addonAfter="$" />
</Space.Compact>
<Space.Compact>
<Input placeholder="input here" />
<ColorPicker />
</Space.Compact>
</Space>
);

6
components/spin/style/index.ts
View File

@ -43,7 +43,7 @@ const antRotate = new Keyframes('antRotate', {
const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => {
const { componentCls, calc } = token;
return {
[`${componentCls}`]: {
[componentCls]: {
...resetComponent(token),
position: 'absolute',
display: 'none',
@ -209,8 +209,8 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
[`${componentCls}-dot-progress`]: {
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
insetInlineStart: 0,
transform: 'translate(-50%, -50%)',
insetInlineStart: '50%',
},
// dots

2
components/statistic/style/index.ts
View File

@ -32,7 +32,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
} = token;
return {
[`${componentCls}`]: {
[componentCls]: {
...resetComponent(token),
[`${componentCls}-title`]: {
marginBottom: marginXXS,

2
components/steps/style/custom-icon.ts
View File

@ -18,7 +18,7 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
width: customIconSize,
height: customIconSize,
fontSize: customIconFontSize,
lineHeight: `${unit(customIconSize)}`,
lineHeight: unit(customIconSize),
},
},
},

4
components/steps/style/index.ts
View File

@ -232,7 +232,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
marginInlineEnd: token.marginXS,
fontSize: token.iconFontSize,
fontFamily: token.fontFamily,
lineHeight: `${unit(token.iconSize)}`,
lineHeight: unit(token.iconSize),
textAlign: 'center',
borderRadius: token.iconSize,
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
@ -266,7 +266,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
paddingInlineEnd: token.padding,
color: token.colorText,
fontSize: token.fontSizeLG,
lineHeight: `${unit(token.titleLineHeight)}`,
lineHeight: unit(token.titleLineHeight),
'&::after': {
position: 'absolute',

4
components/steps/style/progress-dot.ts
View File

@ -45,7 +45,7 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
height: dotSize,
marginInlineStart: token.calc(token.descriptionMaxWidth).sub(dotSize).div(2).equal(),
paddingInlineEnd: 0,
lineHeight: `${unit(dotSize)}`,
lineHeight: unit(dotSize),
background: 'transparent',
border: 0,
@ -82,7 +82,7 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
top: token.calc(dotSize).sub(dotCurrentSize).div(2).equal(),
width: dotCurrentSize,
height: dotCurrentSize,
lineHeight: `${unit(dotCurrentSize)}`,
lineHeight: unit(dotCurrentSize),
background: 'none',
marginInlineStart: token
.calc(token.descriptionMaxWidth)

6
components/steps/style/small.ts
View File

@ -31,14 +31,14 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
marginBottom: 0,
marginInline: `0 ${unit(token.marginXS)}`,
fontSize: fontSizeSM,
lineHeight: `${unit(iconSizeSM)}`,
lineHeight: unit(iconSizeSM),
textAlign: 'center',
borderRadius: iconSizeSM,
},
[`${componentCls}-item-title`]: {
paddingInlineEnd: token.paddingSM,
fontSize,
lineHeight: `${unit(iconSizeSM)}`,
lineHeight: unit(iconSizeSM),
'&::after': {
top: token.calc(iconSizeSM).div(2).equal(),
@ -60,7 +60,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
borderRadius: 0,
[`> ${componentCls}-icon`]: {
fontSize: iconSizeSM,
lineHeight: `${unit(iconSizeSM)}`,
lineHeight: unit(iconSizeSM),
transform: 'none',
},
},

4
components/steps/style/vertical.ts
View File

@ -28,7 +28,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
overflow: 'hidden',
},
[`${componentCls}-item-title`]: {
lineHeight: `${unit(iconSize)}`,
lineHeight: unit(iconSize),
},
[`${componentCls}-item-description`]: {
paddingBottom: token.paddingSM,
@ -69,7 +69,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
)}`,
},
[`${componentCls}-item-title`]: {
lineHeight: `${unit(iconSizeSM)}`,
lineHeight: unit(iconSizeSM),
},
},
},

3
components/style/roundedArrow.ts
View File

@ -1,8 +1,9 @@
/* eslint-disable import/prefer-default-export */
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import type { CSSUtil } from '../theme/internal';
import type { AliasToken } from '../theme/interface';
import type { CSSUtil } from '../theme/internal';
export interface ArrowToken {
/** @internal */

2
components/switch/style/index.ts
View File

@ -334,7 +334,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
boxSizing: 'border-box',
minWidth: trackMinWidth,
height: trackHeight,
lineHeight: `${unit(trackHeight)}`,
lineHeight: unit(trackHeight),
verticalAlign: 'middle',
background: token.colorTextQuaternary,
border: '0',

5
components/tour/style/index.ts
View File

@ -36,7 +36,6 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
}
interface TourToken extends FullToken<'Tour'> {
tourZIndexPopup: number;
indicatorWidth: number | string;
indicatorHeight: number | string;
tourBorderRadius: number;
@ -55,7 +54,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
indicatorHeight,
indicatorWidth,
boxShadowTertiary,
tourZIndexPopup,
zIndexPopup,
colorBgElevated,
fontWeightStrong,
marginXS,
@ -75,7 +74,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
...resetComponent(token),
position: 'absolute',
zIndex: tourZIndexPopup,
zIndex: zIndexPopup,
maxWidth: 'fit-content',
visibility: 'visible',
width: 520,

15
components/tree-select/index.tsx
View File

@ -89,7 +89,10 @@ const InternalTreeSelect = <
ValueType = any,
OptionType extends BaseOptionType | DefaultOptionType = BaseOptionType,
>(
{
props: TreeSelectProps<ValueType, OptionType>,
ref: React.Ref<BaseSelectRef>,
) => {
const {
prefixCls: customizePrefixCls,
size: customizeSize,
disabled: customDisabled,
@ -119,10 +122,8 @@ const InternalTreeSelect = <
variant: customVariant,
dropdownStyle,
tagRender,
...props
}: TreeSelectProps<ValueType, OptionType>,
ref: React.Ref<BaseSelectRef>,
) => {
...restProps
} = props;
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
@ -203,7 +204,7 @@ const InternalTreeSelect = <
// ===================== Icons =====================
const { suffixIcon, removeIcon, clearIcon } = useIcons({
...props,
...restProps,
multiple: isMultiple,
showSuffixIcon,
hasFeedback,
@ -223,7 +224,7 @@ const InternalTreeSelect = <
}
// ==================== Render =====================
const selectProps = omit(props, [
const selectProps = omit(restProps, [
'suffixIcon',
'removeIcon',
'clearIcon',

32
components/tree/style/index.ts
View File

@ -4,7 +4,7 @@ import { Keyframes, unit } from '@ant-design/cssinjs';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { genFocusOutline, resetComponent } from '../../style';
import { genCollapseMotion } from '../../style/motion';
import type { AliasToken, FullToken, GetDefaultToken, CSSUtil } from '../../theme/internal';
import type { AliasToken, CSSUtil, FullToken, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface TreeSharedToken {
@ -159,7 +159,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
},
// ===================== TreeNode =====================
[`${treeNodeCls}`]: {
[treeNodeCls]: {
display: 'flex',
alignItems: 'flex-start',
padding: `0 0 ${unit(treeNodePadding)} 0`,
@ -197,7 +197,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
// https://github.com/ant-design/ant-design/issues/41915
flexShrink: 0,
width: titleHeight,
lineHeight: `${unit(titleHeight)}`,
lineHeight: unit(titleHeight),
textAlign: 'center',
visibility: 'visible',
opacity: 0.2,
@ -240,18 +240,32 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
alignSelf: 'stretch',
width: titleHeight,
margin: 0,
lineHeight: `${unit(titleHeight)}`,
lineHeight: unit(titleHeight),
textAlign: 'center',
cursor: 'pointer',
userSelect: 'none',
transition: `all ${token.motionDurationSlow}`,
borderRadius: token.borderRadius,
'&-noop': {
cursor: 'unset',
},
[`&:not(${treeCls}-switcher-noop):hover`]: {
'&:before': {
pointerEvents: 'none',
content: '""',
width: titleHeight,
height: titleHeight,
position: 'absolute',
left: {
_skip_check_: true,
value: 0,
},
top: 0,
borderRadius: token.borderRadius,
transition: `all ${token.motionDurationSlow}`,
},
[`&:not(${treeCls}-switcher-noop):hover:before`]: {
backgroundColor: token.colorBgTextHover,
},
@ -312,7 +326,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
margin: 0,
padding: `0 ${unit(token.calc(token.paddingXS).div(2).equal())}`,
color: 'inherit',
lineHeight: `${unit(titleHeight)}`,
lineHeight: unit(titleHeight),
background: 'transparent',
borderRadius: token.borderRadius,
cursor: 'pointer',
@ -331,7 +345,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
display: 'inline-block',
width: titleHeight,
height: titleHeight,
lineHeight: `${unit(titleHeight)}`,
lineHeight: unit(titleHeight),
textAlign: 'center',
verticalAlign: 'top',
@ -348,7 +362,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
// ==================== Draggable =====================
[`${treeCls}-node-content-wrapper`]: {
lineHeight: `${unit(titleHeight)}`,
lineHeight: unit(titleHeight),
userSelect: 'none',
...getDropIndicatorStyle(prefixCls, token),

8
components/watermark/index.en-US.md
View File

@ -77,3 +77,11 @@ When using an image watermark and the image loads abnormally, you can add `conte
<div style={{ height: 500 }} />
</Watermark>
```
### Why `overflow: hidden` style is added since version 5.18.0?
User can hide the watermark by setting the container height to 0 through the developer tool in the previous version. To avoid this situation, we added the `overflow: hidden` style to the container. When the container height changes, the content is also hidden. You can override the style to modify this behavior:
```tsx
<Watermark style={{ overflow: 'visible' }} />
```

8
components/watermark/index.zh-CN.md
View File

@ -78,3 +78,11 @@ tag: 5.1.0
<div style={{ height: 500 }} />
</Watermark>
```
### 从 5.18.0 版本后，为什么添加了 `overflow: hidden` 样式？
在之前版本，用户可以通过开发者工具将容器高度设置为 0 来隐藏水印，为了避免这种情况，我们在容器上添加了 `overflow: hidden` 样式。当容器高度变化时，则内容也一同被隐藏。你可以通过覆盖样式来修改这个行为：
```tsx
<Watermark style={{ overflow: 'visible' }} />
```

14
docs/react/faq.en-US.md
View File

@ -167,11 +167,9 @@ Like [the explanation](https://github.com/ant-design/ant-design/issues/11586#iss
Likewise, `disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
### Workaround
:::success{title=Workaround} You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs.
You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs.
Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we [added more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) to meet those requirements, and `disabledDate` could be effect on those pickers too.
Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we [added more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) to meet those requirements, and `disabledDate` could be effect on those pickers too. :::
## message/notification/Modal.confirm lost styles when set `prefixCls` on ConfigProvider?
@ -225,9 +223,11 @@ In the Ant Design Token system, `colorPrimary` and `colorInfo` are both [Seed To
## How to spell Ant Design correctly?
- ✅ **Ant Design**: Capitalized with space, for the design language.
- ✅ **antd**: all lowercase, for the React UI library.
- ✅ **ant.design**：For ant.design website url.
| Spelt | Usage | Pronunciation |
| --- | --- | --- |
| ✅ **Ant Design** | Capitalized with space, for the design language | - |
| ✅ **antd** | All lowercase, for the React UI library | <audio controls src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*ChCdRJ0w8SUAAAAAAAAAAAAADgCCAQ"></audio> |
| ✅ **ant.design** | For ant.design website url | - |
Here are some typical wrong examples:

14
docs/react/faq.zh-CN.md
View File

@ -190,11 +190,9 @@ npm ls dayjs
同样的，`disabledDate` 对于任何 `<DatePicker />` 也只会针对**日面板**生效，[并不会对 `<DatePicker mode="year/month" />` 上的年/月面板生效](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118)。
### 解决办法
:::success{title=解决办法} 你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法，利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。
你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法，利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。
另外我们已经在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加了更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求，现在不再需要使用 `mode="year|month"`，而是直接可以用 `YearPicker` `MonthPicker`，并且 `disabledDate` 也可以正确作用于这些 Picker。
另外我们已经在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加了更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求，现在不再需要使用 `mode="year|month"`，而是直接可以用 `YearPicker` `MonthPicker`，并且 `disabledDate` 也可以正确作用于这些 Picker。:::
## ConfigProvider 设置 `prefixCls` 后，message/notification/Modal.confirm 生成的节点样式丢失了？
@ -248,9 +246,11 @@ import { ConfigProvider } from 'antd';
## 如何正确的拼写 Ant Design？
- ✅ **Ant Design**：用空格分隔的首字母大写单词，指代设计语言。
- ✅ **antd**：全小写，指代 React UI 组件库。
- ✅ **ant.design**：特指 ant.design 网站网址。
| 拼写 | 用法 | 发音 |
| --- | --- | --- |
| ✅ **Ant Design** | 用空格分隔的首字母大写单词，指代设计语言 | - |
| ✅ **antd** | 全小写，指代 React UI 组件库 | <audio controls src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*ChCdRJ0w8SUAAAAAAAAAAAAADgCCAQ"></audio> |
| ✅ **ant.design** | 指 ant.design 网站 | - |
下面是一些典型的错误例子：

3
mako.config.json
View File

@ -8,5 +8,6 @@
},
"watch": {
"_nodeModulesRegexes": ["rc-.*"]
}
},
"hmr": false
}

6
package.json
View File

@ -106,7 +106,7 @@
"@ant-design/react-slick": "~1.1.2",
"@babel/runtime": "^7.24.8",
"@ctrl/tinycolor": "^3.6.1",
"@rc-component/color-picker": "~2.0.0",
"@rc-component/color-picker": "~2.0.1",
"@rc-component/mutate-observer": "^1.1.0",
"@rc-component/qrcode": "~1.0.0",
"@rc-component/tour": "~1.15.0",
@ -120,9 +120,9 @@
"rc-dialog": "~9.5.2",
"rc-drawer": "~7.2.0",
"rc-dropdown": "~4.2.0",
"rc-field-form": "~2.2.1",
"rc-field-form": "~2.3.0",
"rc-image": "~7.9.0",
"rc-input": "~1.6.2",
"rc-input": "~1.6.3",
"rc-input-number": "~9.2.0",
"rc-mentions": "~2.15.0",
"rc-menu": "~9.14.1",

6
scripts/visual-regression/upload.js
View File

@ -19,7 +19,7 @@ if (args.length < 2) {
const ALI_OSS_BUCKET = 'antd-visual-diff';
function retry(promise, retries, delay) {
function retry(promise, retries, delay = 3000) {
return new Promise((resolve, reject) => {
const attempt = () => {
promise.then(resolve).catch((error) => {
@ -136,7 +136,7 @@ async function boot() {
if (stat.isFile()) {
const doUpload = uploadFile(client, workspacePath, refValue);
try {
await retry(doUpload, 3, 1000);
await retry(doUpload, 3);
} catch (err) {
console.error(
'Uploading file `%s` failed after retry %s, error: %s',
@ -155,7 +155,7 @@ async function boot() {
const doUpload = uploadFile(client, file, refValue);
try {
// eslint-disable-next-line no-await-in-loop
await retry(doUpload, 3, 1000);
await retry(doUpload, 3);
} catch (err) {
console.warn(
'Skip uploading file `%s` in folder `%s` failed after retry %s, error: %s',