Skip to content

Commit

Permalink
Removing the CSS modules feature flag from Blankslate (#4981)
Browse files Browse the repository at this point in the history 
* Removing the css modules feature flag from blankslate

* Create dull-turkeys-cheer.md
  • Loading branch information
@jonrohan
jonrohan authored Sep 17, 2024
1 parent 98d3d13 commit c8fe1c6
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 236 deletions.
5 changes: 5 additions & 0 deletions .changeset/dull-turkeys-cheer.md
View file
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
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
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

0 comments on commit c8fe1c6

Please sign in to comment.