refactor: update badge styles to not increase parent component height (#11892)

Author: jouni

dev/playground/button.html

@@ -13,6 +13,7 @@
       window.Vaadin.featureFlags.accessibleDisabledButtons = true;
     </script>
     <script type="module">
+      import '@vaadin/badge';
       import '@vaadin/button';
       import '@vaadin/icon';
       import '@vaadin/icons';
@@ -95,5 +96,24 @@ <h2 class="heading">Custom Layout</h2>
         A really long label that should truncate
       </vaadin-button>
     </section>
+
+    <section class="section">
+      <h2 class="heading">With Badge</h2>
+      <vaadin-button theme="primary">
+        Inbox
+        <vaadin-badge slot="suffix" number="12" theme="filled"></vaadin-badge>
+      </vaadin-button>
+      <vaadin-button>
+        Inbox
+        <vaadin-badge slot="suffix" number="12"></vaadin-badge>
+      </vaadin-button>
+      <vaadin-button theme="tertiary">
+        Inbox
+        <vaadin-badge slot="suffix" number="12"></vaadin-badge>
+      </vaadin-button>
+      <vaadin-button aria-label="Inbox (12)">
+        <vaadin-badge number="12"></vaadin-badge>
+      </vaadin-button>
+    </section>
   </body>
 </html>

packages/aura/src/components/button.css

@@ -39,22 +39,22 @@ Increase padding, but only for buttons that don't have an icon in the default sl
 Buttons that place an icon in the default slot are assumed to be icon-only buttons.
 */
 /* prettier-ignore */
-:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit):not(:has(> :is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
   --vaadin-button-padding: var(--vaadin-padding-block-container)
     var(--vaadin-padding-m);
 }
 
 /* Decrease padding when an icon is placed in the prefix or suffix slot */
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[theme~='tertiary'],
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
-  > [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
+  > [slot='prefix']:is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar)
 ) {
   padding-inline-start: var(--vaadin-padding-s);
 }
 
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[theme~='tertiary'],
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
-  > [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
+  > [slot='suffix']:is(vaadin-icon, vaadin-badge, svg, i[class*='fa-'], vaadin-avatar)
 ),
 vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: var(--vaadin-padding-s);

packages/badge/src/styles/vaadin-badge-base-styles.js

@@ -15,10 +15,10 @@ export const badgeStyles = css`
     box-sizing: border-box;
     gap: var(--vaadin-badge-gap, 0.25em);
     padding: var(--vaadin-badge-padding, 0 calc(0.5lh - 0.25em));
-    font-family: var(--vaadin-badge-font-family, inherit);
     font-size: var(--vaadin-badge-font-size, 0.875rem);
+    font-family: var(--vaadin-badge-font-family, inherit);
     font-weight: var(--vaadin-badge-font-weight, 500);
-    line-height: var(--vaadin-badge-line-height, round(1em * 1.5, 0.125rem));
+    line-height: var(--vaadin-badge-line-height, 1lh);
     color: var(--vaadin-badge-text-color, var(--vaadin-text-color));
     background: var(--vaadin-badge-background, transparent);
     border: var(--vaadin-badge-border-width, 1px) solid var(--vaadin-badge-border-color, var(--vaadin-border-color));
@@ -27,8 +27,10 @@ export const badgeStyles = css`
     white-space: nowrap;
     --vaadin-icon-size: 1em;
     /* prevent from stretching */
-    height: calc(1lh + var(--vaadin-badge-border-width, 1px) * 2);
+    height: round(1lh + var(--vaadin-badge-border-width, 1px) * 2, 0.125rem);
     flex: none;
+    /* Only reserve 1lh of space (treat border as an outline) */
+    margin: calc(var(--vaadin-badge-border-width, 1px) * -1);
   }
 
   :host([hidden]) {
@@ -66,6 +68,7 @@ export const badgeStyles = css`
     width: round(0.5em, 0.125rem);
     height: round(0.5em, 0.125rem);
     padding: 0;
+    margin: 0;
   }
 
   @media (forced-colors: active) {