color-{index}
{color.toLowerCase()}
@@ -34,3 +40,5 @@ export default class ColorBlock extends Component {
);
}
}
+
+export default ColorBlock;
diff --git a/.dumi/theme/common/Color/ColorPaletteTool.jsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx
similarity index 73%
rename from .dumi/theme/common/Color/ColorPaletteTool.jsx
rename to .dumi/theme/common/Color/ColorPaletteTool.tsx
index 8a1936e1cde8..78cbe310a019 100644
--- a/.dumi/theme/common/Color/ColorPaletteTool.jsx
+++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
import React, { Component } from 'react';
import { FormattedMessage } from 'dumi';
import ColorPicker from './ColorPicker';
@@ -6,18 +7,17 @@ import ColorPatterns from './ColorPatterns';
const primaryMinSaturation = 70; // 主色推荐最小饱和度
const primaryMinBrightness = 70; // 主色推荐最小亮度
-export default class ColorPaletteTool extends Component {
+class ColorPaletteTool extends Component {
state = {
primaryColor: '#1890ff',
primaryColorInstance: null,
};
- handleChangeColor = (e, color) => {
- const value = e.target ? e.target.value : e;
- this.setState({
- primaryColor: value,
- primaryColorInstance: color,
- });
+ handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
+ const value = (e as ChangeEvent).target
+ ? (e as ChangeEvent).target.value
+ : e;
+ this.setState({ primaryColor: value, primaryColorInstance: color });
};
renderColorValidation() {
@@ -45,12 +45,10 @@ export default class ColorPaletteTool extends Component {
@@ -21136,57 +21144,61 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
role="tooltip"
>
-
+ {ColorPatterns({ color: primaryColor })}
- ).target
+ ? (e as ChangeEvent).target.value
+ : e;
+ this.setState({ primaryColor: value, primaryColorInstance: color });
};
- handleChangeBackgroundColor = (e) => {
- const value = e.target ? e.target.value : e;
- this.setState({
- backgroundColor: value,
- });
+ handleChangeBackgroundColor = (e: string | ChangeEvent) => {
+ const value = (e as ChangeEvent).target
+ ? (e as ChangeEvent).target.value
+ : e;
+ this.setState({ backgroundColor: value });
};
renderColorValidation() {
@@ -56,7 +56,7 @@ export default class ColorPaletteTool extends Component {
return (
@@ -67,11 +67,7 @@ export default class ColorPaletteTool extends Component {
{
diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx
index 58ebe6d3aba7..9de6c08de0a2 100644
--- a/.dumi/theme/common/Color/ColorStyle.tsx
+++ b/.dumi/theme/common/Color/ColorStyle.tsx
@@ -48,89 +48,89 @@ ${makeGrayPalette(index + 1)}
return (
{
+ hexColors: Record;
+
+ colorNodes: Record;
+
componentDidMount() {
this.hexColors = {};
- Object.keys(this.colorNodes).forEach((key) => {
+ Object.keys(this.colorNodes || {}).forEach((key) => {
const computedColor = getComputedStyle(this.colorNodes[key])['background-color'];
if (computedColor.includes('rgba')) {
this.hexColors[key] = computedColor;
@@ -34,10 +45,10 @@ export default class Palette extends React.Component {
showTitle,
direction,
dark,
- color: { name, description, english, chinese, count = 10 },
+ color: { name, description, english, chinese, count } = { name: 'gray', count: 13 },
} = this.props;
const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
- const colors = [];
+ const colors: React.ReactNode[] = [];
const colorName = `${english} / ${chinese}`;
const colorPaletteMap = {
dark: ['#fff', 'unset'],
@@ -88,6 +99,4 @@ export default class Palette extends React.Component {
}
}
-Palette.defaultProps = {
- color: { name: 'gray', count: 13 },
-};
+export default Palette;
diff --git a/.dumi/theme/common/ExternalLinkIcon.jsx b/.dumi/theme/common/ExternalLinkIcon.tsx
similarity index 79%
rename from .dumi/theme/common/ExternalLinkIcon.jsx
rename to .dumi/theme/common/ExternalLinkIcon.tsx
index a0429db503cd..f193d6a69559 100644
--- a/.dumi/theme/common/ExternalLinkIcon.jsx
+++ b/.dumi/theme/common/ExternalLinkIcon.tsx
@@ -1,13 +1,15 @@
import React from 'react';
import Icon from '@ant-design/icons';
-const SVGIcon = ({ color = 'currentColor' }) => (
+const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => (
);
-const ExternalLinkIcon = (props) =>
@@ -21047,59 +21051,63 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
role="tooltip"
>
-
- {colors.map((color) => (
-
- );
-};
-
-export default ColorPalettes;
diff --git a/.dumi/theme/common/Color/ColorPalettes.tsx b/.dumi/theme/common/Color/ColorPalettes.tsx
new file mode 100644
index 000000000000..b380e3f60da9
--- /dev/null
+++ b/.dumi/theme/common/Color/ColorPalettes.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import cls from 'classnames';
+import Palette from './Palette';
+
+const colors = [
+ {
+ name: 'red',
+ english: 'Dust Red',
+ chinese: '薄暮',
+ description: '斗志、奔放',
+ },
+ {
+ name: 'volcano',
+ english: 'Volcano',
+ chinese: '火山',
+ description: '醒目、澎湃',
+ },
+ {
+ name: 'orange',
+ english: 'Sunset Orange',
+ chinese: '日暮',
+ description: '温暖、欢快',
+ },
+ {
+ name: 'gold',
+ english: 'Calendula Gold',
+ chinese: '金盏花',
+ description: '活力、积极',
+ },
+ {
+ name: 'yellow',
+ english: 'Sunrise Yellow',
+ chinese: '日出',
+ description: '出生、阳光',
+ },
+ {
+ name: 'lime',
+ english: 'Lime',
+ chinese: '青柠',
+ description: '自然、生机',
+ },
+ {
+ name: 'green',
+ english: 'Polar Green',
+ chinese: '极光绿',
+ description: '健康、创新',
+ },
+ {
+ name: 'cyan',
+ english: 'Cyan',
+ chinese: '明青',
+ description: '希望、坚强',
+ },
+ {
+ name: 'blue',
+ english: 'Daybreak Blue',
+ chinese: '拂晓蓝',
+ description: '包容、科技、普惠',
+ },
+ {
+ name: 'geekblue',
+ english: 'Geek Blue',
+ chinese: '极客蓝',
+ description: '探索、钻研',
+ },
+ {
+ name: 'purple',
+ english: 'Golden Purple',
+ chinese: '酱紫',
+ description: '优雅、浪漫',
+ },
+ {
+ name: 'magenta',
+ english: 'Magenta',
+ chinese: '法式洋红',
+ description: '明快、感性',
+ },
+];
+
+const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => {
+ const { dark } = props;
+ const colorCls = cls('color-palettes', {
+ 'color-palettes-dark': !!dark,
+ });
+ return (
+
+ {colors.map((color) => (
+
+ );
+};
+
+export default ColorPalettes;
diff --git a/.dumi/theme/common/Color/ColorPatterns.jsx b/.dumi/theme/common/Color/ColorPatterns.tsx
similarity index 63%
rename from .dumi/theme/common/Color/ColorPatterns.jsx
rename to .dumi/theme/common/Color/ColorPatterns.tsx
index 6989b2021545..d40d88a0c997 100644
--- a/.dumi/theme/common/Color/ColorPatterns.jsx
+++ b/.dumi/theme/common/Color/ColorPatterns.tsx
@@ -3,9 +3,17 @@ import { generate } from '@ant-design/colors';
import uniq from 'lodash/uniq';
import ColorBlock from './ColorBlock';
-export default function ColorPatterns({ color, dark, backgroundColor }) {
+interface ColorPatternsProps {
+ color?: string;
+ dark?: boolean;
+ backgroundColor?: string;
+}
+
+const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
return uniq(colors).map((colorString, i) => (
-
-
-
-
@@ -21223,57 +21235,61 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
role="tooltip"
>
-
-
@@ -21310,57 +21326,61 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
role="tooltip"
>
-
-
@@ -21397,57 +21417,61 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
role="tooltip"
>
-
-
@@ -21484,57 +21508,61 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
role="tooltip"
>
-
-
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index d4857963a7db..56d90c1206cb 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -531,14 +531,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`&-date-panel
${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start
${pickerCellInnerCls}::after`]: {
- insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
+ insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2,
insetInlineStart: 0,
},
[`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]:
{
insetInlineEnd: 0,
- insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
+ insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2,
},
// Hover with range start & end
@@ -974,7 +974,9 @@ const genPickerStyle: GenerateStyle
+
,
]
`;
diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
index 8af60aeef21c..72e62c427198 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
@@ -33,6 +33,21 @@ Array [
role="separator"
style="height:60px;border-color:#7cb305"
/>,
+
+
+ Text
+
+
+
+
,
]
`;
diff --git a/components/divider/demo/customize-style.tsx b/components/divider/demo/customize-style.tsx
index d537eb0b547e..29621bb49838 100644
--- a/components/divider/demo/customize-style.tsx
+++ b/components/divider/demo/customize-style.tsx
@@ -10,6 +10,12 @@ const App: React.FC = () => (
+
+ Text
+
+
+
+
+ Text
+
+
);
diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx
index 118cfaabfd4f..ae8beabca275 100644
--- a/components/divider/style/index.tsx
+++ b/components/divider/style/index.tsx
@@ -45,6 +45,7 @@ const genSharedDividerStyle: GenerateStyle
-
- ,
-
- Hover me
-
-
-
-
-
-
-
-
,
-]
-`;
-
exports[`renders ./components/dropdown/demo/dropdown-button.tsx extend context correctly 1`] = `
-
-
-
-
`;
-exports[`renders ./components/dropdown/demo/deprecated.tsx correctly 1`] = `
-
-
@@ -10445,22 +10449,177 @@ exports[`Locale Provider should display the text as az 1`] = `
role="tooltip"
>
-
-
-`;
-
exports[`renders ./components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
- Hover me
-
-
-
-
-
-
-
- 1st menu item
-
- ),
- },
- {
- key: '2',
- label: (
-
- 2nd menu item (disabled)
-
- ),
- icon:
- e.preventDefault()}>
-
- Hover me
-
-
-
-);
-
-export default App;
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index f7ca2273eae9..4cebe1e212f8 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -13,40 +13,9 @@ A dropdown list.
When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
-### Usage upgrade after 4.24.0
-
-
- Hover me
-
-);
-
-// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
-const menu = (
-
-);
-return (
-
- Hover me
-
-);
-```
-
## Examples
-
- Hover me
-
-);
-
-// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻♀️
-const menu = (
-
-);
-return (
-
- Hover me
-
-);
-```
-
## 代码演示
- = (token) => {
- const { componentCls, floatButtonSize, margin, borderRadius } = token;
+ const { componentCls, floatButtonSize, margin, borderRadiusLG } = token;
const groupPrefixCls = `${componentCls}-group`;
return {
[groupPrefixCls]: {
@@ -95,7 +95,7 @@ const floatButtonGroupStyle: GenerateStyle = (token
minHeight: floatButtonSize,
insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd,
- borderRadius: token.borderRadius,
+ borderRadius: borderRadiusLG,
[`${groupPrefixCls}-wrap`]: {
zIndex: -1,
@@ -124,12 +124,12 @@ const floatButtonGroupStyle: GenerateStyle = (token
borderRadius: 0,
padding: 0,
'&:first-child': {
- borderStartStartRadius: borderRadius,
- borderStartEndRadius: borderRadius,
+ borderStartStartRadius: borderRadiusLG,
+ borderStartEndRadius: borderRadiusLG,
},
'&:last-child': {
- borderEndStartRadius: borderRadius,
- borderEndEndRadius: borderRadius,
+ borderEndStartRadius: borderRadiusLG,
+ borderEndEndRadius: borderRadiusLG,
},
'&:not(:last-child)': {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@@ -137,7 +137,7 @@ const floatButtonGroupStyle: GenerateStyle = (token
},
[`${groupPrefixCls}-wrap`]: {
display: 'block',
- borderRadius,
+ borderRadius: borderRadiusLG,
boxShadow: token.boxShadowSecondary,
overflow: 'hidden',
[`${componentCls}-square`]: {
@@ -146,12 +146,12 @@ const floatButtonGroupStyle: GenerateStyle = (token
borderRadius: 0,
padding: token.paddingXXS,
'&:first-child': {
- borderStartStartRadius: borderRadius,
- borderStartEndRadius: borderRadius,
+ borderStartStartRadius: borderRadiusLG,
+ borderStartEndRadius: borderRadiusLG,
},
'&:last-child': {
- borderEndStartRadius: borderRadius,
- borderEndEndRadius: borderRadius,
+ borderEndStartRadius: borderRadiusLG,
+ borderEndEndRadius: borderRadiusLG,
},
'&:not(:last-child)': {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@@ -183,7 +183,7 @@ const floatButtonGroupStyle: GenerateStyle = (token
// ============================== Shared ==============================
const sharedFloatButtonStyle: GenerateStyle = (token) => {
- const { componentCls, floatButtonIconSize, floatButtonSize } = token;
+ const { componentCls, floatButtonIconSize, floatButtonSize, borderRadiusLG } = token;
return {
[componentCls]: {
...resetComponent(token),
@@ -212,8 +212,8 @@ const sharedFloatButtonStyle: GenerateStyle = (toke
},
[`${componentCls}-body`]: {
- width: floatButtonSize,
- height: floatButtonSize,
+ width: '100%',
+ height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
@@ -247,7 +247,7 @@ const sharedFloatButtonStyle: GenerateStyle = (toke
[`${componentCls}-square`]: {
height: 'auto',
minHeight: floatButtonSize,
- borderRadius: token.borderRadius,
+ borderRadius: borderRadiusLG,
[`${componentCls}-body`]: {
height: 'auto',
borderRadius: token.borderRadiusSM,
diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
index 06a7b47b772c..21bd7061fcf6 100644
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -6,7 +6,6 @@ import type { Meta, NamePath } from 'rc-field-form/lib/interface';
import useState from 'rc-util/lib/hooks/useState';
import { supportRef } from 'rc-util/lib/ref';
import * as React from 'react';
-import { useContext } from 'react';
import useFormItemStatus from '../hooks/useFormItemStatus';
import { ConfigContext } from '../../config-provider';
import { cloneElement, isValidElement } from '../../_util/reactNode';
@@ -107,12 +106,12 @@ function InternalFormItem(props: FormItemProps): React.Rea
validateTrigger,
hidden,
} = props;
- const { getPrefixCls } = useContext(ConfigContext);
- const { name: formName } = useContext(FormContext);
+ const { getPrefixCls } = React.useContext(ConfigContext);
+ const { name: formName } = React.useContext(FormContext);
const isRenderProps = typeof children === 'function';
- const notifyParentMetaChange = useContext(NoStyleItemContext);
+ const notifyParentMetaChange = React.useContext(NoStyleItemContext);
- const { validateTrigger: contextValidateTrigger } = useContext(FieldContext);
+ const { validateTrigger: contextValidateTrigger } = React.useContext(FieldContext);
const mergedValidateTrigger =
validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
diff --git a/components/form/hooks/useForm.ts b/components/form/hooks/useForm.ts
index 60d87383fcdf..a553a58902cd 100644
--- a/components/form/hooks/useForm.ts
+++ b/components/form/hooks/useForm.ts
@@ -50,7 +50,7 @@ export default function useForm(form?: FormInstance): [For
scrollMode: 'if-needed',
block: 'nearest',
...options,
- });
+ } as any);
}
},
getFieldInstance: (name: NamePath) => {
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 04282e9357b2..fb08775bb0aa 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -440,10 +440,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
| whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | |
-## Migrate to v4
-
-If you are a user of v3, you can ref [migrate doc](/components/form/v3)。
-
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index bf6db0ffa47c..82be9021cf89 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -10,7 +10,7 @@ import {
VideoCameraOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
@@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
label: `nav ${index + 1}`,
}));
-const App: React.FC = () => (
-
-
-
-
-
-
-
-
-
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
+
+
+
+
+
+
+
+
+
+
-
-);
+ );
+};
export default App;
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 721ded4ea816..b68792873d19 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -5,22 +5,3 @@
## en-US
Fixed Header is generally used to fix the top navigation to facilitate page switching.
-
-```css
-#components-layout-demo-fixed .logo {
- float: left;
- width: 120px;
- height: 31px;
- margin: 16px 24px 16px 0;
- background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed .site-layout .site-layout-background {
- background: #fff;
-}
-```
-
-
diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx
index 5c7aa4abce93..79d2901f7326 100644
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -1,34 +1,46 @@
import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer } = Layout;
-const App: React.FC = () => (
-
-
-
-
-
-
- Home
- List
- App
-
-
-
-
-);
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
+
+
+
+
+
+
+ Home
+ List
+ App
+
+
+
+
+ );
+};
export default App;
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 3a50b89dd7d5..ee8ecb0d816a 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
margin: 16px;
background: rgba(255, 255, 255, 0.2);
}
-
-#components-layout-demo-responsive .site-layout-sub-header-background {
- background: #fff;
-}
-
-#components-layout-demo-responsive .site-layout-background {
- background: #fff;
-}
```
-
-
diff --git a/components/layout/demo/responsive.tsx b/components/layout/demo/responsive.tsx
index 35f47ebf8273..33d859935a0d 100644
--- a/components/layout/demo/responsive.tsx
+++ b/components/layout/demo/responsive.tsx
@@ -1,45 +1,49 @@
import React from 'react';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
-const App: React.FC = () => (
-
- {
- console.log(broken);
- }}
- onCollapse={(collapsed, type) => {
- console.log(collapsed, type);
- }}
- >
-
-
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
-
-
-
+ {
+ console.log(broken);
+ }}
+ onCollapse={(collapsed, type) => {
+ console.log(collapsed, type);
+ }}
+ >
+
+
+
+
+
+
+
-
-);
+ );
+};
export default App;
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 84ceff397b39..ef1954abf6ac 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -13,21 +13,3 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
-
-```css
-#components-layout-demo-side .logo {
- height: 32px;
- margin: 16px;
- background: rgba(255, 255, 255, 0.3);
-}
-
-#components-layout-demo-side .site-layout .site-layout-background {
- background: #fff;
-}
-```
-
-
diff --git a/components/layout/demo/side.tsx b/components/layout/demo/side.tsx
index 1e3b5a4ad9c6..9a6a98dc83e2 100644
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -7,7 +7,7 @@ import {
UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
@@ -41,21 +41,24 @@ const items: MenuItem[] = [
const App: React.FC = () => {
const [collapsed, setCollapsed] = useState(false);
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
return (
setCollapsed(value)}>
-
+
-
User
Bill
-
Basic usage (deprecated syntactic sugar)
Basic
Placement
Arrow
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index dacfd68b6494..c3802662cd1c 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -17,40 +17,9 @@ demo:
- 用于收罗一组命令操作。
- Select 用于选择，而 Dropdown 是命令集合。
-### 4.24.0 用法升级
-
-基础用法（废弃的语法糖）
基本
弹出位置
箭头
diff --git a/components/float-button/style/index.tsx b/components/float-button/style/index.tsx
index ce82dfdf7b8b..05d391d84618 100644
--- a/components/float-button/style/index.tsx
+++ b/components/float-button/style/index.tsx
@@ -80,7 +80,7 @@ const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
// ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle
-
- {index % 20 === 0 && index ? 'more' : '...'}
-
-
- ))
- }
-
- long content
- { - // indicates very long content - Array.from({ length: 100 }, (_, index) => ( --
+
+ {index % 20 === 0 && index ? 'more' : '...'}
+
+
+ ))
+ }
+
+ long content
+ { + // indicates very long content + Array.from({ length: 100 }, (_, index) => ( ++
- Content
-
- Content
+
- content
-
- content
+
+
-
-
-
-
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
-
-
-
-
-
- Home
- List
- App
-
-
- Content
-
+
+
+
+
+
+
+
+
+
+
+ Home
+ List
+ App
+
+
+ Content
+
+
-
-);
+ );
+};
export default App;
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 348bbf460381..7c3d0e5900a3 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
float: right;
margin: 16px 0 16px 24px;
}
-
-#components-layout-demo-top-side .site-layout-background {
- background: #fff;
-}
```
diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx
index 07c94906fed2..1a5933230c4d 100644
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
@@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
},
);
-const App: React.FC = () => (
-
-
-
-
-
-
-
- Home
- List
- App
-
-
-
-
-
- Content
-
-
-
-
-);
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
+
+
+
+
+
+
+
+ Home
+ List
+ App
+
+
+
+
+
+ Content
+
+
+
+
+ );
+};
export default App;
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 8daa32345f91..b5ffbe9e79f0 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
.site-layout-content {
min-height: 280px;
padding: 24px;
- background: #fff;
}
#components-layout-demo-top .logo {
float: left;
@@ -30,9 +29,3 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
margin: 16px 0 16px 24px;
}
```
-
-
diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx
index 4ce8c2f8dae9..ccb0292ac583 100644
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -1,35 +1,43 @@
import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer } = Layout;
-const App: React.FC = () => (
-
-
-
-
-
-
- Home
- List
- App
-
-
-
-
-);
+const App: React.FC = () => {
+ const {
+ token: { colorBgContainer },
+ } = theme.useToken();
+
+ return (
+
+
+
+
+
+
+ Home
+ List
+ App
+
+
+
+
+ );
+};
export default App;
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 222342567cb9..3f9668c0f9cc 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -126,12 +126,3 @@ The sidebar.
xxl: '1600px',
}
```
-
-
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 3fca43cd3f66..14021ad8ed87 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
xxl: '1600px',
}
```
-
-
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
index 0b4cd8b09523..da1c6c0fec49 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
@@ -5342,60 +5342,64 @@ exports[`Locale Provider should display the text as ar 1`] = `
role="tooltip"
>
-
Bill is a cat.
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 0ea4993b0517..638204f3b1fc 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
float: right;
margin: 16px 0 16px 24px;
}
-
-#components-layout-demo-top-side-2 .site-layout-background {
- background: #fff;
-}
```
diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx
index 0b90ce8d87a3..211633611f09 100644
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Sider } = Layout;
@@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
},
);
-const App: React.FC = () => (
- Content
-
+ Content
+
+
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ item
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -20651,60 +20663,64 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No data
-
-
-
-
-
+
+
+
+
@@ -15548,60 +15556,64 @@ exports[`Locale Provider should display the text as bg 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ элем.
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -35960,60 +35984,64 @@ exports[`Locale Provider should display the text as cs 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- элем.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Няма даных
-
-
-
-
-
+
+
+
+
@@ -30857,60 +30877,64 @@ exports[`Locale Provider should display the text as ca 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ element
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -51269,60 +51305,64 @@ exports[`Locale Provider should display the text as el 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- element
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ingen data
-
-
-
-
-
+
+
+
+
@@ -46166,60 +46198,64 @@ exports[`Locale Provider should display the text as de 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ item
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -66578,60 +66626,64 @@ exports[`Locale Provider should display the text as es 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No data
-
-
-
-
-
+
+
+
+
@@ -61475,60 +61519,64 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ kogus
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -77337,9 +77397,9 @@ exports[`Locale Provider should display the text as fa 1`] = `
- سپتامبر
+ آذر
-
-
-
-
-
-
-
- 0
- kogus
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Andmed puuduvad
-
-
-
-
-
+
+
+
+
@@ -73653,7 +73709,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
tabindex="-1"
type="button"
>
- سپتامبر
+ آذر
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ élément
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -97196,60 +97268,64 @@ exports[`Locale Provider should display the text as fr 3`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- élément
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Aucune donnée
-
-
-
-
-
+
+
+
+
@@ -92093,60 +92161,64 @@ exports[`Locale Provider should display the text as fr 2`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ item
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -112505,60 +112589,64 @@ exports[`Locale Provider should display the text as he 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No Data
-
-
-
-
-
+
+
+
+
@@ -107402,60 +107482,64 @@ exports[`Locale Provider should display the text as gl 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ तत्त्व
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -127814,60 +127910,64 @@ exports[`Locale Provider should display the text as hu 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- तत्त्व
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- कोई आकड़ा उपलब्ध नहीं है
-
-
-
-
-
+
+
+
+
@@ -122711,60 +122803,64 @@ exports[`Locale Provider should display the text as hr 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ պարագան
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -143123,60 +143231,64 @@ exports[`Locale Provider should display the text as is 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- պարագան
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Տվյալներ չկան
-
-
-
-
-
+
+
+
+
@@ -138020,60 +138124,64 @@ exports[`Locale Provider should display the text as id 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ elemento
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -158432,60 +158552,64 @@ exports[`Locale Provider should display the text as ka 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- elemento
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Nessun dato
-
-
-
-
-
+
+
+
+
@@ -153329,60 +153445,64 @@ exports[`Locale Provider should display the text as ja 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ элемент.
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -173739,60 +173871,64 @@ exports[`Locale Provider should display the text as kn 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- элемент.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Деректер жоқ
-
-
-
-
-
+
+
+
+
@@ -168638,60 +168766,64 @@ exports[`Locale Provider should display the text as km 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ 개
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -189048,60 +189192,64 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- 개
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 데이터 없음
-
-
-
-
-
+
+
+
+
@@ -183945,60 +184085,64 @@ exports[`Locale Provider should display the text as ku 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ vnt.
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -204357,60 +204513,64 @@ exports[`Locale Provider should display the text as mk 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- vnt.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Nėra duomenų
-
-
-
-
-
+
+
+
+
@@ -199254,60 +199406,64 @@ exports[`Locale Provider should display the text as lv 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ ഇനം
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -219666,60 +219834,64 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- ഇനം
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ഡാറ്റയൊന്നുമില്ല
-
-
-
-
-
+
+
+
+
@@ -214563,60 +214727,64 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ element
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -234975,60 +235155,64 @@ exports[`Locale Provider should display the text as nl 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- element
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ingen data
-
-
-
-
-
+
+
+
+
@@ -229872,60 +230048,64 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ item
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -250284,60 +250476,64 @@ exports[`Locale Provider should display the text as pt 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Geen gegevens
-
-
-
-
-
+
+
+
+
@@ -245181,60 +245369,64 @@ exports[`Locale Provider should display the text as pl 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ item
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -265593,60 +265797,64 @@ exports[`Locale Provider should display the text as ru 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Não há dados
-
-
-
-
-
+
+
+
+
@@ -260490,60 +260690,64 @@ exports[`Locale Provider should display the text as ro 1`] = `
role="tooltip"
>
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+ 0
+ අථකය
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
@@ -280902,60 +281118,64 @@ exports[`Locale Provider should display the text as sl 1`] = `
role="tooltip"
>
-
-
-
-
-
-
-
- 0
- අථකය
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- දත්ත නැත
-
-
-
-
-
+
+
+
+
@@ -275799,60 +276011,64 @@ exports[`Locale Provider should display the text as sk 1`] = `
role="tooltip"
>
-
- (
-
Basic usage (deprecated syntactic sugar)
Top Navigation
Inline menu
Collapsed inline menu
@@ -108,25 +78,6 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
| label | Menu label | ReactNode | - | |
| title | Set display title for collapsed item | string | - | |
-> Note: `icon` is a newly added prop in `4.2.0`. For previous versions, please use the following method to define the icon.
->
-> ```jsx
-> 基础用法（废弃的语法糖）
顶部导航
内嵌菜单
缩起内嵌菜单
@@ -109,25 +79,6 @@ return ;
| label | 菜单项标题 | ReactNode | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
-> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
->
-> ```jsx
-> {props.content}
-
- {cancelButton}
-
- {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
-
-
+ {footer !== undefined ? (
+ footer
+ ) : (
+
+ {cancelButton}
+
+ {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
+
+
+ )}
);
}}
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index e0962de51c0f..98898e8f7228 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -131,6 +131,7 @@ export interface ModalFuncProps {
direction?: DirectionType;
bodyStyle?: React.CSSProperties;
closeIcon?: React.ReactNode;
+ footer?: React.ReactNode;
modalRender?: (node: React.ReactNode) => React.ReactNode;
focusTriggerAfterClose?: boolean;
}
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 20d798fe889e..c252f2f0f23a 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -584,3 +584,245 @@ exports[`renders ./components/modal/demo/width.tsx extend context correctly 1`]
+
+`;
diff --git a/components/modal/__tests__/__snapshots__/demo.test.ts.snap b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
index e868f9b4bff7..0cd379ef1393 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
@@ -584,3 +584,245 @@ exports[`renders ./components/modal/demo/width.tsx correctly 1`] = `
`;
+
+exports[`renders ./components/modal/demo/wireframe.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx
index 67a688e2b1db..a33852be0c34 100644
--- a/components/modal/__tests__/confirm.test.tsx
+++ b/components/modal/__tests__/confirm.test.tsx
@@ -703,4 +703,28 @@ describe('Modal.confirm triggers callbacks correctly', () => {
jest.useRealTimers();
errSpy.mockRestore();
});
+
+ it('null of Footer', async () => {
+ Modal.confirm({
+ footer: null,
+ });
+
+ await waitFakeTimer();
+
+ expect($$('.ant-modal-confirm-btns')).toHaveLength(0);
+ });
+
+ it('Update Footer', async () => {
+ Modal.confirm({
+ footer: (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ });
+ await waitFakeTimer();
+ expect($$('.custom-modal-footer')).toHaveLength(1);
+ });
});
diff --git a/components/modal/demo/wireframe.md b/components/modal/demo/wireframe.md
new file mode 100644
index 000000000000..2153d9000cb7
--- /dev/null
+++ b/components/modal/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe.
diff --git a/components/modal/demo/wireframe.tsx b/components/modal/demo/wireframe.tsx
new file mode 100644
index 000000000000..12039c267333
--- /dev/null
+++ b/components/modal/demo/wireframe.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ConfigProvider, Modal } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
+
+export default () => (
+
+
+ Hello World?!
+
+
+ A good news!
+
+
+ Some descriptions.
+
+
+ Custom modal content render
To customize the width of modal
\_InternalPanelDoNotUseOrYouWillBeFired
-控制弹框动画原点
+Control modal's animation origin position
+Wireframe
## API
@@ -97,6 +98,7 @@ The items listed above are all functions, expecting a settings object as paramet
| closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
| closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
| content | Content | ReactNode | - | |
+| footer | Footer content, set as `footer: null` when you don't need default buttons | ReactNode | - | 5.1.0 |
| getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
| icon | Custom icon | ReactNode | <QuestionCircle /> | |
| keyboard | Whether support press esc to close | boolean | true | |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 071abebbb4bf..2f700f388a68 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -34,7 +34,8 @@ demo:
自定义渲染对话框
自定义模态的宽度
\_InternalPanelDoNotUseOrYouWillBeFired
-control modal's animation origin position
+控制弹框动画原点
+线框风格
## API
@@ -100,6 +101,7 @@ demo:
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
| content | 内容 | ReactNode | - | |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0 |
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
| icon | 自定义图标 | ReactNode | <QuestionCircle /> | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
diff --git a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
index f4fe028d69b4..05a8a8d2261f 100644
--- a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4493,3 +4493,718 @@ Array [
,
]
`;
+
+exports[`renders ./components/pagination/demo/wireframe.tsx extend context correctly 1`] = `
+Array [
+ ,
+ , + , +] +`; diff --git a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap index a7724aea5c8a..665eeeadf73e 100644 --- a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap @@ -3217,3 +3217,486 @@ Array [ , ] `; + +exports[`renders ./components/pagination/demo/wireframe.tsx correctly 1`] = ` +Array [ + , +
, + , +] +`; diff --git a/components/pagination/demo/wireframe.md b/components/pagination/demo/wireframe.md new file mode 100644 index 000000000000..15b453e7045d --- /dev/null +++ b/components/pagination/demo/wireframe.md @@ -0,0 +1,7 @@ +## zh-CN + +线框化样式。 + +## en-US + +Wireframe style. diff --git a/components/pagination/demo/wireframe.tsx b/components/pagination/demo/wireframe.tsx new file mode 100644 index 000000000000..ba97dcd1a665 --- /dev/null +++ b/components/pagination/demo/wireframe.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { ConfigProvider, Pagination } from 'antd'; + +const App: React.FC = () => ( +
+
Total number
Show All
Prev and next
+Wireframe
## API
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
index f124d7c3cde1..b4a03d1c5ddc 100644
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@@ -26,6 +26,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAA
总数
全部展示
上一步和下一步
+线框风格
## API
diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx
index 6c9f25c3a1f6..9fb6bedee322 100644
--- a/components/popconfirm/PurePanel.tsx
+++ b/components/popconfirm/PurePanel.tsx
@@ -116,8 +116,7 @@ export default function PurePanel(props: PurePanelProps) {
placement={placement}
className={classNames(prefixCls, className)}
style={style}
- >
-
-
-
- Open Popconfirm with async logic
-
-
@@ -124,64 +128,68 @@ Array [
role="tooltip"
>
-
-
- Are you sure to delete this task?
-
-
@@ -218,64 +226,68 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx extend context
role="tooltip"
>
-
-
- Are you sure to delete this task?
-
-
@@ -335,68 +347,72 @@ Array [
role="tooltip"
>
-
+
- Are you sure to delete this task?
-
-
+
-
- Cancel
-
-
-
@@ -433,106 +449,7 @@ Array [
role="tooltip"
>
-
-
-
-
-
- ,
-]
-`;
-
-exports[`renders ./components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
-
- Are you sure to delete this task?
-
-
-
-
+
+
+
-
-
+
-
+
-
,
+]
+`;
+
+exports[`renders ./components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
+
-
+
-
-
-
- Are you sure to delete this task?
+ Delete the task
- Delete the task
+ Are you sure to delete this task?
+
@@ -696,7 +628,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
type="button"
>
- TR
+ Top
@@ -627,64 +555,68 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
-
- Delete the task
-
-
@@ -719,64 +651,164 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
+
+
+
+
@@ -907,64 +943,68 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
+
@@ -815,64 +847,68 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
+
+
+
+
+
+
- Delete the task
-
-
+
-
- Yes
-
-
+ Delete the task
+
+
-
-
- Delete the task
-
-
-
-
- Delete the task
-
-
@@ -999,64 +1039,68 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
-
- Delete the task
-
-
@@ -1095,64 +1139,164 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1164,7 +1308,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
type="button"
>
- Right
+ RB
+
+
+
+
+
+
- Delete the task
-
-
+
-
- Yes
-
-
+ Delete the task
+
+
@@ -1187,76 +1331,84 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
-
- Delete the task
-
-
@@ -1279,80 +1431,80 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
-
- Delete the task
-
-
@@ -1375,64 +1527,68 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
-
- Delete the task
-
-
@@ -1467,96 +1623,109 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
role="tooltip"
>
-
`;
+
+exports[`renders ./components/popover/demo/wireframe.tsx correctly 1`] = `
+Array [
+
-
-
- Delete the task
-
-
+
,
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
,
+]
+`;
diff --git a/components/popover/demo/wireframe.md b/components/popover/demo/wireframe.md
new file mode 100644
index 000000000000..da41370eba12
--- /dev/null
+++ b/components/popover/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框样式。
+
+## en-US
+
+Wireframe style.
diff --git a/components/popover/demo/wireframe.tsx b/components/popover/demo/wireframe.tsx
new file mode 100644
index 000000000000..c8cd85cef752
--- /dev/null
+++ b/components/popover/demo/wireframe.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ConfigProvider, Popover } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
+
+const content = (
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+);
+
+const App: React.FC = () => (
+ Content
+Content
+Arrow pointing
Hover with click popover
_InternalPanelDoNotUseOrYouWillBeFired
+Wireframe
## API
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index b655890d2456..8112324070f7 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -13,8 +13,6 @@ import useStyle from './style';
export interface PopoverProps extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction;
content?: React.ReactNode | RenderFunction;
- /** @internal Used For Popconfirm. Safe to remove. */
- _overlay?: React.ReactNode;
}
interface OverlayPorps {
@@ -41,7 +39,6 @@ const Popover = React.forwardRef箭头指向
悬停点击弹出窗口
_InternalPanelDoNotUseOrYouWillBeFired
+线框风格
## API
diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx
index 6f5f250bc761..26d811b94f3e 100644
--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@@ -36,7 +36,11 @@ const genBaseStyle: GenerateStyle
,
+
+
,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/base.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/customColor.tsx extend context correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/customSize.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/download.tsx extend context correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
,
+
+
,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/icon.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`] = `
+
+
+`;
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 000000000000..51e8a82e7078
--- /dev/null
+++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,363 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/qrcode/demo/Popover.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + QRCode is expired +
+ +
+`;
+
+exports[`renders ./components/qrcode/demo/base.tsx correctly 1`] = `
+
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/customColor.tsx correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/customSize.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/download.tsx correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/errorlevel.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
,
+
+
,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/icon.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = `
+
+
+`;
diff --git a/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap b/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000000..6dcb91c4b332
--- /dev/null
+++ b/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QRCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`;
+
+exports[`QRCode test should correct render 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + QRCode is expired +
+ +
+
+`;
+
+exports[`QRCode test should render \`null\` and console Error when value not exist 1`] = `null`;
diff --git a/components/qrcode/__tests__/demo-extend.test.ts b/components/qrcode/__tests__/demo-extend.test.ts
new file mode 100644
index 000000000000..79dea1e4faf5
--- /dev/null
+++ b/components/qrcode/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('qrcode');
diff --git a/components/qrcode/__tests__/demo.test.ts b/components/qrcode/__tests__/demo.test.ts
new file mode 100644
index 000000000000..1cb1d77dd4fd
--- /dev/null
+++ b/components/qrcode/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('qrcode');
diff --git a/components/qrcode/__tests__/image.test.ts b/components/qrcode/__tests__/image.test.ts
new file mode 100644
index 000000000000..df82d405e561
--- /dev/null
+++ b/components/qrcode/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('QRCode image', () => {
+ imageDemoTest('qrcode');
+});
diff --git a/components/qrcode/__tests__/index.test.tsx b/components/qrcode/__tests__/index.test.tsx
new file mode 100644
index 000000000000..8cd91d3ce0d0
--- /dev/null
+++ b/components/qrcode/__tests__/index.test.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import QRCode from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render } from '../../../tests/utils';
+import type { QRCodeProps } from '../interface';
+
+describe('QRCode test', () => {
+ mountTest(QRCode);
+ rtlTest(QRCode);
+
+ it('should correct render', () => {
+ const { container } = render(
+
+
+
+
+);
+
+export default App;
diff --git a/components/qrcode/demo/errorlevel.md b/components/qrcode/demo/errorlevel.md
new file mode 100644
index 000000000000..1df7f09c4606
--- /dev/null
+++ b/components/qrcode/demo/errorlevel.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 errorLevel 调整不同的容错等级。
+
+## en-US
+
+set Error Level.
diff --git a/components/qrcode/demo/errorlevel.tsx b/components/qrcode/demo/errorlevel.tsx
new file mode 100644
index 000000000000..0995a120a10f
--- /dev/null
+++ b/components/qrcode/demo/errorlevel.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import type { QRCodeProps } from 'antd';
+import { Segmented, QRCode } from 'antd';
+
+const App: React.FC = () => {
+ const [level, setLevel] = useStatebase
+With Icon
+other statu
+Custom Size
+Custom Color
+Download QRCode
+Error Level
+Advanced Usage
+
+## API
+
+> This component is available since `antd@5.1.0`
+
+| Property | Description | Type | Default |
+| :-- | :-- | :-- | :-- |
+| value | scanned link | string | - |
+| icon | include image url (only image link are supported) | string | - |
+| size | QRCode size | number | 128 |
+| iconSize | include image size | number | 32 |
+| color | QRCode Color | string | `#000` |
+| bordered | Whether has border style | boolean | `true` |
+| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
+| status | QRCode statu | `active \| expired \| loading ` | `active` |
+| onRefresh | callback | `() => void` | - |
+
+## FAQ
+
+### About QRCode ErrorLevel
+
+The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
+
+Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
+
+> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)
diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
new file mode 100644
index 000000000000..b47d7da9288f
--- /dev/null
+++ b/components/qrcode/index.tsx
@@ -0,0 +1,100 @@
+import React, { useMemo, useContext } from 'react';
+import { QRCodeCanvas } from 'qrcode.react';
+import classNames from 'classnames';
+import { ReloadOutlined } from '@ant-design/icons';
+import { ConfigContext } from '../config-provider';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import type { ConfigConsumerProps } from '../config-provider';
+import type { QRCodeProps, QRPropsCanvas } from './interface';
+import warning from '../_util/warning';
+import useStyle from './style/index';
+import Spin from '../spin';
+import Button from '../button';
+import theme from '../theme';
+
+const { useToken } = theme;
+
+const QRCode: React.FC
+ {status !== 'active' && (
+
+ )}
+
+ {status === 'loading' &&
+ )}
+ {locale.expired}
+ {typeof onRefresh === 'function' && ( + } onClick={onRefresh}> + {locale.refresh} + + )} + + )} +基本使用
+带 Icon 的例子
+不同的状态
+自定义尺寸
+自定义颜色
+下载二维码
+纠错比例
+高级用法
+
+## API
+
+> 自 `antd@5.1.0` 版本开始提供该组件。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| value | 扫描后的地址 | string | - |
+| icon | 二维码中图片的地址（目前只支持图片地址） | string | - |
+| size | 二维码大小 | number | 160 |
+| iconSize | 二维码中图片的大小 | number | 40 |
+| color | 二维码颜色 | string | `#000` |
+| bordered | 是否有边框 | boolean | `true` |
+| errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
+| status | 二维码状态 | `active \| expired \| loading ` | `active` |
+| onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
+
+## FAQ
+
+### 关于二维码纠错等级
+
+纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+
+通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约`30%` 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+
+> 有关更多信息，可参阅相关资料：[https://www.qrcode.com/zh/about/error_correction](https://www.qrcode.com/zh/about/error_correction.html)
diff --git a/components/qrcode/interface.ts b/components/qrcode/interface.ts
new file mode 100644
index 000000000000..bebeeacd78aa
--- /dev/null
+++ b/components/qrcode/interface.ts
@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+
+interface ImageSettings {
+ src: string;
+ height: number;
+ width: number;
+ excavate: boolean;
+ x?: number;
+ y?: number;
+}
+
+interface QRProps {
+ value: string;
+ size?: number;
+ color?: string;
+ style?: CSSProperties;
+ includeMargin?: boolean;
+ imageSettings?: ImageSettings;
+}
+
+export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes
+
+
+
+
+
,
+ , +
+
+
+
+
+
,
+]
+`;
diff --git a/components/radio/__tests__/__snapshots__/demo.test.ts.snap b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
index 1329b6fd0ce5..dba0a7465448 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
@@ -1372,3 +1372,175 @@ Array [
,
]
`;
+
+exports[`renders ./components/radio/demo/wireframe.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
,
+ , +
+
+
+
+
+
,
+]
+`;
diff --git a/components/radio/demo/wireframe.md b/components/radio/demo/wireframe.md
new file mode 100644
index 000000000000..5dfe42d65559
--- /dev/null
+++ b/components/radio/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe style.
diff --git a/components/radio/demo/wireframe.tsx b/components/radio/demo/wireframe.tsx
new file mode 100644
index 000000000000..00c1581e779b
--- /dev/null
+++ b/components/radio/demo/wireframe.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ConfigProvider, Radio } from 'antd';
+
+const App: React.FC = () => (
+ +
Radio.Group with name
Size
Solid radio button
-测试 Badge 的样式
+Badge style
+Wireframe
## API
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index c86d251da49b..40eb8a145873 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -27,7 +27,8 @@ demo:
单选组合 - 配合 name 使用
大小
填底的按钮样式
-Badge style
+测试 Badge 的样式
+线框风格
## API
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index c4a8bf02fc45..85629d0af29f 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
import RcCheckbox from 'rc-checkbox';
import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react';
-import { useContext } from 'react';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import { FormItemInputContext } from '../form/context';
@@ -19,7 +18,7 @@ const InternalRadio: React.ForwardRefRenderFunction
-
-`;
-
exports[`renders ./components/steps/demo/error.tsx extend context correctly 1`] = `
-
-
-
-
-
-
-
-
- Finished
-
-
- This is a description.
-
-
-
-
-
-
-
-
-
-
- In Progress
-
-
- Left 00:00:08
-
-
- This is a description.
-
-
-
-
-
-
-
-
-
-
- Waiting
-
-
- This is a description.
-
-
+
+`;
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 0f2c4bb839e2..f1fa3caf3c5d 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -384,139 +384,6 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx correctly 1
`;
-exports[`renders ./components/steps/demo/deprecated.tsx correctly 1`] = `
-
+
+
+
+
+
+
+
+
+ Finished
+
+
+ This is a description.
+
+
+
+
+
+
+
+
+
+
+ In Progress
+
+
+ Left 00:00:08
+
+
+ This is a description.
+
+
+
+
+
+
+
+
+
+
+ Waiting
+
+
+ This is a description.
+
+
-
-`;
-
exports[`renders ./components/steps/demo/error.tsx correctly 1`] = `
-
-
-
-
-
-
-
-
- Finished
-
-
- This is a description.
-
-
-
-
-
-
-
-
-
-
- In Progress
-
-
- Left 00:00:08
-
-
- This is a description.
-
-
-
-
-
-
-
-
-
-
- Waiting
-
-
- This is a description.
-
-
+
+`;
diff --git a/components/steps/demo/deprecated.md b/components/steps/demo/deprecated.md
deleted file mode 100644
index b31206f35781..000000000000
--- a/components/steps/demo/deprecated.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-简单的步骤条。
-
-## en-US
-
-The most basic step bar.
diff --git a/components/steps/demo/deprecated.tsx b/components/steps/demo/deprecated.tsx
deleted file mode 100644
index 30b1237ce24c..000000000000
--- a/components/steps/demo/deprecated.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Steps } from 'antd';
-
-const { Step } = Steps;
-const description = 'This is a description.';
-const App: React.FC = () => (
-
+
+
+
+
+
+
+
+
+ Finished
+
+
+ This is a description.
+
+
+
+
+
+
+
+
+
+
+ In Progress
+
+
+ Left 00:00:08
+
+
+ This is a description.
+
+
+
+
+
+
+
+
+
+
+ Waiting
+
+
+ This is a description.
+
+ Basic (deprecated syntactic sugar)
Basic
Mini version
With icon
@@ -49,6 +31,7 @@ return Progress Debug
Steps inside Steps
Inline Steps
+Wireframe
## API
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index ef9025c01642..da5d632b86eb 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -12,27 +12,9 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
-### 4.24.0 用法升级
-
-基本用法 (废弃的语法糖)
基本用法
迷你版
带图标的步骤条
@@ -50,6 +32,7 @@ return Progress Debug
Steps 嵌套 Steps
内联步骤
+线框风格
## API
diff --git a/components/style/compact-item.tsx b/components/style/compact-item.tsx
index 8165934c8cb1..236c79391363 100644
--- a/components/style/compact-item.tsx
+++ b/components/style/compact-item.tsx
@@ -2,26 +2,40 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken } from '../theme/internal';
+interface CompactItemOptions {
+ focus?: boolean;
+ /**
+ * Some component borders are implemented on child elements
+ * like `Select`
+ */
+ borderElCls?: string;
+ /**
+ * Some components have special `focus` className especially with popovers
+ * like `Select` and `DatePicker`
+ */
+ focusElCls?: string;
+}
+
// handle border collapse
-function compactItemBorder(
- token: DerivativeToken,
- borderedItemCls?: string,
- popoverFocusedCls?: string,
-): CSSObject {
- const childCombinator = borderedItemCls ? '> *' : '';
+function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject {
+ const childCombinator = options.borderElCls ? '> *' : '';
+ const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active']
+ .filter(Boolean)
+ .map((n) => `&:${n} ${childCombinator}`)
+ .join(',');
return {
'&-item:not(&-last-item)': {
marginInlineEnd: -token.lineWidth,
},
'&-item': {
- [`&:hover ${childCombinator}, &:focus ${childCombinator}, &:active ${childCombinator}`]: {
+ [hoverEffects]: {
zIndex: 2,
},
- ...(popoverFocusedCls
+ ...(options.focusElCls
? {
- [`&${popoverFocusedCls}`]: {
+ [`&${options.focusElCls}`]: {
zIndex: 2,
},
}
@@ -35,8 +49,8 @@ function compactItemBorder(
}
// handle border-radius
-function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string): CSSObject {
- const childCombinator = borderedElementCls ? `> ${borderedElementCls}` : '';
+function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject {
+ const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : '';
return {
[`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: {
@@ -64,18 +78,12 @@ function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string)
export function genCompactItemStyle(
token: DerivativeToken,
prefixCls: string,
- /** Some component borders are implemented on child elements like `Select` */
- borderedElementCls?: string,
- /**
- * Some components have special `focus` className especially with popovers like `Select` and
- * `DatePicker`
- */
- popoverFocusedCls?: string,
+ options: CompactItemOptions = { focus: true },
): CSSObject {
return {
'&-compact': {
- ...compactItemBorder(token, borderedElementCls, popoverFocusedCls),
- ...compactItemBorderRadius(prefixCls, borderedElementCls),
+ ...compactItemBorder(token, options),
+ ...compactItemBorderRadius(prefixCls, options),
},
};
}
diff --git a/components/style/index.tsx b/components/style/index.tsx
index 743ac86d504e..bcac9ee92a15 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -103,15 +103,11 @@ export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
},
});
-export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: string): CSSObject => {
- const { fontFamily, fontSize } = token;
-
+export const genCommonStyle = (componentPrefixCls: string): CSSObject => {
const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
return {
[rootPrefixSelector]: {
- fontFamily,
- fontSize,
boxSizing: 'border-box',
'&::before, &::after': {
diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx
index 2a5018ebb24a..d712357854cb 100644
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@@ -182,6 +182,7 @@ const genSwitchInnerStyle: GenerateStyle