site: rewrite with CSS logical properties (#50109)

* site: use CSS logical properties * Update components/anchor/demo/targetOffset.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * chore: fix * fix: add more * fix: add more --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-11-29 10:39:38 +08:00 · 2024-07-28 10:43:45 +08:00 · 2024-07-28 10:43:45 +08:00 · e8fa5938ab
commit e8fa5938ab
parent be3d440959
55 changed files with 177 additions and 185 deletions
--- a/.dumi/components/SemanticPreview.tsx
+++ b/.dumi/components/SemanticPreview.tsx
@ -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;
--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.dumi/pages/index/components/ComponentsList.tsx
@ -126,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 */}
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@ -1,6 +1,7 @@
 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';
@ -27,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}`;
@ -102,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();
@ -118,17 +132,17 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
    <GroupMaskLayer>
      {/* Image Left Top */}
      <img
-        draggable={false}
-        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
-        draggable={false}
-        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}>
--- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx
+++ b/.dumi/pages/index/components/Theme/BackgroundImage.tsx
@ -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%;
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@ -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;
--- a/.dumi/pages/index/index.tsx
+++ b/.dumi/pages/index/index.tsx
@ -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;
  `,
--- a/.dumi/scripts/mirror-modal.js
+++ b/.dumi/scripts/mirror-modal.js
@ -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;
--- a/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
+++ b/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
@ -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;
--- a/.dumi/theme/builtins/ResourceCards/index.tsx
+++ b/.dumi/theme/builtins/ResourceCards/index.tsx
@ -9,23 +9,23 @@ const { Paragraph } = Typography;

 const useStyle = createStyles(({ token, css }) => ({
  card: css`
-      position: relative;
+    position: relative;
+    overflow: hidden;
+    .${token.antCls}-card-cover {
      overflow: hidden;
-
-      .ant-card-cover {
-        overflow: hidden;
-      }
-      img {
-        transition: all ${token.motionDurationSlow} ease-out;
-      }
-
-      &:hover img {
-        transform: scale(1.3);
-        `,
+    }
+    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;
--- a/.dumi/theme/builtins/VideoPlayer/index.tsx
+++ b/.dumi/theme/builtins/VideoPlayer/index.tsx
@ -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;
--- a/.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
+++ b/.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
@ -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;
--- a/.dumi/theme/common/BrowserFrame.tsx
+++ b/.dumi/theme/common/BrowserFrame.tsx
@ -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;
--- a/.dumi/theme/common/CodePreview.tsx
+++ b/.dumi/theme/common/CodePreview.tsx
@ -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) {
--- a/.dumi/theme/common/Color/ColorStyle.tsx
+++ b/.dumi/theme/common/Color/ColorStyle.tsx
@ -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;
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -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;
            }
          }

--- a/.dumi/theme/common/styles/PreviewImage.tsx
+++ b/.dumi/theme/common/styles/PreviewImage.tsx
@ -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;
--- a/.dumi/theme/common/styles/Responsive.tsx
+++ b/.dumi/theme/common/styles/Responsive.tsx
@ -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;
            }
          }

--- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
@ -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;
--- a/.dumi/theme/slots/Content/ColumnCard.tsx
+++ b/.dumi/theme/slots/Content/ColumnCard.tsx
@ -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>
--- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx
+++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx
@ -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;
--- a/.dumi/theme/slots/Header/SwitchBtn.tsx
+++ b/.dumi/theme/slots/Header/SwitchBtn.tsx
@ -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);
--- a/components/anchor/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/anchor/tests/snapshots/demo-extend.test.ts.snap
@ -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
--- a/components/anchor/tests/snapshots/demo.test.tsx.snap
+++ b/components/anchor/tests/snapshots/demo.test.tsx.snap
@ -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
--- a/components/anchor/demo/targetOffset.tsx
+++ b/components/anchor/demo/targetOffset.tsx
@ -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>
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@ -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 {
--- a/components/badge/SingleNumber.tsx
+++ b/components/badge/SingleNumber.tsx
@ -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;
--- a/components/calendar/demo/lunar.tsx
+++ b/components/calendar/demo/lunar.tsx
@ -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;
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -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>
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@ -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>
--- a/components/collapse/demo/borderless.tsx
+++ b/components/collapse/demo/borderless.tsx
@ -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>
--- a/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
@ -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;"
--- a/components/color-picker/tests/snapshots/demo.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo.test.ts.snap
@ -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"
--- a/components/color-picker/demo/pure-panel.tsx
+++ b/components/color-picker/demo/pure-panel.tsx
@ -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>
  );
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -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;
 }
 ```
--- a/components/config-provider/demo/direction.tsx
+++ b/components/config-provider/demo/direction.tsx
@ -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
--- a/components/config-provider/demo/locale.tsx
+++ b/components/config-provider/demo/locale.tsx
@ -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
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -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>
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@ -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>
--- a/components/form/demo/validate-other.tsx
+++ b/components/form/demo/validate-other.tsx
@ -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>
--- a/components/image/demo/toolbarRender.md
+++ b/components/image/demo/toolbarRender.md
@ -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;
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@ -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"
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@ -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;scrollbar-width:thin;scrollbar-color:unset;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"
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@ -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 }}>
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@ -18,7 +18,7 @@ const siderStyle: React.CSSProperties = {
  overflow: 'auto',
  height: '100vh',
  position: 'fixed',
-  left: 0,
+  insetInlineStart: 0,
  top: 0,
  bottom: 0,
  scrollbarWidth: 'thin',
@ -51,7 +51,7 @@ const App: React.FC = () => {
        <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
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@ -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>
--- a/components/radio/demo/radiogroup-more.tsx
+++ b/components/radio/demo/radiogroup-more.tsx
@ -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>
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@ -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"
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/components/select/tests/snapshots/demo.test.tsx.snap
@ -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"
--- a/components/select/demo/placement-debug.tsx
+++ b/components/select/demo/placement-debug.tsx
@ -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>
--- a/components/slider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/slider/tests/snapshots/demo-extend.test.ts.snap
@ -234,7 +234,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"
@ -282,7 +282,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"
@ -344,7 +344,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"
@ -1845,7 +1845,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"
@ -1893,7 +1893,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"
@ -1955,7 +1955,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"
--- a/components/slider/tests/snapshots/demo.test.ts.snap
+++ b/components/slider/tests/snapshots/demo.test.ts.snap
@ -160,7 +160,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"
@ -189,7 +189,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"
@ -234,7 +234,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"
@ -1359,7 +1359,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"
@ -1388,7 +1388,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"
@ -1433,7 +1433,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"
--- a/components/slider/demo/component-token.tsx
+++ b/components/slider/demo/component-token.tsx
@ -4,7 +4,7 @@ import { ConfigProvider, Slider } from 'antd';
 const style: React.CSSProperties = {
  display: 'inline-block',
  height: 300,
-  marginLeft: 70,
+  marginInlineStart: 70,
 };

 const marks = {
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@ -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;
 }
 ```
--- a/components/slider/demo/vertical.tsx
+++ b/components/slider/demo/vertical.tsx
@ -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'] = {
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@ -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;
 }
 ```