Increase and standardize button group gap (#909)

primer · Feb 3, 2025 · c5f2d40 · c5f2d40
1 parent 6f0f081
commit c5f2d40
Show file tree

Hide file tree

Showing 49 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/moody-plants-add.md b/.changeset/moody-plants-add.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Increased the gap between primary and secondary buttons in `Hero`, `CTABanner` and `ButtonGroup` components from `8px` to `16px`.
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css
@@ -1,6 +1,6 @@
 .ButtonGroup {
   display: inline-flex;
-  gap: var(--base-size-8);
+  gap: var(--base-size-8) var(--base-size-16);
   flex-direction: row;
   flex-wrap: wrap;
 }

diff --git a/...pshots/Visual-Comparison-ButtonGroup-ButtonGroup-Large-Button-Group-1-linux.png b/...pshots/Visual-Comparison-ButtonGroup-ButtonGroup-Large-Button-Group-1-linux.png
diff --git a/...apshots/Visual-Comparison-ButtonGroup-ButtonGroup-Link-Button-Group-1-linux.png b/...apshots/Visual-Comparison-ButtonGroup-ButtonGroup-Link-Button-Group-1-linux.png
diff --git a/...c.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-Playground-1-linux.png b/...c.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-Playground-1-linux.png
diff --git a/...c.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Aligned-Center-1-linux.png b/...c.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Aligned-Center-1-linux.png
diff --git a/...hots/Visual-Comparison-CTABanner-CTABanner-Custom-Background-Colors-1-linux.png b/...hots/Visual-Comparison-CTABanner-CTABanner-Custom-Background-Colors-1-linux.png
diff --git a/...ec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Custom-Shadow-1-linux.png b/...ec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Custom-Shadow-1-linux.png
diff --git a/...ual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Default-1-linux.png b/...ual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Default-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Playground-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-Playground-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Border-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Border-1-linux.png
diff --git a/...c.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-No-Shadow-1-linux.png b/...c.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-No-Shadow-1-linux.png
diff --git a/...pec.ts-snapshots/Visual-Comparison-Card-Card-Dark-Color-Mode-Effect-1-linux.png b/...pec.ts-snapshots/Visual-Comparison-Card-Card-Dark-Color-Mode-Effect-1-linux.png
diff --git a/packages/react/src/Hero/Hero.module.css b/packages/react/src/Hero/Hero.module.css
@@ -68,7 +68,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--base-size-16);
+  gap: var(--base-size-8) var(--base-size-16);
 }
 
 .Hero-trailing {

diff --git a/...le-viewport-test-for-Narrow-View-Centered-Hero-Narrow-View-Centered-1-linux.png b/...le-viewport-test-for-Narrow-View-Centered-Hero-Narrow-View-Centered-1-linux.png
diff --git a/...mparison-Hero-Mobile-viewport-test-for-Narrow-View-Hero-Narrow-View-1-linux.png b/...mparison-Hero-Mobile-viewport-test-for-Narrow-View-Hero-Narrow-View-1-linux.png
diff --git a/.../Link.visual.spec.ts-snapshots/Visual-Comparison-Link-Link-Reversed-1-linux.png b/.../Link.visual.spec.ts-snapshots/Visual-Comparison-Link-Link-Reversed-1-linux.png
diff --git a/...shots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png b/...shots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png
diff --git a/...s-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png b/...s-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png
diff --git a/...ots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png b/...ots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png
diff --git a/...apshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png b/...apshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png
diff --git a/...s/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png b/...s/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png
diff --git a/...n-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png b/...n-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png
diff --git a/...pshots/Visual-Comparison-Section-Section-Multiple-Background-Images-1-linux.png b/...pshots/Visual-Comparison-Section-Section-Multiple-Background-Images-1-linux.png
diff --git a/...avBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-linux.png b/...avBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-linux.png
diff --git a/...avBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-linux.png b/...avBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-linux.png
diff --git a/...avBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-linux.png b/...avBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-linux.png
diff --git a/...avBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-linux.png b/...avBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-linux.png
diff --git a/...al-Comparison-SubdomainNavBar-SubdomainNavBar-Conditional-Rendering-1-linux.png b/...al-Comparison-SubdomainNavBar-SubdomainNavBar-Conditional-Rendering-1-linux.png
diff --git a/...al.spec.ts-snapshots/Visual-Comparison-Testimonial-Testimonial-Logo-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-Testimonial-Testimonial-Logo-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png
diff --git a/...al-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Minimal-1-linux.png b/...al-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Minimal-1-linux.png
diff --git a/...Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png b/...Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Dark-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Dark-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Light-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Light-1-linux.png
diff --git a/...napshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Dark-1-linux.png b/...napshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Dark-1-linux.png
diff --git a/...apshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Light-1-linux.png b/...apshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Light-1-linux.png
diff --git a/...visual.spec.ts-snapshots/Visual-Comparison-Article-Article-Ai-Theme-1-linux.png b/...visual.spec.ts-snapshots/Visual-Comparison-Article-Article-Ai-Theme-1-linux.png
diff --git a/...al.spec.ts-snapshots/Visual-Comparison-Article-Article-All-Headings-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-Article-Article-All-Headings-1-linux.png
diff --git a/....ts-snapshots/Visual-Comparison-Article-Article-Collaboration-Theme-1-linux.png b/....ts-snapshots/Visual-Comparison-Article-Article-Collaboration-Theme-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-Article-Article-Dark-Hero-Image-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-Article-Article-Dark-Hero-Image-1-linux.png
diff --git a/...pec.ts-snapshots/Visual-Comparison-Article-Article-Enterprise-Theme-1-linux.png b/...pec.ts-snapshots/Visual-Comparison-Article-Article-Enterprise-Theme-1-linux.png
diff --git a/...pec.ts-snapshots/Visual-Comparison-Article-Article-Light-Hero-Image-1-linux.png b/...pec.ts-snapshots/Visual-Comparison-Article-Article-Light-Hero-Image-1-linux.png
diff --git a/...sual.spec.ts-snapshots/Visual-Comparison-Article-Article-Playground-1-linux.png b/...sual.spec.ts-snapshots/Visual-Comparison-Article-Article-Playground-1-linux.png
diff --git a/...c.ts-snapshots/Visual-Comparison-Article-Article-Productivity-Theme-1-linux.png b/...c.ts-snapshots/Visual-Comparison-Article-Article-Productivity-Theme-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-Article-Article-Security-Theme-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-Article-Article-Security-Theme-1-linux.png
diff --git a/...al.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png