From 2dcb9badfe3f7bd16731836a6e74df580b652bfe Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Thu, 12 Sep 2024 15:02:05 +0200 Subject: [PATCH] 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 --- .changeset/silver-actors-explain.md | 5 ++++ .../src/Label/Label.features.stories.tsx | 8 ++++++ packages/react/src/Label/Label.module.css | 23 ++++++++---------- packages/react/src/Label/Label.visual.spec.ts | 7 ++++++ ...arison-Label-Label-With-Reflow-1-linux.png | Bin 0 -> 11710 bytes 5 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 .changeset/silver-actors-explain.md create mode 100644 packages/react/src/Label/Label.visual.spec.ts-snapshots/Visual-Comparison-Label-Label-With-Reflow-1-linux.png 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 0000000000000000000000000000000000000000..fa31d5d0bb7d411279c64306a0fa31c5626fdd2c GIT binary patch literal 11710 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