diff --git a/.changeset/inline-message-optional-variant.md b/.changeset/inline-message-optional-variant.md new file mode 100644 index 00000000000..23e7f1999fb --- /dev/null +++ b/.changeset/inline-message-optional-variant.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +InlineMessage: Make `variant` prop optional, defaulting to the standard foreground color with an info icon diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css index 0ddbea7498b..cff5c2839df 100644 --- a/packages/react/src/InlineMessage/InlineMessage.module.css +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -10,6 +10,8 @@ grid-template-columns: auto 1fr; align-items: start; + --inline-message-fgColor: var(--fgColor-default); + &[data-size='small'] { --inline-message-fontSize: var(--text-body-size-small); --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); diff --git a/packages/react/src/InlineMessage/InlineMessage.test.tsx b/packages/react/src/InlineMessage/InlineMessage.test.tsx index 63b99ce825d..419544145e6 100644 --- a/packages/react/src/InlineMessage/InlineMessage.test.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.test.tsx @@ -95,6 +95,18 @@ describe('InlineMessage', () => { expect(screen.getByTestId('container')).toHaveAttribute('data-variant', 'warning') }) + it('should not set data-variant when variant is not provided', () => { + render(test) + expect(screen.getByTestId('container')).not.toHaveAttribute('data-variant') + }) + + it('should render InfoIcon when variant is not provided', () => { + const {container} = render(test without variant) + expect(screen.getByText('test without variant')).toBeInTheDocument() + const svg = container.querySelector('svg.octicon-info') + expect(svg).toBeInTheDocument() + }) + it('should render leading visual', () => { render( <> diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx index b1729bc83ef..e6a60528d89 100644 --- a/packages/react/src/InlineMessage/InlineMessage.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.tsx @@ -1,4 +1,4 @@ -import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react' +import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon, InfoIcon} from '@primer/octicons-react' import {clsx} from 'clsx' import type React from 'react' import {isValidElementType} from 'react-is' @@ -14,7 +14,7 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & { /** * Specify the type of the InlineMessage */ - variant: MessageVariant + variant?: MessageVariant /** * A custom leading visual (icon or other element) to display instead of the default variant icon. @@ -52,9 +52,11 @@ export function InlineMessage({ } else { icon = LeadingVisual } - } else { + } else if (variant) { // Use default icon based on variant and size icon = size === 'small' ? smallIcons[variant] : icons[variant] + } else { + icon = } return ( @@ -62,7 +64,7 @@ export function InlineMessage({ {...rest} className={clsx(className, classes.InlineMessage)} data-size={size} - data-variant={variant} + data-variant={variant ?? undefined} data-component="InlineMessage" > {icon}