From 64554943c2b60bb8240d20db4e518db744876e62 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 3 Jun 2026 18:48:47 +0100 Subject: [PATCH 1/4] InlineMessage: make variant prop optional When no variant is specified, the component uses the default foreground color and renders an InfoIcon as the leading visual. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/inline-message-optional-variant.md | 5 +++++ .../react/src/InlineMessage/InlineMessage.module.css | 2 +- .../react/src/InlineMessage/InlineMessage.test.tsx | 12 ++++++++++++ packages/react/src/InlineMessage/InlineMessage.tsx | 10 ++++++---- 4 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 .changeset/inline-message-optional-variant.md 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..73a2260ed94 100644 --- a/packages/react/src/InlineMessage/InlineMessage.module.css +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -5,7 +5,7 @@ /* stylelint-disable-next-line primer/typography */ line-height: var(--inline-message-lineHeight); /* stylelint-disable-next-line primer/colors */ - color: var(--inline-message-fgColor); + color: var(--inline-message-fgColor, var(--fgColor-default)); column-gap: 0.5rem; grid-template-columns: auto 1fr; align-items: start; diff --git a/packages/react/src/InlineMessage/InlineMessage.test.tsx b/packages/react/src/InlineMessage/InlineMessage.test.tsx index 63b99ce825d..67d76aa435a 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') + 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} From d0a47b5325d5403a22c0e5499a45fb71856cbfc5 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 3 Jun 2026 18:52:58 +0100 Subject: [PATCH 2/4] Fix: use inherited foreground color for default variant Remove the explicit color declaration from the base rule so that InlineMessage without a variant inherits the natural foreground color instead of being forced to a specific token. Color is now only set when a data-variant attribute is present. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../react/src/InlineMessage/InlineMessage.module.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css index 73a2260ed94..d978c79a609 100644 --- a/packages/react/src/InlineMessage/InlineMessage.module.css +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -4,8 +4,6 @@ font-size: var(--inline-message-fontSize); /* stylelint-disable-next-line primer/typography */ line-height: var(--inline-message-lineHeight); - /* stylelint-disable-next-line primer/colors */ - color: var(--inline-message-fgColor, var(--fgColor-default)); column-gap: 0.5rem; grid-template-columns: auto 1fr; align-items: start; @@ -21,19 +19,19 @@ } &[data-variant='warning'] { - --inline-message-fgColor: var(--fgColor-attention); + color: var(--fgColor-attention); } &[data-variant='critical'] { - --inline-message-fgColor: var(--fgColor-danger); + color: var(--fgColor-danger); } &[data-variant='success'] { - --inline-message-fgColor: var(--fgColor-success); + color: var(--fgColor-success); } &[data-variant='unavailable'] { - --inline-message-fgColor: var(--fgColor-muted); + color: var(--fgColor-muted); } } From 216a2b5cfc44125cced3a2d227fce8a397f0c868 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 3 Jun 2026 19:00:22 +0100 Subject: [PATCH 3/4] Use custom property with fgColor-default as baseline Set --inline-message-fgColor to var(--fgColor-default) in the base rule and override it per data-variant attribute, restoring the single color declaration pattern. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../react/src/InlineMessage/InlineMessage.module.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css index d978c79a609..cff5c2839df 100644 --- a/packages/react/src/InlineMessage/InlineMessage.module.css +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -4,10 +4,14 @@ font-size: var(--inline-message-fontSize); /* stylelint-disable-next-line primer/typography */ line-height: var(--inline-message-lineHeight); + /* stylelint-disable-next-line primer/colors */ + color: var(--inline-message-fgColor); column-gap: 0.5rem; 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); @@ -19,19 +23,19 @@ } &[data-variant='warning'] { - color: var(--fgColor-attention); + --inline-message-fgColor: var(--fgColor-attention); } &[data-variant='critical'] { - color: var(--fgColor-danger); + --inline-message-fgColor: var(--fgColor-danger); } &[data-variant='success'] { - color: var(--fgColor-success); + --inline-message-fgColor: var(--fgColor-success); } &[data-variant='unavailable'] { - color: var(--fgColor-muted); + --inline-message-fgColor: var(--fgColor-muted); } } From fd61fd0459807a7dd0e8de6806d3d5081baafe57 Mon Sep 17 00:00:00 2001 From: Dylan Smith Date: Wed, 3 Jun 2026 19:07:43 +0100 Subject: [PATCH 4/4] Improve InfoIcon test assertion to check for octicon-info class Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- packages/react/src/InlineMessage/InlineMessage.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/InlineMessage/InlineMessage.test.tsx b/packages/react/src/InlineMessage/InlineMessage.test.tsx index 67d76aa435a..419544145e6 100644 --- a/packages/react/src/InlineMessage/InlineMessage.test.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.test.tsx @@ -103,7 +103,7 @@ describe('InlineMessage', () => { 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') + const svg = container.querySelector('svg.octicon-info') expect(svg).toBeInTheDocument() })