mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Some Code Connect example updates

pull/2311/head
Sara 2024-09-09 16:56:06 -04:00
rodzic 30f4bbcde6
commit 9c73d08e9b
7 zmienionych plików z 38 dodań i 90 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
figma_connect/badge.figma.tsx
Wyświetl plik

@ -5,13 +5,13 @@ import figma from '@figma/code-connect';
figma.connect('https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=8564-8&t=4UIXwDXcsJSneX8X-4', {
props: {
number: figma.string('✏️ number'),
variant: figma.enum('variant', {
red: 'red',
gray: 'gray'
})
}),
number: figma.string('✏️ number')
},
example: ({ number, variant }) => {
return <sl-badge number={number} variant={variant}></sl-badge>;
example: ({ variant, number }) => {
return <sl-badge variant={variant} number={number}></sl-badge>;
}
});

12
figma_connect/button.figma.tsx
Wyświetl plik

@ -25,10 +25,6 @@ figma.connect(
}),
outline: figma.boolean('outline?'),
circle: figma.boolean('circle?'),
circleIcon: figma.boolean('circle?', {
true: figma.children('Icon*'),
false: undefined
}),
prefix: figma.boolean('prefix?', {
true: figma.children('Prefix*'),
false: undefined
@ -37,14 +33,18 @@ figma.connect(
true: undefined,
false: figma.string('✏️ label')
}),
circleIcon: figma.boolean('circle?', {
true: figma.children('Icon*'),
false: undefined
}),
suffix: figma.boolean('suffix?', {
true: figma.children('Suffix*'),
false: undefined
})
},
example: ({ variant, size, outline, circle, disabled, prefix, label, circleIcon, suffix }) => {
example: ({ variant, size, disabled, outline, circle, prefix, label, circleIcon, suffix }) => {
return (
<sl-button variant={variant} size={size} outline={outline} circle={circle} disabled={disabled}>
<sl-button variant={variant} size={size} disabled={disabled} outline={outline} circle={circle}>
{prefix}
{label}
{circleIcon}

10
figma_connect/icon-button.figma.tsx
Wyświetl plik

@ -7,19 +7,19 @@ figma.connect(
'https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=2621-1914&t=NUUDTGV2YnFjzS2O-4',
{
props: {
name: figma.nestedProps('Icon for Button ❇️', {
iconName: figma.string('icon-name')
}),
size: figma.enum('size', {
'small (16px)': 'text-base',
'large (24px)': 'text-2xl'
}),
disabled: figma.enum('state', {
disabled: true
}),
name: figma.nestedProps('❇️ Icon for Button', {
iconName: figma.string('icon-name')
})
},
example: ({ size, name, disabled }) => {
return <sl-icon-button library="fa" class={size} name={name.iconName} disabled={disabled}></sl-icon-button>;
example: ({ size, disabled, name }) => {
return <sl-icon-button library="fa" class={size} disabled={disabled} name={name.iconName}></sl-icon-button>;
}
}
);

65
figma_connect/icon.figma.tsx
Wyświetl plik

@ -8,7 +8,6 @@ figma.connect(
'https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=6593-16323&t=DaTJhUJKLkDLJ0Zl-4',
{
props: {
iconName: figma.string('icon-name'),
style: figma.enum('style', {
solid: 'fas-',
regular: undefined,
@ -31,10 +30,11 @@ figma.connect(
'8x': 'text-9xl',
'9x': 'text-[144px]',
'10x': 'text-[160px]'
})
}),
iconName: figma.string('icon-name')
},
example: ({ style, iconName, scale }) => {
return <sl-icon library="fa" style={style} name={iconName} class={scale}></sl-icon>;
example: ({ style, scale, iconName }) => {
return <sl-icon library="fa" style={style} class={scale} name={iconName}></sl-icon>;
}
}
);
@ -44,30 +44,13 @@ figma.connect(
'https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=12989-18337&t=XQ5ktD0B254PC5m2-4',
{
props: {
iconName: figma.string('icon-name'),
style: figma.enum('style', {
solid: 'fas-',
regular: undefined,
light: 'fal-',
thin: 'fat-'
}),
scale: figma.enum('scale', {
'.75x': 'text-xs',
'.875x': 'text-sm',
'1x': 'text-base',
'1.25x': 'text-xl',
'1.5x': 'text-2xl',
'2x': 'text-[32px]',
'2.5x': 'text-[40px]',
'3x': 'text-5xl',
'4x': 'text-[64px]',
'5x': 'text-[80px]',
'6x': 'text-8xl',
'7x': 'text-[112px]',
'8x': 'text-9xl',
'9x': 'text-[144px]',
'10x': 'text-[160px]'
})
iconName: figma.string('icon-name')
},
example: ({ style, iconName }) => {
return <sl-icon slot="prefix" library="fa" style={style} name={iconName}></sl-icon>;
@ -80,30 +63,13 @@ figma.connect(
'https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=12991-2572&t=1cV1fw0FXz0L8Pr3-4',
{
props: {
iconName: figma.string('icon-name'),
style: figma.enum('style', {
solid: 'fas-',
regular: undefined,
light: 'fal-',
thin: 'fat-'
}),
scale: figma.enum('scale', {
'.75x': 'text-xs',
'.875x': 'text-sm',
'1x': 'text-base',
'1.25x': 'text-xl',
'1.5x': 'text-2xl',
'2x': 'text-[32px]',
'2.5x': 'text-[40px]',
'3x': 'text-5xl',
'4x': 'text-[64px]',
'5x': 'text-[80px]',
'6x': 'text-8xl',
'7x': 'text-[112px]',
'8x': 'text-9xl',
'9x': 'text-[144px]',
'10x': 'text-[160px]'
})
iconName: figma.string('icon-name')
},
example: ({ style, iconName }) => {
return <sl-icon slot="suffix" library="fa" style={style} name={iconName}></sl-icon>;
@ -117,30 +83,13 @@ figma.connect(
'https://www.figma.com/design/BrXOVNTglDWg03DL7ZZeW1/Teamshares-UI?node-id=13295-17509&t=6MS2mSbs4kwWAQ5V-4',
{
props: {
iconName: figma.string('icon-name'),
style: figma.enum('style', {
solid: 'fas-',
regular: undefined,
light: 'fal-',
thin: 'fat-'
}),
scale: figma.enum('scale', {
'.75x': 'text-xs',
'.875x': 'text-sm',
'1x': 'text-base',
'1.25x': 'text-xl',
'1.5x': 'text-2xl',
'2x': 'text-[32px]',
'2.5x': 'text-[40px]',
'3x': 'text-5xl',
'4x': 'text-[64px]',
'5x': 'text-[80px]',
'6x': 'text-8xl',
'7x': 'text-[112px]',
'8x': 'text-9xl',
'9x': 'text-[144px]',
'10x': 'text-[160px]'
})
iconName: figma.string('icon-name')
},
example: ({ style, iconName }) => {
return <sl-icon library="fa" style={style} name={iconName}></sl-icon>;

14
figma_connect/switch.figma.tsx
Wyświetl plik

@ -16,24 +16,24 @@ figma.connect(
medium: 'medium',
small: 'small'
}),
checked: figma.boolean('checked?'),
disabled: figma.enum('state', {
disabled: true
}),
checked: figma.boolean('checked?'),
label: figma.string('✏️ label'),
helpText: figma.boolean('help text?', {
true: figma.string('✏️ help text'),
false: undefined
})
},
example: ({ labelPosition, helpText, size, checked, disabled, label }) => {
example: ({ labelPosition, size, disabled, checked, label, helpText }) => {
return (
<sl-switch
label-position={labelPosition}
help-text={helpText}
size={size}
checked={checked}
disabled={disabled}
checked={checked}
help-text={helpText}
>
{label}
</sl-switch>
@ -51,17 +51,17 @@ figma.connect(
medium: 'medium',
small: 'small'
}),
checked: figma.boolean('checked?'),
disabled: figma.enum('state', {
disabled: true
}),
checked: figma.boolean('checked?'),
helpText: figma.boolean('help text?', {
true: figma.string('✏️ help text'),
false: undefined
})
},
example: ({ helpText, size, checked, disabled }) => {
return <sl-switch help-text={helpText} size={size} checked={checked} disabled={disabled}></sl-switch>;
example: ({ size, disabled, checked, helpText }) => {
return <sl-switch size={size} disabled={disabled} checked={checked} help-text={helpText}></sl-switch>;
}
}
);

6
figma_connect/tag.figma.tsx
Wyświetl plik

@ -27,10 +27,10 @@ figma.connect(
medium: 'medium',
large: 'large'
}),
removable: figma.boolean('removable?'),
content: figma.string('✏️ content')
content: figma.string('✏️ content'),
removable: figma.boolean('removable?')
},
example: ({ removable, content, variant, size }) => {
example: ({ variant, size, content, removable }) => {
return (
<sl-tag variant={variant} size={size} removable={removable}>
{content}

13
figma_connect/textarea.figma.tsx
Wyświetl plik

@ -19,6 +19,7 @@ figma.connect(
true: figma.string('✏️ label'),
false: undefined
}),
required: figma.boolean('required?'),
tooltip: figma.boolean('tooltip?', {
true: '{Include tooltip text here}',
false: undefined
@ -31,30 +32,28 @@ figma.connect(
true: figma.string('✏️ help text'),
false: undefined
}),
required: figma.boolean('required?'),
resize: figma.boolean('resize?', {
true: undefined,
false: 'none'
})
},
example: ({ rows, label, tooltip, contextNote, helpText, required, resize, disabled }) => {
example: ({ disabled, rows, label, required, tooltip, contextNote, helpText, resize }) => {
return (
/* When rendering with ts_form_for */
/* = ts_form_for ... do |f|
/* .. = f.input :field,
/* .. = f.input :foo,
/* .. as: :text,
/* .. input_html: {
/* .... { attribute: value,
/* ...... attribute: value, } */
/* ...... attribute: value } */
<sl-textarea
disabled={disabled}
rows={rows}
label={label}
required={required}
label-tooltip={tooltip}
context-note={contextNote}
help-text={helpText}
required={required}
resize={resize}
disabled={disabled}
></sl-textarea>
);
}