Skip to content

Commit

Permalink
Code Connect v1.0.6
Browse files Browse the repository at this point in the history
  • Loading branch information
figma-bot committed Aug 21, 2024
1 parent 40bc9f6 commit 76c9fcc
Show file tree
Hide file tree
Showing 15 changed files with 63 additions and 1,899 deletions.
19 changes: 18 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
# Code Connect v1.0.6 (21st August 2024)

## Fixed

### React
- Fixed issue where props with special characters such as hyphens would not render properly. (https://github.com/figma/code-connect/issues/116)

## Features


### React
- figma.enum now supports floating point numbers

### Compose
- Update the dependency for Code Connect to use Kotlin 2.0 libraries


# Code Connect v1.0.5 (13th August 2024)

## Fixed
## Fixed

### React
- Fixed an issue around creation of Code Connect files from the CLI assistant (fixes https://github.com/figma/code-connect/issues/125)
Expand Down
18 changes: 9 additions & 9 deletions cli/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ In addition to the [general configuration](../README.md#general-configuration) f
```jsonp
{
"codeConnect": {
"parser": "react",
"include": [],
"exclude": ["test/**", "docs/**", "build/**"],
"importPaths": {
Expand Down Expand Up @@ -246,7 +247,6 @@ export function ButtonExample({ label, disabled, type }) {
The `figma` import contains helpers for mapping all sorts of properties from design to code. They work for simple mappings where only the naming differs between Figma and code, as well as more complex mappings where the type differs. See the below reference for all the helpers that exist and the ways you can use them to connect Figma and code components using Code Connect.
### figma.connect
`figma.connect()` has two signatures for connecting components.
Expand Down Expand Up @@ -288,16 +288,15 @@ figma.boolean('Has Icon', {
true: <Icon />,
false: <Spacer />,
})

```
In some cases, you only want to render a certain prop if it matches some value in Figma. You can do this either by passing a partial mapping object, or setting the value to `undefined`.
```tsx
// Don't render the prop if 'Has label' in figma is `false`
figma.boolean("Has label", {
true: figma.string("Label"),
false: undefined
figma.boolean('Has label', {
true: figma.string('Label'),
false: undefined,
})
```
Expand Down Expand Up @@ -325,7 +324,7 @@ figma.enum('Variant', { Disabled: true })
figma.connect(Modal, 'https://...', {
props: {
cancelButton: figma.enum('Type', {
'Cancellable': <CancelButton />
Cancellable: <CancelButton />,
}),
// ...
},
Expand Down Expand Up @@ -402,10 +401,10 @@ It's common for components in Figma to have child instances that aren't bound to
To illustrate this, consider the layer hierarchy in a component vs an instance of that component:
Button (Component)
Icon (Instance) -- "Icon" is the original name of the layer, this is what you should pass to `figma.children()`
Icon (Instance) -- "Icon" is the original name of the layer, this is what you should pass to `figma.children()`
Button (Instance)
RenamedIcon (Instance) -- here the instance layer was renamed, which won't break the mapping since we're not using this name
RenamedIcon (Instance) -- here the instance layer was renamed, which won't break the mapping since we're not using this name
Note that the nested instance also must be connected separately.
Expand All @@ -421,7 +420,7 @@ figma.children(['Tab 1', 'Tab 2'])
### Wildcard match
`figma.children()` can be used with a single wildcard '*' character, to partially match names or to render any nested child. Wildcards cannot be used with the array argument. Matches are case sensitive.
`figma.children()` can be used with a single wildcard '\*' character, to partially match names or to render any nested child. Wildcards cannot be used with the array argument. Matches are case sensitive.
```tsx
// map any (all) child instances
Expand Down Expand Up @@ -478,6 +477,7 @@ figma.connect("https://...", {
```
In Dev Mode this will display as:
```
<button className="btn-base btn-large btn-disabled" />
```
Expand Down
4 changes: 2 additions & 2 deletions cli/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@figma/code-connect",
"version": "1.0.5",
"version": "1.0.6",
"description": "A tool for connecting your design system components in code with your design system in Figma",
"keywords": [],
"author": "Figma",
Expand Down Expand Up @@ -66,7 +66,7 @@
"@babel/types": "^7.24.7",

"@storybook/csf-tools": "^7.6.7",
"axios": "^1.6.0",
"axios": "^1.7.4",
"boxen": "5.1.1",
"chalk": "^4.1.2",
"commander": "^11.1.0",
Expand Down
2 changes: 2 additions & 0 deletions cli/src/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
import * as commander from 'commander'
import { addConnectCommandToProgram } from './commands/connect'
import { updateCli } from './common/updates'
import { maybePrefillWizardQuestionsForTesting } from './connect/wizard/helpers'

require('dotenv').config()

async function run() {
maybePrefillWizardQuestionsForTesting()

const program = new commander.Command().version(require('./../package.json').version)
program.enablePositionalOptions()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { FigmaRestApi } from '../../../figma_rest_api'
import { autoLinkComponents, getBestMatchingExportWithinFile } from '../../autolinking'
import polarisReact from './test_cases/polaris_react'
import vitaminWeb from './test_cases/vitamin_web'

const TEST_CASES = [vitaminWeb, polarisReact]

const TEST_CASES = [
]

describe('autolinking', () => {
TEST_CASES.forEach((testCase) => {
Expand Down
Loading

0 comments on commit 76c9fcc

Please sign in to comment.