feat(CC-batch-4): group review 4 followup

Author: mattnolting

packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx

@@ -17,17 +17,11 @@ figma.connect(
         Default: 'lg',
         Large: '2xl'
       }),
-
-      isCompact: figma.enum('Card size', { Small: true }),
-      isLarge: figma.enum('Card size', { Large: true }),
-
-      isHorizontal: figma.enum('Orientation', { Horizontal: true }),
-
-      children: figma.children('*')
+      isHorizontal: figma.enum('Orientation', { Horizontal: true })
     },
     example: (props) => (
       <DescriptionList isHorizontal={props.isHorizontal} displaySize={props.displaySize}>
-        <Card component="div" isCompact={props.isCompact} isLarge={props.isLarge}>
+        <Card component="div">
           <DescriptionListTerm>Input label</DescriptionListTerm>
           <DescriptionListDescription>Description list item</DescriptionListDescription>
         </Card>

packages/code-connect/components/DescriptionList/TermLabel.figma.tsx

@@ -17,8 +17,7 @@ figma.connect(
   {
     variant: { 'Inline edit toggle': true, 'Has help text': false },
     props: {
-      label: figma.string('✏️ Label'),
-      children: figma.children('*')
+      label: figma.string('✏️ Label')
     },
     example: (props) => (
       <DescriptionListTerm>
@@ -57,19 +56,21 @@ figma.connect(
   {
     variant: { 'Has help text': true, 'Inline edit toggle': false },
     props: {
+      // string
+      label: figma.string('✏️ Label'),
+
+      // enum
       icon: figma.enum('Icon ⎆', {
         true: <CodeBranchIcon />,
         false: undefined
-      }),
-      label: figma.string('✏️ Label'),
-      children: figma.children('*')
+      })
     },
     example: (props) => (
       <DescriptionListTermHelpText>
         <Popover headerContent={<div>{props.label}</div>} bodyContent={<div>This is the help text</div>}>
           <DescriptionListTermHelpTextButton>
+            {props.icon}
             {props.label}
-            {props.children}
           </DescriptionListTermHelpTextButton>
         </Popover>
       </DescriptionListTermHelpText>

packages/code-connect/components/DualListSelector/DualListItemTree.figma.tsx

@@ -1,15 +1,19 @@
 import figma from '@figma/code-connect';
-import { DualListSelectorListItem } from '@patternfly/react-core';
+import { DualListSelectorList, DualListSelectorTree } from '@patternfly/react-core';
 
 // Documentation for DualListSelectorListItemTree can be found at https://www.patternfly.org/components/dual-list-selector
 
 figma.connect(
-  DualListSelectorListItem,
+  DualListSelectorTree,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=21279-116342',
   {
     props: {
-      children: figma.children('*')
+      options: `DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false)`
     },
-    example: (props) => <DualListSelectorListItem>{props.children}</DualListSelectorListItem>
+    example: (props) => (
+      <DualListSelectorList>
+        <DualListSelectorTree data={props.options} onOptionCheck={() => {}} />
+      </DualListSelectorList>
+    )
   }
 );

packages/code-connect/components/DualListSelector/DualListItemTypes.figma.tsx

@@ -10,6 +10,6 @@ figma.connect(
     props: {
       children: figma.children('*')
     },
-    example: (props) => <div>{props.children}</div>
+    example: (props) => <DualListSelectorListItem>{props.children}</DualListSelectorListItem>
   }
 );

packages/code-connect/components/DualListSelector/DualListSelector.figma.tsx

@@ -3,32 +3,38 @@ import {
   DualListSelectorList,
   DualListSelectorPane,
   DualListSelectorControl,
-  DualListSelectorControlsWrapper
+  DualListSelectorControlsWrapper,
+  DualListSelectorListItem
 } from '@patternfly/react-core';
 import figma from '@figma/code-connect';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
+// TODO: DESIGN: Dual list items types and tree setting should come from components
+// Documentation for DualListSelector can be found at https://www.patternfly.org/components/dual-list-selector
+
 figma.connect(
   DualListSelector,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=29667-231683',
   {
-    props: {
-      children: figma.children('*')
-    },
-    example: (props) => (
+    example: () => (
       <DualListSelector>
         <DualListSelectorPane
           title="Available options"
           // searchInput={() => {}}
           // actions={() => {}}
+          // status={() => {}}
           listMinHeight="300px"
           isChosen
-          // status={() => {}}
         >
-          <DualListSelectorList>{props.children}</DualListSelectorList>
+          <DualListSelectorList>
+            <DualListSelectorListItem>Option 1</DualListSelectorListItem>
+            <DualListSelectorListItem>Option 2</DualListSelectorListItem>
+            <DualListSelectorListItem>Option 3</DualListSelectorListItem>
+            <DualListSelectorListItem>Option 4</DualListSelectorListItem>
+          </DualListSelectorList>
         </DualListSelectorPane>
 
         <DualListSelectorControlsWrapper>
@@ -58,7 +64,7 @@ figma.connect(
           />
         </DualListSelectorControlsWrapper>
         <DualListSelectorPane title="Choose options">
-          <DualListSelectorList>{props.children}</DualListSelectorList>
+          <DualListSelectorList></DualListSelectorList>
         </DualListSelectorPane>
       </DualListSelector>
     )