fix: ColorPicker RTL style issues (#42716)

* fix: fix rlt style issues

* fix: add missing rtl className on popup

components/color-picker/ColorPicker.tsx

@@ -93,10 +93,11 @@ const ColorPicker: CompoundedComponent = (props) => {
   const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
 
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const mergeRootCls = classNames(rootClassName, {
-    [`${prefixCls}-rtl`]: direction,
-  });
+  const rtlCls = { [`${prefixCls}-rtl`]: direction };
+  const mergeRootCls = classNames(rootClassName, rtlCls);
   const mergeCls = classNames(mergeRootCls, className, hashId);
+  const mergePopupCls = classNames(prefixCls, rtlCls);
+
   const popupAllowCloseRef = useRef(true);
 
   const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => {
@@ -171,7 +172,7 @@ const ColorPicker: CompoundedComponent = (props) => {
           onClear={handleClear}
         />
       }
-      overlayClassName={prefixCls}
+      overlayClassName={mergePopupCls}
       {...popoverProps}
     >
       {children || (

components/color-picker/style/index.ts

@@ -26,6 +26,24 @@ export const genActiveStyle = (token: ColorPickerToken) => ({
   outline: 0,
 });
 
+const genRtlStyle = (token: ColorPickerToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    '&-rtl': {
+      [`${componentCls}-presets-color`]: {
+        '&::after': {
+          direction: 'ltr',
+        },
+      },
+      [`${componentCls}-clear`]: {
+        '&::after': {
+          direction: 'ltr',
+        },
+      },
+    },
+  };
+};
+
 const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => {
   const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;
 
@@ -127,6 +145,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
           ...genClearStyle(token, controlHeightSM),
           ...genColorBlockStyle(token, controlHeightSM),
         },
+        ...genRtlStyle(token),
       },
     },
   ];