From 409e1e848502fade60156fa10830a4f247ce97f9 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 18:55:43 +0000 Subject: [PATCH 1/2] initial commit --- .../InlineMessage.dev.stories.tsx | 18 +++ .../InlineMessage/InlineMessage.module.css | 42 ++++++ .../react/src/InlineMessage/InlineMessage.tsx | 130 +++++++++++------- 3 files changed, 138 insertions(+), 52 deletions(-) create mode 100644 packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx create mode 100644 packages/react/src/InlineMessage/InlineMessage.module.css diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx new file mode 100644 index 00000000000..f587ddb6386 --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx @@ -0,0 +1,18 @@ +import type {Meta} from '@storybook/react' +import React from 'react' +import {InlineMessage} from '.' + +const meta = { + title: 'Experimental/Components/InlineMessage/Dev', + component: InlineMessage, +} satisfies Meta + +export default meta + +export const Default = () => { + return ( + + An example inline message + + ) +} diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css new file mode 100644 index 00000000000..8cbcf66d87e --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -0,0 +1,42 @@ +.InlineMessage { + display: grid; + /* stylelint-disable-next-line primer/typography */ + font-size: var(--inline-message-fontSize); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--inline-message-lineHeight); + /* stylelint-disable-next-line primer/colors */ + color: var(--inline-message-fgColor); + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; + + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } + + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } + + &[data-variant='warning'] { + --inline-message-fgColor: var(--fgColor-attention); + } + + &[data-variant='critical'] { + --inline-message-fgColor: var(--fgColor-danger); + } + + &[data-variant='success'] { + --inline-message-fgColor: var(--fgColor-success); + } + + &[data-variant='unavailable'] { + --inline-message-fgColor: var(--fgColor-muted); + } +} + +.InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)) !important; +} diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx index 55f2296a6fd..9c85e1c720b 100644 --- a/packages/react/src/InlineMessage/InlineMessage.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.tsx @@ -1,78 +1,104 @@ 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' type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning' -export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & { - /** - * Specify the size of the InlineMessage - */ - size?: 'small' | 'medium' - - /** - * Specify the type of the InlineMessage - */ - variant: MessageVariant -} +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' -const StyledMessage = 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')}); +export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & + SxProp & { + /** + * Specify the size of the InlineMessage + */ + size?: 'small' | 'medium' - &[data-size='small'] { - --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')}); - --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + /** + * Specify the type of the InlineMessage + */ + variant: MessageVariant } - &[data-size='medium'] { - --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')}); - --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); - } +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-variant='warning'] { - --inline-message-fgColor: ${get('colors.attention.fg')}; - } + &[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-variant='critical'] { - --inline-message-fgColor: ${get('colors.danger.fg')}; - } + &[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='success'] { - --inline-message-fgColor: ${get('colors.success.fg')}; - } + &[data-variant='warning'] { + --inline-message-fgColor: ${get('colors.attention.fg')}; + } - &[data-variant='unavailable'] { - --inline-message-fgColor: ${get('colors.fg.muted')}; - } + &[data-variant='critical'] { + --inline-message-fgColor: ${get('colors.danger.fg')}; + } - & .InlineMessageIcon { - min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); - } -` + &[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: Record = { - warning: , - critical: , - success: , - unavailable: , + warning: , + critical: , + success: , + unavailable: , } const variantToSmallIcon: Record = { - warning: , - critical: , - success: , - unavailable: , + warning: , + critical: , + success: , + unavailable: , } -export function InlineMessage({children, size = 'medium', variant, ...rest}: InlineMessageProps) { +export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant] + if (enabled) { + return ( + + {icon} + {children} + + ) + } return ( {icon} From 9eada3131bc685eabd0374d9d196270938cc89d2 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 18:59:59 +0000 Subject: [PATCH 2/2] add changeset --- .changeset/silent-cherries-behave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silent-cherries-behave.md diff --git a/.changeset/silent-cherries-behave.md b/.changeset/silent-cherries-behave.md new file mode 100644 index 00000000000..ee09a911a13 --- /dev/null +++ b/.changeset/silent-cherries-behave.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Migrate 'InlineMessage' component to use CSS modules