Add top-padding for the Dialog Body to move closer to the React compo…

…nent and avoid it being glued to the divider (#3253) Co-authored-by: Henriette Darge <[email protected]> Co-authored-by: joshblack <[email protected]>
primer · Jan 9, 2025 · 3a63cf0 · 3a63cf0
1 parent 1bb7ad7
commit 3a63cf0
Show file tree

Hide file tree

Showing 53 changed files with 5 additions and 5 deletions.
diff --git a/.changeset/slow-impalas-relate.md b/.changeset/slow-impalas-relate.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add top spacing to Dialog::Body to avoid it being glued to the divider
diff --git a/...ht/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark.png b/...ht/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_colorblind.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_colorblind.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_dimmed.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_dimmed.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_high_contrast.png b/.../snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_high_contrast.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png b/...snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark.png b/.../snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark.png
diff --git a/...test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_colorblind.png b/...test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_colorblind.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_dimmed.png b/...ots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_dimmed.png
diff --git a/...t.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_high_contrast.png b/...t.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/dark_high_contrast.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light.png b/...snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light.png
diff --git a/...est.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light_colorblind.png b/...est.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light_colorblind.png
diff --git a/....ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light_high_contrast.png b/....ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/light_high_contrast.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark.png b/...eenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_colorblind.png b/...apshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_colorblind.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_dimmed.png b/...s/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_dimmed.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_high_contrast.png b/...hots.test.ts-snapshots/primer/alpha/dialog/initally_open/dark_high_contrast.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/default.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/default.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/focused.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/light.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/light.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/dialog/initally_open/light_colorblind.png b/...pshots.test.ts-snapshots/primer/alpha/dialog/initally_open/light_colorblind.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/dialog/initally_open/light_high_contrast.png b/...ots.test.ts-snapshots/primer/alpha/dialog/initally_open/light_high_contrast.png
diff --git a/.../screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark.png b/.../screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_colorblind.png b/...s/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_colorblind.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_dimmed.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_dimmed.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_high_contrast.png b/...napshots.test.ts-snapshots/primer/alpha/dialog/left_side/dark_high_contrast.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/light.png b/...screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/light.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/light_colorblind.png b/.../snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/light_colorblind.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/dialog/left_side/light_high_contrast.png b/...apshots.test.ts-snapshots/primer/alpha/dialog/left_side/light_high_contrast.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark.png b/...screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_colorblind.png b/.../snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_colorblind.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_dimmed.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_dimmed.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_high_contrast.png b/...apshots.test.ts-snapshots/primer/alpha/dialog/right_side/dark_high_contrast.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/light.png b/...creenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/light.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/light_colorblind.png b/...snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/light_colorblind.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/dialog/right_side/light_high_contrast.png b/...pshots.test.ts-snapshots/primer/alpha/dialog/right_side/light_high_contrast.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_colorblind.png b/...hots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_colorblind.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_dimmed.png b/...napshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_dimmed.png
diff --git a/...s.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_high_contrast.png b/...s.test.ts-snapshots/primer/alpha/dialog/scroll_container/dark_high_contrast.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/light.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/dialog/scroll_container/light.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/dialog/scroll_container/light_colorblind.png b/...ots.test.ts-snapshots/primer/alpha/dialog/scroll_container/light_colorblind.png
diff --git a/....test.ts-snapshots/primer/alpha/dialog/scroll_container/light_high_contrast.png b/....test.ts-snapshots/primer/alpha/dialog/scroll_container/light_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_colorblind.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_dimmed.png b/...pshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_dimmed.png
diff --git a/...test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_high_contrast.png b/...test.ts-snapshots/primer/alpha/dialog/with_auto_complete/dark_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/light.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/light.png
diff --git a/...s.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/light_colorblind.png b/...s.test.ts-snapshots/primer/alpha/dialog/with_auto_complete/light_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/dialog/with_auto_complete/light_high_contrast.png b/...est.ts-snapshots/primer/alpha/dialog/with_auto_complete/light_high_contrast.png
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
@@ -231,10 +231,6 @@ dialog.Overlay:not([open]) {
     padding-bottom: var(--stack-padding-condensed);
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
-
-    & + .Overlay-body {
-      padding-top: var(--stack-padding-normal);
-    }
   }
 
   &.Overlay-header--large {
@@ -296,7 +292,6 @@ dialog.Overlay:not([open]) {
 /* generic body content slot */
 .Overlay-body {
   padding: var(--stack-padding-normal);
-  padding-top: 0;
   overflow-y: auto;
   scrollbar-width: thin;
   font-size: var(--text-body-size-medium);