Cleanup styled-components in *.stories.tsx files and convert to CSS modules

packages/react/src/LabelGroup/LabelGroup.features.stories.tsx

@@ -1,8 +1,9 @@
-import styled from 'styled-components'
+import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react'
 import Token from '../Token/Token'
 import Label from '../Label/Label'
+import classes from './LabelGroupStories.module.css'
 
 const meta: Meta = {
   title: 'Components/LabelGroup/Features',
@@ -18,13 +19,11 @@ const meta: Meta = {
   ],
 }
 
-const ResizableContainer = styled.div`
-  outline: 1px solid black;
-  overflow: auto;
-  padding: 0.25rem;
-  resize: horizontal;
-  width: 600px;
-`
+const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ResizableContainer} {...props}>
+    {children}
+  </div>
+)
 
 export const TruncateAuto: StoryFn = () => (
   <ResizableContainer>

packages/react/src/LabelGroup/LabelGroup.stories.tsx

@@ -1,21 +1,20 @@
-import styled from 'styled-components'
+import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react'
 import Label from '../Label/Label'
+import classes from './LabelGroupStories.module.css'
 
 const meta: Meta = {
   title: 'Components/LabelGroup',
   component: LabelGroup,
 }
 
-const ResizableContainer = styled.div`
-  outline: 1px solid black;
-  overflow: auto;
-  padding: 0.25rem;
-  resize: horizontal;
-  width: 600px;
-`
+const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ResizableContainer} {...props}>
+    {children}
+  </div>
+)
 
 export const Default: StoryFn = () => (
   <LabelGroup>

packages/react/src/LabelGroup/LabelGroupStories.module.css

@@ -0,0 +1,9 @@
+.ResizableContainer {
+  /* stylelint-disable-next-line color-named */
+  outline: 1px solid black;
+  overflow: auto;
+  padding: var(--base-size-4);
+  resize: horizontal;
+  /* stylelint-disable-next-line primer/responsive-widths */
+  width: 600px;
+}

packages/react/src/Text/Text.test.tsx

@@ -62,7 +62,6 @@ describe('Text', () => {
   })
 
   it('respects fontFamily="mono"', () => {
-    // styled-components removes the whitespace between font-family values
     const mono = theme.fonts.mono.replace(/, /g, ',')
     expect(render(<Text fontFamily="mono" />)).toHaveStyleRule('font-family', mono)
   })

packages/react/src/stories/AnchoredPositionStories.module.css

@@ -0,0 +1,42 @@
+.Float {
+  position: absolute;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  background-color: var(--bgColor-attention-muted);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  padding: var(--base-size-16);
+}
+
+.Anchor {
+  position: absolute;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  background-color: var(--bgColor-accent-muted);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  padding: var(--base-size-16);
+}
+
+.Nav {
+  width: 300px;
+  padding: var(--base-size-16);
+  position: relative;
+  overflow: hidden;
+  border-right: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.Main {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

packages/react/src/stories/FocusTrapStories.module.css

@@ -0,0 +1,5 @@
+.MarginButton {
+  margin: var(--base-size-8) 0;
+}
+
+/* Helper styles for focus trap visual aids */

packages/react/src/stories/FocusZoneStories.module.css

@@ -0,0 +1,3 @@
+.MarginButton {
+  margin: var(--base-size-8);
+}

packages/react/src/stories/ThemeProvider.stories.tsx

@@ -1,8 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react'
 
-import {ThemeProvider, BaseStyles, Box, themeGet, useTheme} from '..'
+import {ThemeProvider, BaseStyles, Box, useTheme} from '..'
 import type {ThemeProviderProps} from '../ThemeProvider'
-import {createGlobalStyle} from 'styled-components'
+import './ThemeProviderStories.module.css'
 
 export default {
   title: 'Behaviors/ThemeProvider',
@@ -17,12 +17,6 @@ export default {
   },
 } as Meta
 
-const GlobalStyle = createGlobalStyle`
-    body {
-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`
-
 function ActiveColorScheme() {
   const {colorScheme} = useTheme()
   return <span>Active color scheme: {colorScheme}</span>
@@ -31,7 +25,6 @@ function ActiveColorScheme() {
 export const Default: StoryFn<ThemeProviderProps> = args => {
   return (
     <ThemeProvider {...args}>
-      <GlobalStyle />
       <BaseStyles>
         <ActiveColorScheme />
       </BaseStyles>
@@ -87,7 +80,6 @@ function InverseMode() {
 export const Nested: StoryFn<ThemeProviderProps> = args => {
   return (
     <ThemeProvider {...args}>
-      <GlobalStyle />
       <BaseStyles>
         <ActiveColorScheme />
         <NightMode />

packages/react/src/stories/ThemeProviderStories.module.css

@@ -0,0 +1,3 @@
+:global(body) {
+  background-color: var(--bgColor-default);
+}

packages/react/src/stories/deprecated/ActionList.stories.tsx

@@ -13,13 +13,12 @@ import {
 } from '@primer/octicons-react'
 import type {Meta} from '@storybook/react'
 import React, {forwardRef} from 'react'
-import styled from 'styled-components'
 import {Label, ThemeProvider} from '../..'
 import {ActionList as _ActionList} from '../../deprecated/ActionList'
 import {Header} from '../../deprecated/ActionList/Header'
 import BaseStyles from '../../BaseStyles'
-import sx from '../../sx'
 import {ReactRouterLikeLink} from '../../__tests__/mocks/ReactRouterLink'
+import classes from './ActionListStories.module.css'
 
 const ActionList = Object.assign(_ActionList, {
   Header,
@@ -45,14 +44,16 @@ const meta: Meta = {
 }
 export default meta
 
-const ErsatzOverlay = styled.div<{maxWidth?: string}>`
-  border-radius: 12px;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
-  overflow: hidden;
-  max-width: ${({maxWidth}) => maxWidth || 'none'};
-`
+const ErsatzOverlay = ({maxWidth, children, ...props}: {maxWidth?: string; children: React.ReactNode}) => (
+  <div
+    className={classes.ErsatzOverlay}
+    style={maxWidth ? ({'--ersatz-overlay-max-width': maxWidth} as React.CSSProperties) : undefined}
+    data-max-width={maxWidth ? '' : undefined}
+    {...props}
+  >
+    {children}
+  </div>
+)
 
 export function ActionsStory(): JSX.Element {
   return (
@@ -152,9 +153,6 @@ export function MultiSelectListStory(): JSX.Element {
 MultiSelectListStory.storyName = 'Multi Select'
 
 export function ComplexListInsetVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
   return (
     <>
       <h1>Complex List</h1>
@@ -172,9 +170,9 @@ export function ComplexListInsetVariantStory(): JSX.Element {
                 <ActionList.Item
                   {...props}
                   leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
+                    <div className={classes.StyledDivWithWhiteFill}>
                       {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
+                    </div>
                   )}
                 />
               ),
@@ -228,9 +226,6 @@ export function ComplexListInsetVariantStory(): JSX.Element {
 ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant'
 
 export function ComplexListFullVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
   return (
     <>
       <h1>Complex List</h1>
@@ -249,9 +244,9 @@ export function ComplexListFullVariantStory(): JSX.Element {
                 <ActionList.Item
                   {...props}
                   leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
+                    <div className={classes.StyledDivWithWhiteFill}>
                       {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
+                    </div>
                   )}
                 />
               ),

packages/react/src/stories/deprecated/ActionListStories.module.css

@@ -0,0 +1,18 @@
+.ErsatzOverlay {
+  border-radius: var(--borderRadius-large);
+  /* stylelint-disable primer/box-shadow */
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(149, 157, 165, 0.2);
+  /* stylelint-enable primer/box-shadow */
+  overflow: hidden;
+}
+
+.ErsatzOverlay[data-max-width] {
+  max-width: var(--ersatz-overlay-max-width);
+}
+
+.StyledDivWithWhiteFill > svg {
+  /* stylelint-disable-next-line color-named */
+  fill: white;
+}

packages/react/src/stories/deprecated/ActionMenu.stories.tsx

@@ -14,13 +14,13 @@ import {
 import type {Meta} from '@storybook/react'
 import type React from 'react'
 import {useCallback, useState, useRef} from 'react'
-import styled from 'styled-components'
 import {ThemeProvider} from '../..'
 import type {ActionMenuProps} from '../../deprecated'
 import {ActionMenu, ActionList} from '../../deprecated'
 import type {ItemProps} from '../../deprecated/ActionList'
 import BaseStyles from '../../BaseStyles'
 import {Button, type ButtonProps} from '../../Button'
+import classes from './ActionMenuStories.module.css'
 
 const meta: Meta = {
   title: 'Deprecated/Components/ActionMenu',
@@ -42,13 +42,11 @@ const meta: Meta = {
 }
 export default meta
 
-const ErsatzOverlay = styled.div`
-  border-radius: 12px;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
-  padding: 8px;
-`
+const ErsatzOverlay = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ErsatzOverlay} {...props}>
+    {children}
+  </div>
+)
 
 export function ActionsStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')

packages/react/src/stories/deprecated/ActionMenuStories.module.css

@@ -0,0 +1,8 @@
+/* stylelint-disable primer/box-shadow */
+.ErsatzOverlay {
+  border-radius: var(--borderRadius-large);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(149, 157, 165, 0.2);
+  padding: var(--base-size-8);
+}