feat(code-connect): connect ContainedList and cleanup other files (#1…

…6929) * feat(code-connect): connect Select and FluidSelect * chore: fix * feat(code-connect): connect select and radio button * feat(code-connect): radio button and radio button group * chore: typo * feat(code-connect): connect search * Update README.md * fix(code-connect): update to v1 and fix bugs * chore: merge * fix: move code-connect to dev dependency * chore: yarn dedupe * chore: match packages back to main * feat(code-connect): connect content-swticher * feat(code-connect): loading and inline loading * feat(code-connect): unorderedlist, orderedlist, listitem * feat(code-connect): progress bar * chore: cleanup * feat(code-connect): connect contained list and remove code comments * chore: remove extra code * chore: update readme --------- Co-authored-by: Ariella Gilmore <[email protected]>
carbon-design-system · Jul 10, 2024 · f7f4baa · f7f4baa
1 parent e21d106
commit f7f4baa
Show file tree

Hide file tree

Showing 34 changed files with 169 additions and 390 deletions.
diff --git a/packages/react/code-connect/Accordion/Accordion.figma.tsx b/packages/react/code-connect/Accordion/Accordion.figma.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// @ts-nocheck
 import React from 'react';
 import { Accordion } from '@carbon/react';
 import figma from '@figma/code-connect';
@@ -29,8 +28,6 @@ figma.connect(
       }),
     },
     example: ({ children, accordionItem }) => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
       <Accordion
         size={accordionItem.size}
         align={accordionItem.align}

diff --git a/packages/react/code-connect/Accordion/AccordionItem.figma.tsx b/packages/react/code-connect/Accordion/AccordionItem.figma.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// @ts-nocheck
 import React from 'react';
 import { AccordionItem } from '@carbon/react';
 import figma from '@figma/code-connect';

diff --git a/packages/react/code-connect/Breadcrumb/Breadcrumb.figma.tsx b/packages/react/code-connect/Breadcrumb/Breadcrumb.figma.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// @ts-nocheck
 import React from 'react';
 import { Breadcrumb } from '@carbon/react';
 import figma from '@figma/code-connect';
@@ -18,11 +17,7 @@ figma.connect(
       //noTrailingSlash: needs to come from child item component in figma
       children: figma.children(['_Breadcrumb item']),
     },
-    example: ({ children }) => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <Breadcrumb>{children}</Breadcrumb>
-    ),
+    example: ({ children }) => <Breadcrumb>{children}</Breadcrumb>,
   }
 );
 

diff --git a/packages/react/code-connect/Breadcrumb/BreadcrumbItem.figma.tsx b/packages/react/code-connect/Breadcrumb/BreadcrumbItem.figma.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// @ts-nocheck
 import React from 'react';
 import { BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import figma from '@figma/code-connect';

diff --git a/packages/react/code-connect/Button/Button.figma.tsx b/packages/react/code-connect/Button/Button.figma.tsx
@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 // @ts-nocheck
 import React from 'react';
 import { Button, ButtonSkeleton } from '@carbon/react';
@@ -43,28 +42,8 @@ figma.connect(
       }),
       renderIcon: figma.instance('Swap icon'),
     },
-    example: ({
-      size,
-      kind,
-      isExpressive,
-      hasIconOnly,
-      renderIcon,
-      disabled,
-      buttonText,
-    }) => {
-      return (
-        // Disclaimer: Code Connect is currently in beta and integration with Carbon
-        // React is in an exploratory phase. Code sample below may be incomplete.
-        <Button
-          size={size}
-          kind={kind}
-          isExpressive={isExpressive}
-          hasIconOnly={hasIconOnly}
-          renderIcon={renderIcon}
-          disabled={disabled}>
-          {buttonText}
-        </Button>
-      );
+    example: ({ ...props, buttonText }) => {
+      return <Button {...props}>{buttonText}</Button>;
     },
   }
 );
@@ -84,11 +63,7 @@ figma.connect(
       }),
     },
     example: ({ size }) => {
-      return (
-        // Disclaimer: Code Connect is currently in beta and integration with Carbon
-        // React is in an exploratory phase. Code sample below may be incomplete.
-        <ButtonSkeleton size={size} />
-      );
+      return <ButtonSkeleton size={size} />;
     },
   }
 );
diff --git a/packages/react/code-connect/Checkbox/Checkbox.figma.tsx b/packages/react/code-connect/Checkbox/Checkbox.figma.tsx
@@ -49,34 +49,7 @@ figma.connect(
         'Read-only': true,
       }),
     },
-    example: ({
-      helperText,
-      labelText,
-      indeterminate,
-      checked,
-      invalidText,
-      warnText,
-      disabled,
-      readOnly,
-      invalid,
-      warn,
-      hideLabel,
-    }) => (
-      <Checkbox
-        id="your_checkbox_id"
-        labelText={labelText}
-        helperText={helperText}
-        indeterminate={indeterminate}
-        checked={checked}
-        warnText={warnText}
-        invalidText={invalidText}
-        disabled={disabled}
-        readOnly={readOnly}
-        invalid={invalid}
-        warn={warn}
-        hideLabel={hideLabel}
-      />
-    ),
+    example: ({ ...props }) => <Checkbox id="your_checkbox_id" {...props} />,
   }
 );
 
@@ -85,11 +58,6 @@ figma.connect(
   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=3193-29303&mode=design&t=QVE44xARq96HRr11-4',
   {
     variant: { State: 'Skeleton' },
-    example: () => (
-      // Disclaimer: Code Connect is currently in beta and
-      // integration with Carbon React is in an exploratory phase.
-      // Code sample below may be incomplete.
-      <CheckboxSkeleton />
-    ),
+    example: () => <CheckboxSkeleton />,
   }
 );
diff --git a/packages/react/code-connect/Checkbox/CheckboxGroup.figma.tsx b/packages/react/code-connect/Checkbox/CheckboxGroup.figma.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// @ts-nocheck
 import React from 'react';
 import { CheckboxGroup } from '@carbon/react';
 import figma from '@figma/code-connect';
@@ -34,25 +33,8 @@ figma.connect(
       }),
       warnText: figma.string('Warning text'),
     },
-    example: ({
-      helperText,
-      readOnly,
-      children,
-      invalid,
-      invalidText,
-      warn,
-      warnText,
-    }) => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <CheckboxGroup
-        legendText="Checkbox group label"
-        helperText={helperText}
-        readOnly={readOnly}
-        warnText={warnText}
-        invalidText={invalidText}
-        invalid={invalid}
-        warn={warn}>
+    example: ({ children, ...props }) => (
+      <CheckboxGroup legendText="Checkbox group label" {...props}>
         {children}
       </CheckboxGroup>
     ),

diff --git a/packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx b/packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx
@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 // @ts-nocheck
 import React from 'react';
 import { CodeSnippet, CodeSnippetSkeleton } from '@carbon/react';
@@ -15,11 +14,7 @@ figma.connect(
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-104904&t=cMvnFTYLPEhzhIpj-4',
   {
     example: () => {
-      return (
-        // Disclaimer: Code Connect is currently in beta and integration with Carbon
-        // React is in an exploratory phase. Code sample below may be incomplete.
-        <div>{/* To view CodeSnippet code, view inner component */}</div>
-      );
+      return <div>{/* To view CodeSnippet code, view inner component */}</div>;
     },
   }
 );
@@ -34,8 +29,6 @@ figma.connect(
     },
     example: ({ children }) => {
       return (
-        // Disclaimer: Code Connect is currently in beta and integration with Carbon
-        // React is in an exploratory phase. Code sample below may be incomplete.
         <CodeSnippet type="inline" feedback="Copied to clipboard">
           {children}
         </CodeSnippet>
@@ -54,8 +47,6 @@ figma.connect(
     },
     example: ({ children }) => {
       return (
-        // Disclaimer: Code Connect is currently in beta and integration with Carbon
-        // React is in an exploratory phase. Code sample below may be incomplete.
         <CodeSnippet type="single" feedback="Copied to clipboard">
           {children}
         </CodeSnippet>
@@ -78,8 +69,6 @@ figma.connect(
       expanded: figma.boolean('Expanded'),
     },
     example: ({ hideCopyButton }) => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
       <CodeSnippet
         type="multi"
         feedback="Copied to clipboard"
@@ -96,10 +85,6 @@ figma.connect(
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
   {
     variant: { State: 'Skeleton' },
-    example: () => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <CodeSnippetSkeleton type="multi" />
-    ),
+    example: () => <CodeSnippetSkeleton type="multi" />,
   }
 );
diff --git a/packages/react/code-connect/ContainedList/ContainedList.figma.tsx b/packages/react/code-connect/ContainedList/ContainedList.figma.tsx
@@ -7,55 +7,90 @@
 
 // @ts-nocheck
 import React from 'react';
-import { ContainedList, ContainedListItem } from '@carbon/react';
+import { ContainedList } from '@carbon/react';
 import figma from '@figma/code-connect';
+import { title } from 'process';
+
+const sharedContainedListProps = {
+  children: figma.children(['_Contained list row item']),
+  search: figma.children(['Search - Default']),
+  kind: figma.enum('Type', {
+    'On page': 'on-page',
+    Disclosed: 'disclosed',
+  }),
+  titleItem: figma.nestedProps('_Contained list title item', {
+    action: figma.boolean('Show action', {
+      true: figma.enum('Action type', {
+        Default: '<OverflowMenu/> (code not fully connected with code connect)',
+        'Filterable search': figma.children(['Search - Default']),
+      }),
+    }),
+    label: figma.boolean('Tooltip', {
+      // true: figma.string('List title text') + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92
+      true: figma.string('List title text'),
+      false: figma.string('List title text'),
+    }),
+    tooltip: figma.children('Tooltip'),
+  }),
+  rowItem: figma.nestedProps('_Contained list row item', {
+    size: figma.enum('Size', {
+      'Extra large': 'xl',
+      Medium: 'md',
+      Small: 'sm',
+    }),
+  }),
+  // Need a way to display a variant restriction from nestedProps
+  // so that we can display this component for actions if Action type is
+  // Filterable search or not
+  // https://github.com/figma/code-connect/issues/91
+  //
+  // or combine boolean with nestedProps
+  // https://github.com/figma/code-connect/issues/89
+  //
+  // titleActions: figma.nestedProps('Actions', {
+  //   action: figma.enum('Action', {
+  //     'Overflow menu': figma.children('Overflow'),
+  //     'Ghost icon button': figma.children('Button'),
+  //     'Primary icon button': figma.children('Button'),
+  //     Link: figma.children('Link'),
+  //     Tag: figma.children('Tag'),
+  //   }),
+  // }),
+};
 
 figma.connect(
   ContainedList,
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16193-272726&t=cMvnFTYLPEhzhIpj-4',
   {
-    props: {
-      // label: // set on child component in Figma
-      children: figma.children(['_Contained list row item']),
-      kind: figma.enum('Type', {
-        'On page': 'on-page',
-        Disclosed: 'disclosed',
-      }),
-
-      search: figma.boolean('Search'), // todo: set up as a variant
-    },
-    example: ({ children, kind }) => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <ContainedList label="List title" kind={kind}>
+    props: sharedContainedListProps,
+    example: ({ children, kind, titleItem, rowItem }) => (
+      <ContainedList
+        label={titleItem.label}
+        kind={kind}
+        size={rowItem.size}
+        action={titleItem.action}>
         {children}
       </ContainedList>
     ),
   }
 );
 
+WithPersistentSearch;
 figma.connect(
-  ContainedListItem,
-  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16193-272771&t=cMvnFTYLPEhzhIpj-4',
+  ContainedList,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16193-272726&t=cMvnFTYLPEhzhIpj-4',
   {
-    props: {
-      item: figma.boolean('Item 2'),
-      item3: figma.boolean('Item 3'),
-      action: figma.boolean('Action'),
-      size: figma.enum('Size', {
-        'Extra large': 'extra-large',
-        Large: 'large',
-        Medium: 'medium',
-        Small: 'small',
-      }),
-      state: figma.enum('State', {
-        Enabled: 'enabled',
-        Hover: 'hover',
-        Focus: 'focus',
-        Active: 'active',
-        Disabled: 'disabled',
-      }),
-    },
-    example: () => <ContainedListItem />,
+    variant: { Search: 'True' },
+    props: sharedContainedListProps,
+    example: ({ children, kind, titleItem, rowItem, search }) => (
+      <ContainedList
+        label={titleItem.label}
+        kind={kind}
+        size={rowItem.size}
+        action={titleActions.action}>
+        {search}
+        {children}
+      </ContainedList>
+    ),
   }
 );