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

Merge branch 'master' into master-merge-feature

Browse Source
This commit is contained in:
栗嘉男 2024-07-29 01:39:20 +08:00
commit 049915566d
103 changed files with 444 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/components/SemanticPreview.tsx
View File

@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
z-index: 999999;
box-shadow: 0 0 0 1px #fff;
pointer-events: none;
left: ${markPos[0] - MARK_BORDER_SIZE}px;
inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;
top: ${markPos[1] - MARK_BORDER_SIZE}px;
width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;

15
.dumi/pages/index/components/BannerRecommends.tsx
View File

@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { Badge, Carousel, Skeleton, Typography } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import useLocale from '../../../hooks/useLocale';
@ -57,6 +57,9 @@ const useStyle = createStyles(({ token, css, cx }) => {
}
`,
carousel,
bannerBg: css`
height: ${token.fontSize}px;
`,
};
});
@ -66,8 +69,8 @@ interface RecommendItemProps {
icons: Icon[];
className?: string;
}
const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
const token = useTheme();
const { styles } = useStyle();
if (!extra) {
@ -87,10 +90,10 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
<Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
{extra.description}
</Typography.Paragraph>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Flex justify="space-between" align="center">
<Typography.Text>{extra.date}</Typography.Text>
{icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
</div>
{icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
</Flex>
</a>
);

38
.dumi/pages/index/components/ComponentsList.tsx
View File

@ -12,7 +12,7 @@ import {
Tour,
Typography,
} from 'antd';
import { createStyles, css, useTheme } from 'antd-style';
import { createStyles, css } from 'antd-style';
import classNames from 'classnames';
import dayjs from 'dayjs';
@ -104,6 +104,13 @@ const useStyle = () => {
justify-content: center;
`,
carousel,
componentsList: css`
width: 100%;
overflow: hidden;
`,
mobileComponentsList: css`
margin: 0 ${token.margin}px;
`,
};
})();
};
@ -119,7 +126,7 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
{/* Decorator */}
<div
className={styles.cardCircle}
style={{ right: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
style={{ insetInlineEnd: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
/>
{/* Title */}
@ -142,7 +149,6 @@ interface ComponentItemProps {
}
const ComponentsList: React.FC = () => {
const token = useTheme();
const { styles } = useStyle();
const [locale] = useLocale(locales);
const { isMobile } = useContext(SiteContext);
@ -260,21 +266,33 @@ const ComponentsList: React.FC = () => {
);
return isMobile ? (
<div style={{ margin: '0 16px' }}>
<div className={styles.mobileComponentsList}>
<Carousel className={styles.carousel}>
{COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
<ComponentItem title={title} node={node} type={type} index={index} key={index} />
<ComponentItem
title={title}
node={node}
type={type}
index={index}
key={`mobile-item-${index}`}
/>
))}
</Carousel>
</div>
) : (
<div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
<div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
<Flex justify="center" className={styles.componentsList}>
<Flex align="stretch" gap="large">
{COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
<ComponentItem title={title} node={node} type={type} index={index} key={index} />
<ComponentItem
title={title}
node={node}
type={type}
index={index}
key={`desktop-item-${index}`}
/>
))}
</div>
</div>
</Flex>
</Flex>
);
};

9
.dumi/pages/index/components/DesignFramework.tsx
View File

@ -134,7 +134,7 @@ const DesignFramework: React.FC = () => {
<Col key={index} span={colSpan}>
<Link to={path}>
<div className={styles.card}>
<img alt={title} src={img} />
<img draggable={false} alt={title} src={img} />
<Typography.Title
level={4}
@ -158,7 +158,12 @@ const DesignFramework: React.FC = () => {
return (
<Col key={index} span={colSpan}>
<a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
<img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
<img
draggable={false}
alt={title}
src={img}
style={{ transform: `scale(${imgScale})` }}
/>
<Typography.Title
level={4}

27
.dumi/pages/index/components/PreviewBanner/index.tsx
View File

@ -1,7 +1,9 @@
import React, { Suspense } from 'react';
import { ConfigProvider, Flex, Typography } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import { useLocation } from 'dumi';
import useLocale from '../../../../hooks/useLocale';
import LinkButton from '../../../../theme/common/LinkButton';
import SiteContext from '../../../../theme/slots/SiteContext';
@ -26,6 +28,7 @@ const locales = {
const useStyle = () => {
const { direction } = React.useContext(ConfigProvider.ConfigContext);
const { isMobile } = React.useContext(SiteContext);
const isRTL = direction === 'rtl';
return createStyles(({ token, css, cx }) => {
const textShadow = `0 0 4px ${token.colorBgContainer}`;
@ -101,11 +104,23 @@ const useStyle = () => {
btnWrap: css`
margin-bottom: ${token.marginXL}px;
`,
bgImg: css`
position: absolute;
width: 240px;
`,
bgImgTop: css`
top: 0;
inset-inline-start: ${isMobile ? '-120px' : 0};
`,
bgImgBottom: css`
bottom: 120px;
inset-inline-end: ${isMobile ? 0 : '40%'};
`,
};
})();
};
const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
const { children } = props;
const [locale] = useLocale(locales);
const { styles } = useStyle();
@ -117,15 +132,17 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
<GroupMaskLayer>
{/* Image Left Top */}
<img
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
alt="bg"
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
draggable={false}
className={classNames(styles.bgImg, styles.bgImgTop)}
/>
{/* Image Right Top */}
<img
style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
alt="bg"
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
draggable={false}
className={classNames(styles.bgImg, styles.bgImgBottom)}
/>
<div className={styles.holder}>

5
.dumi/pages/index/components/Theme/BackgroundImage.tsx
View File

@ -14,7 +14,7 @@ const useStyle = createStyles(({ token }) => ({
image: css`
transition: all ${token.motionDurationSlow};
position: absolute;
left: 0;
inset-inline-start: 0;
top: 0;
height: 100%;
width: 100%;
@ -64,10 +64,11 @@ const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight
<source srcSet={entity.webp} type="image/webp" />
<source srcSet={entity.url} type="image/jpeg" />
<img
draggable={false}
className={cls}
style={{ ...style, opacity: isLight ? opacity : 0 }}
src={entity.url}
alt=""
alt="bg"
/>
</picture>
);

2
.dumi/pages/index/components/Theme/MobileCarousel.tsx
View File

@ -113,7 +113,7 @@ const MobileCarousel: React.FC<MobileCarouselProps> = (props) => {
<Carousel className={styles.carousel} afterChange={setCurrentSlider}>
{mobileImageConfigList.map((item, index) => (
<div key={index}>
<img src={item.imageSrc} className={styles.img} alt="" />
<img draggable={false} src={item.imageSrc} className={styles.img} alt="carousel" />
</div>
))}
</Carousel>

10
.dumi/pages/index/components/Theme/index.tsx
View File

@ -7,7 +7,7 @@ import {
QuestionCircleOutlined,
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import type { MenuProps, ThemeConfig, GetProp, ColorPickerProps } from 'antd';
import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
import {
Breadcrumb,
Card,
@ -195,23 +195,23 @@ const useStyle = createStyles(({ token, css, cx }) => {
position: absolute;
`,
leftTopImagePos: css`
left: 0;
inset-inline-start: 0;
top: -100px;
height: 500px;
`,
rightBottomPos: css`
right: 0;
inset-inline-end: 0;
bottom: -100px;
height: 287px;
`,
leftTopImage: css`
left: 50%;
inset-inline-start: 50%;
transform: translate3d(-900px, 0, 0);
top: -100px;
height: 500px;
`,
rightBottomImage: css`
right: 50%;
inset-inline-end: 50%;
transform: translate3d(750px, 0, 0);
bottom: -100px;
height: 287px;

7
.dumi/pages/index/index.tsx
View File

@ -15,7 +15,7 @@ const Theme = React.lazy(() => import('./components/Theme'));
const useStyle = createStyles(() => ({
image: css`
position: absolute;
left: 0;
inset-inline-start: 0;
top: -50px;
height: 160px;
`,
@ -78,12 +78,13 @@ const Homepage: React.FC = () => {
<Group
title={locale.designTitle}
description={locale.designDesc}
background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
background={isRootDark ? '#393F4A' : '#F5F8FF'}
decoration={
<img
draggable={false}
className={styles.image}
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
alt=""
alt="bg"
/>
}
>

4
.dumi/scripts/mirror-modal.js
View File

@ -50,8 +50,8 @@
.mirror-modal-dialog {
position: fixed;
top: 120px;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
margin: 0 auto;
width: 420px;
display: flex;

4
.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import * as AntdIcons from '@ant-design/icons';
import { Badge, App } from 'antd';
import { App, Badge } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import CopyToClipboard from 'react-copy-to-clipboard';
@ -33,7 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
content: 'Copied!';
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
color: #fff;

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

@ -11,21 +11,21 @@ const useStyle = createStyles(({ token, css }) => ({
card: css`
position: relative;
overflow: hidden;
.ant-card-cover {
.${token.antCls}-card-cover {
overflow: hidden;
}
img {
display: block;
transition: all ${token.motionDurationSlow} ease-out;
}
&:hover img {
transform: scale(1.3);
}
`,
badge: css`
position: absolute;
top: 8px;
right: 8px;
inset-inline-end: 8px;
padding: ${token.paddingXXS}px ${token.paddingXS}px;
color: #fff;
font-size: ${token.fontSizeSM}px;

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

@ -6,7 +6,7 @@ import classNames from 'classnames';
const useStyles = createStyles(({ cx, token }) => {
const play = css`
position: absolute;
right: ${token.paddingLG}px;
inset-inline-end: ${token.paddingLG}px;
bottom: ${token.paddingLG}px;
font-size: 64px;
display: flex;

4
.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
View File

@ -227,14 +227,14 @@ const useStyle = createStyles(({ token }) => ({
title: css`
position: absolute;
top: 20px;
left: 20px;
inset-inline-start: 20px;
font-size: ${token.fontSizeLG}px;
`,
tips: css`
display: flex;
position: absolute;
bottom: 20px;
right: 20px;
inset-inline-end: 20px;
`,
mvp: css`
margin-inline-end: ${token.marginMD}px;

4
.dumi/theme/common/BrowserFrame.tsx
View File

@ -10,7 +10,7 @@ const useStyle = createStyles(({ token, css }) => ({
&::before {
position: absolute;
top: -1.25em;
left: 1em;
inset-inline-start: 1em;
display: block;
width: 0.5em;
height: 0.5em;
@ -27,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => ({
display: block;
position: absolute;
top: -1.6em;
left: 5.5em;
inset-inline-start: 5.5em;
width: calc(100% - 6em);
height: 1.2em;
background-color: #fff;

4
.dumi/theme/common/CodePreview.tsx
View File

@ -40,9 +40,9 @@ const useStyle = createStyles(({ token, css }) => {
display: block;
position: absolute;
top: -5px;
left: -9px;
inset-inline-start: -9px;
bottom: -5px;
right: -9px;
inset-inline-end: -9px;
}
}
${antCls}-typography-copy:not(${antCls}-typography-copy-success) {

6
.dumi/theme/common/Color/ColorStyle.tsx
View File

@ -176,7 +176,7 @@ ${makeGrayPalette(index + 1)}
&-item &-value {
position: relative;
left: 3px;
inset-inline-start: 3px;
float: right;
transform: scale(0.85);
transform-origin: 100% 50%;
@ -203,7 +203,7 @@ ${makeGrayPalette(index + 1)}
.main-color:hover {
.main-color-value {
left: 0;
inset-inline-start: 0;
opacity: 0.7;
}
}
@ -264,7 +264,7 @@ ${makeGrayPalette(index + 1)}
&-value {
position: absolute;
bottom: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
text-align: center;
transform-origin: unset;

30
.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
View File

@ -28,7 +28,7 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
}
const useStyle = createStyles(({ token, css }) => ({
ref: css`
linkRef: css`
margin-inline-start: ${token.marginXS}px;
`,
bug: css`
@ -57,6 +57,16 @@ const useStyle = createStyles(({ token, css }) => ({
}
}
`,
extraLink: css`
font-size: ${token.fontSize}px;
`,
drawerContent: {
position: 'relative',
[`> ${token.antCls}-drawer-body`]: {
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
},
},
}));
export interface ComponentChangelogProps {
@ -117,7 +127,7 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
<span>{parsedChangelog}</span>
{/* Refs */}
{refs?.map((ref) => (
<a className={styles.ref} key={ref} href={ref} target="_blank" rel="noreferrer">
<a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
#{ref.match(/^.*\/(\d+)$/)?.[1]}
</a>
))}
@ -223,27 +233,21 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
return (
<>
<Button
icon={<HistoryOutlined />}
onClick={() => {
setShow(true);
}}
>
<Button icon={<HistoryOutlined />} onClick={() => setShow(true)}>
{locale.changelog}
</Button>
<Drawer
destroyOnClose
className={styles.drawerContent}
title={locale.changelog}
extra={
<Link style={{ fontSize: 14 }} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
<Link className={styles.extraLink} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
{locale.full}
</Link>
}
open={show}
width={width}
onClose={() => {
setShow(false);
}}
destroyOnClose
onClose={() => setShow(false)}
>
<Timeline items={timelineItems} />
</Drawer>

1
.dumi/theme/common/ThemeSwitch/index.tsx
View File

@ -35,7 +35,6 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
icon={<ThemeIcon />}
aria-label="Theme Switcher"
badge={{ dot: true }}
style={{ zIndex: 1010 }}
>
<Link
to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}

12
.dumi/theme/common/styles/Demo.tsx
View File

@ -108,7 +108,7 @@ const GlobalDemoStyles: React.FC = () => {
a.edit-button {
position: absolute;
top: 7px;
right: -16px;
inset-inline-end: -16px;
font-size: ${token.fontSizeSM}px;
text-decoration: none;
background: inherit;
@ -125,8 +125,8 @@ const GlobalDemoStyles: React.FC = () => {
}
${antCls}-row${antCls}-row-rtl & {
right: auto;
left: -22px;
inset-inline-end: auto;
inset-inline-start: -22px;
}
}
@ -184,7 +184,7 @@ const GlobalDemoStyles: React.FC = () => {
.code-expand-icon-hide {
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
max-width: 100%;
margin: 0;
@ -193,8 +193,8 @@ const GlobalDemoStyles: React.FC = () => {
user-select: none;
${antCls}-row-rtl & {
right: 0;
left: auto;
inset-inline-end: 0;
inset-inline-start: auto;
}
}

3
.dumi/theme/common/styles/Markdown.tsx
View File

@ -24,6 +24,7 @@ const GlobalStyle: React.FC = () => {
}
.markdown img {
display: block;
max-width: calc(100% - 32px);
max-height: 100%;
}
@ -183,6 +184,8 @@ const GlobalStyle: React.FC = () => {
background-color: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
> pre.prism-code {
scrollbar-width: thin;
scrollbar-color: unset;
padding: ${token.paddingSM}px ${token.paddingMD}px;
font-size: ${token.fontSize}px;
line-height: 2;

6
.dumi/theme/common/styles/PreviewImage.tsx
View File

@ -70,14 +70,14 @@ export default () => {
+ svg {
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
}
}
.preview-image-wrapper.good::after {
position: absolute;
bottom: 0;
left: 0;
inset-inline-start: 0;
display: block;
width: 100%;
height: 3px;
@ -88,7 +88,7 @@ export default () => {
.preview-image-wrapper.bad::after {
position: absolute;
bottom: 0;
left: 0;
inset-inline-start: 0;
display: block;
width: 100%;
height: 3px;

6
.dumi/theme/common/styles/Responsive.tsx
View File

@ -11,7 +11,7 @@ export default () => {
.nav-phone-icon {
position: absolute;
bottom: 17px;
right: 30px;
inset-inline-end: 30px;
z-index: 1;
display: none;
width: 16px;
@ -98,8 +98,8 @@ export default () => {
.drawer {
.ant-menu-inline .ant-menu-item::after,
.ant-menu-vertical .ant-menu-item::after {
right: auto;
left: 0;
inset-inline-end: auto;
inset-inline-start: 0;
}
}

4
.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
View File

@ -15,8 +15,8 @@ const useStyle = createStyles(({ token, css }) => {
affixTabs: css`
position: fixed;
top: 0;
right: 0;
left: 0;
inset-inline-end: 0;
inset-inline-start: 0;
z-index: 1001;
padding: 0 40px;
background: #fff;

10
.dumi/theme/slots/Content/ColumnCard.tsx
View File

@ -28,7 +28,7 @@ const useStyle = createStyles(({ token, css }) => ({
justify-content: space-between;
align-items: center;
`,
left: css`
leftCard: css`
display: flex;
justify-content: flex-start;
align-items: center;
@ -117,7 +117,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
card,
bigTitle,
cardBody,
left,
leftCard,
title,
subTitle,
logo,
@ -136,7 +136,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
<>
<Divider />
<div className={cardBody}>
<div className={left}>
<div className={leftCard}>
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
@ -170,7 +170,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
<>
<Divider />
<div className={cardBody}>
<div className={left}>
<div className={leftCard}>
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>
@ -204,7 +204,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
<>
<Divider />
<div className={cardBody}>
<div className={left}>
<div className={leftCard}>
<img draggable={false} src={ANTD_IMG_URL} alt="antd" />
<div>
<p className={title}>Ant Design</p>

4
.dumi/theme/slots/Footer/AdditionalInfo.tsx
View File

@ -23,8 +23,8 @@ const locales = {
const useStyle = createStyles(({ css, token }) => ({
container: css`
position: fixed;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
z-index: 99999999;

4
.dumi/theme/slots/Header/SwitchBtn.tsx
View File

@ -69,7 +69,7 @@ const useStyle = createStyles(({ token, css }) => {
color: ${colorText};
`,
label1Style: css`
left: -5%;
inset-inline-start: -5%;
top: 0;
z-index: 1;
background-color: ${colorText};
@ -78,7 +78,7 @@ const useStyle = createStyles(({ token, css }) => {
transform-origin: 0 0;
`,
label2Style: css`
right: -5%;
inset-inline-end: -5%;
bottom: 0;
z-index: 0;
transform: scale(0.5);

2
.github/workflows/visual-regression-diff-finish.yml vendored
View File

@ -145,7 +145,7 @@ jobs:
- `current workflow` summary:
- `download report artifact` status: ${{ steps.download_report.outcome }}
- `report upload` status: ${{ steps.report.outcome }}
- job url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/jobs/${{ github.job }}
- workflow url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'
number: ${{ steps.pr.outputs.id }}

2
components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -90,7 +90,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 2`
exports[`renders components/affix/demo/target.tsx extend context correctly 1`] = `
<div
style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #40a9ff;"
style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #1677ff;"
>
<div
style="width: 100%; height: 1000px;"

2
components/affix/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
exports[`renders components/affix/demo/target.tsx correctly 1`] = `
<div
style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #40a9ff"
style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset"
>
<div
style="width:100%;height:1000px"

4
components/affix/demo/target.tsx
View File

@ -5,7 +5,9 @@ const containerStyle: React.CSSProperties = {
width: '100%',
height: 100,
overflow: 'auto',
boxShadow: '0 0 0 1px #40a9ff',
boxShadow: '0 0 0 1px #1677ff',
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
};
const style: React.CSSProperties = {

2
components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -770,7 +770,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx extend context correctl
</div>
</div>
<div
style="height: 30vh; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; width: 75%; color: rgb(255, 255, 255);"
style="height: 30vh; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; inset-inline-start: 0; width: 75%; color: rgb(255, 255, 255);"
>
<div>
Fixed Top Block

2
components/anchor/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -742,7 +742,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx correctly 1`] = `
</div>
</div>
<div
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
style="height:30vh;background-color:rgba(0, 0, 0, 0.85);position:fixed;top:0;inset-inline-start:0;width:75%;color:#fff"
>
<div>
Fixed Top Block

42
components/anchor/demo/targetOffset.tsx
View File

@ -1,6 +1,16 @@
import React, { useEffect, useState } from 'react';
import { Anchor, Col, Row } from 'antd';
const style: React.CSSProperties = {
height: '30vh',
backgroundColor: 'rgba(0, 0, 0, 0.85)',
position: 'fixed',
top: 0,
insetInlineStart: 0,
width: '75%',
color: '#fff',
};
const App: React.FC = () => {
const topRef = React.useRef<HTMLDivElement>(null);
const [targetOffset, setTargetOffset] = useState<number>();
@ -30,38 +40,14 @@ const App: React.FC = () => {
<Anchor
targetOffset={targetOffset}
items={[
{
key: 'part-1',
href: '#part-1',
title: 'Part 1',
},
{
key: 'part-2',
href: '#part-2',
title: 'Part 2',
},
{
key: 'part-3',
href: '#part-3',
title: 'Part 3',
},
{ key: 'part-1', href: '#part-1', title: 'Part 1' },
{ key: 'part-2', href: '#part-2', title: 'Part 2' },
{ key: 'part-3', href: '#part-3', title: 'Part 3' },
]}
/>
</Col>
</Row>
<div
style={{
height: '30vh',
background: 'rgba(0,0,0,0.85)',
position: 'fixed',
top: 0,
left: 0,
width: '75%',
color: '#FFF',
}}
ref={topRef}
>
<div style={style} ref={topRef}>
<div>Fixed Top Block</div>
</div>
</div>

2
components/auto-complete/demo/certain-category.md
View File

@ -17,7 +17,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
padding-left: 16px;
padding-inline-start: 16px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {

37
components/badge/SingleNumber.tsx
View File

@ -8,28 +8,18 @@ export interface UnitNumberProps {
current?: boolean;
}
function UnitNumber({ prefixCls, value, current, offset = 0 }: UnitNumberProps) {
const UnitNumber: React.FC<Readonly<UnitNumberProps>> = (props) => {
const { prefixCls, value, current, offset = 0 } = props;
let style: React.CSSProperties | undefined;
if (offset) {
style = {
position: 'absolute',
top: `${offset}00%`,
left: 0,
};
style = { position: 'absolute', top: `${offset}00%`, left: 0 };
}
return (
<span
style={style}
className={classNames(`${prefixCls}-only-unit`, {
current,
})}
>
<span style={style} className={classNames(`${prefixCls}-only-unit`, { current })}>
{value}
</span>
);
}
};
export interface SingleNumberProps {
prefixCls: string;
@ -49,7 +39,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
return offset;
}
export default function SingleNumber(props: SingleNumberProps) {
const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
const { prefixCls, count: originCount, value: originValue } = props;
const value = Number(originValue);
const count = Math.abs(originCount);
@ -57,20 +47,15 @@ export default function SingleNumber(props: SingleNumberProps) {
const [prevCount, setPrevCount] = React.useState(count);
// ============================= Events =============================
const onTransitionEnd = () => {
const onTransitionEnd: React.TransitionEventHandler<HTMLSpanElement> = () => {
setPrevValue(value);
setPrevCount(count);
};
// Fallback if transition events are not supported
React.useEffect(() => {
const timeout = setTimeout(() => {
onTransitionEnd();
}, 1000);
return () => {
clearTimeout(timeout);
};
const timer = setTimeout(onTransitionEnd, 1000);
return () => clearTimeout(timer);
}, [value]);
// ============================= Render =============================
@ -121,4 +106,6 @@ export default function SingleNumber(props: SingleNumberProps) {
{unitNodes}
</span>
);
}
};
export default SingleNumber;

6
components/calendar/demo/lunar.tsx
View File

@ -24,15 +24,15 @@ const useStyle = createStyles(({ token, css, cx }) => {
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 40px;
max-height: 40px;
background: transparent;
transition: background 300ms;
transition: background-color 300ms;
border-radius: ${token.borderRadiusOuter}px;
border: 1px solid transparent;
box-sizing: border-box;

10
components/cascader/hooks/useBase.ts
View File

@ -1,15 +1,15 @@
import * as React from 'react';
import { ConfigContext } from '../../config-provider';
import type { RenderEmptyHandler } from '../../config-provider';
import type { DirectionType, RenderEmptyHandler } from '../../config-provider';
export default function useBase(
function useBase(
customizePrefixCls?: string,
direction?: 'ltr' | 'rtl',
direction?: DirectionType,
): [
prefixCls: string,
cascaderPrefixCls: string,
direction?: 'ltr' | 'rtl',
direction?: DirectionType,
renderEmpty?: RenderEmptyHandler,
] {
const { getPrefixCls, direction: rootDirection, renderEmpty } = React.useContext(ConfigContext);
@ -21,3 +21,5 @@ export default function useBase(
return [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty];
}
export default useBase;

15
components/cascader/hooks/useColumnIcons.tsx
View File

@ -3,11 +3,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import RightOutlined from '@ant-design/icons/RightOutlined';
export default function useColumnIcons(
prefixCls: string,
rtl: boolean,
expandIcon?: React.ReactNode,
) {
const useColumnIcons = (prefixCls: string, rtl: boolean, expandIcon?: React.ReactNode) => {
let mergedExpandIcon = expandIcon;
if (!expandIcon) {
mergedExpandIcon = rtl ? <LeftOutlined /> : <RightOutlined />;
@ -19,5 +15,10 @@ export default function useColumnIcons(
</span>
);
return [mergedExpandIcon, loadingIcon];
}
return React.useMemo<Readonly<[React.ReactNode, React.ReactNode]>>(
() => [mergedExpandIcon, loadingIcon] as const,
[mergedExpandIcon],
);
};
export default useColumnIcons;

2
components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -324,7 +324,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
class="ant-collapse-content-box"
>
<p
style="padding-left: 24px;"
style="padding-inline-start: 24px;"
>
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</p>

2
components/collapse/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -320,7 +320,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
class="ant-collapse-content-box"
>
<p
style="padding-left:24px"
style="padding-inline-start:24px"
>
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</p>

2
components/collapse/demo/borderless.tsx
View File

@ -3,7 +3,7 @@ import type { CollapseProps } from 'antd';
import { Collapse } from 'antd';
const text = (
<p style={{ paddingLeft: 24 }}>
<p style={{ paddingInlineStart: 24 }}>
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
as a welcome guest in many households across the world.
</p>

2
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -6077,7 +6077,7 @@ exports[`renders components/color-picker/demo/presets.tsx extend context correct
exports[`renders components/color-picker/demo/pure-panel.tsx extend context correctly 1`] = `
<div
style="padding-left: 100px;"
style="padding-inline-start: 100px;"
>
<div
style="padding-bottom: 0px; position: relative; min-width: 0;"

2
components/color-picker/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -292,7 +292,7 @@ exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `
exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
<div
style="padding-left:100px"
style="padding-inline-start:100px"
>
<div
style="padding-bottom:0;position:relative;min-width:0"

2
components/color-picker/demo/pure-panel.tsx
View File

@ -9,7 +9,7 @@ type Color = GetProp<ColorPickerProps, 'value'>;
const Demo: React.FC = () => {
const [color, setColor] = useState<Color>('#1677ff');
return (
<div style={{ paddingLeft: 100 }}>
<div style={{ paddingInlineStart: 100 }}>
<PureRenderColorPicker value={color} onChange={setColor} />
</div>
);

13
components/config-provider/demo/direction.md
View File

@ -9,13 +9,13 @@ Components which support rtl direction are listed here, you can toggle the direc
```css
.button-demo .ant-btn,
.button-demo .ant-btn-group {
margin-right: 8px;
margin-inline-end: 8px;
margin-bottom: 12px;
}
.button-demo .ant-btn-group > .ant-btn,
.button-demo .ant-btn-group > span > .ant-btn {
margin-right: 0;
margin-left: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}
.head-example {
@ -28,10 +28,11 @@ Components which support rtl direction are listed here, you can toggle the direc
}
.ant-badge:not(.ant-badge-not-a-wrapper) {
margin-right: 20px;
margin-inline-end: 20px;
}
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
margin-inline-end: 0;
margin-inline-start: 20px;
}
```

8
components/config-provider/demo/direction.tsx
View File

@ -492,17 +492,13 @@ const App: React.FC = () => {
const changeDirection = (e: RadioChangeEvent) => {
const directionValue = e.target.value;
setDirection(directionValue);
if (directionValue === 'rtl') {
setPlacement('bottomRight');
} else {
setPlacement('bottomLeft');
}
setPlacement(directionValue === 'rtl' ? 'bottomRight' : 'bottomLeft');
};
return (
<>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change direction of components:</span>
<span style={{ marginInlineEnd: 16 }}>Change direction of components:</span>
<Radio.Group defaultValue="ltr" onChange={changeDirection}>
<Radio.Button key="ltr" value="ltr">
LTR

2
components/config-provider/demo/locale.tsx
View File

@ -223,7 +223,7 @@ const App: React.FC = () => {
return (
<>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change locale of components:</span>
<span style={{ marginInlineEnd: 16 }}>Change locale of components:</span>
<Radio.Group value={locale} onChange={changeLocale}>
<Radio.Button key="en" value={enUS}>
English

8
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -28,9 +28,9 @@ import { TIME } from './constant';
import type { RangePickerProps } from './interface';
import useComponents from './useComponents';
export default function generateRangePicker<DateType extends AnyObject>(
const generateRangePicker = <DateType extends AnyObject = AnyObject>(
generateConfig: GenerateConfig<DateType>,
) {
) => {
type DateRangePickerProps = RangePickerProps<DateType>;
const RangePicker = forwardRef<PickerRef, DateRangePickerProps>((props, ref) => {
@ -179,4 +179,6 @@ export default function generateRangePicker<DateType extends AnyObject>(
}
return RangePicker;
}
};
export default generateRangePicker;

4
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -39,7 +39,9 @@ import {
import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
import useComponents from './useComponents';
const generatePicker = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
const generatePicker = <DateType extends AnyObject = AnyObject>(
generateConfig: GenerateConfig<DateType>,
) => {
type DatePickerProps = PickerProps<DateType>;
type TimePickerProps = GenericTimePickerProps<DateType>;

6
components/date-picker/generatePicker/index.tsx
View File

@ -6,7 +6,9 @@ import generateSinglePicker from './generateSinglePicker';
export type { PickerLocale, PickerProps } from './interface';
function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) {
const generatePicker = <DateType extends AnyObject = AnyObject>(
generateConfig: GenerateConfig<DateType>,
) => {
// =========================== Picker ===========================
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
generateSinglePicker(generateConfig);
@ -39,6 +41,6 @@ function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConf
}
return MergedDatePicker;
}
};
export default generatePicker;

21
components/date-picker/locale/pl_PL.ts
View File

@ -8,6 +8,27 @@ const locale: PickerLocale = {
lang: {
placeholder: 'Wybierz datę',
rangePlaceholder: ['Data początkowa', 'Data końcowa'],
yearFormat: 'YYYY',
dateFormat: 'M/D/YYYY',
dayFormat: 'D',
dateTimeFormat: 'M/D/YYYY HH:mm:ss',
monthFormat: 'MMMM',
monthBeforeYear: true,
shortWeekDays: ['Niedz', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
shortMonths: [
'Sty',
'Lut',
'Mar',
'Kwi',
'Maj',
'Cze',
'Lip',
'Sie',
'Wrz',
'Paź',
'Lis',
'Gru',
],
...CalendarLocale,
},
timePickerLocale: {

2
components/drawer/__tests__/MultiDrawer.test.tsx
View File

@ -86,7 +86,7 @@ const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
borderRadius: '0 0 4px 4px',
}}
>
<Button style={{ marginRight: 8 }} onClick={onClose}>
<Button style={{ marginInlineEnd: 8 }} onClick={onClose}>
Cancel
</Button>
<Button onClick={onClose} type="primary">

4
components/drawer/demo/form-in-drawer.md
View File

@ -9,8 +9,8 @@ Use a form in Drawer with a submit button.
```css
.site-form-in-drawer-wrapper {
position: absolute;
right: 0px;
bottom: 0px;
inset-inline-end: 0;
bottom: 0;
width: 100%;
padding: 10px 16px;
text-align: right;

2
components/drawer/demo/user-profile.md
View File

@ -24,7 +24,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
.site-description-item-profile-p-label {
display: inline-block;
margin-right: 8px;
margin-inline-end: 8px;
color: rgba(0, 0, 0, 0.85);
}
```

28
components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -34,7 +34,7 @@ exports[`renders components/float-button/demo/badge.tsx extend context correctly
Array [
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right: 164px;"
style="inset-inline-end: 164px;"
type="button"
>
<span
@ -79,7 +79,7 @@ Array [
</button>,
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right: 94px;"
style="inset-inline-end: 94px;"
>
<a
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -554,7 +554,7 @@ exports[`renders components/float-button/demo/controlled.tsx extend context corr
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 24px;"
style="inset-inline-end: 24px;"
>
<div
class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap"
@ -709,7 +709,7 @@ exports[`renders components/float-button/demo/description.tsx extend context cor
Array [
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 24px;"
style="inset-inline-end: 24px;"
type="button"
>
<div
@ -751,7 +751,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 94px;"
style="inset-inline-end: 94px;"
type="button"
>
<div
@ -770,7 +770,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right: 164px;"
style="inset-inline-end: 164px;"
type="button"
>
<div
@ -819,7 +819,7 @@ exports[`renders components/float-button/demo/group.tsx extend context correctly
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right: 24px;"
style="inset-inline-end: 24px;"
>
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -935,7 +935,7 @@ Array [
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
style="right: 94px;"
style="inset-inline-end: 94px;"
>
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1094,7 +1094,7 @@ exports[`renders components/float-button/demo/group-menu.tsx extend context corr
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 24px;"
style="inset-inline-end: 24px;"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1135,7 +1135,7 @@ Array [
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right: 94px;"
style="inset-inline-end: 94px;"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1579,7 +1579,7 @@ exports[`renders components/float-button/demo/shape.tsx extend context correctly
Array [
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right: 94px;"
style="inset-inline-end: 94px;"
type="button"
>
<div
@ -1616,7 +1616,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right: 24px;"
style="inset-inline-end: 24px;"
type="button"
>
<div
@ -1722,7 +1722,7 @@ exports[`renders components/float-button/demo/type.tsx extend context correctly
Array [
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right: 24px;"
style="inset-inline-end: 24px;"
type="button"
>
<div
@ -1762,7 +1762,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right: 94px;"
style="inset-inline-end: 94px;"
type="button"
>
<div

28
components/float-button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -32,7 +32,7 @@ exports[`renders components/float-button/demo/badge.tsx correctly 1`] = `
Array [
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right:164px"
style="inset-inline-end:164px"
type="button"
>
<span
@ -77,7 +77,7 @@ Array [
</button>,
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right:94px"
style="inset-inline-end:94px"
>
<a
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -506,7 +506,7 @@ exports[`renders components/float-button/demo/controlled.tsx correctly 1`] = `
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px"
style="inset-inline-end:24px"
>
<div
class="ant-float-btn-group-wrap"
@ -659,7 +659,7 @@ exports[`renders components/float-button/demo/description.tsx correctly 1`] = `
Array [
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:24px"
style="inset-inline-end:24px"
type="button"
>
<div
@ -701,7 +701,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:94px"
style="inset-inline-end:94px"
type="button"
>
<div
@ -720,7 +720,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
style="right:164px"
style="inset-inline-end:164px"
type="button"
>
<div
@ -767,7 +767,7 @@ exports[`renders components/float-button/demo/group.tsx correctly 1`] = `
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
style="right:24px"
style="inset-inline-end:24px"
>
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -883,7 +883,7 @@ Array [
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
style="right:94px"
style="inset-inline-end:94px"
>
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1040,7 +1040,7 @@ exports[`renders components/float-button/demo/group-menu.tsx correctly 1`] = `
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:24px"
style="inset-inline-end:24px"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1081,7 +1081,7 @@ Array [
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
style="right:94px"
style="inset-inline-end:94px"
>
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1521,7 +1521,7 @@ exports[`renders components/float-button/demo/shape.tsx correctly 1`] = `
Array [
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:94px"
style="inset-inline-end:94px"
type="button"
>
<div
@ -1558,7 +1558,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
style="right:24px"
style="inset-inline-end:24px"
type="button"
>
<div
@ -1639,7 +1639,7 @@ exports[`renders components/float-button/demo/type.tsx correctly 1`] = `
Array [
<button
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
style="right:24px"
style="inset-inline-end:24px"
type="button"
>
<div
@ -1679,7 +1679,7 @@ Array [
</button>,
<button
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
style="right:94px"
style="inset-inline-end:94px"
type="button"
>
<div

4
components/float-button/demo/badge.tsx
View File

@ -4,8 +4,8 @@ import { FloatButton } from 'antd';
const App: React.FC = () => (
<>
<FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
<FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
<FloatButton shape="circle" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />
<FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 + 70 }}>
<FloatButton
href="https://ant.design/index-cn"
tooltip={<div>custom badge color</div>}

2
components/float-button/demo/controlled.tsx
View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
<FloatButton.Group
open={open}
trigger="click"
style={{ right: 24 }}
style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />

6
components/float-button/demo/description.tsx
View File

@ -8,14 +8,14 @@ const App: React.FC = () => (
icon={<FileTextOutlined />}
description="HELP INFO"
shape="square"
style={{ right: 24 }}
style={{ insetInlineEnd: 24 }}
/>
<FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} />
<FloatButton description="HELP INFO" shape="square" style={{ insetInlineEnd: 94 }} />
<FloatButton
icon={<FileTextOutlined />}
description="HELP"
shape="square"
style={{ right: 164 }}
style={{ insetInlineEnd: 164 }}
/>
</>
);

4
components/float-button/demo/group-menu.tsx
View File

@ -7,7 +7,7 @@ const App: React.FC = () => (
<FloatButton.Group
trigger="click"
type="primary"
style={{ right: 24 }}
style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
@ -16,7 +16,7 @@ const App: React.FC = () => (
<FloatButton.Group
trigger="hover"
type="primary"
style={{ right: 94 }}
style={{ insetInlineEnd: 94 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />

4
components/float-button/demo/group.tsx
View File

@ -4,12 +4,12 @@ import { FloatButton } from 'antd';
const App: React.FC = () => (
<>
<FloatButton.Group shape="circle" style={{ right: 24 }}>
<FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 }}>
<FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton />
<FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group>
<FloatButton.Group shape="square" style={{ right: 94 }}>
<FloatButton.Group shape="square" style={{ insetInlineEnd: 94 }}>
<FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton />
<FloatButton icon={<SyncOutlined />} />

4
components/float-button/demo/shape.tsx
View File

@ -7,13 +7,13 @@ const App: React.FC = () => (
<FloatButton
shape="circle"
type="primary"
style={{ right: 94 }}
style={{ insetInlineEnd: 94 }}
icon={<CustomerServiceOutlined />}
/>
<FloatButton
shape="square"
type="primary"
style={{ right: 24 }}
style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />}
/>
</>

4
components/float-button/demo/type.tsx
View File

@ -4,8 +4,8 @@ import { FloatButton } from 'antd';
const App: React.FC = () => (
<>
<FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} />
<FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
<FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ insetInlineEnd: 24 }} />
<FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ insetInlineEnd: 94 }} />
</>
);

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

@ -21589,7 +21589,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
</div>
<span
class="ant-form-text"
style="margin-left: 8px;"
style="margin-inline-start: 8px;"
>
machines
</span>

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

@ -9012,7 +9012,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
</div>
<span
class="ant-form-text"
style="margin-left:8px"
style="margin-inline-start:8px"
>
machines
</span>

2
components/form/demo/validate-other.tsx
View File

@ -80,7 +80,7 @@ const App: React.FC = () => (
<Form.Item name="input-number" noStyle>
<InputNumber min={1} max={10} />
</Form.Item>
<span className="ant-form-text" style={{ marginLeft: 8 }}>
<span className="ant-form-text" style={{ marginInlineStart: 8 }}>
machines
</span>
</Form.Item>

2
components/grid/index.en-US.md
View File

@ -10,7 +10,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
## Design concept
<div class="grid-demo">
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
<img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
</div>
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

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

@ -11,7 +11,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
## 设计理念
<div class="grid-demo">
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
<img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
</div>
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。

2
components/image/demo/toolbarRender.md
View File

@ -10,7 +10,7 @@ You can customize the toolbar and add a button for downloading the original imag
.toolbar-wrapper {
position: fixed;
bottom: 32px;
left: 50%;
inset-inline-start: 50%;
padding: 0px 24px;
color: #fff;
font-size: 20px;

6
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -155,7 +155,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
class="demo-logo"
/>
<div
style="margin-left: 24px; font-size: 24px;"
style="margin-inline-start: 24px; font-size: 24px;"
>
Ant Design
</div>
@ -1353,7 +1353,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="overflow: auto; height: 100vh; position: fixed; left: 0px; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
>
<div
class="ant-layout-sider-children"
@ -1768,7 +1768,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
</aside>
<div
class="ant-layout"
style="margin-left: 200px;"
style="margin-inline-start: 200px;"
>
<header
class="ant-layout-header"

6
components/layout/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -153,7 +153,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
class="demo-logo"
/>
<div
style="margin-left:24px;font-size:24px"
style="margin-inline-start:24px;font-size:24px"
>
Ant Design
</div>
@ -747,7 +747,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="overflow:auto;height:100vh;position:fixed;left:0;top:0;bottom:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
@ -1018,7 +1018,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
</aside>
<div
class="ant-layout"
style="margin-left:200px"
style="margin-inline-start:200px"
>
<header
class="ant-layout-header"

2
components/layout/demo/component-token.tsx
View File

@ -48,7 +48,7 @@ const App: React.FC = () => {
<Layout>
<Header style={{ display: 'flex', alignItems: 'center' }}>
<div className="demo-logo" />
<div style={{ marginLeft: 24, fontSize: 24 }}>Ant Design</div>
<div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>
</Header>
<Layout>
<Sider width={200} style={{ background: colorBgContainer }}>

17
components/layout/demo/fixed-sider.tsx
View File

@ -14,6 +14,17 @@ import { Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const siderStyle: React.CSSProperties = {
overflow: 'auto',
height: '100vh',
position: 'fixed',
insetInlineStart: 0,
top: 0,
bottom: 0,
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
};
const items: MenuProps['items'] = [
UserOutlined,
VideoCameraOutlined,
@ -36,13 +47,11 @@ const App: React.FC = () => {
return (
<Layout hasSider>
<Sider
style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
>
<Sider style={siderStyle}>
<div className="demo-logo-vertical" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
</Sider>
<Layout style={{ marginLeft: 200 }}>
<Layout style={{ marginInlineStart: 200 }}>
<Header style={{ padding: 0, background: colorBgContainer }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div

42
components/locale/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -262107,7 +262107,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
tabindex="-1"
type="button"
>
wrz
wrzesień
</button>
<button
aria-label="year panel"
@ -262148,7 +262148,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
<thead>
<tr>
<th>
Pn
Pon
</th>
<th>
Wt
@ -262157,16 +262157,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
Śr
</th>
<th>
Cz
Czw
</th>
<th>
Pt
</th>
<th>
So
Sob
</th>
<th>
Nd
Niedz
</th>
</tr>
</thead>
@ -264332,7 +264332,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
tabindex="-1"
type="button"
>
wrz
wrzesień
</button>
<button
aria-label="year panel"
@ -264375,7 +264375,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
<thead>
<tr>
<th>
Pn
Pon
</th>
<th>
Wt
@ -264384,16 +264384,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
Śr
</th>
<th>
Cz
Czw
</th>
<th>
Pt
</th>
<th>
So
Sob
</th>
<th>
Nd
Niedz
</th>
</tr>
</thead>
@ -264876,7 +264876,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
tabindex="-1"
type="button"
>
paź
październik
</button>
<button
aria-label="year panel"
@ -264917,7 +264917,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
<thead>
<tr>
<th>
Pn
Pon
</th>
<th>
Wt
@ -264926,16 +264926,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
Śr
</th>
<th>
Cz
Czw
</th>
<th>
Pt
</th>
<th>
So
Sob
</th>
<th>
Nd
Niedz
</th>
</tr>
</thead>
@ -265980,9 +265980,9 @@ exports[`Locale Provider should display the text as pl 1`] = `
</span>
<span
class="ant-select-selection-item"
title="wrz"
title="Wrz"
>
wrz
Wrz
</span>
</div>
<span
@ -266072,7 +266072,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
<thead>
<tr>
<th>
Pn
Pon
</th>
<th>
Wt
@ -266081,16 +266081,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
Śr
</th>
<th>
Cz
Czw
</th>
<th>
Pt
</th>
<th>
So
Sob
</th>
<th>
Nd
Niedz
</th>
</tr>
</thead>

2
components/mentions/demo/async.md
View File

@ -10,6 +10,6 @@ async.
.antd-demo-dynamic-option img {
width: 20px;
height: 20px;
margin-right: 8px;
margin-inline-end: 8px;
}
</style>

5
components/modal/demo/modal-render.tsx
View File

@ -43,10 +43,7 @@ const App: React.FC = () => {
<Modal
title={
<div
style={{
width: '100%',
cursor: 'move',
}}
style={{ width: '100%', cursor: 'move' }}
onMouseOver={() => {
if (disabled) {
setDisabled(false);

9
components/popconfirm/demo/placement.md
View File

@ -8,15 +8,16 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
<style>
#popconfirm-demo-placement .ant-btn {
margin-left: 0;
margin-right: 8px;
margin-inline-start: 0;
margin-inline-end: 8px;
margin-bottom: 8px;
width: 70px;
text-align: center;
padding: 0;
}
#popconfirm-demo-placement .ant-btn-rtl {
margin-left: 8px;
margin-right: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
}
</style>

2
components/radio/demo/radiogroup-more.tsx
View File

@ -18,7 +18,7 @@ const App: React.FC = () => {
<Radio value={3}>Option C</Radio>
<Radio value={4}>
More...
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
{value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
</Radio>
</Space>
</Radio.Group>

6
components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1153,7 +1153,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div>
<div
class="ant-segmented ant-segmented-lg"
style="margin-right: 6px;"
style="margin-inline-end: 6px;"
>
<div
class="ant-segmented-group"
@ -1215,7 +1215,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div>
<div
class="ant-segmented"
style="margin-right: 6px;"
style="margin-inline-end: 6px;"
>
<div
class="ant-segmented-group"
@ -1276,7 +1276,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
<div>
<div
class="ant-segmented ant-segmented-sm"
style="margin-right: 6px;"
style="margin-inline-end: 6px;"
>
<div
class="ant-segmented-group"

6
components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1133,7 +1133,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div>
<div
class="ant-segmented ant-segmented-lg"
style="margin-right:6px"
style="margin-inline-end:6px"
>
<div
class="ant-segmented-group"
@ -1195,7 +1195,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div>
<div
class="ant-segmented"
style="margin-right:6px"
style="margin-inline-end:6px"
>
<div
class="ant-segmented-group"
@ -1256,7 +1256,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div>
<div
class="ant-segmented ant-segmented-sm"
style="margin-right:6px"
style="margin-inline-end:6px"
>
<div
class="ant-segmented-group"

18
components/segmented/demo/size-consistent.tsx
View File

@ -4,17 +4,29 @@ import { Button, Flex, Input, Segmented, Select } from 'antd';
const App: React.FC = () => (
<Flex gap="small" vertical>
<div>
<Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
<Segmented
size="large"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Button type="primary" size="large">
Button
</Button>
</div>
<div>
<Segmented style={{ marginRight: 6 }} options={['Daily', 'Weekly', 'Monthly']} />
<Segmented
size="middle"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Input placeholder="default size" style={{ width: 150 }} />
</div>
<div>
<Segmented style={{ marginRight: 6 }} size="small" options={['Daily', 'Weekly', 'Monthly']} />
<Segmented
size="small"
style={{ marginInlineEnd: 6 }}
options={['Daily', 'Weekly', 'Monthly']}
/>
<Select size="small" defaultValue="lucy" style={{ width: 150 }}>
<Select.Option value="lucy">Lucy</Select.Option>
</Select>

2
components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -9134,7 +9134,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="position: absolute; top: 0px; left: 50%; transform: translateX(-50%);"
style="position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%);"
>
<div
class="ant-space-item"

2
components/select/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -3150,7 +3150,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="position:absolute;top:0;left:50%;transform:translateX(-50%)"
style="position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%)"
>
<div
class="ant-space-item"

9
components/select/demo/placement-debug.tsx
View File

@ -35,7 +35,14 @@ const App: React.FC = () => {
position: 'relative',
}}
>
<Space style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)' }}>
<Space
style={{
position: 'absolute',
top: 0,
insetInlineStart: '50%',
transform: 'translateX(-50%)',
}}
>
<Radio.Group value={placement} onChange={placementChange}>
<Radio.Button value="topLeft">TL</Radio.Button>
<Radio.Button value="topRight">TR</Radio.Button>

2
components/skeleton/demo/list.tsx
View File

@ -20,7 +20,7 @@ const listData = Array.from({ length: 3 }).map((_, i) => ({
const IconText: React.FC<IconTextProps> = ({ icon, text }) => (
<>
{React.createElement(icon, { style: { marginRight: 8 } })}
{React.createElement(icon, { style: { marginInlineEnd: 8 } })}
{text}
</>
);

12
components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -190,7 +190,7 @@ Array [
/>
</div>,
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical"
@ -238,7 +238,7 @@ Array [
</div>
</div>,
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical"
@ -278,7 +278,7 @@ Array [
</div>
</div>,
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical ant-slider-with-marks"
@ -1688,7 +1688,7 @@ exports[`renders components/slider/demo/tip-formatter.tsx extend context correct
exports[`renders components/slider/demo/vertical.tsx extend context correctly 1`] = `
Array [
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical"
@ -1736,7 +1736,7 @@ Array [
</div>
</div>,
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical"
@ -1776,7 +1776,7 @@ Array [
</div>
</div>,
<div
style="display: inline-block; height: 300px; margin-left: 70px;"
style="display: inline-block; height: 300px; margin-inline-start: 70px;"
>
<div
class="ant-slider ant-slider-vertical ant-slider-with-marks"

12
components/slider/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -150,7 +150,7 @@ Array [
/>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical"
@ -179,7 +179,7 @@ Array [
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical"
@ -219,7 +219,7 @@ Array [
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical ant-slider-with-marks"
@ -1353,7 +1353,7 @@ Array [
exports[`renders components/slider/demo/vertical.tsx correctly 1`] = `
Array [
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical"
@ -1382,7 +1382,7 @@ Array [
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical"
@ -1422,7 +1422,7 @@ Array [
</div>
</div>,
<div
style="display:inline-block;height:300px;margin-left:70px"
style="display:inline-block;height:300px;margin-inline-start:70px"
>
<div
class="ant-slider ant-slider-vertical ant-slider-with-marks"

2
components/slider/demo/component-token.tsx
View File

@ -4,7 +4,7 @@ import { ConfigProvider, Slider } from 'antd';
const style: React.CSSProperties = {
display: 'inline-block',
height: 300,
marginLeft: 70,
marginInlineStart: 70,
};
const marks = {

6
components/slider/demo/icon-slider.md
View File

@ -9,7 +9,7 @@ You can add an icon beside the slider to make it meaningful.
```css
.icon-wrapper {
position: relative;
padding: 0px 30px;
padding: 0 30px;
}
.icon-wrapper .anticon {
@ -27,10 +27,10 @@ You can add an icon beside the slider to make it meaningful.
}
.icon-wrapper .anticon:first-child {
left: 0;
inset-inline-start: 0;
}
.icon-wrapper .anticon:last-child {
right: 0;
inset-inline-end: 0;
}
```

2
components/slider/demo/vertical.tsx
View File

@ -5,7 +5,7 @@ import type { SliderSingleProps } from 'antd';
const style: React.CSSProperties = {
display: 'inline-block',
height: 300,
marginLeft: 70,
marginInlineStart: 70,
};
const marks: SliderSingleProps['marks'] = {

4
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8003,7 +8003,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
>
<div
class="editable-cell-value-wrap"
style="padding-right: 24px;"
style="padding-inline-end: 24px;"
>
Edward King 0
</div>
@ -8117,7 +8117,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
>
<div
class="editable-cell-value-wrap"
style="padding-right: 24px;"
style="padding-inline-end: 24px;"
>
Edward King 1
</div>

4
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -7149,7 +7149,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
>
<div
class="editable-cell-value-wrap"
style="padding-right:24px"
style="padding-inline-end:24px"
>
Edward King 0
</div>
@ -7181,7 +7181,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
>
<div
class="editable-cell-value-wrap"
style="padding-right:24px"
style="padding-inline-end:24px"
>
Edward King 1
</div>

2
components/table/demo/dynamic-settings.md
View File

@ -8,7 +8,7 @@ Select different settings to see the result.
<style>
.table-demo-control-bar .ant-form-item {
margin-right: 16px !important;
margin-inline-end: 16px !important;
margin-bottom: 8px !important;
}
</style>

13
components/table/demo/edit-cell.tsx
View File

@ -78,17 +78,16 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
<Form.Item
style={{ margin: 0 }}
name={dataIndex}
rules={[
{
required: true,
message: `${title} is required.`,
},
]}
rules={[{ required: true, message: `${title} is required.` }]}
>
<Input ref={inputRef} onPressEnter={save} onBlur={save} />
</Form.Item>
) : (
<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
<div
className="editable-cell-value-wrap"
style={{ paddingInlineEnd: 24 }}
onClick={toggleEdit}
>
{children}
</div>
);

2
components/table/demo/edit-row.tsx
View File

@ -127,7 +127,7 @@ const App: React.FC = () => {
const editable = isEditing(record);
return editable ? (
<span>
<Typography.Link onClick={() => save(record.key)} style={{ marginRight: 8 }}>
<Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>
Save
</Typography.Link>
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>

2
components/table/demo/resizable-column.md
View File

@ -14,7 +14,7 @@ Implement resizable column by integrate with [react-resizable](https://github.co
#table-demo-resizable-column .react-resizable-handle {
position: absolute;
right: -5px;
inset-inline-end: -5px;
bottom: 0;
z-index: 1;
width: 10px;

6
components/tabs/demo/extra.md
View File

@ -8,11 +8,11 @@ You can add extra actions to the right or left or even both side of Tabs.
```css
.tabs-extra-demo-button {
margin-right: 16px;
margin-inline-end: 16px;
}
.ant-row-rtl .tabs-extra-demo-button {
margin-right: 0;
margin-left: 16px;
margin-inline-end: 0;
margin-inline-start: 16px;
}
```

42
components/theme/util/genStyleUtils.ts
View File

@ -1,22 +1,14 @@
import { useContext } from 'react';
import { genStyleUtils } from '@ant-design/cssinjs-utils';
import type { GetCompUnitless } from '@ant-design/cssinjs-utils/es/util/genStyleUtils';
import { ConfigContext } from '../../config-provider/context';
import { genCommonStyle, genLinkStyle } from '../../style';
import type {
AliasToken,
ComponentTokenMap,
SeedToken,
} from '../interface';
import localUseToken, { unitless } from '../useToken';
import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface';
import useLocalToken, { unitless } from '../useToken';
import useResetIconStyle from './useResetIconStyle';
export const {
genStyleHooks,
genComponentStyleHook,
genSubStyleComponent,
} = genStyleUtils<
export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = genStyleUtils<
ComponentTokenMap,
AliasToken,
SeedToken
@ -29,18 +21,11 @@ export const {
return {
rootPrefixCls,
iconPrefixCls,
}
};
},
useToken: () => {
const [theme, realToken, hashId, token, cssVar] = localUseToken();
return {
theme,
realToken,
hashId,
token,
cssVar,
};
const [theme, realToken, hashId, token, cssVar] = useLocalToken();
return { theme, realToken, hashId, token, cssVar };
},
useCSP: () => {
const { csp, iconPrefixCls } = useContext(ConfigContext);
@ -50,14 +35,7 @@ export const {
return csp ?? {};
},
getResetStyles: (token) =>
[
{
// Link
'&': genLinkStyle(token),
},
]
,
getResetStyles: (token) => [{ '&': genLinkStyle(token) }],
getCommonStyle: genCommonStyle,
getCompUnitless: () => unitless as any,
})
getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
});

8
components/tree/utils/dropIndicator.tsx
View File

@ -1,13 +1,15 @@
import React from 'react';
import type { DirectionType } from '../../config-provider';
export const offset = 4;
export default function dropIndicatorRender(props: {
function dropIndicatorRender(props: {
dropPosition: -1 | 0 | 1;
dropLevelOffset: number;
indent: number;
prefixCls: string;
direction: 'ltr' | 'rtl';
direction: DirectionType;
}) {
const { dropPosition, dropLevelOffset, prefixCls, indent, direction = 'ltr' } = props;
const startPosition = direction === 'ltr' ? 'left' : 'right';
@ -31,3 +33,5 @@ export default function dropIndicatorRender(props: {
}
return <div style={style} className={`${prefixCls}-drop-indicator`} />;
}
export default dropIndicatorRender;

Some files were not shown because too many files have changed in this diff Show More