diff --git a/.changeset/calm-tigers-complain.md b/.changeset/calm-tigers-complain.md
new file mode 100644
index 00000000000..aef663c8c91
--- /dev/null
+++ b/.changeset/calm-tigers-complain.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from the InlineMessage component
diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
index 2dc01fb1e0a..2ef54e401d0 100644
--- a/packages/react/src/InlineMessage/InlineMessage.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -1,16 +1,12 @@
import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react'
import {clsx} from 'clsx'
import React from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
import classes from './InlineMessage.module.css'
import type {SxProp} from '../sx'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning'
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
SxProp & {
/**
@@ -24,62 +20,18 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
variant: MessageVariant
}
-const StyledMessage = toggleStyledComponent(
- CSS_MODULES_FEATURE_FLAG,
- 'div',
- styled.div`
- display: grid;
- column-gap: 0.5rem;
- grid-template-columns: auto 1fr;
- align-items: start;
- color: var(--inline-message-fgColor, ${get('colors.fg.muted')});
- line-height: var(--inline-message-lineHeight);
- font-size: var(--inline-message-fontSize, ${get('fontSizes.1')});
-
- &[data-size='small'] {
- --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')});
- --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
- }
-
- &[data-size='medium'] {
- --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')});
- --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
- }
-
- &[data-variant='warning'] {
- --inline-message-fgColor: ${get('colors.attention.fg')};
- }
-
- &[data-variant='critical'] {
- --inline-message-fgColor: ${get('colors.danger.fg')};
- }
-
- &[data-variant='success'] {
- --inline-message-fgColor: ${get('colors.success.fg')};
- }
-
- &[data-variant='unavailable'] {
- --inline-message-fgColor: ${get('colors.fg.muted')};
- }
-
- & .InlineMessageIcon {
- min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
- }
- `,
-)
-
-const variantToIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => {
+const variantToIcon = (variant: MessageVariant): React.ReactNode => {
const icons = {
- warning: ,
- critical: ,
- success: ,
- unavailable: ,
+ warning: ,
+ critical: ,
+ success: ,
+ unavailable: ,
}
return icons[variant]
}
-const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => {
+const variantToSmallIcon = (variant: MessageVariant): React.ReactNode => {
const icons = {
warning: ,
critical: ,
@@ -89,19 +41,34 @@ const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.Re
return icons[variant]
}
-export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) {
- const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
- const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant)
+export function InlineMessage({
+ children,
+ className,
+ size = 'medium',
+ variant,
+ sx: sxProp = defaultSxProp,
+ ...rest
+}: InlineMessageProps) {
+ const icon = size === 'small' ? variantToSmallIcon(variant) : variantToIcon(variant)
+
+ if (sxProp !== defaultSxProp) {
+ return (
+
+ {icon}
+ {children}
+
+ )
+ }
return (
-
+
{icon}
{children}
-
+
)
}