Figma Code Connect: Bugs

[alisonjoseph]

Issues/Bugs from original component connect 🐞

• Variable modes aren't currently supported. (we are using them for AI presence) Using modes in code connect figma/code-connect#6

FluidComboBox

• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

FluidMultiSelect

• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

Treeview

• Figma component isn't built with nesting
• Icon within the tree node is just a child component, not a swap icon

OverflowMenuItem

• Figma has one Menu item component that maps to two different React components depending on the context. So we aren't able to map this.

MenuItem

• Nested menus aren't able to be fully connected

Form

• 2 column form isn't connected, need to figure out layouts/grid
• form modal isn't connected

Time picker

• [Time picker]: missing error, warning states and show/hide label  carbon-design-kit#853

Date picker

• Simple
  • "Show label " should be "Show label" Extra space causing error with code connect
  • Show label missing from skeleton state
• Single
  • "Show label" missing from Figma component & skeleton state
• Fluid single
• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

ProgressIndicator

• Skeleton state is the entire component in React, but individual steps in Figma. Variant restriction from nestedProps figma/code-connect#91

Fluid components

• [FluidComponents]: missing readOnly state  #16939

FluidTextInput

• [FluidTextInput]: missing enableCounter #16938

ContainedList

• Need to be able to combine values (label+tooltip)
  • Can I combine string and children values and map them to one property? figma/code-connect#92
• Need to be able to either create a variant restriction from a nested property or combine boolean from nestedProps
  • Variant restriction from nestedProps figma/code-connect#91, combine figma.boolean with figma.nestedProps figma/code-connect#89

UnorderedList/OrderedList

• Nested lists are built differently in code vs. Figma.

FluidSearch, FluidSearchSkeleton

• FluidSearch and FluidSearchSkeleton aren't being exported #16809
• [FluidSearch]: Skeleton state missing from Figma carbon-design-kit#839

RadioButton

• Props in Figma can be set on individual radio buttons vs. code where they are set on the group
• labeltext, warningtext, helpermessage, warningmessage, errormessage, helpertext, errortext, label
• Use case for ever having only one radio button? Arguable that should always use RadioButtonGroup.

FluidSelect

• Ignoring component name in import when using an alias figma/code-connect#62
• showtooltip not supported in code

NumberInput / NumberInputSkeleton

• [Bug]: NumberInputSkeleton doesn't support helper text or sizes #16717
• value prop is a text layer Can you target "Text" layers as "children"? figma/code-connect#30

Dropdown / DropdownSkeleton

• [Bug]: DropdownSkeleton missing helper text and caret #16430

AccordionSkeleton

• Size, flush and alignment props are set on Accordion in code and Accordion item in Figma. Combine properties from nested instances figma/code-connect#11
• AccordionSkeleton in code refers to an entire component, in Figma it is a state on one of the AccordionItems so can't be mapped.

Tabs

• TabPanel doesn't exist in Figma
• Similar to above, many props in Figma exist on Tabs items when in code they are set on Tabs.
• fixed secondaryLabel isn't a property in Figma, just text. - on roadmap Can you target "Text" layers as "children"? figma/code-connect#30
• TabsSkeleton in code refers to an entire component, in Figma it is a state on Tabs items so can't be mapped.
• IconTab nesting bugs in dev mode in Figma

Notification

• Figma is missing info-square and warning-alt Status that are available in React
  • Missing notification status icons in Figma kit carbon-design-kit#812
• variant restriction bug variant restriction boolean bug figma/code-connect#45
• no static notifications in Figma (experimental in code)
• ActionableNotification buttons in Figma are child Button components, however in code they are a prop - actionButtonLabel- nested two components deep in Figma is causing an error.
  • Combine properties from nested instances figma/code-connect#11 (comment)

DataTable

• Data table header doesn't exist in code
• Size properties don't match. Figma has 'XL / LG / MD' or 'SM / XS' where code has xs ,sm, md, lg, xl. Figma requires you set the size properties on different components vs. code.
• WIP....
• .. coming back to this one later

Breadcrumb / BreadcrumbItem

• noTrailingSlash is set on parent Breadcrumb in code, in Figma it is set as current property on individual breadcrumb item component(s).
• Skeleton state in Figma is set on individual Breadcrumb items vs. in code it is the entire Breadcrumb component.
• OverflowMenu doesn't appear to be a child of BreadcrumbItem in Figma, so can't directly pull into dev mode code.
• Variant restriction nesting bug
  • Nested component variant restriction bug figma/code-connect#54

Checkbox / CheckboxGroup

• indented in Figma doesn't exist in code, has to be added via custom styles by a dev in code.
• label in Figma can be added to any Checkbox, although would only ever be added to the first item, in code it can only be added to a Checkbox group as legendText.
• CheckboxGroup missing horizontal variant #16486
• In Figma you can set the component state to warn or invalid and then hide the message, this is impossible in code, if the state is warn or invalid the icon for the message always shows up.

CodeSnippet

• Disabled state missing from all variants
  • [CodeSnippet]: Disabled state missing carbon-design-kit#821

Inline

• [CodeSnippet - inline]: Code snippet item is nested inside of Tooltip carbon-design-kit#820
• Unable to pull tooltip text into component

Single

• Can't hide copy button in Figma
• fixed Can't bring code snippet text into code due to it being a text layer Can you target "Text" layers as "children"? figma/code-connect#30

Multiline

• Line numbers missing in code
  • [code snippet] add line number modifier #6519
• Can't target show more button text, in Figma it is a nested button component, in React it is a prop.

Skeleton

• Singleline skeleton not available in Figma

Toggle

• variant restriction boolean bug figma/code-connect#45