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

Emit event on updating background #6561

Merged
merged 2 commits into from
Apr 18, 2019
Merged

Emit event on updating background #6561

merged 2 commits into from
Apr 18, 2019

Conversation

pajter
Copy link
Contributor

@pajter pajter commented Apr 18, 2019

Issue: n/a

What I did

I made the backgrounds addon emit an event when a user changes the background. This allows developers to listen for this event and implement any custom logic they need in their own Storybook (plugin), eg. setting a class name for theming on the preview body element based on the background color (light/dark).

I'm not sure if there's a specific convention I should follow for event names. I looked at and copied what I found in other addons.

How to test

  1. Fire up Storybook with backgrounds configured
  2. Change the background through the background selector menu
  3. Observe the storybook/background/update event message in the console

@vercel
Copy link

vercel bot commented Apr 18, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-pajter-feature-addon-bac.storybook.now.sh

change = (args: State) => this.setState(args);
change = ({ selected, name }: { selected: string; name: string }) => {
this.props.api.emit(EVENTS.UPDATE, { selected, name });
this.setState({ selected, expanded: false });
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The menu always closes when selecting a color, so I moved expanded: false into here.

@pajter pajter marked this pull request as ready for review April 18, 2019 15:50
@pajter pajter requested a review from ndelangen as a code owner April 18, 2019 15:50
@codecov
Copy link

codecov bot commented Apr 18, 2019

Codecov Report

Merging #6561 into next will decrease coverage by <.01%.
The diff coverage is 0%.

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #6561      +/-   ##
==========================================
- Coverage   40.69%   40.68%   -0.01%     
==========================================
  Files         616      616              
  Lines        8534     8536       +2     
  Branches      600      600              
==========================================
  Hits         3473     3473              
- Misses       4972     4974       +2     
  Partials       89       89
Impacted Files Coverage Δ
addons/backgrounds/src/constants.ts 0% <0%> (ø) ⬆️
addons/backgrounds/src/register.tsx 0% <0%> (ø) ⬆️
.../backgrounds/src/containers/BackgroundSelector.tsx 0% <0%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1f93649...abde7b4. Read the comment docs.

@ndelangen ndelangen merged commit bdb6aa5 into storybookjs:next Apr 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants