diff --git a/e2e/components/Heading.test.ts b/e2e/components/Heading.test.ts index 6d62e3c7241..bd8137412ca 100644 --- a/e2e/components/Heading.test.ts +++ b/e2e/components/Heading.test.ts @@ -24,20 +24,6 @@ test.describe('Heading', () => { for (const story of stories) { test.describe(story.title, () => { test('default @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Heading.${story.title}.png`) - }) - - test('default (styled-components) @vrt', async ({page}) => { await visit(page, { id: story.id, }) @@ -47,18 +33,6 @@ test.describe('Heading', () => { }) test('axe @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { await visit(page, { id: story.id, }) diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx index 38ba0a163a6..a1f54867227 100644 --- a/packages/react/src/Heading/Heading.tsx +++ b/packages/react/src/Heading/Heading.tsx @@ -1,14 +1,10 @@ import {clsx} from 'clsx' import React, {forwardRef, useEffect} from 'react' -import styled from 'styled-components' -import {get} from '../constants' import {useRefObjectAsForwardedRef} from '../hooks' import type {SxProp} from '../sx' -import sx from '../sx' import type {ComponentProps} from '../utils/types' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classes from './Heading.module.css' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' type StyledHeadingProps = { @@ -16,28 +12,7 @@ type StyledHeadingProps = { variant?: 'large' | 'medium' | 'small' } & SxProp -const StyledHeading = styled.h2` - font-weight: ${get('fontWeights.bold')}; - font-size: ${get('fontSizes.5')}; - margin: 0; - - &:where([data-variant='large']) { - font: var(--text-title-shorthand-large, 600 32px / 1.5 ${get('fonts.normal')}); - } - - &:where([data-variant='medium']) { - font: var(--text-title-shorthand-medium, 600 20px / 1.6 ${get('fonts.normal')}); - } - - &:where([data-variant='small']) { - font: var(--text-title-shorthand-small, 600 16px / 1.5 ${get('fonts.normal')}); - } - - ${sx}; -` - const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}, forwardedRef) => { - const enabled = useFeatureFlag('primer_react_css_modules_ga') const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) @@ -57,33 +32,19 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props} }, [innerRef]) } - if (enabled) { - if (props.sx) { - return ( - - ) - } - return + if (props.sx) { + return ( + + ) } - - return ( - - ) + return }) as PolymorphicForwardRefComponent<'h2', StyledHeadingProps> Heading.displayName = 'Heading' diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx index cc9998a9f30..31c12c0ceac 100644 --- a/packages/react/src/Heading/__tests__/Heading.test.tsx +++ b/packages/react/src/Heading/__tests__/Heading.test.tsx @@ -142,54 +142,30 @@ describe('Heading', () => { ).toHaveStyleRule('font-style', 'italic') }) - describe('with primer_react_css_modules_ga enabled', () => { - it('should only include css modules class', () => { - HTMLRender( - - test - , - ) - expect(screen.getByText('test')).toHaveClass('Heading') - // Note: this is the generated class name when styled-components is used - // for this component - expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/) - }) - - it('should support `className` on the outermost element', () => { - const {container} = HTMLRender( - - test - , - ) - expect(container.firstChild).toHaveClass('test') - }) - - it('should support overrides with sx if provided', () => { - HTMLRender( - - - test - - , - ) - - expect(screen.getByText('test')).toHaveStyle('font-weight: 900') - }) + it('should only include css modules class', () => { + HTMLRender(test) + expect(screen.getByText('test')).toHaveClass('Heading') + // Note: this is the generated class name when styled-components is used + // for this component + expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/) + }) + + it('should support `className` on the outermost element', () => { + const {container} = HTMLRender(test) + expect(container.firstChild).toHaveClass('test') + }) + + it('should support overrides with sx if provided', () => { + HTMLRender( + + test + , + ) + + expect(screen.getByText('test')).toHaveStyle('font-weight: 900') }) })