diff --git a/.changeset/wet-otters-pull.md b/.changeset/wet-otters-pull.md new file mode 100644 index 00000000000..ca7b0df27b8 --- /dev/null +++ b/.changeset/wet-otters-pull.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Banner: Fix margin for inline actions diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png index 07a1b9a0764..2a98f13bf72 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png index 9e349c0ed8d..0052a5ca4e6 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png index 07a1b9a0764..2a98f13bf72 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png index 07a1b9a0764..2a98f13bf72 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png index 554d38cc4ac..de78a731cff 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png index c9d3bf663df..234d98f4b41 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png index b37a7ec3f2b..043d7fa29b1 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png index c9d3bf663df..234d98f4b41 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png index c9d3bf663df..234d98f4b41 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png index 2ed48cfcd1a..ba88fc8601d 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png differ diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 5e20ad6cb73..2bef4bbe4ed 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -143,7 +143,7 @@ } } -.Banner[data-dismissible] .BannerActions { +.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions { margin-block-end: var(--base-size-6); } diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 2a9bbfd459b..d1061e966ed 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -338,7 +338,7 @@ const StyledBanner = toggleStyledComponent( } } - &[data-dismissible] .BannerActions { + &[data-dismissible]:not([data-title-hidden]) .BannerActions { margin-block-end: var(--base-size-6, 0.375rem); }