Update ActionList.examples.stories.tsx to no longer use styled-components (#6544)

Author: llastflowers

packages/react/src/ActionList/ActionList.examples.stories.module.css

@@ -0,0 +1,26 @@
+.AllCombinationsContainer {
+  max-width: 300px;
+}
+
+.AsyncListSearch {
+  margin: var(--base-size-8);
+  margin-bottom: 0;
+  width: calc(100% - var(--base-size-16));
+}
+
+.AsyncListNoMatch {
+  display: block;
+  font-size: var(--text-body-size-medium);
+  margin: var(--base-size-8);
+}
+
+.AsyncListItems {
+  height: 208px;
+  overflow: auto;
+}
+
+.AsyncListSpinner {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--base-size-8);
+}

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

@@ -14,12 +14,12 @@ import {
 import {ActionList} from '.'
 import TextInput from '../TextInput'
 import Spinner from '../Spinner'
-import Box from '../Box'
 import Text from '../Text'
 import FormControl from '../FormControl'
 import {AriaStatus} from '../live-region'
 import {VisuallyHidden} from '../VisuallyHidden'
 import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink'
+import classes from './ActionList.examples.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/ActionList/Examples',
@@ -209,23 +209,20 @@ export function AsyncListWithSpinner(): JSX.Element {
         filter. This pattern can be found in branch selection menus via the SelectPanel component.
       </p>
 
-      <FormControl sx={{m: 2, mb: 0, width: 'calc(100% - 16px)'}}>
+      <FormControl className={classes.AsyncListSearch}>
         <FormControl.Label>Search branches</FormControl.Label>
         <TextInput onChange={filter} block />
       </FormControl>
-      {results.length === 0 ? (
-        <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
-      ) : null}
-
+      {results.length === 0 ? <Text className={classes.AsyncListNoMatch}>No branches match that query</Text> : null}
       <VisuallyHidden>
         <AriaStatus>{getStatusMessage()}</AriaStatus>
       </VisuallyHidden>
 
-      <ActionList selectionVariant="single" role="listbox" aria-label="Branch" sx={{height: 208, overflow: 'auto'}}>
+      <ActionList selectionVariant="single" role="listbox" aria-label="Branch" className={classes.AsyncListItems}>
         {loading ? (
-          <Box sx={{display: 'flex', justifyContent: 'center', pt: 2}}>
+          <div className={classes.AsyncListSpinner}>
             <Spinner />
-          </Box>
+          </div>
         ) : (
           results.map(name => (
             <ActionList.Item key={name} role="option" selected={selected === name} onSelect={() => setSelected(name)}>
@@ -249,7 +246,7 @@ export function AllCombinations(): JSX.Element {
       <code>16 possible combinations</code>
       <br />
       <br />
-      <Box maxWidth="300px">
+      <div className={classes.AllCombinationsContainer}>
         <ActionList showDividers>
           <ActionList.Item>
             <ActionList.LeadingVisual>
@@ -438,7 +435,7 @@ export function AllCombinations(): JSX.Element {
             </ActionList.TrailingVisual>
           </ActionList.Item>
         </ActionList>
-      </Box>
+      </div>
     </>
   )
 }