-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(code-connect): integrate the most used components
- Loading branch information
1 parent
7c58b26
commit 37e2b60
Showing
22 changed files
with
1,486 additions
and
249 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| // eslint-disable-next-line | ||
| // @ts-nocheck | ||
|
|
||
| /** | ||
| * `iconType` expects an enum member, a string or ComponentType | ||
| * `iconSide` expects "left" or "right" or undefined | ||
| * | ||
| * I cannot use `as const` to narrow down the type because the value is serialized, so the code snippet would be | ||
| * `iconSide={'left' as const}` | ||
| * | ||
| * figma.instance returns a a JSX.Element, not ComponentType or string. The code is not executed so it doesn't matter. | ||
| * | ||
| * `props` must be an object literal so we cannot use assertion there either. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| import { EuiBadge } from './badge'; | ||
|
|
||
| figma.connect(EuiBadge, 'node-id=31918-390303', { | ||
| props: { | ||
| children: figma.boolean('Icon only', { | ||
| true: undefined, | ||
| false: figma.string('Text'), | ||
| }), | ||
| color: figma.enum('Color', { | ||
| Default: undefined, | ||
| Hollow: 'hollow', | ||
| Primary: 'primary', | ||
| Accent: 'accent', | ||
| Success: 'success', | ||
| Danger: 'danger', | ||
| Warning: 'warning', | ||
| }), | ||
| isDisabled: figma.boolean('Disabled'), | ||
| iconType: figma.boolean('Icon only', { | ||
| true: figma.instance('⮑ Icon'), | ||
| false: figma.boolean('Icon left', { | ||
| true: figma.instance('⮑ Icon left'), | ||
| false: figma.boolean('Icon right', { | ||
| true: figma.instance('⮑ Icon right'), | ||
| false: undefined, | ||
| }), | ||
| }), | ||
| }), | ||
| iconSide: figma.boolean('Icon left', { | ||
| true: 'left', | ||
| false: figma.boolean('Icon right', { | ||
| true: 'right', | ||
| false: undefined, | ||
| }), | ||
| }), | ||
| }, | ||
| example: ({ children, ...props }) => ( | ||
| <EuiBadge {...props}>{children}</EuiBadge> | ||
| ), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| // eslint-disable-next-line | ||
| // @ts-nocheck | ||
|
|
||
| /** | ||
| * `iconType` expects an enum member, a string or ComponentType | ||
| * `iconSide` expects "left" or "right" or undefined | ||
| * | ||
| * I cannot use `as const` to narrow down the type below because the value is serialized, | ||
| * so the code snippet would be `iconSide={'left' as const}`, | ||
| * and figma.instance is a JSX.Element, not ComponentType or string but it's a conflict between | ||
| * Code Connect API and the icon implementation (it's not render props pattern). I don't think there's an alternative, | ||
| * at the same time it doesn't matter much because Figma files are not executed, they're parsed as string. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| import { EuiButton } from './button'; | ||
| import { EuiButtonEmpty } from './button_empty'; | ||
| import { EuiButtonGroup } from './button_group'; | ||
|
|
||
| /* Example: reusing the same props across multiple component connections */ | ||
| const sharedProps = { | ||
| children: figma.boolean('Icon only', { | ||
| true: undefined, | ||
| false: figma.textContent('Text'), | ||
| }), | ||
| color: figma.enum('Color', { | ||
| 'Primary*': undefined, | ||
| Neutral: 'text', | ||
| Success: 'success', | ||
| Warning: 'warning', | ||
| Danger: 'danger', | ||
| Accent: 'accent', | ||
| }), | ||
| isDisabled: figma.boolean('Disabled'), | ||
| isLoading: figma.boolean('Loading'), | ||
| iconType: figma.boolean('Icon only', { | ||
| true: figma.instance('⮑ Icon'), | ||
| false: figma.boolean('Icon left', { | ||
| true: figma.instance('⮑ Icon left'), | ||
| false: figma.boolean('Icon right', { | ||
| true: figma.instance('⮑ Icon right'), | ||
| false: undefined, | ||
| }), | ||
| }), | ||
| }), | ||
| iconSide: figma.boolean('Icon left', { | ||
| true: 'left', | ||
| false: figma.boolean('Icon right', { | ||
| true: 'right', | ||
| false: figma.boolean('Loading', { | ||
| true: figma.boolean('Left spinner', { | ||
| true: 'left', | ||
| false: figma.boolean('Right spinner', { | ||
| true: 'right', | ||
| false: undefined, | ||
| }), | ||
| }), | ||
| false: undefined, | ||
| }), | ||
| }), | ||
| }), | ||
| size: figma.enum('Size', { | ||
| 'Medium*': 'm', | ||
| Small: 's', | ||
| // Discrepancy between Figma and EUI | ||
| // 'Extra Small': 'extra-small', | ||
| }), | ||
| }; | ||
|
|
||
| /* Basic example */ | ||
| figma.connect(EuiButton, 'node-id=31735-391399', { | ||
| props: { | ||
| ...sharedProps, | ||
| fill: figma.enum('Style', { | ||
| 'Default*': undefined, | ||
| Filled: true, | ||
| }), | ||
| }, | ||
| example: ({ children, ...props }) => ( | ||
| <EuiButton onClick={() => {}} {...props}> | ||
| {children} | ||
| </EuiButton> | ||
| ), | ||
| }); | ||
|
|
||
| /* Example: Self-closing tags example (doesn't work, error: The Figma Variant "Icon only" does not have an option for true) */ | ||
| /* figma.connect(EuiButton, 'node-id=31735-391399', { | ||
| variant: { 'Icon only': true }, | ||
| props: sharedProps, | ||
| example: (props) => ( | ||
| <EuiButton aria-label="Meaningful label" onClick={() => {}} {...props} /> | ||
| ), | ||
| }); */ | ||
|
|
||
| /* Example: Figma variant being a separate component in code */ | ||
| figma.connect(EuiButtonEmpty, 'node-id=31735-391399', { | ||
| variant: { Style: 'Empty' }, | ||
| props: sharedProps, | ||
| example: (props) => ( | ||
| <EuiButtonEmpty onClick={() => {}} {...props}> | ||
| {children} | ||
| </EuiButtonEmpty> | ||
| ), | ||
| }); | ||
|
|
||
| /* Example: static, non-controllable props to showcase the usage */ | ||
| figma.connect(EuiButtonGroup, 'node-id=31735-392753', { | ||
| props: { | ||
| buttonSize: figma.enum('Size', { | ||
| 'Small*': 's', | ||
| Medium: 'm', | ||
| Compressed: 'compressed', | ||
| }), | ||
| color: figma.enum('Color', { | ||
| 'Neutral*': 'text', | ||
| Primary: 'primary', | ||
| // Discrepancy between Figma and EUI | ||
| // Lack of "accent", "success", "warning", "danger" in Figma | ||
| }), | ||
| isDisabled: figma.boolean('Disabled'), | ||
| isFullWidth: figma.boolean('Full width'), | ||
| isIconOnly: figma.boolean('Icon only'), | ||
| }, | ||
| example: (props) => ( | ||
| <EuiButtonGroup | ||
| type="single" | ||
| idSelected="0" | ||
| legend="Legend" | ||
| onChange={() => {}} | ||
| options={[ | ||
| { id: '0', label: 'Button' }, | ||
| { id: '1', label: 'Button' }, | ||
| { id: '2', label: 'Button' }, | ||
| ]} | ||
| {...props} | ||
| /> | ||
| ), | ||
| }); |
Oops, something went wrong.