diff --git a/.changeset/lemon-islands-fold.md b/.changeset/lemon-islands-fold.md new file mode 100644 index 00000000000..425b9fb2eda --- /dev/null +++ b/.changeset/lemon-islands-fold.md @@ -0,0 +1,8 @@ +--- +'@primer/react': patch +--- + +Banner: Improve button layout wrapping behavior with CSS container queries + +- Banners with titles now always wrap action buttons for better readability +- Banners without titles or dismiss buttons use container queries for responsive wrapping based on content length 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 739d4c94cb7..9e8067d2872 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 423bef219c4..179460440b3 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-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png index 8839290bafd..8b9a4aa17ec 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 98dad04dd2c..8e653c47a2b 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-InSidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png index 6f6f95b3003..9876989b5bd 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png index c34484ac05a..ca8e8da1533 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png index 6f6f95b3003..9876989b5bd 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png index 6f6f95b3003..9876989b5bd 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png index 57b9f3ce786..7a15f8e65be 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png index 10f614a3abf..d3141cce671 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png index 57b9f3ce786..7a15f8e65be 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png index 57b9f3ce786..7a15f8e65be 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png index 54e3ce14bbf..88b7ba8dd2f 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png index 964e03c4048..0a9703f28b1 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png index e6ddd0b5be0..32af5bf286f 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png index 54e3ce14bbf..88b7ba8dd2f 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png index 54e3ce14bbf..88b7ba8dd2f 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png index fd939d29bb6..2004869dbe4 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png index 0add34b9f5c..c463514d68c 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png index fd939d29bb6..2004869dbe4 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png index fd939d29bb6..2004869dbe4 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png index ed588c23a67..269c4814cb8 100644 Binary files a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-colorblind-linux.png new file mode 100644 index 00000000000..4b1b362314e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-dimmed-linux.png new file mode 100644 index 00000000000..267d80fa33e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6eab50dbcb0 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-linux.png new file mode 100644 index 00000000000..4b1b362314e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4b1b362314e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-colorblind-linux.png new file mode 100644 index 00000000000..c8db9d3f695 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-high-contrast-linux.png new file mode 100644 index 00000000000..07261133ba2 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-linux.png new file mode 100644 index 00000000000..c8db9d3f695 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-tritanopia-linux.png new file mode 100644 index 00000000000..c8db9d3f695 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..c93900c83f9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..3a9f0109753 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsLong-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-colorblind-linux.png new file mode 100644 index 00000000000..145d089e347 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-dimmed-linux.png new file mode 100644 index 00000000000..db82a43cef9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a07d5156f7b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-linux.png new file mode 100644 index 00000000000..145d089e347 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-tritanopia-linux.png new file mode 100644 index 00000000000..145d089e347 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-colorblind-linux.png new file mode 100644 index 00000000000..673a580fa0f Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-high-contrast-linux.png new file mode 100644 index 00000000000..20f82d6e805 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-linux.png new file mode 100644 index 00000000000..673a580fa0f Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-tritanopia-linux.png new file mode 100644 index 00000000000..673a580fa0f Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..5b38ea16c15 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..c522dd007c5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActionsShort-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-features--with-notice-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-features--with-notice-light-linux.png index edef41f5a10..bb7e8cc9ba6 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-features--with-notice-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-features--with-notice-light-linux.png differ diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts index 97f10fd7f50..e93712b8598 100644 --- a/e2e/components/Banner.test.ts +++ b/e2e/components/Banner.test.ts @@ -47,8 +47,8 @@ const stories: Array<{title: string; id: string; viewports?: Array { diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json index 11f6ab12bf5..8ed986a7206 100644 --- a/packages/react/src/Banner/Banner.docs.json +++ b/packages/react/src/Banner/Banner.docs.json @@ -33,7 +33,10 @@ "id": "components-banner-features--with-hidden-title" }, { - "id": "components-banner-features--with-hidden-title-and-actions" + "id": "components-banner-features--with-hidden-title-and-actions-short" + }, + { + "id": "components-banner-features--with-hidden-title-and-actions-long" }, { "id": "components-banner-features--dismissible-with-hidden-title-and-actions" diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx index 3b9ffbe8829..e11ab5ce558 100644 --- a/packages/react/src/Banner/Banner.features.stories.tsx +++ b/packages/react/src/Banner/Banner.features.stories.tsx @@ -162,7 +162,7 @@ export const WithHiddenTitle = () => { ) } -export const WithHiddenTitleAndActions = () => { +export const WithHiddenTitleAndActionsLong = () => { return ( { ) } +export const WithHiddenTitleAndActionsShort = () => { + return ( + A short message that does not wrap.} + variant="warning" + primaryAction={Button} + /> + ) +} + export const DismissibleWithHiddenTitleAndSecondaryAction = () => { return ( = { warning: 'Warning', } +const BANNER_CONTENT_LENGTH_THRESHOLD = { + LONG_CONTENT_THRESHOLD: 50, + NON_STRING_CONTENT_ESTIMATE: 80, +} as const + export const Banner = React.forwardRef(function Banner( { 'aria-label': label, @@ -134,6 +139,21 @@ export const Banner = React.forwardRef(function Banner }, [title]) } + const getContentLength = (title?: string, description?: React.ReactNode): 'short' | 'long' => { + const titleLength = title?.length || 0 + const descriptionLength = + typeof description === 'string' + ? description.length + : description + ? BANNER_CONTENT_LENGTH_THRESHOLD.NON_STRING_CONTENT_ESTIMATE + : 0 + + const totalLength = titleLength + descriptionLength + + if (totalLength > BANNER_CONTENT_LENGTH_THRESHOLD.LONG_CONTENT_THRESHOLD) return 'long' + return 'short' + } + return (
(function Banner className={clsx(className, classes.Banner)} data-dismissible={onDismiss ? '' : undefined} data-title-hidden={hideTitle ? '' : undefined} + data-content-length={getContentLength(title, description)} data-variant={variant} tabIndex={-1} ref={ref}