fix(layout/collapse): icon direction in rtl mode (#52374)

* fix: collapse icon position in rtl mode * fix: layout sider icon position in rtl mode * chore: remove rtl demo
ant-design · Jan 13, 2025 · a771c25 · a771c25
1 parent 666d019
commit a771c25
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
@@ -106,7 +106,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
           mergedExpandIcon(panelProps)
         ) : (
           <RightOutlined
-            rotate={panelProps.isActive ? 90 : undefined}
+            rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
             aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
           />
         );

diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
@@ -99,7 +99,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
   };
 
   // =========================== Prefix ===========================
-  const { getPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls, direction } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -171,9 +171,10 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
           {trigger || <BarsOutlined />}
         </span>
       ) : null;
+    const reverseIcon = (direction === 'rtl') === !reverseArrow;
     const iconObj = {
-      expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
-      collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
+      expanded: reverseIcon ? <RightOutlined /> : <LeftOutlined />,
+      collapsed: reverseIcon ? <LeftOutlined /> : <RightOutlined />,
     };
     const status = collapsed ? 'collapsed' : 'expanded';
     const defaultTrigger = iconObj[status];