diff --git a/.changeset/green-rice-clean.md b/.changeset/green-rice-clean.md new file mode 100644 index 00000000000..b8242120c03 --- /dev/null +++ b/.changeset/green-rice-clean.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from Text component diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx index 190690d0c34..b1c8a5c7954 100644 --- a/packages/react/src/Text/Text.test.tsx +++ b/packages/react/src/Text/Text.test.tsx @@ -6,7 +6,12 @@ import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' describe('Text', () => { - behavesAsComponent({Component: Text}) + behavesAsComponent({ + Component: Text, + options: { + skipDisplayName: true, + }, + }) checkExports('Text', { default: Text, diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx index a6cd88e276f..a4a0f90fd21 100644 --- a/packages/react/src/Text/Text.tsx +++ b/packages/react/src/Text/Text.tsx @@ -1,113 +1,62 @@ import {clsx} from 'clsx' -import styled, {type StyledComponent} from 'styled-components' -import React, {forwardRef} from 'react' +import React from 'react' import type {SystemCommonProps, SystemTypographyProps} from '../constants' -import {COMMON, TYPOGRAPHY} from '../constants' import type {SxProp} from '../sx' -import sx from '../sx' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import {useRefObjectAsForwardedRef} from '../hooks' -import type {ComponentProps} from '../utils/types' import {includesSystemProps} from '../utils/includeSystemProps' import classes from './Text.module.css' -type StyledTextProps = { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - as?: React.ComponentType | keyof JSX.IntrinsicElements +export type TextProps = { + as?: As size?: 'large' | 'medium' | 'small' weight?: 'light' | 'normal' | 'medium' | 'semibold' -} & SystemTypographyProps & +} & DistributiveOmit, 'as'> & + SystemTypographyProps & SystemCommonProps & SxProp -const StyledText = styled.span` - ${TYPOGRAPHY}; - ${COMMON}; - - &:where([data-size='small']) { - font-size: var(--text-body-size-small, 0.75rem); - line-height: var(--text-body-lineHeight-small, 1.6666); - } - - &:where([data-size='medium']) { - font-size: var(--text-body-size-medium, 0.875rem); - line-height: var(--text-body-lineHeight-medium, 1.4285); - } - - &:where([data-size='large']) { - font-size: var(--text-body-size-large, 1rem); - line-height: var(--text-body-lineHeight-large, 1.5); - } - - &:where([data-weight='light']) { - font-weight: var(--base-text-weight-light, 300); - } - - &:where([data-weight='normal']) { - font-weight: var(--base-text-weight-normal, 400); - } - - &:where([data-weight='medium']) { - font-weight: var(--base-text-weight-medium, 500); - } - - &:where([data-weight='semibold']) { - font-weight: var(--base-text-weight-semibold, 600); - } - - ${sx}; -` - -const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => { - const enabled = useFeatureFlag('primer_react_css_modules_ga') - +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function Text(props: TextProps, forwardedRef: React.ForwardedRef) { + const {as: Component = 'span', className, size, weight, ...rest} = props const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) - if (enabled) { - // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component - if (includesSystemProps(props)) { - return ( - // @ts-ignore shh - - ) - } + // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component + if (includesSystemProps(rest)) { return ( - ) } return ( - ) - // eslint-disable-next-line @typescript-eslint/no-explicit-any -}) as StyledComponent<'span', any, StyledTextProps, never> +} + +// eslint-disable-next-line @typescript-eslint/ban-types +type FixedForwardRef = ( + render: (props: P, ref: React.Ref) => React.ReactNode, +) => (props: P & React.RefAttributes) => React.ReactNode + +const fixedForwardRef = React.forwardRef as FixedForwardRef + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type DistributiveOmit = T extends any ? Omit : never Text.displayName = 'Text' -export type TextProps = ComponentProps -export default Text +export default fixedForwardRef(Text) diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 9e2fb691978..aadf3492efc 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -934,39 +934,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` } .c9 { - font-size: 16px; color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); -} - -.c9:where([data-size='small']) { - font-size: var(--text-body-size-small,0.75rem); - line-height: var(--text-body-lineHeight-small,1.6666); -} - -.c9:where([data-size='medium']) { - font-size: var(--text-body-size-medium,0.875rem); - line-height: var(--text-body-lineHeight-medium,1.4285); -} - -.c9:where([data-size='large']) { - font-size: var(--text-body-size-large,1rem); - line-height: var(--text-body-lineHeight-large,1.5); -} - -.c9:where([data-weight='light']) { - font-weight: var(--base-text-weight-light,300); -} - -.c9:where([data-weight='normal']) { - font-weight: var(--base-text-weight-normal,400); -} - -.c9:where([data-weight='medium']) { - font-weight: var(--base-text-weight-medium,500); -} - -.c9:where([data-weight='semibold']) { - font-weight: var(--base-text-weight-semibold,600); + font-size: 16px; } .c7 { @@ -1463,7 +1432,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` diff --git a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap index 1790814dd63..3f9f50481d2 100644 --- a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap @@ -2,43 +2,12 @@ exports[`has default theme 1`] = ` .c0 { - color: var(--fgColor-default,var(--color-fg-default,#1F2328)); margin-bottom: 4px; -} - -.c0:where([data-size='small']) { - font-size: var(--text-body-size-small,0.75rem); - line-height: var(--text-body-lineHeight-small,1.6666); -} - -.c0:where([data-size='medium']) { - font-size: var(--text-body-size-medium,0.875rem); - line-height: var(--text-body-lineHeight-medium,1.4285); -} - -.c0:where([data-size='large']) { - font-size: var(--text-body-size-large,1rem); - line-height: var(--text-body-lineHeight-large,1.5); -} - -.c0:where([data-weight='light']) { - font-weight: var(--base-text-weight-light,300); -} - -.c0:where([data-weight='normal']) { - font-weight: var(--base-text-weight-normal,400); -} - -.c0:where([data-weight='medium']) { - font-weight: var(--base-text-weight-medium,500); -} - -.c0:where([data-weight='semibold']) { - font-weight: var(--base-text-weight-semibold,600); + color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } Hello