diff --git a/.changeset/tame-dancers-count.md b/.changeset/tame-dancers-count.md new file mode 100644 index 00000000000..eb101505fbb --- /dev/null +++ b/.changeset/tame-dancers-count.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix alignment styles for Banner component with hidden titles 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 728f3b76eae..02ded707f33 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-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-dimmed-linux.png index e55fc11bd71..c7eb33129f2 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-dimmed-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-dimmed-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 bfa0e36283e..a945c643607 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 728f3b76eae..02ded707f33 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 728f3b76eae..02ded707f33 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-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-colorblind-linux.png index 98d9498ad7a..e3573ae4e4e 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-colorblind-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 1affdf266bc..2d038e0cb9a 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-DismissibleWithHiddenTitleAndActions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-linux.png index 98d9498ad7a..e3573ae4e4e 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png index 98d9498ad7a..e3573ae4e4e 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png index a20cd366dd5..739d4c94cb7 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png index 8dbef5a2730..423bef219c4 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-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 8ea2b7644ee..967762cf6c6 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-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-dimmed-linux.png index fdfb131f0fd..4600274c714 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-dimmed-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-dimmed-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 5ab95651e1a..8fe55a15d11 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 8ea2b7644ee..967762cf6c6 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 8ea2b7644ee..967762cf6c6 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-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-colorblind-linux.png index 57eb7d42685..cfe7997ce43 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-colorblind-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 67092e14f8f..ee31aeb9e72 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/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png index 57eb7d42685..cfe7997ce43 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png index 57eb7d42685..cfe7997ce43 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png index 16188138c43..8839290bafd 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png index e80d0194bea..98dad04dd2c 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png index 13e5722d722..436fb669974 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png index d591b0745bb..28aa3b3dbe2 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png index b391cbfa558..5f3c28759da 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png index 13e5722d722..436fb669974 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png index 13e5722d722..436fb669974 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png index 1d913f24277..05ea355cd49 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png index f3a760e9f96..142dccf10c0 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png index 1d913f24277..05ea355cd49 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png index 1d913f24277..05ea355cd49 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png index 3c5e5458cbf..9d327182023 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png index ce56d5a2c63..3f68804cc22 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png differ diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 24c603b3e2c..6fda43d786e 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -75,7 +75,7 @@ margin-block: var(--base-size-8); } -.Banner[data-title-hidden] .BannerContent { +.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent { margin-block: var(--base-size-6); } @@ -108,7 +108,8 @@ fill: var(--banner-icon-fgColor); } -.Banner[data-title-hidden] .BannerIcon svg { +/* stylelint-disable-next-line selector-max-specificity */ +.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg { height: var(--base-size-16); }