diff --git a/.changeset/old-starfishes-sell.md b/.changeset/old-starfishes-sell.md new file mode 100644 index 0000000000..b8ad7b66c6 --- /dev/null +++ b/.changeset/old-starfishes-sell.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +`Label` padding updates to match PRC diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png index 9518300d3a..9fbe158248 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png index c51a2dd471..9e2b968f43 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png index 30c2896617..38d2da2884 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png index 9f89e00bea..50d407df0a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png index b004ead5de..90e2b0dda2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png index b004ead5de..90e2b0dda2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png index eb295beec8..6d13b7cc26 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png index eb295beec8..6d13b7cc26 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png index e33a191afb..36ee1c9de7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png index e33a191afb..36ee1c9de7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png index 1c2f1d788f..d8375c29d2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png index 1c2f1d788f..d8375c29d2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png index b616d5d8ee..bb6f4bfc45 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png index b616d5d8ee..bb6f4bfc45 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png index 063b5761b9..2988cba739 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png index 063b5761b9..2988cba739 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png index a78cc65411..37507f2061 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png index a78cc65411..37507f2061 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png index 5399498752..2c523c16b9 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png index 5399498752..2c523c16b9 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png index b5bbb8aef5..e3f11f8f01 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png index b5bbb8aef5..e3f11f8f01 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png index 4224ca7c13..9cadc166a8 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png index 4224ca7c13..9cadc166a8 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png index 0262dfe008..1756b02747 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png index 0262dfe008..1756b02747 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png index ba0637f455..f04ce300cd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png index ba0637f455..f04ce300cd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png differ diff --git a/app/components/primer/beta/label.pcss b/app/components/primer/beta/label.pcss index b9e387985c..793f1fce1e 100644 --- a/app/components/primer/beta/label.pcss +++ b/app/components/primer/beta/label.pcss @@ -10,13 +10,13 @@ .label, /* TODO: Deprecate */ .Label { display: inline-block; - padding: 0 7px; + padding: 0 var(--base-size-6); font-size: var(--text-body-size-small); font-weight: var(--base-text-weight-medium); line-height: 18px; white-space: nowrap; border: var(--borderWidth-thin) solid var(--borderColor-default); - border-radius: 2em; + border-radius: var(--borderRadius-full); &:hover { text-decoration: none; @@ -26,8 +26,7 @@ /* Large 24px */ .Label--large { - padding-right: 10px; - padding-left: 10px; + padding: 0 var(--base-size-8); line-height: 22px; }