extended collections#3911
Open
akshay-gupta7 wants to merge 18 commits into
Open
Conversation
|
Contributor
|
|
…collections is disabled
…ag in pullVariables
…gnature to preserve existing call sites
…ension assignment in saveTheme
…on lookup behind $figmaCollectionId
…eCollections to avoid breaking existing tests
…VariablesToReference same-collection lookup
|
🛡️ Hyma Compliance Check ✅ No compliance-relevant changes detected ~25 file(s) scanned · 0 findings
|
…until child is unchecked
There was a problem hiding this comment.
Pull request overview
This PR introduces robust support for Figma extended (child) variable collections across import/export and theme management, fixing alias linking and “inherited vs overridden” presentation for child collections, and adding UI enforcement around parent/child dependencies and Enterprise-only capabilities.
Changes:
- Fixes extended-collection export so variable aliases remain aliases (not resolved raw values) and child values that match the parent are shown as inherited (not explicit overrides).
- Adds Enterprise detection and extends UI flows to support creating/managing extended theme groups and enforcing selection constraints (parent/child and mutual exclusivity).
- Expands types, schemas, selectors, plugin handlers, and tests to carry/handle extended collection metadata (parent IDs, parent modes, overrides).
Reviewed changes
Copilot reviewed 57 out of 58 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/tokens-studio-for-figma/src/utils/themeListToTree.ts | Sort themes/groups to display parent before extended children |
| packages/tokens-studio-for-figma/src/utils/dragDropOrder/findOrderableTargetIndexesInThemeList.tsx | Prevent reordering targets involving extended themes |
| packages/tokens-studio-for-figma/src/types/VariableCollectionSelection.ts | Add extended-collection metadata to selection types |
| packages/tokens-studio-for-figma/src/types/ThemeObject.ts | Add extended theme metadata fields |
| packages/tokens-studio-for-figma/src/types/AsyncMessages.ts | Add CHECK_FIGMA_ENTERPRISE async message types |
| packages/tokens-studio-for-figma/src/storage/schemas/themeObjectSchema.ts | Persist extended theme metadata in schema |
| packages/tokens-studio-for-figma/src/selectors/isFigmaEnterpriseSelector.ts | Selector for Enterprise capability |
| packages/tokens-studio-for-figma/src/selectors/index.ts | Export new selectors |
| packages/tokens-studio-for-figma/src/selectors/exportExtendedCollectionsSelector.ts | Selector for exportExtendedCollections setting |
| packages/tokens-studio-for-figma/src/plugin/updateVariablesToReference.ts | Alias linking updates + extended-mode inheritance logic |
| packages/tokens-studio-for-figma/src/plugin/updateVariablesFromPlugin.ts | Live variable updates respect parent-mode inheritance rules |
| packages/tokens-studio-for-figma/src/plugin/updateVariables.ts | Extended-collection-aware variable lookup + safe removal behavior |
| packages/tokens-studio-for-figma/src/plugin/setValuesOnVariable.ts | Extended-collection aware variable set/alias queuing |
| packages/tokens-studio-for-figma/src/plugin/setStringValuesOnVariable.ts | Clear child override when matching parent string |
| packages/tokens-studio-for-figma/src/plugin/setNumberValuesOnVariable.ts | Clear child override when matching parent number |
| packages/tokens-studio-for-figma/src/plugin/setColorValuesOnVariable.ts | Clear child override when matching parent color |
| packages/tokens-studio-for-figma/src/plugin/setBooleanValuesOnVariable.ts | Clear child override when matching parent boolean |
| packages/tokens-studio-for-figma/src/plugin/pullVariables.ts | Import tokens/themes with extended collection overrides + hierarchy |
| packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts | Mock new Figma collections API for tests |
| packages/tokens-studio-for-figma/src/plugin/extendedCollections/index.ts | Expose extended collections helpers |
| packages/tokens-studio-for-figma/src/plugin/extendedCollections/importExtendedCollections.ts | Build theme hierarchy metadata during import |
| packages/tokens-studio-for-figma/src/plugin/extendedCollections/createExtendedCollections.ts | Create/update extended collections via extend() |
| packages/tokens-studio-for-figma/src/plugin/createNecessaryVariableCollections.ts | Export-time collection creation supports extended collections |
| packages/tokens-studio-for-figma/src/plugin/createLocalVariablesWithoutModesInPlugin.ts | Pass settings into collection creation |
| packages/tokens-studio-for-figma/src/plugin/createLocalVariablesInPlugin.ts | Ensure parent themes processed before extended themes |
| packages/tokens-studio-for-figma/src/plugin/controller.ts | Register Enterprise-check handler |
| packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/swapFigmaModes.ts | Enforce mutual exclusivity of parent vs extended active collections |
| packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/index.ts | Export new async handler |
| packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/getAvailableVariableCollections.ts | Return extended collection/mode metadata to UI |
| packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/checkFigmaEnterprise.ts | Probe Enterprise support via extend() |
| packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/tests/getAvailableVariableCollections.test.ts | Update expectations for new collection fields |
| packages/tokens-studio-for-figma/src/plugin/tests/extendedCollectionsOverrides.test.ts | Unit tests for override-clearing behavior |
| packages/tokens-studio-for-figma/src/plugin/tests/extendedCollections.test.ts | Integration tests for import/export extended collections |
| packages/tokens-studio-for-figma/src/app/store/models/userState.ts | Track isFigmaEnterprise in state |
| packages/tokens-studio-for-figma/src/app/store/models/settings.tsx | Add exportExtendedCollections setting |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/tokenState/saveTheme.ts | Preserve/cascade extended theme metadata & mirroring |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/tokenState/index.ts | Export deleteThemeGroup reducer |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/tokenState/deleteThemeGroup.ts | Delete whole theme groups (esp. extended groups) |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/tokenState/deleteTheme.ts | Delete a theme and its extended descendants |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/settingsState/setExportExtendedCollections.ts | Reducer for exportExtendedCollections |
| packages/tokens-studio-for-figma/src/app/store/models/reducers/settingsState/index.ts | Export new settings reducer |
| packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/setExportExtendedCollections.ts | Effect wiring for exportExtendedCollections |
| packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/index.ts | Export new settings effect |
| packages/tokens-studio-for-figma/src/app/components/ThemeSelector/ThemeSelector.tsx | Enforce parent/extended mutual exclusivity when applying themes |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/TokenSetThemeItem.tsx | Add disabled state for token set controls |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ThemeListItemContent.tsx | Indentation + disable reorder for extended themes |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ThemeListGroupHeader.tsx | Group actions menu (extend/delete) + indentation |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/StyledExtendedThemeGroup.tsx | Styling wrappers for extended group visuals |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/SingleThemeEntry.tsx | Formatting/lint adjustments |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ManageThemesModal.tsx | Extend group creation, hierarchy UI, enterprise detection, reorder cascade |
| packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx | Extend-mode UI + mirror-parent toggle for extended themes |
| packages/tokens-studio-for-figma/src/app/components/ManageStylesAndVariables/OptionsModal.tsx | Add “Export extended collections” toggle (Enterprise-only) |
| packages/tokens-studio-for-figma/src/app/components/ManageStylesAndVariables/LabelledCheckbox.tsx | Add disabled support for labelled checkbox |
| packages/tokens-studio-for-figma/src/app/components/ManageStylesAndVariables/ExportThemesTab.tsx | Auto-select ancestors + disable unchecking parents with selected descendants |
| packages/tokens-studio-for-figma/src/app/components/ImportVariablesDialog.tsx | Filter unsupported multi-level extensions (via extensionDepth) |
| packages/tokens-studio-for-figma/src/app/components/ExportProvider/SingleFileExport.tsx | Strip internal extended metadata from exported themes JSON |
| packages/tokens-studio-for-figma/src/app/components/ExportProvider/MultiFilesExport.tsx | Strip internal extended metadata from exported themes JSON |
| packages/tokens-studio-for-figma/src/app/components/AppContainer/tests/AppContainerIntegration.test.tsx | Update startup params test fixture |
Contributor
|
Commit SHA:8145ee6f6e9ffc7eb8ed10560a301884c02aa908 Test coverage results 🧪
|
Contributor
|
Commit SHA:8145ee6f6e9ffc7eb8ed10560a301884c02aa908 |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why does this PR exist?
Closes #0000
When exporting child (extended) themes, two bugs existed:
#D6D6D6) instead of variable aliases/references.Additionally, the Export to Figma theme selector had no enforcement of parent/child dependencies — a user could check a child theme without its parent, causing broken exports.
What does this pull request do?
Bug: aliases resolved instead of linked (extended collections)
clearValueForModecall in setter functions that was failing at runtime (not in Figma's public TypeScript typings) and blockingsetValueForModefrom running, leaving stale resolved values in place.Bug: all child variables show as blue/overridden
updateVariablesToReference): when setting an alias on a composite mode, check if the parent mode already has the same alias — if so, callclearValueForModeon the child mode so Figma shows it as inherited (white) rather than overridden (blue).setColorValuesOnVariable,setNumberValuesOnVariable, etc.) compare the value being written against the parent mode's current value and callclearValueForModeinstead ofsetValueForModewhen they match.Feature: auto-select parent theme in export dialog
Lint fixes
IconPencil,separateCollectionsByType,createExtendedVariableCollection,findParentCollection,isExtendedCollectionTheme,createVariableMode).continuestatements increateNecessaryVariableCollectionswith aprocessThemehelper using earlyreturn.use-before-defineincreateExtendedCollections.tsby reordering function declarations.require()in test files with top-level imports.react/jsx-no-bindandreact/no-unstable-nested-components."entity inOptionsModal.Testing this change
$figmaIsExtension: true.Additional Notes (if any)
clearValueForModeis not in Figma's public TypeScript typings but exists at runtime on Enterprise clients. It is called via(variable as any).clearValueForMode(modeId). If the method is absent (non-Enterprise), the call is guarded and fails silently without breaking the export.