feat(code-connect): remaining core components (#17043)

* feat(code-connect): update to latest, add menu button, fix timepicker * feat(code-connect): treeview * chore: spelling * feat(code-connect): multiselect and structured list * feat(code-connect): tag * feat(code-connect): combobox * feat(code-connect): password input * feat(code-connect): data table and ui shell * chore: uncomment tabs * fix: tabs layer name * fix: tabs * fix: structured list flush * chore: update to 1.0.4 * feat(code-connect): fix tabs add vertical tabs * Delete packages/react/tasks/build-code-connect-icons.ts
carbon-design-system · Aug 13, 2024 · 63aff8b · 63aff8b
1 parent 9b737e8
commit 63aff8b
Show file tree

Hide file tree

Showing 40 changed files with 2,280 additions and 108 deletions.
diff --git a/.yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip b/.yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip
diff --git a/.yarn/cache/@figma-code-connect-npm-1.0.4-5b7b3be79e-a412e63774.zip b/.yarn/cache/@figma-code-connect-npm-1.0.4-5b7b3be79e-a412e63774.zip
diff --git a/packages/react/code-connect/ComboBox/ComboBox.figma.tsx b/packages/react/code-connect/ComboBox/ComboBox.figma.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 { ComboBox, DropdownSkeleton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  ComboBox,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-290976&t=5acDGCinwyrs5Bbc-4',
+  {
+    props: {
+      placeholder: figma.string('Filter text'),
+      helperText: figma.boolean('Show helper', {
+        true: figma.string('Helper text'),
+      }),
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+      }),
+      titleText: figma.string('Label text'),
+      hideLabel: figma.boolean('Show label', {
+        true: false,
+        false: true,
+      }),
+      readOnly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        Error: true,
+      }),
+      invalidText: figma.string('Error message'),
+      warn: figma.enum('State', {
+        Warning: true,
+      }),
+      warnText: figma.string('Warning message'),
+    },
+    example: ({ ...props }) => {
+      const items = [
+        {
+          id: 'option-0',
+          text: 'Option 0',
+        },
+        {
+          id: 'option-1',
+          text: 'Option 1',
+        },
+      ];
+
+      return (
+        <ComboBox
+          onChange={() => {}}
+          id="carbon-combobox"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          {...props}
+        />
+      );
+    },
+  }
+);
+
+figma.connect(
+  DropdownSkeleton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-290976&t=5acDGCinwyrs5Bbc-4',
+  {
+    variant: { State: 'Skeleton' },
+    props: {
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+      }),
+      hideLabel: figma.boolean('Show label', {
+        true: false,
+        false: true,
+      }),
+    },
+    example: ({ ...props }) => {
+      return <DropdownSkeleton {...props} />;
+    },
+  }
+);
diff --git a/packages/react/code-connect/ComboBox/FluidComboBox.figma.tsx b/packages/react/code-connect/ComboBox/FluidComboBox.figma.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 {
+  unstable__FluidComboBox as FluidComboBox,
+  unstable__FluidDropdownSkeleto as FluidDropdownSkeleton,
+} from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  FluidComboBox,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-304219&t=5acDGCinwyrs5Bbc-4',
+  {
+    props: {
+      titleText: figma.boolean('Show tooltip', {
+        // true: figma.string('Label text') + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92
+        true: figma.string('Label text'),
+        false: figma.string('Label text'),
+      }),
+      label: figma.string('Filter text'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        Error: true,
+      }),
+      invalidText: figma.string('Error text'),
+      warn: figma.enum('State', {
+        Warning: true,
+      }),
+      warnText: figma.string('Warning text'),
+      readOnly: figma.enum('State', {
+        'Read-only': true,
+      }),
+    },
+    example: ({ ...props }) => {
+      const items = [
+        {
+          id: 'option-0',
+          text: 'Option 0',
+        },
+        {
+          id: 'option-1',
+          text: 'Option 1',
+        },
+      ];
+
+      return (
+        <FluidComboBox
+          onChange={() => {}}
+          id="carbon-combobox"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          {...props}
+        />
+      );
+    },
+  }
+);
+
+figma.connect(
+  FluidDropdownSkeleton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-304219&t=5acDGCinwyrs5Bbc-4',
+  {
+    variant: { State: 'Skeleton' },
+    example: () => {
+      return <FluidDropdownSkeleton />;
+    },
+  }
+);
diff --git a/packages/react/code-connect/ComboButton/ComboButton.figma.tsx b/packages/react/code-connect/ComboButton/ComboButton.figma.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 { ComboButton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+const sharedComboButtonProps = {
+  size: figma.enum('Size', {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  }),
+  position: figma.enum('Position', {
+    Bottom: 'bottom',
+    Top: 'top',
+  }),
+  open: figma.boolean('Open'),
+  menu: figma.nestedProps('Menu', {
+    menuItem: figma.children(['_Menu list item']),
+  }),
+};
+
+figma.connect(
+  ComboButton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31753-68447&t=aG4cJRjteQHcd71k-4',
+  {
+    props: sharedComboButtonProps,
+    example: ({ size, position }) => (
+      <ComboButton size={size} position={position} label="Primary action">
+        Open Combo button to view <MenuItem /> props and code
+      </ComboButton>
+    ),
+  }
+);
+
+figma.connect(
+  ComboButton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31753-68447&t=aG4cJRjteQHcd71k-4',
+  {
+    variant: { Open: 'True' },
+    props: sharedComboButtonProps,
+    example: ({ size, position, menu }) => (
+      <ComboButton size={size} position={position} label="Primary action">
+        {menu.menuItem}
+      </ComboButton>
+    ),
+  }
+);