Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removing the CSS modules feature flag from Blankslate #4981

Merged
merged 2 commits into from
Sep 17, 2024
Merged

Removing the CSS modules feature flag from Blankslate #4981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4af29be
Removing the css modules feature flag from blankslate
jonrohan Sep 17, 2024
d98bf21
Create dull-turkeys-cheer.md
jonrohan Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dull-turkeys-cheer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Removes the feature flag from the `Blankslate` component to always render with CSS modules.
54 changes: 0 additions & 54 deletions e2e/components/Blankslate.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,24 +51,6 @@ test.describe('Blankslate', () => {
id: story.id,
globals: {
colorScheme: theme,
featureFlags: {
primer_react_css_modules_ga: true,
},
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${theme}.png`)
})

test('default (styled-components) @vrt', async ({page}) => {
await visit(page, {
id: story.id,
globals: {
colorScheme: theme,
featureFlags: {
primer_react_css_modules_ga: false,
},
},
})

Expand All @@ -77,19 +59,6 @@ test.describe('Blankslate', () => {
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: story.id,
globals: {
colorScheme: theme,
featureFlags: {
primer_react_css_modules_ga: true,
},
},
})
await expect(page).toHaveNoViolations()
})

test('axe (styled-components) @aat', async ({page}) => {
await visit(page, {
id: story.id,
globals: {
Expand All @@ -106,29 +75,6 @@ test.describe('Blankslate', () => {
test(`${name} @vrt`, async ({page}) => {
await visit(page, {
id: story.id,
globals: {
featureFlags: {
primer_react_css_modules_ga: true,
},
},
})
const width = viewports[name]

await page.setViewportSize({
width,
height: 667,
})
expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
})

test(`${name} (styled-components) @vrt`, async ({page}) => {
await visit(page, {
id: story.id,
globals: {
featureFlags: {
primer_react_css_modules_ga: false,
},
},
})
const width = viewports[name]

Expand Down
197 changes: 15 additions & 182 deletions packages/react/src/Blankslate/Blankslate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import {clsx} from 'clsx'
import React from 'react'
import Box from '../Box'
import {Button} from '../Button'
import Link from '../Link'
import {get} from '../constants'
import styled from 'styled-components'
import classes from './Blankslate.module.css'
import {useFeatureFlag} from '../FeatureFlags'

export type BlankslateProps = React.PropsWithChildren<{
/**
Expand All @@ -27,206 +23,48 @@ export type BlankslateProps = React.PropsWithChildren<{
className?: string
}>

const StyledBlankslate = styled.div`
container-type: inline-size;

.Blankslate {
--blankslate-outer-padding-block: var(--base-size-32, 2rem);
--blankslate-outer-padding-inline: var(--base-size-32, 2rem);

display: grid;
justify-items: center;
padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
}

.Blankslate[data-spacious='true'] {
--blankslate-outer-padding-block: var(--base-size-80, 5rem);
--blankslate-outer-padding-inline: var(--base-size-40, 2.5rem);
}

.Blankslate[data-border='true'] {
border: var(--borderWidth-thin) solid var(--borderColor-default, ${get('colors.border.default')});
border-radius: var(--borderRadius-medium);
}

.Blankslate[data-narrow='true'] {
margin: 0 auto;
max-width: 485px;
}

.Blankslate-Heading,
.Blankslate-Description {
margin: 0;
margin-bottom: var(--stack-gap-condensed, 0.5rem);
}

.Blankslate-Heading {
font-size: var(--text-title-size-medium, 1.25rem);
font-weight: var(--text-title-weight-medium, 600);
}

.Blankslate-Description {
color: var(--fgColor-muted, ${get('colors.fg.muted')});
font-size: var(--text-body-size-large, 1rem);
line-height: var(--text-body-lineHeight-large, 1.5);
}

.Blankslate-Action {
margin-top: var(--stack-gap-normal, 1rem);
}

.Blankslate-Action:first-of-type {
margin-top: var(--stack-gap-spacious, 1.5rem);
}

.Blankslate-Action:last-of-type {
margin-bottom: var(--stack-gap-condensed, 0.5rem);
}
`

const BlankslateContainerQuery = `
/* At the time these styles were written,
34rem was our "small" breakpoint width */
@container (max-width: 34rem) {
${StyledBlankslate} .Blankslate {
--blankslate-outer-padding-block: var(--base-size-20);
--blankslate-outer-padding-inline: var(--base-size-20);
}

${StyledBlankslate} .Blankslate[data-spacious='true'] {
--blankslate-outer-padding-block: var(--base-size-44);
--blankslate-outer-padding-inline: var(--base-size-28);
}

${StyledBlankslate} .Blankslate-Visual {
margin-bottom: var(--stack-gap-condensed, 0.5rem);
max-width: var(--base-size-24);
}

${StyledBlankslate} .Blankslate-Visual svg {
width: 100%;
}

${StyledBlankslate} .Blankslate-Heading {
font-size: var(--text-title-size-small);
}

${StyledBlankslate} .Blankslate-Description {
font-size: var(--text-body-size-medium);
}

${StyledBlankslate} .Blankslate-Action {
margin-top: var(--stack-gap-condensed, 0.5rem);
}

${StyledBlankslate} .Blankslate-Action:first-of-type {
margin-top: var(--stack-gap-normal, 1rem);
}

${StyledBlankslate} .Blankslate-Action:last-of-type {
margin-bottom: calc(var(--stack-gap-condensed, 0.5rem) / 2);
}
`

function Blankslate({border, children, narrow, spacious, className}: BlankslateProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')

if (enabled) {
return (
<div className={classes.Container}>
<div
className={clsx(classes.Blankslate, className)}
data-border={border}
data-narrow={narrow}
data-spacious={spacious}
>
{children}
</div>
</div>
)
}

return (
<>
{/*
This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x
See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info
*/}
<style type="text/css" dangerouslySetInnerHTML={{__html: BlankslateContainerQuery}} />
<StyledBlankslate>
<div
className={clsx('Blankslate', className)}
data-border={border}
data-narrow={narrow}
data-spacious={spacious}
>
{children}
</div>
</StyledBlankslate>
</>
<div className={classes.Container}>
<div
className={clsx(classes.Blankslate, className)}
data-border={border}
data-narrow={narrow}
data-spacious={spacious}
>
{children}
</div>
</div>
)
}

export type VisualProps = React.PropsWithChildren

function Visual({children}: VisualProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
return (
<span
className={clsx('Blankslate-Visual', {
[classes.Visual]: enabled,
})}
>
{children}
</span>
)
return <span className={clsx('Blankslate-Visual', classes.Visual)}>{children}</span>
}

export type HeadingProps = React.PropsWithChildren<{
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}>

function Heading({as: Component = 'h2', children}: HeadingProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')

if (enabled) {
return <Component className={clsx('Blankslate-Heading', classes.Heading)}>{children}</Component>
}

return (
<Box as={Component} className={clsx('Blankslate-Heading')}>
{children}
</Box>
)
return <Component className={clsx('Blankslate-Heading', classes.Heading)}>{children}</Component>
}

export type DescriptionProps = React.PropsWithChildren

function Description({children}: DescriptionProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
return (
<p
className={clsx('Blankslate-Description', {
[classes.Description]: enabled,
})}
>
{children}
</p>
)
return <p className={clsx('Blankslate-Description', classes.Description)}>{children}</p>
}

export type PrimaryActionProps = React.PropsWithChildren<{
href: string
}>

function PrimaryAction({children, href}: PrimaryActionProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
return (
<div
className={clsx('Blankslate-Action', {
[classes.Action]: enabled,
})}
>
<div className={clsx('Blankslate-Action', classes.Action)}>
<Button as="a" href={href} variant="primary">
{children}
</Button>
Expand All @@ -239,13 +77,8 @@ export type SecondaryActionProps = React.PropsWithChildren<{
}>

function SecondaryAction({children, href}: SecondaryActionProps) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
return (
<div
className={clsx('Blankslate-Action', {
[classes.Action]: enabled,
})}
>
<div className={clsx('Blankslate-Action', classes.Action)}>
<Link href={href}>{children}</Link>
</div>
)
Expand Down
Loading