From 4208dc0eeda93c072f4b197ddd1128ccc6fe019f Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 7 Apr 2026 15:05:02 -0700 Subject: [PATCH 01/12] add data-component for AvatarStack --- packages/react/src/AvatarStack/AvatarStack.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index ae400a90876..238120a4efd 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -14,7 +14,8 @@ const transformChildren = (children: React.ReactNode, shape: AvatarStackProps['s return React.cloneElement(child, { ...child.props, square: (shape === 'square' ? true : undefined) || child.props.square, - className: clsx(child.props.className, 'pc-AvatarItem', classes.AvatarItem), + 'data-component': 'AvatarStack.Item', + className: clsx(child.props.className, classes.AvatarItem), }) }) } @@ -42,6 +43,7 @@ const AvatarStackBody = ({ } & React.ComponentPropsWithoutRef<'div'>) => { return (
3 ? '3+' : count} From c8b501086b0e690052c8ebacb9ec59f48e976aca Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 7 Apr 2026 15:44:49 -0700 Subject: [PATCH 02/12] add/update tests --- .../src/AvatarStack/AvatarStack.test.tsx | 27 ++++++++++++- .../__snapshots__/AvatarStack.test.tsx.snap | 40 ------------------- 2 files changed, 26 insertions(+), 41 deletions(-) delete mode 100644 packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap diff --git a/packages/react/src/AvatarStack/AvatarStack.test.tsx b/packages/react/src/AvatarStack/AvatarStack.test.tsx index 81bc50838e6..7a291de68b5 100644 --- a/packages/react/src/AvatarStack/AvatarStack.test.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.test.tsx @@ -25,9 +25,34 @@ const rightAvatarComp = ( describe('AvatarStack', () => { implementsClassName(AvatarStack, classes.AvatarStack) + describe('AvatarStack data-component attributes', () => { + it('renders AvatarStack with data-component attribute', () => { + const {container} = render(avatarComp) + const root = container.querySelector('[data-component="AvatarStack"]') + expect(root).toBeInTheDocument() + }) + + it('renders AvatarStack.Body with data-component attribute', () => { + const {container} = render(avatarComp) + const body = container.querySelector('[data-component="AvatarStack.Body"]') + expect(body).toBeInTheDocument() + }) + + it('renders AvatarStack.Item for each child', () => { + const {container} = render( + + + + , + ) + const items = container.querySelectorAll('[data-component="AvatarStack.Item"]') + expect(items).toHaveLength(2) + }) + }) it('respects alignRight props', () => { const {container} = render(rightAvatarComp) - expect(container.firstChild).toMatchSnapshot() + const root = container.querySelector('[data-component="AvatarStack"]') + expect(root).toHaveAttribute('data-align-right', '') }) it('should have a tabindex of 0 if there are no interactive children', () => { diff --git a/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap deleted file mode 100644 index 04f86ce225d..00000000000 --- a/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`AvatarStack > respects alignRight props 1`] = ` - -
- - - - - -
- -`; From fb17c9e276f8350d37514db7f4cb8bfaeb68551b Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 7 Apr 2026 15:54:33 -0700 Subject: [PATCH 03/12] I accidentally a thing --- packages/react/src/AvatarStack/AvatarStack.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 238120a4efd..0c487440c8b 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -15,7 +15,7 @@ const transformChildren = (children: React.ReactNode, shape: AvatarStackProps['s ...child.props, square: (shape === 'square' ? true : undefined) || child.props.square, 'data-component': 'AvatarStack.Item', - className: clsx(child.props.className, classes.AvatarItem), + className: clsx(child.props.className, 'pc-AvatarItem', classes.AvatarItem), }) }) } From 61a6b11b185804adc358a87d4409282ada41ebc5 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 7 Apr 2026 16:08:58 -0700 Subject: [PATCH 04/12] try without .Item --- packages/react/src/AvatarStack/AvatarStack.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 0c487440c8b..f7df678552a 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -14,7 +14,6 @@ const transformChildren = (children: React.ReactNode, shape: AvatarStackProps['s return React.cloneElement(child, { ...child.props, square: (shape === 'square' ? true : undefined) || child.props.square, - 'data-component': 'AvatarStack.Item', className: clsx(child.props.className, 'pc-AvatarItem', classes.AvatarItem), }) }) From 40788bbe7f328d6eaf5cd714a20a6390ae7453ba Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 7 Apr 2026 16:19:24 -0700 Subject: [PATCH 05/12] remove unused test --- packages/react/src/AvatarStack/AvatarStack.test.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.test.tsx b/packages/react/src/AvatarStack/AvatarStack.test.tsx index 7a291de68b5..b8c46e426e1 100644 --- a/packages/react/src/AvatarStack/AvatarStack.test.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.test.tsx @@ -37,18 +37,8 @@ describe('AvatarStack', () => { const body = container.querySelector('[data-component="AvatarStack.Body"]') expect(body).toBeInTheDocument() }) - - it('renders AvatarStack.Item for each child', () => { - const {container} = render( - - - - , - ) - const items = container.querySelectorAll('[data-component="AvatarStack.Item"]') - expect(items).toHaveLength(2) - }) }) + it('respects alignRight props', () => { const {container} = render(rightAvatarComp) const root = container.querySelector('[data-component="AvatarStack"]') From 7c384fd337cb3b2fa4a4703348883d84b1433683 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Thu, 9 Apr 2026 12:01:12 -0700 Subject: [PATCH 06/12] add test for Avatar --- packages/react/src/Avatar/Avatar.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx index 536c92f1710..ba816856822 100644 --- a/packages/react/src/Avatar/Avatar.test.tsx +++ b/packages/react/src/Avatar/Avatar.test.tsx @@ -7,6 +7,14 @@ import classes from './Avatar.module.css' describe('Avatar', () => { implementsClassName(Avatar, classes.Avatar) + describe('Avatar data-component attribute', () => { + it('renders Avatar with data-component attribute', () => { + render() + const avatar = screen.getByTestId('avatar') + expect(avatar).toHaveAttribute('data-component', 'Avatar') + }) + }) + it('renders small by default', () => { const size = 20 render() From 2d12c5269d4b8f9d2688f987877bb48be9f8e37a Mon Sep 17 00:00:00 2001 From: llastflowers Date: Thu, 9 Apr 2026 12:16:11 -0700 Subject: [PATCH 07/12] add data-component and tests for Banner and sub-components --- packages/react/src/Banner/Banner.test.tsx | 25 +++++++++++++++ packages/react/src/Banner/Banner.tsx | 38 ++++++++++++++++++----- 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index b8d71883c63..144dc4c6764 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -14,6 +14,31 @@ describe('Banner', () => { expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument() }) + it('renders data-component attributes', () => { + const {container} = render( + test primary action} + secondaryAction={test secondary action} + onDismiss={() => {}} + />, + ) + + expect(container.querySelector('[data-component="Banner"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Container"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Dismiss"]')).toBeInTheDocument() + + expect(container.querySelector('[data-component="Banner.PrimaryAction"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.SecondaryAction"]')).toBeInTheDocument() + + expect(container.querySelector('[data-component="Banner.Title"]')).toBeInTheDocument() + expect(container.querySelector('[data-component="Banner.Description"]')).toBeInTheDocument() + }) + it('should label the landmark element with the title by default', () => { render() const region = screen.getByRole('region', {name: 'My Banner Title'}) diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 44db1cbd3fb..489d68696ea 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -157,6 +157,7 @@ export const Banner = React.forwardRef(function Banner return (
(function Banner data-layout={rest.layout || 'default'} data-flush={flush ? '' : undefined} > -
{visual && supportsCustomIcon ? visual : iconForVariant[variant]}
-
-
+
+ {visual && supportsCustomIcon ? visual : iconForVariant[variant]} +
+
+
{title ? ( hideTitle ? ( @@ -190,6 +193,7 @@ export const Banner = React.forwardRef(function Banner
{dismissible ? ( (props: BannerTitleProps + {children} ) @@ -225,7 +235,7 @@ export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'> export function BannerDescription({children, className, ...rest}: BannerDescriptionProps) { return ( -
+
{children}
) @@ -238,7 +248,7 @@ export type BannerActionsProps = { export function BannerActions({primaryAction, secondaryAction}: BannerActionsProps) { return ( -
+
{secondaryAction ?? null} {primaryAction ?? null} @@ -255,7 +265,13 @@ export type BannerPrimaryActionProps = Omit const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => { return ( - ) @@ -267,7 +283,13 @@ export type BannerSecondaryActionProps = Omit const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => { return ( - ) From b0461bee508dae478e82d9200a29ab619dcf9728 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Thu, 9 Apr 2026 12:27:59 -0700 Subject: [PATCH 08/12] add data-component and test for BaseStyles --- packages/react/src/BaseStyles.tsx | 1 + packages/react/src/__tests__/BaseStyles.test.tsx | 6 ++++++ .../src/__tests__/__snapshots__/BaseStyles.test.tsx.snap | 1 + 3 files changed, 8 insertions(+) diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 4631ede237a..736c4938c62 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -21,6 +21,7 @@ function BaseStyles({children, color, className, as: Component = 'div', style, . return ( { implementsClassName(BaseStyles, classes.BaseStyles) + + it('renders BaseStyles with data-component attribute', () => { + const {container} = render(Hello) + expect(container.firstElementChild).toHaveAttribute('data-component', 'BaseStyles') + }) + it('has default styles', () => { const {container} = render(Hello) expect(container).toMatchSnapshot() diff --git a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap index 4ba921e051b..ae6832d7938 100644 --- a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap @@ -4,6 +4,7 @@ exports[`BaseStyles > has default styles 1`] = `
Hello From a7697ff03ffad8df2303063e7931b005ed52a370 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Fri, 10 Apr 2026 10:56:11 -0700 Subject: [PATCH 09/12] remove Banner.Dismiss per PR comment convo --- packages/react/src/Banner/Banner.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 489d68696ea..91ea5d63d19 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -193,7 +193,6 @@ export const Banner = React.forwardRef(function Banner
{dismissible ? ( Date: Fri, 10 Apr 2026 11:00:48 -0700 Subject: [PATCH 10/12] remove Banner.Container per PR comment convo --- packages/react/src/Banner/Banner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 91ea5d63d19..8837134b86d 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -175,7 +175,7 @@ export const Banner = React.forwardRef(function Banner
{visual && supportsCustomIcon ? visual : iconForVariant[variant]}
-
+
{title ? ( hideTitle ? ( From f4c7cd4f11722b0fc2f2b239e7756c62de4744c7 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Fri, 10 Apr 2026 12:24:55 -0700 Subject: [PATCH 11/12] update tests --- packages/react/src/Banner/Banner.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index 144dc4c6764..cdceaf0da13 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -27,10 +27,8 @@ describe('Banner', () => { expect(container.querySelector('[data-component="Banner"]')).toBeInTheDocument() expect(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Container"]')).toBeInTheDocument() expect(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument() expect(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument() - expect(container.querySelector('[data-component="Banner.Dismiss"]')).toBeInTheDocument() expect(container.querySelector('[data-component="Banner.PrimaryAction"]')).toBeInTheDocument() expect(container.querySelector('[data-component="Banner.SecondaryAction"]')).toBeInTheDocument() From c2bf001b315a53ea2aaa00fd57d7e1ec2046552e Mon Sep 17 00:00:00 2001 From: llastflowers Date: Fri, 10 Apr 2026 15:27:09 -0700 Subject: [PATCH 12/12] add test for Banner + IconButton --- packages/react/src/Banner/Banner.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index cdceaf0da13..73d771ad36a 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -37,6 +37,13 @@ describe('Banner', () => { expect(container.querySelector('[data-component="Banner.Description"]')).toBeInTheDocument() }) + it('renders Banner dismiss IconButton with data-component attribute', () => { + const {container} = render( {}} />) + + const dismissButton = container.querySelector('[data-component="Banner"] [data-component="IconButton"]') + expect(dismissButton).toBeInTheDocument() + }) + it('should label the landmark element with the title by default', () => { render() const region = screen.getByRole('region', {name: 'My Banner Title'})