feat: Badge.Ribbon support rootClassName (ant-design#44056)

* feat: Badge.Ribbon support rootClassName * docs: update rootClassName description * feat: optimize code * feat: optimize code
ammar-knowledge · Aug 7, 2023 · 5351fac · 5351fac
1 parent dcba47b
commit 5351fac
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -16,6 +16,7 @@ export interface RibbonProps {
   color?: LiteralUnion<PresetColorType>;
   children?: React.ReactNode;
   placement?: RibbonPlacement;
+  rootClassName?: string;
 }
 
 const Ribbon: React.FC<RibbonProps> = (props) => {
@@ -27,6 +28,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     children,
     text,
     placement = 'end',
+    rootClassName,
   } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
@@ -48,7 +50,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapSSR(
-    <div className={classNames(`${prefixCls}-wrapper`, hashId)}>
+    <div className={classNames(`${prefixCls}-wrapper`, rootClassName, hashId)}>
       {children}
       <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
         <span className={`${prefixCls}-text`}>{text}</span>

diff --git a/...__tests__/__snapshots__/demo.test.ts.snap → ..._tests__/__snapshots__/demo.test.tsx.snap b/...__tests__/__snapshots__/demo.test.ts.snap → ..._tests__/__snapshots__/demo.test.tsx.snap
diff --git a/components/badge/__tests__/demo.test.ts b/components/badge/__tests__/demo.test.ts
diff --git a/components/badge/__tests__/demo.test.tsx b/components/badge/__tests__/demo.test.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('badge');
+
+rootPropsTest('badge', (Badge, props) => <Badge.Ribbon {...props} />, {
+  name: 'Badge.Ribbon',
+});