diff --git a/.changeset/silver-actors-explain.md b/.changeset/silver-actors-explain.md new file mode 100644 index 000000000..d0c5782b2 --- /dev/null +++ b/.changeset/silver-actors-explain.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Fixes Label component multiline reflow diff --git a/packages/react/src/Label/Label.features.stories.tsx b/packages/react/src/Label/Label.features.stories.tsx index cb88d77f3..57270531d 100644 --- a/packages/react/src/Label/Label.features.stories.tsx +++ b/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 = () => ( ) WithOcticonColor.storyName = 'With an Octicon and color' + +export const WithReflow = () => ( + + + +) +WithOcticonColor.storyName = 'With an Octicon and color' diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css index 5f4c7fc51..52ff419b0 100644 --- a/packages/react/src/Label/Label.module.css +++ b/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) { diff --git a/packages/react/src/Label/Label.visual.spec.ts b/packages/react/src/Label/Label.visual.spec.ts index 93e4c28e3..0b6ba146c 100644 --- a/packages/react/src/Label/Label.visual.spec.ts +++ b/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() + }) }) diff --git a/packages/react/src/Label/Label.visual.spec.ts-snapshots/Visual-Comparison-Label-Label-With-Reflow-1-linux.png b/packages/react/src/Label/Label.visual.spec.ts-snapshots/Visual-Comparison-Label-Label-With-Reflow-1-linux.png new file mode 100644 index 000000000..fa31d5d0b Binary files /dev/null and b/packages/react/src/Label/Label.visual.spec.ts-snapshots/Visual-Comparison-Label-Label-With-Reflow-1-linux.png differ