mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore: auto merge branches (#44995)

Browse Source 
chore: feature merge master
This commit is contained in:
github-actions[bot] 2023-09-21 09:30:12 +00:00 committed by GitHub
commit 081b33d7b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 240 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.dumi/theme/builtins/ColorChunk/index.tsx
View File

@ -4,7 +4,7 @@ import * as React from 'react';
interface ColorChunkProps {
children?: React.ReactNode;
color?: ColorInput;
value?: ColorInput;
}
const useStyle = createStyles(({ token, css }) => ({
@ -27,12 +27,12 @@ const useStyle = createStyles(({ token, css }) => ({
const ColorChunk: React.FC<ColorChunkProps> = (props) => {
const { styles } = useStyle();
const { color, children } = props;
const { value, children } = props;
const dotColor = React.useMemo(() => {
const _color = new TinyColor(color).toHex8String();
const _color = new TinyColor(value).toHex8String();
return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
}, [color]);
}, [value]);
return (
<span className={styles.codeSpan}>

2
.dumi/theme/builtins/TokenTable/index.tsx
View File

@ -78,7 +78,7 @@ export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefine
typeof record.value === 'string' &&
(record.value.startsWith('#') || record.value.startsWith('rgb'));
if (isColor) {
return <ColorChunk color={record.value}>{record.value}</ColorChunk>;
return <ColorChunk value={record.value}>{record.value}</ColorChunk>;
}
return typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value;
},

8
.dumi/theme/common/styles/Common.tsx
View File

@ -63,6 +63,14 @@ export default () => {
html {
scroll-padding-top: ${headerHeight + margin}px;
}
[data-prefers-color='dark'] {
color-scheme: dark;
}
[data-prefers-color='light'] {
color-scheme: light;
}
`}
/>
);

4
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -80,6 +80,10 @@ const GlobalLayout: React.FC = () => {
...nextSearchParams,
theme: value.filter((t) => t !== 'light'),
});
document
.querySelector('html')
?.setAttribute('data-prefers-color', value.includes('dark') ? 'dark' : 'light');
}
});

13
.dumi/theme/slots/Header/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
import { Alert, Col, Popover, Row, Select } from 'antd';
import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import dayjs from 'dayjs';
@ -120,9 +120,9 @@ const useStyle = createStyles(({ token, css }) => {
},
banner: css`
width: 100%;
background: #daf5eb;
text-align: center;
word-break: keep-all;
user-select: none;
`,
link: css`
margin-left: 10px;
@ -136,9 +136,6 @@ const useStyle = createStyles(({ token, css }) => {
width: 22px;
height: 22px;
`,
message: css`
color: rgba(0, 0, 0, 0.88);
`,
};
});
@ -364,6 +361,7 @@ const Header: React.FC = () => {
</Popover>
)}
{isZhCN && bannerVisible && (
<ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
<Alert
className={styles.banner}
message={
@ -373,9 +371,7 @@ const Header: React.FC = () => {
src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
alt="yuque"
/>
<span className={styles.message}>
{isMobile ? locale.shortMessage : locale.message}
</span>
<span>{isMobile ? locale.shortMessage : locale.message}</span>
<a
className={styles.link}
href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
@ -398,6 +394,7 @@ const Header: React.FC = () => {
showIcon={false}
onClose={onBannerClose}
/>
</ConfigProvider>
)}
<Row style={{ flexFlow: 'nowrap', height: 64 }}>
<Col {...colProps[0]}>

1
.dumirc.ts
View File

@ -6,6 +6,7 @@ import { version } from './package.json';
import * as fs from 'fs-extra';
export default defineConfig({
plugins: ['dumi-plugin-color-chunk'],
conventionRoutes: {
// to avoid generate routes for .dumi/pages/index/components/xx
exclude: [new RegExp('index/components/')],

2
components/_util/placements.ts
View File

@ -1,5 +1,6 @@
/* eslint-disable default-case */
import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
import { getArrowOffset } from '../style/placementArrow';
export interface AdjustOverflow {
@ -155,6 +156,7 @@ export default function getPlacements(config: PlacementsConfig) {
const placementInfo = {
...template,
offset: [0, 0],
dynamicInset: true,
};
placementMap[key] = placementInfo;

1
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -42316,6 +42316,7 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] =
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>

16
components/dropdown/__tests__/index.test.tsx
View File

@ -1,11 +1,12 @@
import type { TriggerProps } from '@rc-component/trigger';
import React from 'react';
import type { TriggerProps } from '@rc-component/trigger';
import type { DropDownProps } from '..';
import Dropdown from '..';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning';
let triggerProps: TriggerProps;
@ -252,4 +253,15 @@ describe('Dropdown', () => {
errorSpy.mockRestore();
});
it('not block ref', () => {
const divRef = React.createRef<HTMLDivElement>();
render(
<Dropdown open dropdownRender={() => <div ref={divRef} />}>
<a />
</Dropdown>,
);
expect(divRef.current).toBeTruthy();
});
});

1
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5464,6 +5464,7 @@ Array [
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>

1
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -2899,6 +2899,7 @@ Array [
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>

1
components/form/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -940,6 +940,7 @@ exports[`Form form should support disabled 1`] = `
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>

9
components/form/__tests__/index.test.tsx
View File

@ -1715,20 +1715,21 @@ describe('Form', () => {
const App2 = () => <Form disabled>{renderComps()}</Form>;
const wrapper2 = render(<App2 />);
// 时间范围组件中会有两个 input 框，因此虽然上述只有 18 个组件，但，实际有 19 个 带有 disabled 属性的表单组件
expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(19);
// 时间范围组件中会有两个 input 框，Upload 为叠加
// 因此虽然上述只有 18 个组件，但实际有 20 个 带有 disabled 属性的表单组件
expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(20);
const App3 = () => <Form disabled>{renderComps(true)}</Form>;
const wrapper3 = render(<App3 />);
expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(19);
expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(20);
const App4 = () => <Form>{renderComps(true)}</Form>;
const wrapper4 = render(<App4 />);
expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(19);
expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(20);
const App5 = () => <Form>{renderComps()}</Form>;

10
components/menu/OverrideContext.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react';
import { supportNodeRef, useComposeRef } from 'rc-util';
import { NoCompactStyle } from '../space/Compact';
import type { MenuProps } from './menu';
import { supportNodeRef } from 'rc-util';
// Used for Dropdown only
export interface OverrideContextProps {
@ -35,12 +36,13 @@ export const OverrideProvider = React.forwardRef<
],
);
const canRef = supportNodeRef(children);
const mergedRef = useComposeRef(ref, canRef ? (children as any).ref : null);
return (
<OverrideContext.Provider value={context}>
<NoCompactStyle>
{supportNodeRef(children)
? React.cloneElement(children as React.ReactElement, { ref })
: children}
{canRef ? React.cloneElement(children as React.ReactElement, { ref: mergedRef }) : children}
</NoCompactStyle>
</OverrideContext.Provider>
);

2
components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -5,7 +5,7 @@ exports[`Popconfirm rtl render component should be rendered correctly in RTL dir
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
<div
class="ant-popover ant-popconfirm ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -12px; box-sizing: border-box;"
style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 12px;"
>
<div
class="ant-popover-arrow"

3
components/select/index.en-US.md
View File

@ -56,11 +56,10 @@ Common props ref：[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Show clear button | boolean | false | |
| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | |
| autoFocus | Get focus by default | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| clearIcon | The custom clear icon | ReactNode | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| defaultValue | Initial selected option | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |

7
components/select/index.zh-CN.md
View File

@ -56,12 +56,11 @@ demo:
### Select props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 支持清除 | boolean | false | |
| --- | --- | --- | --- | --- | --- |
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true | |
| autoFocus | 默认获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |
| bordered | 是否有边框 | boolean | true | | |
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| defaultValue | 指定默认选中的条目 | string \| string\[] \|<br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |

3
components/select/useBuiltinPlacements.tsx
View File

@ -1,4 +1,5 @@
import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
import type { PopupOverflow } from '../config-provider/context';
const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, AlignType> => {
@ -11,9 +12,7 @@ const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, Ali
shiftY: true,
},
htmlRegion,
_experimental: {
dynamicInset: true,
},
};
return {

2
components/slider/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -102,7 +102,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
exports[`Slider should show tooltip when hovering slider handler 2`] = `
<div
class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: 0px; box-sizing: border-box; pointer-events: none;"
style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 0px; pointer-events: none;"
>
<div
class="ant-tooltip-arrow"

2
components/theme/__tests__/token.test.tsx
View File

@ -148,7 +148,7 @@ describe('Theme', () => {
borderRadiusOuter: 6,
},
20: {
borderRadius: 16,
borderRadius: 20,
borderRadiusLG: 16,
borderRadiusSM: 8,
borderRadiusXS: 2,

2
components/theme/themes/shared/genRadius.ts
View File

@ -48,7 +48,7 @@ const genRadius = (
}
return {
borderRadius: radiusBase > 16 ? 16 : radiusBase,
borderRadius: radiusBase,
borderRadiusXS: radiusXS,
borderRadiusSM: radiusSM,
borderRadiusLG: radiusLG,

1
components/time-picker/index.en-US.md
View File

@ -55,7 +55,6 @@ dayjs.extend(customParseFormat)
| cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
| className | The className of picker | string | - | |
| clearIcon | The custom clear icon | ReactNode | - | |
| defaultValue | To set default time | [dayjs](http://day.js.org/) | - | |
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 4.19.0 |

1
components/time-picker/index.zh-CN.md
View File

@ -55,7 +55,6 @@ dayjs.extend(customParseFormat)
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
| className | 选择器类名 | string | - | |
| clearIcon | 自定义的清除图标 | ReactNode | - | |
| defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - | |
| disabled | 禁用全部操作 | boolean | false | |
| disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 4.19.0 |

40
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</span>
</div>
<div
style="margin-left: 70px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
style="margin-left: 78px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -100,7 +100,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -130,7 +130,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -160,7 +160,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
</div>
<div
style="width: 70px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
@ -251,7 +251,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
</div>
<div
style="width: 70px; margin-left: 304px; display: flex; flex-direction: column; row-gap: 8px;"
style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
@ -342,11 +342,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
</div>
<div
style="margin-left: 70px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
style="margin-left: 78px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -376,7 +376,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -406,7 +406,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
</div>
<button
class="ant-btn ant-btn-default"
style="width: 70px;"
style="width: 78px;"
type="button"
>
<span>
@ -1640,10 +1640,11 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2
exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
<div>
<div
style="margin-left: 70px; white-space: nowrap;"
style="display: flex; margin-left: 78px; white-space: nowrap; column-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1673,6 +1674,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1702,6 +1704,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1731,10 +1734,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
</div>
<div
style="width: 70px; float: left;"
style="display: flex; flex-direction: column; width: 78px; float: left; row-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1764,6 +1768,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1793,6 +1798,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1822,10 +1828,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
</div>
<div
style="width: 70px; margin-left: 304px;"
style="display: flex; flex-direction: column; width: 78px; margin-left: 336px; row-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1855,6 +1862,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1884,6 +1892,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1913,10 +1922,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
</div>
<div
style="margin-left: 70px; clear: both; white-space: nowrap;"
style="display: flex; margin-left: 78px; clear: both; white-space: nowrap; column-gap: 8px;"
>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1946,6 +1956,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>
@ -1975,6 +1986,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
</div>
<button
class="ant-btn ant-btn-default"
style="width: 78px;"
type="button"
>
<span>

40
components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</span>
</div>
<div
style="margin-left:70px;display:flex;flex-wrap:nowrap;column-gap:8px"
style="margin-left:78px;display:flex;flex-wrap:nowrap;column-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -79,7 +79,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -88,7 +88,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -97,7 +97,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
</div>
<div
style="width:70px;float:left;display:flex;flex-direction:column;row-gap:8px"
style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
>
<button
class="ant-btn ant-btn-default"
@ -125,7 +125,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
</div>
<div
style="width:70px;margin-left:304px;display:flex;flex-direction:column;row-gap:8px"
style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
>
<button
class="ant-btn ant-btn-default"
@ -153,11 +153,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
</div>
<div
style="margin-left:70px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
style="margin-left:78px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -166,7 +166,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -175,7 +175,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:70px"
style="width:78px"
type="button"
>
<span>
@ -733,10 +733,11 @@ exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
<div>
<div
style="margin-left:70px;white-space:nowrap"
style="display:flex;margin-left:78px;white-space:nowrap;column-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -745,6 +746,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -753,6 +755,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -761,10 +764,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
</div>
<div
style="width:70px;float:left"
style="display:flex;flex-direction:column;width:78px;float:left;row-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -773,6 +777,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -781,6 +786,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -789,10 +795,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
</div>
<div
style="width:70px;margin-left:304px"
style="display:flex;flex-direction:column;width:78px;margin-left:336px;row-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -801,6 +808,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -809,6 +817,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -817,10 +826,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
</div>
<div
style="margin-left:70px;clear:both;white-space:nowrap"
style="display:flex;margin-left:78px;clear:both;white-space:nowrap;column-gap:8px"
>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -829,6 +839,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>
@ -837,6 +848,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-default"
style="width:78px"
type="button"
>
<span>

2
components/tooltip/demo/arrow.tsx
View File

@ -3,7 +3,7 @@ import { Button, Divider, Segmented, Tooltip } from 'antd';
const text = <span>prompt text</span>;
const buttonWidth = 70;
const buttonWidth = 78;
const gap = 8;
const btnProps = {

65
components/tooltip/demo/placement.tsx
View File

@ -3,52 +3,83 @@ import { Button, Tooltip } from 'antd';
const text = <span>prompt text</span>;
const buttonWidth = 70;
const buttonWidth = 78;
const gap = 8;
const btnProps = {
style: {
width: buttonWidth,
},
};
const App: React.FC = () => (
<div>
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
<div style={{ display: 'flex', marginLeft: buttonWidth, whiteSpace: 'nowrap', columnGap: gap }}>
<Tooltip placement="topLeft" title={text}>
<Button>TL</Button>
<Button {...btnProps}>TL</Button>
</Tooltip>
<Tooltip placement="top" title={text}>
<Button>Top</Button>
<Button {...btnProps}>Top</Button>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<Button>TR</Button>
<Button {...btnProps}>TR</Button>
</Tooltip>
</div>
<div style={{ width: buttonWidth, float: 'left' }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: buttonWidth,
float: 'left',
rowGap: gap,
}}
>
<Tooltip placement="leftTop" title={text}>
<Button>LT</Button>
<Button {...btnProps}>LT</Button>
</Tooltip>
<Tooltip placement="left" title={text}>
<Button>Left</Button>
<Button {...btnProps}>Left</Button>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<Button>LB</Button>
<Button {...btnProps}>LB</Button>
</Tooltip>
</div>
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: buttonWidth,
marginLeft: buttonWidth * 4 + 24,
rowGap: gap,
}}
>
<Tooltip placement="rightTop" title={text}>
<Button>RT</Button>
<Button {...btnProps}>RT</Button>
</Tooltip>
<Tooltip placement="right" title={text}>
<Button>Right</Button>
<Button {...btnProps}>Right</Button>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<Button>RB</Button>
<Button {...btnProps}>RB</Button>
</Tooltip>
</div>
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
<div
style={{
display: 'flex',
marginLeft: buttonWidth,
clear: 'both',
whiteSpace: 'nowrap',
columnGap: gap,
}}
>
<Tooltip placement="bottomLeft" title={text}>
<Button>BL</Button>
<Button {...btnProps}>BL</Button>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<Button>Bottom</Button>
<Button {...btnProps}>Bottom</Button>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<Button>BR</Button>
<Button {...btnProps}>BR</Button>
</Tooltip>
</div>
</div>

16
docs/blog/color-picker.en-US.md
View File

@ -12,19 +12,19 @@ Before we start implementing, we need to understand a concept: color models. A c
### RGB Color Model
The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/266228482-f1ff94b1-e7ca-40c5-8512-1bc5ab79c388.jpg)
The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png)
In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `(255, 0, 0)`, green can be represented as `(0, 255, 0)`, and blue can be represented as `(0, 0, 255)`.
In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `rgb(255, 0, 0)`, green can be represented as `rgb(0, 255, 0)`, and blue can be represented as `rgb(0, 0, 255)`.
### HSV/HSB Color Model
The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/266231236-d68ad9d7-9654-4bc5-8489-7cc52f2aabb1.png)
The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png)
In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `(0, 100, 100)`, green can be represented as `(120, 100, 100)`, and blue can be represented as `(240, 100, 100)`.
In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `hsv(0, 100, 100)`, green can be represented as `hsv(120, 100, 100)`, and blue can be represented as `hsv(240, 100, 100)`.
### HEX Color Model
The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png)
The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/268841812-1b8310f5-322b-45ec-b768-d4115cf7091d.png)
This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers.
@ -111,3 +111,9 @@ So far, we have obtained a color picker with complete hue, saturation, and brigh
## Summary
Through this development journey, I have gained a deeper understanding of color models and the development process of Ant Design. Thanks to the Ant Design team for giving me this opportunity, and thank you all for reading. If you are interested in the implementation details, you can check out the source code implementation at [@rc-component/color-picker](https://github.com/react-component/color-picker).
## References
- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg

12
docs/blog/color-picker.zh-CN.md
View File

@ -14,13 +14,13 @@ author: Redjue
`RGB` 色彩模型是通过三原色（红、绿、蓝）的不同组合来表示色彩的，每个原色的取值范围是 0-255，三原色的组合可以表示 256<sup>3</sup> 种颜色，这些颜色可以组成一个立方体，如下图所示： ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png)
在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `(255, 0, 0)`，绿色可以表示为 `(0, 255, 0)`，蓝色可以表示为 `(0, 0, 255)`。
在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `rgb(255, 0, 0)`，绿色可以表示为 `rgb(0, 255, 0)`，蓝色可以表示为 `rgb(0, 0, 255)`。
### HSV/HSB 色彩模型
`HSV` 色彩模型是通过色相（Hue）、饱和度（Saturation）、明度（Value）来表示色彩的，其中色相的取值范围是 0-360，饱和度和明度的取值范围是 0-100。HSV 色彩模型可以用一个圆锥体来表示，如下图所示： ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png)
在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `(0, 100, 100)`，绿色可以表示为 `(120, 100, 100)`，蓝色可以表示为 `(240, 100, 100)`。
在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `hsv(0, 100, 100)`，绿色可以表示为 `hsv(120, 100, 100)`，蓝色可以表示为 `hsv(240, 100, 100)`。
### HEX 色彩模型
@ -114,8 +114,6 @@ const alpha = (offset.x + centerOffsetX) / width;
## 图片来源
https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg
- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg

2
docs/react/migration-v5.en-US.md
View File

@ -17,7 +17,7 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio
### Design specification
- Basic rounded corner adjustment, changed from `2px` to four layers of radius, which are `2px` `4px` `6px` and `8px`. For example, radius of default Button is modified from `2px` to `6px`.
- Primary color adjustment, changed from <ColorChunk color="#1890ff" /></ColorChunk> to <ColorChunk color="#1677ff" /></ColorChunk>.
- Primary color adjustment, changed from `#1890ff` to `#1677ff`.
- Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g).
- Overall reduction in wireframe usage.

2
docs/react/migration-v5.zh-CN.md
View File

@ -18,7 +18,7 @@ tag: Updated
### 设计规范调整
- 基础圆角调整，由统一的 `2px` 改为四级圆角，分别为 `2px` `4px` `6px` `8px`，分别应用于不同场景，比如默认尺寸的 Button 的圆角调整为了 `6px`。
- 主色调整，由 <ColorChunk color="#1890ff" /></ColorChunk> 改为 <ColorChunk color="#1677ff" /></ColorChunk>。
- 主色调整，由 `#1890ff` 改为 `#1677ff`。
- 整体阴影调整，由原本的三级阴影调整为两级，分别用于常驻页面的组件（如 Card）和交互反馈（如 Dropdown）。
- 部分组件内间距调整。
- 整体去线框化。

11
docs/spec/colors.en-US.md
View File

@ -46,16 +46,15 @@ If the above palettes do not meet your needs, you can choose a main color below,
We provide JavaScript usage for developers.
- **JavaScript**
```
```bash
npm install @ant-design/colors
```
```js
import { blue } from '@ant-design/colors';
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
console.log(blue.primary); // '#1890FF'
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'
```
More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
@ -70,7 +69,7 @@ We provide JavaScript usage for developers.
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is <ColorChunk color="#1890ff" /></ColorChunk>, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is `#1677ff`, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
### Functional Color

9
docs/spec/colors.zh-CN.md
View File

@ -54,16 +54,15 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
我们为程序员提供了色板的 JavaScript 的使用方式。
- **JavaScript**
```
npm install @ant-design/colors
```
```js
import { blue } from '@ant-design/colors';
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
console.log(blue.primary); // '#1890FF'
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'
```
更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
@ -78,7 +77,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 <ColorChunk color="#1890ff" /></ColorChunk>，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1677ff`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
### 功能色

9
package.json
View File

@ -118,12 +118,12 @@
"@rc-component/color-picker": "~1.4.1",
"@rc-component/mutate-observer": "^1.1.0",
"@rc-component/tour": "~1.10.0",
"@rc-component/trigger": "^1.15.6",
"@rc-component/trigger": "^1.16.0",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
"dayjs": "^1.11.1",
"qrcode.react": "^3.1.0",
"rc-cascader": "~3.16.0",
"rc-cascader": "~3.17.0",
"rc-checkbox": "~3.1.0",
"rc-collapse": "~3.7.1",
"rc-dialog": "~9.2.0",
@ -143,7 +143,7 @@
"rc-rate": "~2.12.0",
"rc-resize-observer": "^1.3.1",
"rc-segmented": "~2.2.2",
"rc-select": "~14.8.1",
"rc-select": "~14.9.0",
"rc-slider": "~10.2.1",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
@ -152,7 +152,7 @@
"rc-textarea": "~1.4.0",
"rc-tooltip": "~6.0.1",
"rc-tree": "~5.7.12",
"rc-tree-select": "~5.12.1",
"rc-tree-select": "~5.13.0",
"rc-upload": "~4.3.4",
"rc-util": "^5.37.0",
"scroll-into-view-if-needed": "^3.0.3",
@ -218,6 +218,7 @@
"crypto": "^1.0.1",
"dekko": "^0.2.1",
"dumi": "^2.2.10",
"dumi-plugin-color-chunk": "^1.0.2",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"esbuild-loader": "^4.0.0",
"eslint": "^8.40.0",