Update FormControl.features.stories.tsx to no longer use styled-components (#6454)

Author: llastflowers

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

@@ -0,0 +1,28 @@
+.GridContainer {
+  display: grid;
+}
+
+.GapContainer {
+  display: grid;
+  gap: var(--stack-gap-normal);
+}
+
+.FlexColumnGapContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stack-gap-normal);
+}
+
+.RequiredFieldsNote {
+  font-size: var(--text-body-size-medium);
+}
+
+.ColorCircle {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--borderRadius-large);
+  margin: auto;
+  border: var(--borderWidth-default) solid;
+  box-sizing: border-box;
+}

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

@@ -3,7 +3,6 @@ import type {Meta} from '@storybook/react-vite'
 import {
   Autocomplete,
   BaseStyles,
-  Box,
   Button,
   Checkbox,
   CheckboxGroup,
@@ -22,6 +21,7 @@ import {
 import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react'
 import type {ItemInput} from '../deprecated/ActionList/List'
 import {Stack} from '../Stack'
+import classes from './FormControl.features.stories.module.css'
 
 export default {
   title: 'Components/FormControl/Features',
@@ -78,7 +78,7 @@ export const WithComplexInputs = () => {
   }
 
   return (
-    <Box display="grid">
+    <div className={classes.GridContainer}>
       <FormControl>
         <FormControl.Label id="form-label">TextInputWithTokens</FormControl.Label>
         <TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />
@@ -117,7 +117,7 @@ export const WithComplexInputs = () => {
         <FormControl.Label>Textarea</FormControl.Label>
         <Textarea />
       </FormControl>
-    </Box>
+    </div>
   )
 }
 
@@ -149,7 +149,7 @@ export const FormControlWithCustomInput = () => {
   }, [value])
 
   return (
-    <Box display="grid">
+    <div className={classes.GridContainer}>
       <FormControl>
         <FormControl.Label htmlFor="custom-input">GitHub handle</FormControl.Label>
         <CustomTextInput
@@ -194,13 +194,13 @@ export const FormControlWithCustomInput = () => {
           <FormControl.Caption id="custom-checkbox-two-caption">Hint text for checkbox two</FormControl.Caption>
         </FormControl>
       </CheckboxGroup>
-    </Box>
+    </div>
   )
 }
 
 export const WithCheckboxAndRadioInputs = () => {
   return (
-    <Box display="grid" sx={{gap: 3}}>
+    <div className={classes.GapContainer}>
       <CheckboxGroup>
         <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>
         <FormControl>
@@ -232,7 +232,7 @@ export const WithCheckboxAndRadioInputs = () => {
           <FormControl.Label>Radio three</FormControl.Label>
         </FormControl>
       </RadioGroup>
-    </Box>
+    </div>
   )
 }
 
@@ -280,16 +280,11 @@ export const ValidationExample = () => {
 function getColorCircle(color: string) {
   return function () {
     return (
-      <Box
-        sx={{
+      <span
+        className={classes.ColorCircle}
+        style={{
           backgroundColor: color,
           borderColor: color,
-          width: 14,
-          height: 14,
-          borderRadius: 10,
-          margin: 'auto',
-          borderWidth: '1px',
-          borderStyle: 'solid',
         }}
       />
     )
@@ -379,7 +374,7 @@ export const WithLeadingVisual = () => (
 )
 
 export const DisabledInputs = () => (
-  <Box sx={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+  <div className={classes.FlexColumnGapContainer}>
     <FormControl disabled>
       <FormControl.Label>Disabled checkbox</FormControl.Label>
       <Checkbox />
@@ -397,18 +392,18 @@ export const DisabledInputs = () => (
         <Select.Option value="pvc">Primer ViewComponents</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </div>
 )
 
 export const CustomRequired = () => (
-  <Box sx={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+  <div className={classes.FlexColumnGapContainer}>
     <FormControl required={true}>
       <FormControl.Label requiredText="(required)">Form Input Label</FormControl.Label>
       <FormControl.Caption>This is a form field with a custom required indicator</FormControl.Caption>
       <TextInput />
     </FormControl>
 
-    <Text sx={{fontSize: 1}}>Required fields are marked with an asterisk (*)</Text>
+    <Text className={classes.RequiredFieldsNote}>Required fields are marked with an asterisk (*)</Text>
     <FormControl required={true}>
       <FormControl.Label requiredIndicator={false}>Form Input Label</FormControl.Label>
       <FormControl.Caption>
@@ -424,7 +419,7 @@ export const CustomRequired = () => (
       <FormControl.Caption>This is a form field that is marked as optional, it is not required</FormControl.Caption>
       <TextInput />
     </FormControl>
-  </Box>
+  </div>
 )
 
 export const WithCaption = () => (