docs(examples): replace deprecated children prop of ListItemStandard (#7317)

Author: Lukas742

examples/nextjs-app/app/components/AppShellBar.tsx

@@ -71,9 +71,12 @@ export function AppShellBar() {
       >
         <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListMode.Single}>
           {THEMES.map((theme) => (
-            <ListItemStandard key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
-              {theme.value}
-            </ListItemStandard>
+            <ListItemStandard
+              key={theme.key}
+              selected={currentTheme === theme.key}
+              data-key={theme.key}
+              text={theme.value}
+            />
           ))}
         </List>
       </ResponsivePopover>

examples/nextjs-app/app/components/TodoList.tsx

@@ -26,9 +26,8 @@ export function TodoList({ items }: TodoListProps) {
             type={ListItemType.Navigation}
             additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
             additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
-          >
-            {todo.title}
-          </ListItemStandard>
+            text={todo.title}
+          />
         );
       })}
     </List>

examples/nextjs-pages/pages/index.tsx

@@ -34,9 +34,8 @@ export default function Home({ todos }: Props) {
                 type={ListItemType.Navigation}
                 additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
                 additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
-              >
-                {todo.title}
-              </ListItemStandard>
+                text={todo.title}
+              />
             );
           })}
         </List>

examples/react-router-ts/app/components/AppShellBar.tsx

@@ -63,9 +63,12 @@ export function AppShellBar() {
       <ResponsivePopover ref={popoverRef} className={classes.popover}>
         <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListSelectionMode.Single}>
           {THEMES.map((theme) => (
-            <ListItemStandard key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
-              {theme.value}
-            </ListItemStandard>
+            <ListItemStandard
+              key={theme.key}
+              selected={currentTheme === theme.key}
+              data-key={theme.key}
+              text={theme.value}
+            />
           ))}
         </List>
       </ResponsivePopover>

examples/react-router-ts/app/components/TodoList.tsx

@@ -24,9 +24,8 @@ export function TodoList({ items }: TodoListProps) {
             type={ListItemType.Navigation}
             additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
             additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
-          >
-            {todo.title}
-          </ListItemStandard>
+            text={todo.title}
+          />
         );
       })}
     </List>

examples/vite-ts/src/AppShell.tsx

@@ -100,9 +100,12 @@ function AppShell() {
       >
         <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListMode.Single}>
           {THEMES.map((theme) => (
-            <ListItemStandard key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
-              {theme.value}
-            </ListItemStandard>
+            <ListItemStandard
+              key={theme.key}
+              selected={currentTheme === theme.key}
+              data-key={theme.key}
+              text={theme.value}
+            />
           ))}
         </List>
       </ResponsivePopover>

examples/vite-ts/src/ToDos.tsx

@@ -31,9 +31,8 @@ function ToDos() {
                     type={ListItemType.Navigation}
                     additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
                     additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
-                  >
-                    {todo.title}
-                  </ListItemStandard>
+                    text={todo.title}
+                  />
                 );
               })}
             </List>