From 1519a92b0e57f0c69f00de79ec2b24a8854f6707 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 14:44:27 +0000 Subject: [PATCH 1/4] initial commit --- .../src/Pagehead/Pagehead.dev.stories.tsx | 17 ++++++++ .../react/src/Pagehead/Pagehead.module.css | 8 ++++ packages/react/src/Pagehead/Pagehead.tsx | 43 +++++++++++++------ .../src/Pagehead/Pagehead.types.test.tsx | 1 - 4 files changed, 56 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/Pagehead/Pagehead.dev.stories.tsx create mode 100644 packages/react/src/Pagehead/Pagehead.module.css diff --git a/packages/react/src/Pagehead/Pagehead.dev.stories.tsx b/packages/react/src/Pagehead/Pagehead.dev.stories.tsx new file mode 100644 index 00000000000..4e132b39472 --- /dev/null +++ b/packages/react/src/Pagehead/Pagehead.dev.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import Pagehead from './Pagehead' +import Heading from '../Heading' + +export default { + title: 'Deprecated/Components/Pagehead/Dev', + component: Pagehead, +} as Meta + +export const Default = () => ( + + + Pagehead + + +) diff --git a/packages/react/src/Pagehead/Pagehead.module.css b/packages/react/src/Pagehead/Pagehead.module.css new file mode 100644 index 00000000000..2ec4cb861eb --- /dev/null +++ b/packages/react/src/Pagehead/Pagehead.module.css @@ -0,0 +1,8 @@ +.Pagehead { + position: relative; + padding-top: var(--base-size-24); + padding-bottom: var(--base-size-24); + margin-bottom: var(--base-size-24); + /* stylelint-disable-next-line primer/borders */ + border-bottom: 1px solid var(--borderColor-default); +} \ No newline at end of file diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx index b4884414708..4fb678b3f31 100644 --- a/packages/react/src/Pagehead/Pagehead.tsx +++ b/packages/react/src/Pagehead/Pagehead.tsx @@ -1,23 +1,42 @@ import styled from 'styled-components' +import React, {type ComponentProps} from 'react' +import {clsx} from 'clsx' import {get} from '../constants' -import type {SxProp} from '../sx' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import sx, {type SxProp} from '../sx' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import classes from './Pagehead.module.css' +import {useFeatureFlag} from '../FeatureFlags' + +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' /** * @deprecated */ -const Pagehead = styled.div` - position: relative; - padding-top: ${get('space.4')}; - padding-bottom: ${get('space.4')}; - margin-bottom: ${get('space.4')}; - border-bottom: 1px solid ${get('colors.border.default')}; - ${sx}; -` +const StyledComponentPagehead = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + position: relative; + padding-top: ${get('space.4')}; + padding-bottom: ${get('space.4')}; + margin-bottom: ${get('space.4')}; + border-bottom: 1px solid ${get('colors.border.default')}; + ${sx}; + `, +) + +const Pagehead = ({className, ...rest}: PageheadProps) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + if (enabled) { + return + } + + return +} /** * @deprecated */ -export type PageheadProps = ComponentProps +export type PageheadProps = ComponentProps & SxProp export default Pagehead diff --git a/packages/react/src/Pagehead/Pagehead.types.test.tsx b/packages/react/src/Pagehead/Pagehead.types.test.tsx index eb6593c2afd..df691989646 100644 --- a/packages/react/src/Pagehead/Pagehead.types.test.tsx +++ b/packages/react/src/Pagehead/Pagehead.types.test.tsx @@ -6,6 +6,5 @@ export function shouldAcceptCallWithNoProps() { } export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted return } From 5c0fce252ee69398de4e76fa32c472887a56b851 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 14:46:36 +0000 Subject: [PATCH 2/4] add changeset --- .changeset/quiet-seahorses-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-seahorses-yawn.md diff --git a/.changeset/quiet-seahorses-yawn.md b/.changeset/quiet-seahorses-yawn.md new file mode 100644 index 00000000000..3ddff6eb117 --- /dev/null +++ b/.changeset/quiet-seahorses-yawn.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert `Pagehead` to CSS Modules behind feature flag From b089279e21a39f29dab164e8bbe4b79d587a02a2 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 14:53:32 +0000 Subject: [PATCH 3/4] format --- packages/react/src/Pagehead/Pagehead.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/Pagehead/Pagehead.module.css b/packages/react/src/Pagehead/Pagehead.module.css index 2ec4cb861eb..de297a95451 100644 --- a/packages/react/src/Pagehead/Pagehead.module.css +++ b/packages/react/src/Pagehead/Pagehead.module.css @@ -1,8 +1,8 @@ .Pagehead { position: relative; - padding-top: var(--base-size-24); - padding-bottom: var(--base-size-24); - margin-bottom: var(--base-size-24); - /* stylelint-disable-next-line primer/borders */ - border-bottom: 1px solid var(--borderColor-default); -} \ No newline at end of file + padding-top: var(--base-size-24); + padding-bottom: var(--base-size-24); + margin-bottom: var(--base-size-24); + /* stylelint-disable-next-line primer/borders */ + border-bottom: 1px solid var(--borderColor-default); +} From 58c2e07e8f96bc23de604c447a8cbd330b6a6732 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 11:37:55 -0500 Subject: [PATCH 4/4] update changeset --- .changeset/quiet-seahorses-yawn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/quiet-seahorses-yawn.md b/.changeset/quiet-seahorses-yawn.md index 3ddff6eb117..58b0af858f1 100644 --- a/.changeset/quiet-seahorses-yawn.md +++ b/.changeset/quiet-seahorses-yawn.md @@ -2,4 +2,4 @@ "@primer/react": minor --- -Convert `Pagehead` to CSS Modules behind feature flag +Convert `Pagehead` to CSS Modules