Fix Label component text reflow (#733)

* Fix Label component text reflow

* github-actions[bot] Regenerated snapshots

* Add changeset

* Fix line-height

* github-actions[bot] Regenerated snapshots

* Update snapshots

* Set max-height

* Prevent stretching vertically on flexbox containers

* github-actions[bot] Regenerated snapshots

* Cleanup

---------

Co-authored-by: danielguillan <danielguillan@users.noreply.github.com>

.changeset/silver-actors-explain.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixes Label component multiline reflow

packages/react/src/Label/Label.features.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
 import {Label} from '.'
+import {Box} from '../'
 import {CopilotIcon} from '@primer/octicons-react'
 
 export default {
@@ -72,3 +73,10 @@ export const WithOcticonColor = () => (
   </Label>
 )
 WithOcticonColor.storyName = 'With an Octicon and color'
+
+export const WithReflow = () => (
+  <Box style={{width: 200}}>
+    <Label leadingVisual={<CopilotIcon />}>Label reflows if the text is too long</Label>
+  </Box>
+)
+WithOcticonColor.storyName = 'With an Octicon and color'

packages/react/src/Label/Label.module.css

@@ -9,11 +9,15 @@
   vertical-align: middle;
   align-items: center;
   justify-content: center;
-  border-radius: var(--brand-borderRadius-full);
+  border-radius: var(--brand-borderRadius-xlarge);
   display: inline-flex;
   color: var(--brand-Label-color-start, var(--brand-Label-color, currentColor));
   position: relative;
+  height: min-content;
+  padding-inline: var(--base-size-16);
+  padding-block: var(--base-size-4);
   background: none;
+  text-align: center;
 }
 
 .Label::before {
@@ -32,15 +36,11 @@
 }
 
 .Label--size-medium {
-  padding-left: var(--base-size-16);
-  padding-right: var(--base-size-16);
-  height: var(--base-size-28);
+  min-height: var(--base-size-28);
 }
 
 .Label--size-large {
-  padding-left: var(--base-size-16);
-  padding-right: var(--base-size-16);
-  height: var(--base-size-32);
+  min-height: var(--base-size-32);
 }
 
 .Label--color-default {
@@ -133,12 +133,8 @@
   box-decoration-break: clone;
 }
 
-.Label--size-medium .Label__text {
-  line-height: var(--brand-text-lineHeight-200);
-}
-
-.Label--size-large .Label__text {
-  line-height: var(--brand-text-lineHeight-300);
+.Label__text {
+  line-height: var(--base-size-16);
 }
 
 .Label__icon-visual {
@@ -155,6 +151,7 @@
 
 .Label__label {
   font-weight: var(--base-text-weight-semibold);
+  line-height: inherit;
 }
 
 @media (forced-colors: active) {

packages/react/src/Label/Label.visual.spec.ts

@@ -68,4 +68,11 @@ test.describe('Visual Comparison: Label', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
+
+  test('Label / With Reflow', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-label-features--with-reflow&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })