diff --git a/.changeset/spicy-eggs-melt.md b/.changeset/spicy-eggs-melt.md new file mode 100644 index 00000000000..d2708ac8eb7 --- /dev/null +++ b/.changeset/spicy-eggs-melt.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Banner: Update alignment of actions when it is dismissible and has a hidden title 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 new file mode 100644 index 00000000000..07a1b9a0764 Binary files /dev/null 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 new file mode 100644 index 00000000000..a0ec27362de Binary files /dev/null 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 new file mode 100644 index 00000000000..9e349c0ed8d Binary files /dev/null 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 new file mode 100644 index 00000000000..07a1b9a0764 Binary files /dev/null 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 new file mode 100644 index 00000000000..07a1b9a0764 Binary files /dev/null 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 new file mode 100644 index 00000000000..8c20a8ef9cf Binary files /dev/null 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 new file mode 100644 index 00000000000..554d38cc4ac Binary files /dev/null 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 new file mode 100644 index 00000000000..8c20a8ef9cf Binary files /dev/null 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 new file mode 100644 index 00000000000..8c20a8ef9cf Binary files /dev/null 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 new file mode 100644 index 00000000000..f196708ecc9 Binary files /dev/null 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 new file mode 100644 index 00000000000..403db9eb7e2 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png differ diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts index 8182e8fe20f..6efdde8d40c 100644 --- a/e2e/components/Banner.test.ts +++ b/e2e/components/Banner.test.ts @@ -51,6 +51,11 @@ const stories: Array<{title: string; id: string; viewports?: Array { ) } +export const DismissibleWithHiddenTitleAndActions = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + variant="warning" + primaryAction={Button} + secondaryAction={Button} + /> + ) +} + export const WithActions = () => { return (