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>

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">

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;
+  inset-inline-end: 0;
-  bottom: 0px;
+  bottom: 0;
   width: 100%;
   padding: 10px 16px;
   text-align: right;

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);
 }
 ```

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

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

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 shape="circle" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />
-    <FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
+    <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 + 70 }}>
       <FloatButton
         href="https://ant.design/index-cn"
         tooltip={<div>custom badge color</div>}

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 />

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 }}
     />
   </>
 );

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 />

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 />} />

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 />}
     />
   </>

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="primary" style={{ insetInlineEnd: 24 }} />
-    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
+    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ insetInlineEnd: 94 }} />
   </>
 );
 

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>

components/modal/demo/modal-render.tsx

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

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"

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"

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>

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}
   </>
 );

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>

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>

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>

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={[
+        rules={[{ required: true, message: `${title} is required.` }]}
-          {
-            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>
     );

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}>

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;

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;

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;