style: remove fixed height in badge.ribbon (ant-design#41661)

* style: remove fixed height in badge.ribbon * docs: update demo * test: update snapshot
RedJue · Apr 25, 2023 · acc2154 · acc2154
1 parent ad5ac87
commit acc2154
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1964,7 +1964,11 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         <span
           class="ant-ribbon-text"
         >
-          Hippies
+          <div>
+            Hippies
+            <br />
+            Happy
+          </div>
         </span>
         <div
           class="ant-ribbon-corner"

diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -1965,7 +1965,11 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         <span
           class="ant-ribbon-text"
         >
-          Hippies
+          <div>
+            Hippies
+            <br />
+            Happy
+          </div>
         </span>
         <div
           class="ant-ribbon-corner"

diff --git a/components/badge/demo/ribbon.tsx b/components/badge/demo/ribbon.tsx
@@ -8,7 +8,12 @@ const App: React.FC = () => (
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-    <Badge.Ribbon text="Hippies" color="pink">
+    <Badge.Ribbon text={
+        <div>
+          Hippies <br />
+          Happy
+        </div>
+      } color="pink">
       <Card title="Pushes open the window" size="small">
         and raises the spyglass.
       </Card>

diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
@@ -284,7 +284,6 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
       ...resetComponent(token),
       position: 'absolute',
       top: marginXS,
-      height: badgeFontHeight,
       padding: `0 ${token.paddingXS}px`,
       color: token.colorPrimary,
       lineHeight: `${badgeFontHeight}px`,
-Original file line number
+Diff line change
@@ Expand Up @@
             <span
               class="ant-ribbon-text"
             >
-              Hippies
+              <div>
+                Hippies
+                <br />
+                Happy
+              </div>
             </span>
             <div
               class="ant-ribbon-corner"
@@ Expand Down @@