diff --git a/.changeset/twelve-tables-leave.md b/.changeset/twelve-tables-leave.md new file mode 100644 index 00000000000..718952e665b --- /dev/null +++ b/.changeset/twelve-tables-leave.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add support for custom icons when a Banner is variant="upsell" diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json index eb682524e0a..e17bbe3b4bd 100644 --- a/packages/react/src/Banner/Banner.docs.json +++ b/packages/react/src/Banner/Banner.docs.json @@ -18,13 +18,13 @@ }, { "name": "hideTitle", - "type": "boolean", + "type": "boolean", "description": "Whether to hide the title visually." }, { "name": "icon", "type": "React.ReactNode", - "description": "Provide an icon for the banner" + "description": "Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`" }, { "name": "onDismiss", diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx index 3c3bbe243fa..04f98d78948 100644 --- a/packages/react/src/Banner/Banner.features.stories.tsx +++ b/packages/react/src/Banner/Banner.features.stories.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {CopilotIcon} from '@primer/octicons-react' import {action} from '@storybook/addon-actions' import type {Meta} from '@storybook/react' import {Banner} from '../Banner' @@ -202,3 +203,15 @@ export const WithActions = () => { /> ) } + +export const CustomIcon = () => { + return ( + } + onDismiss={action('onDismiss')} + variant="upsell" + /> + ) +} diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index 0664cc0c692..d0c99438b82 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -160,22 +160,22 @@ describe('Banner', () => { expect(container.firstChild).toHaveAttribute('data-testid', 'test') }) - it('should support a custom icon only for info variants', () => { + it('should support a custom icon for info and upsell variants', () => { const CustomIcon = jest.fn(() => ) const {rerender} = render( } />, ) expect(screen.getByTestId('icon')).toBeInTheDocument() + rerender(} />) + expect(screen.getByTestId('icon')).toBeInTheDocument() + rerender(} />) expect(screen.queryByTestId('icon')).toBe(null) rerender(} />) expect(screen.queryByTestId('icon')).toBe(null) - rerender(} />) - expect(screen.queryByTestId('icon')).toBe(null) - rerender(} />) expect(screen.queryByTestId('icon')).toBe(null) }) diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index ffc72811a9e..ca8fc65a044 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -28,8 +28,7 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & { hideTitle?: boolean /** - * Provide an icon for the banner. - * Note: Only `variant="info"` banners should use custom icons + * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell` */ icon?: React.ReactNode @@ -99,6 +98,7 @@ export const Banner = React.forwardRef(function Banner const hasActions = primaryAction || secondaryAction const bannerRef = React.useRef(null) const ref = useMergedRefs(forwardRef, bannerRef) + const supportsCustomIcon = variant === 'info' || variant === 'upsell' if (__DEV__) { // This hook is called consistently depending on the environment @@ -134,7 +134,7 @@ export const Banner = React.forwardRef(function Banner ref={ref} > - {icon && variant === 'info' ? icon : iconForVariant[variant]} + {icon && supportsCustomIcon ? icon : iconForVariant[variant]} {title ? (