feat(InlineMessage): remove support for sx prop (#6813)

Author: joshblack

.changeset/shy-flies-marry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `sx` prop for `InlineMessage`

packages/react/src/InlineMessage/InlineMessage.tsx

@@ -2,56 +2,41 @@ import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@p
 import {clsx} from 'clsx'
 import type React from 'react'
 import classes from './InlineMessage.module.css'
-import type {SxProp} from '../sx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning'
 
-export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
-  SxProp & {
-    /**
-     * Specify the size of the InlineMessage
-     */
-    size?: 'small' | 'medium'
+export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & {
+  /**
+   * Specify the size of the InlineMessage
+   */
+  size?: 'small' | 'medium'
 
-    /**
-     * Specify the type of the InlineMessage
-     */
-    variant: MessageVariant
-  }
-
-const variantToIcon = (variant: MessageVariant): React.ReactNode => {
-  const icons = {
-    warning: <AlertIcon className={classes.InlineMessageIcon} />,
-    critical: <AlertIcon className={classes.InlineMessageIcon} />,
-    success: <CheckCircleIcon className={classes.InlineMessageIcon} />,
-    unavailable: <AlertIcon className={classes.InlineMessageIcon} />,
-  }
+  /**
+   * Specify the type of the InlineMessage
+   */
+  variant: MessageVariant
+}
 
-  return icons[variant]
+const icons: Record<MessageVariant, React.ReactNode> = {
+  warning: <AlertIcon className={classes.InlineMessageIcon} />,
+  critical: <AlertIcon className={classes.InlineMessageIcon} />,
+  success: <CheckCircleIcon className={classes.InlineMessageIcon} />,
+  unavailable: <AlertIcon className={classes.InlineMessageIcon} />,
 }
 
-const variantToSmallIcon = (variant: MessageVariant): React.ReactNode => {
-  const icons = {
-    warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
-    critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
-    success: <CheckCircleFillIcon className={classes.InlineMessageIcon} size={12} />,
-    unavailable: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
-  }
-  return icons[variant]
+const smallIcons: Record<MessageVariant, React.ReactNode> = {
+  warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+  critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+  success: <CheckCircleFillIcon className={classes.InlineMessageIcon} size={12} />,
+  unavailable: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
 }
 
 export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) {
-  const icon = size === 'small' ? variantToSmallIcon(variant) : variantToIcon(variant)
+  const icon = size === 'small' ? smallIcons[variant] : icons[variant]
 
   return (
-    <BoxWithFallback
-      className={clsx(className, classes.InlineMessage)}
-      {...rest}
-      data-size={size}
-      data-variant={variant}
-    >
+    <div {...rest} className={clsx(className, classes.InlineMessage)} data-size={size} data-variant={variant}>
       {icon}
       {children}
-    </BoxWithFallback>
+    </div>
   )
 }