feat: ConfigProvider support Badge.Ribbon (ant-design#52303)

* feat: ConfigProvider support Ribbon * fix * fix * rm
aojunhao123 · Jan 15, 2025 · 1f50049 · 1f50049
1 parent b440636
commit 1f50049
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 32 deletions.
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -9,6 +9,8 @@ import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
 
+type SemanticName = 'root' | 'content' | 'indicator';
+
 export interface RibbonProps {
   className?: string;
   prefixCls?: string;
@@ -18,6 +20,8 @@ export interface RibbonProps {
   children?: React.ReactNode;
   placement?: RibbonPlacement;
   rootClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const Ribbon: React.FC<RibbonProps> = (props) => {
@@ -30,8 +34,10 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     text,
     placement = 'end',
     rootClassName,
+    styles,
+    classNames: ribbonClassNames,
   } = props;
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, ribbon } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
 
   const wrapperCls = `${prefixCls}-wrapper`;
@@ -46,6 +52,9 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
       [`${prefixCls}-color-${color}`]: colorInPreset,
     },
     className,
+    ribbon?.className,
+    ribbon?.classNames?.indicator,
+    ribbonClassNames?.indicator,
   );
 
   const colorStyle: React.CSSProperties = {};
@@ -55,10 +64,38 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapCSSVar(
-    <div className={classNames(wrapperCls, rootClassName, hashId, cssVarCls)}>
+    <div
+      className={classNames(
+        wrapperCls,
+        rootClassName,
+        hashId,
+        cssVarCls,
+        ribbonClassNames?.root,
+        ribbon?.classNames?.root,
+      )}
+      style={{ ...ribbon?.styles?.root, ...styles?.root }}
+    >
       {children}
-      <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
-        <span className={`${prefixCls}-text`}>{text}</span>
+      <div
+        className={classNames(ribbonCls, hashId)}
+        style={{
+          ...colorStyle,
+          ...ribbon?.styles?.indicator,
+          ...ribbon?.style,
+          ...styles?.indicator,
+          ...style,
+        }}
+      >
+        <span
+          className={classNames(
+            `${prefixCls}-content`,
+            ribbonClassNames?.content,
+            ribbon?.classNames?.content,
+          )}
+          style={{ ...ribbon?.styles?.content, ...styles?.content }}
+        >
+          {text}
+        </span>
         <div className={`${prefixCls}-corner`} style={cornerColorStyle} />
       </div>
     </div>,

diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2315,7 +2315,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2357,7 +2357,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2399,7 +2399,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2441,7 +2441,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2483,7 +2483,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2525,7 +2525,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2567,7 +2567,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2609,7 +2609,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2648,7 +2648,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx extend context correctly
         class="ant-ribbon ant-ribbon-placement-end"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2677,7 +2677,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx extend context correctly
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2707,7 +2707,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx extend context correctly
         style="background: rgb(45, 183, 245);"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2738,7 +2738,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx extend context correctly
         style="background: rgb(45, 183, 245);"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2769,7 +2769,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx extend context correctly
         style="background: rgb(45, 183, 245);"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>

diff --git a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2294,7 +2294,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2336,7 +2336,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2378,7 +2378,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2420,7 +2420,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2462,7 +2462,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2504,7 +2504,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2546,7 +2546,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2588,7 +2588,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           Hippies
         </span>
@@ -2625,7 +2625,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2654,7 +2654,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
         class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2684,7 +2684,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
         style="background:#2db7f5"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2715,7 +2715,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
         style="background:#2db7f5"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>
@@ -2746,7 +2746,7 @@ exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
         style="background:#2db7f5"
       >
         <span
-          class="ant-ribbon-text"
+          class="ant-ribbon-content"
         >
           啦啦啦啦
         </span>

diff --git a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
     class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
   >
     <span
-      class="ant-ribbon-text"
+      class="ant-ribbon-content"
     />
     <div
       class="ant-ribbon-corner"

diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx
@@ -80,4 +80,37 @@ describe('Ribbon', () => {
       expect(container.querySelectorAll('.cool').length).toEqual(1);
     });
   });
+  it('should apply custom styles to Badge.Ribbon', () => {
+    const customClassNames = {
+      root: 'custom-root',
+      indicator: 'custom-indicator',
+      content: 'custom-content',
+    };
+
+    const customStyles = {
+      root: { color: 'red' },
+      indicator: { color: 'green' },
+      content: { color: 'yellow' },
+    };
+
+    const { container } = render(
+      <Badge.Ribbon text="Hippies" color="pink" classNames={customClassNames} styles={customStyles}>
+        <div>and raises the spyglass.</div>
+      </Badge.Ribbon>,
+    );
+
+    const rootElement = container.querySelector('.ant-ribbon-wrapper') as HTMLElement;
+    const indicatorElement = container.querySelector('.ant-ribbon') as HTMLElement;
+    const contentElement = container.querySelector('.ant-ribbon-content') as HTMLElement;
+
+    // check classNames
+    expect(rootElement.classList).toContain('custom-root');
+    expect(indicatorElement.classList).toContain('custom-indicator');
+    expect(contentElement.classList).toContain('custom-content');
+
+    // check styles
+    expect(rootElement.style.color).toBe('red');
+    expect(indicatorElement.style.color).toBe('green');
+    expect(contentElement.style.color).toBe('yellow');
+  });
 });