Label padding updates to match PRC (#3058)

Co-authored-by: langermank <langermank@users.noreply.github.com> Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>
primer · Sep 5, 2024 · 269b02f · 269b02f
1 parent 14602d0
commit 269b02f
Show file tree

Hide file tree

Showing 30 changed files with 8 additions and 4 deletions.
diff --git a/.changeset/old-starfishes-sell.md b/.changeset/old-starfishes-sell.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+`Label` padding updates to match PRC
diff --git a/...napshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png b/...napshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png
diff --git a/...napshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png b/...napshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png
diff --git a/...snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png b/...snapshots/primer/alpha/segmented_control/trailing_label_width_small/default.png
diff --git a/...snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png b/...snapshots/primer/alpha/segmented_control/trailing_label_width_small/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png b/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/default.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png b/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_attention/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/default.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_danger/focused.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png b/...ots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/default.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png b/...ots/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_done/focused.png
diff --git a/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png b/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/default.png
diff --git a/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png b/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_primary/focused.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png b/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/default.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png b/...napshots.test.ts-snapshots/primer/beta/label/color_scheme_secondary/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/default.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_severe/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png b/...snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/default.png
diff --git a/...snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png b/...snapshots.test.ts-snapshots/primer/beta/label/color_scheme_sponsors/focused.png
diff --git a/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png b/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/default.png
diff --git a/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png b/.../snapshots.test.ts-snapshots/primer/beta/label/color_scheme_success/focused.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/default.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/beta/label/default/focused.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png b/...eenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/default.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png b/...eenshots/snapshots.test.ts-snapshots/primer/beta/label/size_default/focused.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png b/...creenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/default.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png b/...creenshots/snapshots.test.ts-snapshots/primer/beta/label/size_large/focused.png
diff --git 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;
 }