Update Dialog/Dialog.features.stories.tsx to no longer use styled-components

packages/react/.storybook/manager-head.html

@@ -0,0 +1 @@
+<base href="/react/storybook/" />

packages/react/src/Dialog/Dialog.features.stories.module.css

@@ -0,0 +1,45 @@
+/* CSS Module for Dialog features stories - replaces styled-components usage */
+
+/* Custom header background */
+.CustomHeaderBg {
+  background-color: var(--bgColor-accent-muted);
+}
+
+/* Text with small font size and no top margin */
+.SmallText {
+  font-size: var(--text-body-size-small);
+  margin-block-start: 0;
+}
+
+/* Layout containers */
+.FlexColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16); /* gap: 4 * 4px = 16px */
+}
+
+.FlexColumnGap1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4); /* gap: 1 * 4px = 4px */
+}
+
+.FlexRowSpaceBetween {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Dialog Body with danger background */
+.DangerBodyBg {
+  background-color: var(--bgColor-danger-muted);
+}
+
+/* Dialog Footer with attention background */
+.AttentionFooterBg {
+  background-color: var(--bgColor-attention-muted);
+}
+
+/* Generic expandable content container */
+.ExpandContent {
+  /* No specific styles needed for the basic Box usage */
+}

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

@@ -1,7 +1,8 @@
 import React, {useState, useRef, useCallback} from 'react'
-import {Box, TextInput, Text, Button, ActionList} from '..'
+import {TextInput, Button, ActionList} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.features.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -11,44 +12,44 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
       Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
       amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
       fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
       luctus tempus posuere.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
       sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
       sem. Mauris a est tellus.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
       dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
       Maecenas semper mi egestas, dignissim nisi et, elementum neque.
-    </Text>
+    </p>
   </>
 )
 interface DialogStoryProps {
@@ -69,22 +70,28 @@ function CustomHeader({
   }, [onClose])
   if (typeof title === 'string' && typeof subtitle === 'string') {
     return (
-      <Box bg="accent.subtle">
+      <div className={classes.CustomHeaderBg}>
         <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
         <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
         <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
+      </div>
     )
   }
   return null
 }
 function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+  return (
+    <Dialog.Body>
+      <div className={classes.DangerBodyBg}>{children}</div>
+    </Dialog.Body>
+  )
 }
 function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
   return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+    <Dialog.Footer>
+      <div className={classes.AttentionFooterBg}>
+        {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+      </div>
     </Dialog.Footer>
   )
 }
@@ -201,25 +208,25 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
           ref={dialogRef}
         >
           {step === 1 ? (
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: 4}}>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+            <div className={classes.FlexColumn}>
+              <div className={classes.FlexRowSpaceBetween}>
                 Bug Report <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+              </div>
+              <div className={classes.FlexRowSpaceBetween}>
                 Feature request <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-            </Box>
+              </div>
+            </div>
           ) : (
             <div>
-              <Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
+              <div className={classes.FlexColumnGap1}>
                 <label htmlFor="description">Description</label>
                 <TextInput
                   id="description"
                   placeholder="Write the description here"
                   value={inputText}
                   onChange={event => setInputText(event.target.value)}
                 />
-              </Box>
+              </div>
             </div>
           )}
         </Dialog>
@@ -229,15 +236,15 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
 }
 
 const bodyContent = (
-  <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+  <p className={classes.SmallText}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
     lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
     nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
     Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
     amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris fringilla
     tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus luctus tempus
     posuere.
-  </Text>
+  </p>
 )
 
 export const BottomSheetNarrow = () => {
@@ -386,11 +393,11 @@ export const RetainsFocusTrapWithDynamicContent = () => {
           </Button>
           <Button onClick={openSecondDialog}>Click me to open a new dialog</Button>
           {expandContent && (
-            <Box>
+            <div className={classes.ExpandContent}>
               {lipsum}
               <Button>Dialog Button Example 1</Button>
               <Button>Dialog Button Example 2</Button>
-            </Box>
+            </div>
           )}
           {secondOpen && (
             <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">