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.

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

Selectable / Editable Values not working #159

Open
Jeremy-Walton opened this issue Mar 8, 2023 · 3 comments
Open

Selectable / Editable Values not working #159

Jeremy-Walton opened this issue Mar 8, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@Jeremy-Walton
Copy link

In the demo, values are displayed as editable input fields that you can copy out of.
Screenshot 2023-03-08 at 11 54 33 AM

When using any presenter, I do not see the selectable inputs.
Screenshot 2023-03-08 at 11 55 02 AM

I am using v2.9.0 with Storybook Storybook 6.5.14 for Html

My main.js looks like

addons: [
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  '@storybook/addon-interactions',
  '@storybook/preset-scss',
  { name: 'storybook-design-token', options: { preserveCSSVars: true } },
],

My tokens are tagged with Spacing but it happens with all presenters.

/**
  * @tokens Space Scale
  * @presenter Spacing
  */
@Jeremy-Walton
Copy link
Author

Jeremy-Walton commented Mar 8, 2023

Looks like it's not rendering because in TokenValue.tsx it says

{(token.sourceType === TokenSourceType.CSS ||
    token.sourceType === TokenSourceType.SVG) && (
    <Input
      readOnly={readonly}
      onChange={(event) => {
        const newRawValue = (event.target as HTMLInputElement).value;

        setRawValue(newRawValue);
        onValueChange(newRawValue);
      }}
      value={rawValue}
    />
  )}

In my case the token source is set to SCSS even though I am not using a SASS variable.

I am setting the variables in SCSS files, but they are not sass variables

@Sqrrl
Copy link
Collaborator

Sqrrl commented Mar 20, 2023

Thanks for looking into it. I have not considered the case of using CSS variables in SCSS. I'll try to fix this with the next release.

@Sqrrl Sqrrl added the bug Something isn't working label Jun 16, 2023
@CollinHerber
Copy link

I'm also experiencing this issue. Would love a solve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants