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

Storybook: show figma codes/theme code snippets for colors #684

Merged
merged 6 commits into from
May 24, 2023

Conversation

zbigg
Copy link
Contributor

@zbigg zbigg commented May 24, 2023

Description

Show figma codes/theme code snippets for colors in playground.

Demo:

image

Finally it will land in this screen: https://storybook-react.carto.com/?path=/docs/foundations-palette--primary

Type of change

  • Documentation

Acceptance

Check palette playground in storybook

Basic checklist

  • Good PR name
  • Shortcut link
  • Changelog entry
  • Just one issue per PR
  • GitHub labels
  • Proper status & reviewers
  • Tests
  • Documentation

@zbigg zbigg requested review from vmilan and VictorVelarde May 24, 2023 15:06
@coveralls
Copy link
Collaborator

coveralls commented May 24, 2023

Pull Request Test Coverage Report for Build 5070709352

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 72.022%

Totals Coverage Status
Change from base Build 5067790113: 0.0%
Covered Lines: 2046
Relevant Lines: 2616

💛 - Coveralls

Copy link
Contributor

@vmilan vmilan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

really useful addition, thanks @zbigg !

Copy link
Contributor

@vmilan vmilan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized a minor detail to fix

<Typography variant='caption'>
{figmaColorName(colorVariant, String(colorName))}
<pre style={{ margin: 0 }}>
theme.palette.{colorVariant}.{colorName}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mmm wait, there are some exceptions in the way a color is used:

theme.palette.black[50]

That's for greys and shades (both black and white).

An also, in the case of divider, there is not a colorName nested, so you are getting undefined.
Screenshot 2023-05-24 at 17 16 17

Copy link
Contributor Author

@zbigg zbigg May 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed:
image

image

@zbigg zbigg merged commit 24995bf into master May 24, 2023
@zbigg zbigg deleted the zbigg/storybook-colors-snippets branch May 24, 2023 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants