refactor: use css logical properties (#919)

* use css Logical properties

* fix test case

Author: li-jia-nan

docs/examples/extra.tsx

@@ -117,7 +117,7 @@ export default () => {
           />
           <label htmlFor="default-position">default position(right)</label>
         </div>
-        <div style={{ marginLeft: '15px' }}>
+        <div style={{ marginInlineStart: '15px' }}>
           <input
             id="coustom-position"
             ref={checkRef}

src/TabNavList/OperationNode.tsx

@@ -177,8 +177,9 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
 
   // ========================= Render =========================
   const moreStyle: React.CSSProperties = {
-    [rtl ? 'marginRight' : 'marginLeft']: tabBarGutter,
+    marginInlineStart: tabBarGutter,
   };
+
   if (!tabs.length) {
     moreStyle.visibility = 'hidden';
     moreStyle.order = 1;

src/TabNavList/index.tsx

@@ -421,8 +421,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
 
   // ========================== Tab ==========================
   const tabNodeStyle: React.CSSProperties = {};
+
   if (tabPositionTopOrBottom) {
-    tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
+    tabNodeStyle.marginInlineStart = tabBarGutter;
   } else {
     tabNodeStyle.marginTop = tabBarGutter;
   }

tests/index.test.tsx

@@ -281,10 +281,10 @@ describe('Tabs.Basic', () => {
   it('tabBarGutter should work', () => {
     const topTabs = render(getTabs({ tabBarGutter: 23 }));
     expect(topTabs.container.querySelectorAll('.rc-tabs-tab')[0]).toHaveStyle({
-      marginLeft: undefined,
+      marginInlineStart: undefined,
     });
     expect(topTabs.container.querySelectorAll('.rc-tabs-tab')[1]).toHaveStyle({
-      marginLeft: '23px',
+      marginInlineStart: '23px',
     });
 
     const rightTabs = render(getTabs({ tabBarGutter: 33, tabPosition: 'right' }));