chore: update selectable list example in docsite (#18639)

* update selectable list background * changelog
microsoft · Jul 2, 2021 · 27cc926 · 27cc926
1 parent 441e322
commit 27cc926
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 42 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -75,6 +75,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Documentation
 - Allow switching to V2 themes in maximized examples @Hirse ([#18292](https://github.com/microsoft/fluentui/pull/18292))
 - Add DocumentTitle from Prototype section @Hirse ([#18539](https://github.com/microsoft/fluentui/pull/18539))
+- Update selectable list example to make sure selection state is visible in all themes @yuanboxue-amber ([#18639](https://github.com/microsoft/fluentui/pull/18639))
 
 <!--------------------------------[ v0.56.0 ]------------------------------- -->
 ## [v0.56.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.56.0) (2021-05-14)

diff --git a/...ages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx b/...ages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { List, Image } from '@fluentui/react-northstar';
+import { Box, List, Image } from '@fluentui/react-northstar';
 
 const items = [
   {
@@ -25,6 +25,14 @@ const items = [
   },
 ];
 
-const ListExampleSelectable = () => <List selectable defaultSelectedIndex={0} items={items} />;
+const ListExampleSelectable = () => (
+  <Box
+    styles={({ theme: { siteVariables } }) => ({
+      backgroundColor: siteVariables.colorScheme.default.background4,
+    })}
+  >
+    <List selectable defaultSelectedIndex={0} items={items} />
+  </Box>
+);
 
 export default ListExampleSelectable;
diff --git a/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectable.tsx b/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
@@ -1,34 +1,40 @@
 import * as React from 'react';
-import { List, Image } from '@fluentui/react-northstar';
+import { List, Image, Box } from '@fluentui/react-northstar';
 
 const ListExampleSelectable = () => (
-  <List selectable>
-    <List.Item
-      media={
-        <Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/RobertTolbert.jpg" avatar />
-      }
-      header="Robert Tolbert"
-      headerMedia="7:26:56 AM"
-      index={0}
-      content="Program the sensor to the SAS alarm through the haptic SQL card!"
-    />
-    <List.Item
-      media={
-        <Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/CelesteBurton.jpg" avatar />
-      }
-      header="Celeste Burton"
-      headerMedia="11:30:17 PM"
-      index={1}
-      content="Use the online FTP application to input the multi-byte application!"
-    />
-    <List.Item
-      media={<Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/CecilFolk.jpg" avatar />}
-      header="Cecil Folk"
-      headerMedia="5:22:40 PM"
-      index={2}
-      content="The GB pixel is down, navigate the virtual interface!"
-    />
-  </List>
+  <Box
+    styles={({ theme: { siteVariables } }) => ({
+      backgroundColor: siteVariables.colorScheme.default.background4,
+    })}
+  >
+    <List selectable>
+      <List.Item
+        media={
+          <Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/RobertTolbert.jpg" avatar />
+        }
+        header="Robert Tolbert"
+        headerMedia="7:26:56 AM"
+        index={0}
+        content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      />
+      <List.Item
+        media={
+          <Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/CelesteBurton.jpg" avatar />
+        }
+        header="Celeste Burton"
+        headerMedia="11:30:17 PM"
+        index={1}
+        content="Use the online FTP application to input the multi-byte application!"
+      />
+      <List.Item
+        media={<Image src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/CecilFolk.jpg" avatar />}
+        header="Cecil Folk"
+        headerMedia="5:22:40 PM"
+        index={2}
+        content="The GB pixel is down, navigate the virtual interface!"
+      />
+    </List>
+  </Box>
 );
 
 export default ListExampleSelectable;
diff --git a/...tui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx b/...tui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { List, Image } from '@fluentui/react-northstar';
+import { Box, List, Image } from '@fluentui/react-northstar';
 
 class SelectableListControlledExample extends React.Component<any, any> {
   state = { selectedIndex: -1 };
@@ -34,15 +34,21 @@ class SelectableListControlledExample extends React.Component<any, any> {
 
   render() {
     return (
-      <List
-        selectable
-        selectedIndex={this.state.selectedIndex}
-        onSelectedIndexChange={(e, newProps) => {
-          alert(`List is requested to change its selectedIndex state to "${newProps.selectedIndex}"`);
-          this.setState({ selectedIndex: newProps.selectedIndex });
-        }}
-        items={this.items}
-      />
+      <Box
+        styles={({ theme: { siteVariables } }) => ({
+          backgroundColor: siteVariables.colorScheme.default.background4,
+        })}
+      >
+        <List
+          selectable
+          selectedIndex={this.state.selectedIndex}
+          onSelectedIndexChange={(e, newProps) => {
+            alert(`List is requested to change its selectedIndex state to "${newProps.selectedIndex}"`);
+            this.setState({ selectedIndex: newProps.selectedIndex });
+          }}
+          items={this.items}
+        />
+      </Box>
     );
   }
 }

diff --git a/...fluentui/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx b/...fluentui/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { List, Status } from '@fluentui/react-northstar';
+import { List, Status, Box } from '@fluentui/react-northstar';
 import { ErrorIcon, AcceptIcon } from '@fluentui/react-icons-northstar';
 
 const items = [
@@ -20,6 +20,14 @@ const items = [
   },
 ];
 
-const ListExampleSelectable = () => <List selectable defaultSelectedIndex={0} items={items} horizontal />;
+const ListExampleSelectable = () => (
+  <Box
+    styles={({ theme: { siteVariables } }) => ({
+      backgroundColor: siteVariables.colorScheme.default.background4,
+    })}
+  >
+    <List selectable defaultSelectedIndex={0} items={items} horizontal />
+  </Box>
+);
 
 export default ListExampleSelectable;