Allow transparency in color knob #2624
Conversation
Fixes storybookjs#802. Instead of just passing `color.hex`, also pass the alpha value.
| <SketchPicker | ||
| color={knob.value} | ||
| onChange={color => | ||
| onChange(` |
There was a problem hiding this comment.
This code looks nice, but it generates a huge section of noise in the url:
There was a problem hiding this comment.
I think this is a formatting issue, since I used a template string and applied prettier to make sure it doesn't exceed the line length (which added newlines). What would you recommend in order to stay within storybook's style guide?
There was a problem hiding this comment.
You can ignore the problematic eslint rule for this line.
There was a problem hiding this comment.
@Primigenus that's weird, prettier shouldn't insert newlines into text, only into interpolations. And you actually don't have to run it by hand, it runs automatically as precommit hook
|
Many thanks for the PR @Primigenus ! If think if you can remove all whitespace we're all good. |
Codecov Report
@@ Coverage Diff @@
## master #2624 +/- ##
==========================================
- Coverage 34.33% 34.33% -0.01%
==========================================
Files 388 388
Lines 8681 8682 +1
Branches 884 906 +22
==========================================
Hits 2981 2981
+ Misses 5100 5083 -17
- Partials 600 618 +18
Continue to review full report at Codecov.
|
ndelangen
changed the title
|
Wonderful! Thanks! @Primigenus |
Hypnosphi
added
the
patch:yes
Pass alpha transparency up to the story
Hypnosphi
added
the
patch:done
Issue: #802
What I did
Instead of just passing
color.hex, also pass the alpha value.How to test
Add
addon-knobsand usecolor()to enable the knob in the story, then try dragging the opacity slider in the color picker or manually setting an alpha value in the field labeled "A".Re: automated testing, not sure. LMK!