InlineMessage: make variant prop optional

.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

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);

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(<InlineMessage data-testid="container">test</InlineMessage>)
+    expect(screen.getByTestId('container')).not.toHaveAttribute('data-variant')
+  })
+
+  it('should render InfoIcon when variant is not provided', () => {
+    const {container} = render(<InlineMessage>test without variant</InlineMessage>)
+    expect(screen.getByText('test without variant')).toBeInTheDocument()
+    const svg = container.querySelector('svg.octicon-info')
+    expect(svg).toBeInTheDocument()
+  })
+
   it('should render leading visual', () => {
     render(
       <>

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,17 +52,19 @@ 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 = <InfoIcon className={classes.InlineMessageIcon} />
   }
 
   return (
     <div
       {...rest}
       className={clsx(className, classes.InlineMessage)}
       data-size={size}
-      data-variant={variant}
+      data-variant={variant ?? undefined}
       data-component="InlineMessage"
     >
       {icon}