fix: List V9 - update stories to work with dark themes (#32392)

microsoft · Oct 7, 2024 · 22fbb42 · 22fbb42
1 parent f542b84
commit 22fbb42
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 13 deletions.
diff --git a/change/@fluentui-react-list-preview-0fea1476-770a-41e9-9823-8a0aee6c8a76.json b/change/@fluentui-react-list-preview-0fea1476-770a-41e9-9823-8a0aee6c8a76.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: List V9 - update stories to work with dark themes",
+  "packageName": "@fluentui/react-list-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-components/react-list-preview/stories/src/List/ListDefault.stories.tsx b/packages/react-components/react-list-preview/stories/src/List/ListDefault.stories.tsx
@@ -1,14 +1,36 @@
 import * as React from 'react';
 import { List, ListItem } from '@fluentui/react-list-preview';
+import { tokens, Text, makeResetStyles } from '@fluentui/react-components';
 
-export const Default = () => (
-  <List>
-    <ListItem>Asia</ListItem>
-    <ListItem>Africa</ListItem>
-    <ListItem>Europe</ListItem>
-    <ListItem>North America</ListItem>
-    <ListItem>South America</ListItem>
-    <ListItem>Australia/Oceania</ListItem>
-    <ListItem>Antarctica</ListItem>
-  </List>
-);
+const useTextStyle = makeResetStyles({
+  color: tokens.colorNeutralForeground1,
+});
+
+export const Default = () => {
+  const textStyle = useTextStyle();
+  return (
+    <List>
+      <ListItem>
+        <Text className={textStyle}>Asia</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>Africa</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>Europe</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>North America</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>South America</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>Australia/Oceania</Text>
+      </ListItem>
+      <ListItem>
+        <Text className={textStyle}>Antarctica</Text>
+      </ListItem>
+    </List>
+  );
+};
diff --git a/...omponents/react-list-preview/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx b/...omponents/react-list-preview/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx
@@ -50,6 +50,7 @@ const useStyles = makeStyles({
     borderRadius: '5px',
   },
   title: {
+    color: tokens.colorNeutralForeground1,
     fontWeight: 600,
     display: 'block',
   },

diff --git a/...react-components/react-list-preview/stories/src/List/MultipleActionsSelection.stories.tsx b/...react-components/react-list-preview/stories/src/List/MultipleActionsSelection.stories.tsx
@@ -50,6 +50,7 @@ const useStyles = makeStyles({
     borderRadius: '5px',
   },
   title: {
+    color: tokens.colorNeutralForeground1,
     fontWeight: 600,
     display: 'block',
   },

diff --git a/...act-components/react-list-preview/stories/src/List/MultipleActionsWithPrimary.stories.tsx b/...act-components/react-list-preview/stories/src/List/MultipleActionsWithPrimary.stories.tsx
@@ -50,6 +50,7 @@ const useStyles = makeStyles({
     borderRadius: '5px',
   },
   title: {
+    color: tokens.colorNeutralForeground1,
     fontWeight: 600,
     display: 'block',
   },

diff --git a/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx b/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FixedSizeList } from 'react-window';
 import { List, ListItem } from '@fluentui/react-list-preview';
+import { tokens, Text, makeResetStyles } from '@fluentui/react-components';
 
 const countries = [
   'Afghanistan',
@@ -201,11 +202,16 @@ const countries = [
   'Zimbabwe',
 ];
 
+const useTextStyle = makeResetStyles({
+  color: tokens.colorNeutralForeground1,
+});
+
 const CountriesList = React.forwardRef<HTMLUListElement>((props: React.ComponentProps<typeof List>, ref) => (
   <List aria-label="Countries" tabIndex={0} {...props} ref={ref} />
 ));
 
 export const VirtualizedList = () => {
+  const textStyle = useTextStyle();
   return (
     <FixedSizeList
       height={400}
@@ -217,7 +223,7 @@ export const VirtualizedList = () => {
     >
       {({ index, style, data }) => (
         <ListItem style={style} aria-setsize={countries.length} aria-posinset={index + 1}>
-          {data[index]}
+          <Text className={textStyle}>{data[index]}</Text>
         </ListItem>
       )}
     </FixedSizeList>

diff --git a/...onents/react-list-preview/stories/src/List/VirtualizedListWithActionableItems.stories.tsx b/...onents/react-list-preview/stories/src/List/VirtualizedListWithActionableItems.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FixedSizeList } from 'react-window';
 import { List, ListItem } from '@fluentui/react-list-preview';
+import { tokens, Text, makeResetStyles } from '@fluentui/react-components';
 
 const countries = [
   'Afghanistan',
@@ -205,7 +206,12 @@ const CountriesList = React.forwardRef<HTMLUListElement>((props: React.Component
   <List navigationMode="items" aria-label="Countries" {...props} ref={ref} />
 ));
 
+const useTextStyle = makeResetStyles({
+  color: tokens.colorNeutralForeground1,
+});
+
 export const VirtualizedListWithActionableItems = () => {
+  const textStyle = useTextStyle();
   return (
     <FixedSizeList
       height={400}
@@ -222,7 +228,7 @@ export const VirtualizedListWithActionableItems = () => {
           aria-posinset={index + 1}
           onAction={() => alert(data[index])}
         >
-          {data[index]}
+          <Text className={textStyle}>{data[index]}</Text>
         </ListItem>
       )}
     </FixedSizeList>