Prototype: Context usage for collections

Author: layershifter

docs/src/examples/components/List/Content/ListExampleContent.tsx

@@ -3,9 +3,15 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Program the sensor to the SAS alarm through the haptic SQL card!" />
-    <List.Item header="Use the online FTP application to input the multi-byte application!" />
-    <List.Item header="The GB pixel is down, navigate the virtual interface!" />
+    <List.Item
+      header="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
+    />
+    <List.Item
+      header="Use the online FTP application to input the multi-byte application!"
+      index={1}
+    />
+    <List.Item header="The GB pixel is down, navigate the virtual interface!" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleContentMedia.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       contentMedia="7:26:56 AM"
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       contentMedia="11:30:17 PM"
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       contentMedia="5:22:40 PM"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleEndMedia.tsx

@@ -9,16 +9,19 @@ const ListExample = () => (
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
       selectable
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
       selectable
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
       selectable
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeader.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" />
-    <List.Item header="Skyler Parks" />
-    <List.Item header="Dante Schneider" />
+    <List.Item header="Irving Kuhic" index={0} />
+    <List.Item header="Skyler Parks" index={1} />
+    <List.Item header="Dante Schneider" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" />
-    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" />
-    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" />
+    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" index={0} />
+    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" index={1} />
+    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleMedia.tsx

@@ -8,18 +8,21 @@ const ListExampleMedia = () => (
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )