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} - +
) }