style: add anchor rtl (#22875)

components/anchor/Anchor.tsx

@@ -274,7 +274,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
     }
   };
 
-  renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
       className = '',
@@ -298,7 +298,9 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
+    const wrapperClass = classNames(className, `${prefixCls}-wrapper`, {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,

components/anchor/style/index.less

@@ -80,3 +80,5 @@
     padding-bottom: 5px;
   }
 }
+
+@import './rtl';

components/anchor/style/rtl.less

@@ -0,0 +1,40 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@anchor-border-width: 2px;
+
+.@{ant-prefix}-anchor {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-wrapper {
+    .@{ant-prefix}-anchor-rtl& {
+      margin-right: -4px;
+      margin-left: 0;
+      padding-right: 4px;
+      padding-left: 0;
+    }
+  }
+
+  &-ink {
+    .@{ant-prefix}-anchor-rtl & {
+      right: 0;
+      left: auto;
+    }
+
+    &-ball {
+      .@{ant-prefix}-anchor-rtl & {
+        right: 50%;
+        left: 0;
+        transform: translateX(50%);
+      }
+    }
+  }
+
+  &-link {
+    .@{ant-prefix}-anchor-rtl & {
+      padding: 7px 16px 7px 0;
+    }
+  }
+}