Remove CSS modules feature flag from the InlineMessage component (#5804)

Author: jonrohan

.changeset/calm-tigers-complain.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from the InlineMessage component

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: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
-    critical: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
-    success: <CheckCircleIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
-    unavailable: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
+    warning: <AlertIcon className={classes.InlineMessageIcon} />,
+    critical: <AlertIcon className={classes.InlineMessageIcon} />,
+    success: <CheckCircleIcon className={classes.InlineMessageIcon} />,
+    unavailable: <AlertIcon className={classes.InlineMessageIcon} />,
   }
 
   return icons[variant]
 }
 
-const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => {
+const variantToSmallIcon = (variant: MessageVariant): React.ReactNode => {
   const icons = {
     warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
     critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
@@ -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 (
+      <Box
+        sx={sxProp}
+        className={clsx(className, classes.InlineMessage)}
+        {...rest}
+        data-size={size}
+        data-variant={variant}
+      >
+        {icon}
+        {children}
+      </Box>
+    )
+  }
   return (
-    <StyledMessage
-      className={clsx(className, enabled && classes.InlineMessage)}
-      {...rest}
-      data-size={size}
-      data-variant={variant}
-    >
+    <div className={clsx(className, classes.InlineMessage)} {...rest} data-size={size} data-variant={variant}>
       {icon}
       {children}
-    </StyledMessage>
+    </div>
   )
 }