site: rewrite with CSS logical properties again (#50113)

* 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 * site: rewrite with CSS logical properties --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2025-06-07 09:26:06 +08:00 · 2024-07-29 01:33:18 +08:00 · 2024-07-29 01:33:18 +08:00 · 2e4b9cb098
commit 2e4b9cb098
parent 836d1bbbad
26 changed files with 85 additions and 77 deletions
--- a/components/drawer/tests/MultiDrawer.test.tsx
+++ b/components/drawer/tests/MultiDrawer.test.tsx
@ -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">
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@ -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;
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@ -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);
 }
 ```
--- a/components/float-button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo-extend.test.ts.snap
@ -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
--- a/components/float-button/tests/snapshots/demo.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo.test.ts.snap
@ -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
--- a/components/float-button/demo/badge.tsx
+++ b/components/float-button/demo/badge.tsx
@ -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>}
--- a/components/float-button/demo/controlled.tsx
+++ b/components/float-button/demo/controlled.tsx
@ -14,7 +14,7 @@ const App: React.FC = () => {
      <FloatButton.Group
        open={open}
        trigger="click"
-        style={{ right: 24 }}
+        style={{ insetInlineEnd: 24 }}
        icon={<CustomerServiceOutlined />}
      >
        <FloatButton />
--- a/components/float-button/demo/description.tsx
+++ b/components/float-button/demo/description.tsx
@ -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 }}
    />
  </>
 );
--- a/components/float-button/demo/group-menu.tsx
+++ b/components/float-button/demo/group-menu.tsx
@ -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 />
--- a/components/float-button/demo/group.tsx
+++ b/components/float-button/demo/group.tsx
@ -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 />} />
--- a/components/float-button/demo/shape.tsx
+++ b/components/float-button/demo/shape.tsx
@ -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 />}
    />
  </>
--- a/components/float-button/demo/type.tsx
+++ b/components/float-button/demo/type.tsx
@ -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 }} />
  </>
 );

--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@ -10,6 +10,6 @@ async.
 .antd-demo-dynamic-option img {
  width: 20px;
  height: 20px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 </style>
--- a/components/modal/demo/modal-render.tsx
+++ b/components/modal/demo/modal-render.tsx
@ -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);
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@ -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"
--- a/components/segmented/tests/snapshots/demo.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo.test.ts.snap
@ -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"
--- a/components/segmented/demo/size-consistent.tsx
+++ b/components/segmented/demo/size-consistent.tsx
@ -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>
--- a/components/skeleton/demo/list.tsx
+++ b/components/skeleton/demo/list.tsx
@ -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}
  </>
 );
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@ -7583,7 +7583,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>
@ -7697,7 +7697,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>
--- a/components/table/tests/snapshots/demo.test.ts.snap
+++ b/components/table/tests/snapshots/demo.test.ts.snap
@ -6864,7 +6864,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>
@ -6896,7 +6896,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>
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@ -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>
--- a/components/table/demo/edit-cell.tsx
+++ b/components/table/demo/edit-cell.tsx
@ -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>
    );
--- a/components/table/demo/edit-row.tsx
+++ b/components/table/demo/edit-row.tsx
@ -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}>
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@ -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;
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@ -65,7 +65,7 @@ There are some products to recommend for developer/designer/product manager.
  font-weight: 500;
 }
 .markdown table td > a:not(:last-child) {
-  margin-right: 18px;
+  margin-inline-end: 18px;
 }
 .markdown table td > a:not(:last-child)::after {
  position: absolute;
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@ -66,7 +66,7 @@ title: 社区精选组件
  font-weight: 500;
 }
 .markdown table td > a:not(:last-child) {
-  margin-right: 18px;
+  margin-inline-end: 18px;
 }
 .markdown table td > a:not(:last-child)::after {
  position: absolute;