Implement selective import of Variable Collections and Modes #3380
Conversation
|
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Copilot
AI
changed the title
|
Seems to work fine, however the UI doesnt display the collection or mode names |
|
|
|
Commit SHA:ea38d66b50764ddc15d0ed1ae6649d65669c7d10 Test coverage results 🧪
|
|
Commit SHA:ea38d66b50764ddc15d0ed1ae6649d65669c7d10 |
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Fixed in c29fad1. The variable collection and mode names were present in the data but not properly styled for visibility. I've improved the styling using Box components with proper text colors to make them clearly visible and added fallback display for any collections that might have missing names. |
| const pullVariables = useCallback(async () => { | ||
| const userDecision = await confirm({ | ||
| text: 'Import variables', | ||
| description: 'Sets will be created for each variable mode.', | ||
| choices: [ | ||
| { key: 'useDimensions', label: 'Convert numbers to dimensions', enabled: false }, | ||
| { key: 'useRem', label: 'Use rem for dimension values', enabled: false }, | ||
| ], | ||
| confirmAction: 'Import', | ||
| }); | ||
|
|
||
| if (userDecision) { | ||
| AsyncMessageChannel.ReactInstance.message({ | ||
| type: AsyncMessageTypes.PULL_VARIABLES, | ||
| options: { | ||
| useDimensions: userDecision.data.includes('useDimensions'), | ||
| useRem: userDecision.data.includes('useRem'), | ||
| }, | ||
| themes, | ||
| proUser, | ||
| }); | ||
| } | ||
| }, [confirm, themes, proUser]); | ||
| // This will be handled by the ImportVariablesDialog component | ||
| // The dialog will be opened by the component using the useImportVariables hook | ||
| }, []); |
There was a problem hiding this comment.
given we no longer use this function, remove it entirely from this hook
There was a problem hiding this comment.
Removed the unused pullVariables function and its test in commits 3b9b6c6, ba8bb03, 18e4c59.
| {!hasSelections && ( | ||
| <Box css={{ padding: '$3', backgroundColor: '$dangerBg', color: '$dangerFg', borderRadius: '$small' }}> | ||
| Please select at least one collection and mode to import. | ||
| </Box> | ||
| )} |
There was a problem hiding this comment.
add a special treatment: If there are no variable collections at all - render something that says "There are no collections present in this file"
There was a problem hiding this comment.
Added empty state handling with the message "There are no collections present in this file" when no variable collections are available in commit 618ada6.
| <Checkbox | ||
| key={mode.modeId} | ||
| checked={selectedModes.includes(mode.modeId)} | ||
| onCheckedChange={() => handleModeToggle(collection.id, mode.modeId)} | ||
| id={`mode-${collection.id}-${mode.modeId}`} | ||
| > | ||
| <Box css={{ color: '$fgDefault', userSelect: 'none' }}> | ||
| {mode.name || `Mode ${mode.modeId.slice(0, 8)}`} | ||
| </Box> | ||
| </Checkbox> |
There was a problem hiding this comment.
You cannot nest text inside a checkbox like that. The checkbox is really onkly the checkbox itself. we'd usually do something like
<Box css={{
display: 'flex', alignItems: 'center', gap: '$3', fontSize: '$small', flexBasis: '80px', flexShrink: 0,
}}
>
<Checkbox
checked={inspectState.selectedTokens.length === uiState.selectionValues.length}
id="selectAll"
onCheckedChange={handleSelectAll}
/>
<Label htmlFor="selectAll" css={{ fontSize: '$small', fontWeight: '$sansBold', whiteSpace: 'nowrap' }}>
{t('selectAll')}
</Label>
</Box>
this affects not just this line but other changes in this PR that you made regarding Checkbox
There was a problem hiding this comment.
Fixed checkbox implementation to use proper pattern with separate Checkbox and Label components instead of nesting text inside checkboxes. Applied this pattern to all checkboxes in the ImportVariablesDialog (collection checkboxes, mode checkboxes, and option checkboxes) in commit 618ada6.
…empty state handling, and fix checkbox implementation Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
| // Log collections data for debugging | ||
| console.log('Collections passed to dialog:', collections); | ||
|
|
There was a problem hiding this comment.
remove all debugging logs that you added
There was a problem hiding this comment.
Removed all debugging console.log statements from ImportVariablesDialog and useImportVariables in commit 50a2e4b.
| proUser: boolean | ||
| ) => { | ||
| try { | ||
| await AsyncMessageChannel.ReactInstance.message({ |
There was a problem hiding this comment.
let's add a track() analytics call here letting us know what options were chosen, and the amount of themes that people select here (number) as well as the total number of themes available
There was a problem hiding this comment.
Added analytics tracking for variable imports with the following metrics: useDimensions, useRem options, number of selected collections vs total collections, and number of selected modes vs total available modes in commit 50a2e4b.
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:If you need me to access, download, or install something from one of these locations, you can either:
|
|
|
@copilot getting some lint errors |
|
@copilot getting some lint errors |
|
Works fine! i get some linting errors on running -- @tokens-studio/figma-plugin:lint: cache miss, executing 749ae712cdb89c2a Also: |
|
try again on my last comment |
This PR implements selective import functionality for Figma Variable Collections and Modes, addressing the issue where users previously had to import all variables without any filtering options.
Changes Made
Core Functionality
ImportVariablesDialogcomponent that allows users to select specific variable collections and modes before importingpullVariablesfunction to filter variables based on user selectionsgetAvailableVariableCollectionsasync message handler to fetch available collections from FigmaTechnical Implementation
VariableCollectionSelectionandSelectedCollectionstypes for type safetyPullVariablesOptionsto includeselectedCollectionsparameterStylesDropdowncomponent to use the new selection dialogUser Experience
Testing
Example Usage
When users click "Import variables" from the Styles dropdown, they now see a dialog like:
Only the selected collections and modes will be imported, creating token sets accordingly.
Fixes #3379.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.