Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Spaces in token name doesn't work #323

Closed
jakobe opened this issue Nov 15, 2021 · 4 comments · Fixed by #338
Closed

Spaces in token name doesn't work #323

jakobe opened this issue Nov 15, 2021 · 4 comments · Fixed by #338
Labels
enhancement Internal new feature or functionality

Comments

@jakobe
Copy link
Contributor

jakobe commented Nov 15, 2021

Describe the bug
It seems like spaces in token names are not allowed by the plugin? Even though there's no visual indication (e.g. a red border on the input) it appears the plugin doesn't allow you to put a space in the name when you're adding/editing a token and it can't lookup an alias with spaces in it's name?

To Reproduce
Steps to reproduce the behavior:

Edit:

  1. Edit any token
  2. Add a space in the name
  3. See the "Update" button being disabled

Lookup:

  1. Edit any token
  2. Add a space in the alias value
  3. See the lookup value / bar disappear

Expected behavior
AFAIK Style Dictionary doesn't imply any rules regarding naming of tokens (casing, spaces etc), so I don't see why the plugin should. I.e. it makes it impossible to use a style / token called "Light Blue" for example.

Screenshots or Screencasts
🚫 Not allowed:
image

✅ Working:
image

❌ NOT working:
image

Figma file (optional)
Send us the link to a Figma file containing a reproducible example

JSON (optional)
If possible, attach the JSON that leads to this bug.
@jchiem
Copy link

jchiem commented Nov 15, 2021

I think one problem with the current implementation is that it's possible to import design tokens with spaces in the name, but you are unable to rename/save them unless you remove the spaces in the name.

@jakobe
Copy link
Contributor Author

jakobe commented Nov 16, 2021

I think one problem with the current implementation is that it's possible to import design tokens with spaces in the name, but you are unable to rename/save them unless you remove the spaces in the name.

Yes @jchiem, you are right that kinda enforces the problem. And since Figma allows spaces in names of Styles and Style Dictionary allows spaces in keys, I don't see any reason why the plugin shouldn't :)

@six7
Copy link
Collaborator

six7 commented Nov 16, 2021

I agree, should be an easy fix.

The W3C draft also has a space in their example token name, so this should be supported. https://design-tokens.github.io/community-group/format/#name-and-value

@six7 six7 added the enhancement Internal new feature or functionality label Nov 23, 2021
@six7 six7 mentioned this issue Nov 28, 2021
Merged
six7 added a commit that referenced this issue Nov 28, 2021
@six7
Allow spaces in token names (#339)
60b2861 
* allow spaces in token names

* remove unneccessary escape

fixes #323
@six7 six7 mentioned this issue Nov 28, 2021
Merged
@six7 six7 closed this as completed in #338 Nov 28, 2021
six7 added a commit that referenced this issue Nov 28, 2021
@six7
Release 69 (#338)
cba6b66 
* Box shadows (#306)

* add support for multiple box shadows

* fix color evaluation

* remove logs

* remove logs

* revert css removal

* remove line

* remove code not part of boxShadows

* fix alias calculation (#307)

* fix lightOrDark visualization by converting hsla before calculating (#311)

* fix lightOrDark visualization by converting hsla before calculating

* fix tests

* fixes #295 (#304)

* fixes #295

* add spec

* add textCase and textDecoration (#303)

* add textCase and textDecoration

* add tests

* add more tests

* add transforms to allow users to type lowercase

* add tests and transforms

* introduce small_caps and small_caps_forced

* remove log

* add type props

* add working pull/update with json

* add catch for lightOrDark

* fix removal of documentation tokens

* move extraProperties to upper layer so isActive works

* bump release

* add edit boxshadow ui

* add pretty import dialog

* fix shadow input not updating, styling

* add test for filterMatchingStyle

* add tests for setEffectValuesOnTarget

* add tests for setValuesOnNode

* update tests for updateStyles

* add test for tokenHelper array

* add cypress tests

* add cypress spec

* fixes #331

* remove log

* fix apply shadows

* GitHub sync enterprise support & optimizations (#329)

* add working gh enterprise sync

* Add baseUrl to permission check

* remove console log

* fix unexpected pull

* add checks for future optimizations

* add tests

* add permission check to restoring

* fix git sync permissions

* fix duplicate keys

* show error when bad credentials

* fix cancel import

* Allow spaces in token names (#339)

* allow spaces in token names

* remove unneccessary escape

fixes #323

* fix spec

* Update tokens.spec.js

* Update tokens.spec.js

* fix dnd

* bump release
@six7
Copy link
Collaborator

six7 commented Nov 28, 2021

Fixed in release 69 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Internal new feature or functionality
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Release 69 tokens-studio/figma-plugin
3 participants
@jchiem @six7 @jakobe