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 background make grid size customizable #11128

Closed
T04435 opened this issue Jun 11, 2020 · 12 comments
Closed

Storybook background make grid size customizable #11128

T04435 opened this issue Jun 11, 2020 · 12 comments

Comments

@T04435
Copy link

T04435 commented Jun 11, 2020

I have added "@storybook/addon-backgrounds": "^5.3.19", and see that it has the option to toggle a grid:

image

I see that the grid is generated by the linked file and the size is set to 20 on the linked line.

const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });

Is there a way to change the cellSize value?

I see there is another plugin (theming) that has a similar option, but don't want to add an extra plugin for the same feature.

@stale
Copy link

stale bot commented Jul 3, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale
Copy link

stale bot commented Jul 25, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Jul 25, 2020
@stale
Copy link

stale bot commented Aug 24, 2020

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

@stale stale bot closed this as completed Aug 24, 2020
@Dangoo
Copy link

Dangoo commented Sep 2, 2020

Hey @T04435,

I traced down GRID_PARAM_KEY to being resolved to "grid" which can be specified in preview.ts like so:

export const parameters = {
  grid: {
    cellSize: 5
  }
}

image

Cheers!

@T04435
Copy link
Author

T04435 commented Sep 3, 2020

Thanks @Dangoo it just worked.

@shilman
Copy link
Member

shilman commented Sep 3, 2020

@yannbf can you add to the docs? possibly update in 6.1 for consistency and deprecate the old version?

export const parameters = {
  backgrounds: {
    gridSize: 5
  }
}

@Dangoo
Copy link

Dangoo commented Sep 3, 2020

[…] possibly update in 6.1 for consistency and deprecate the old version?

@shilman wouldn't that take away the possibility to disable the grid feature (independent from backgrounds) like stated in the docs?

export const parameters = {
  grid: { disable: true },
}

@shilman
Copy link
Member

shilman commented Sep 3, 2020

@Dangoo Grid is not an addon tho..

@Dangoo
Copy link

Dangoo commented Sep 4, 2020

@shilman my bad, was misguided - even though it would be valuable feature to turn of either of them.

@yannbf
Copy link
Member

yannbf commented Sep 4, 2020

Hey @Dangoo that is pretty valuable feedback, thanks for that! I'm currently making changes in the addon and will make sure that it's well documented as well as it allows you to disable the grid separately from backgrounds. If you have some feedback or ideas, feel free to share!

@Dangoo
Copy link

Dangoo commented Sep 7, 2020

Hey @yannbf thanks for taking this on!

Regarding the grid here are some additional customization ideas:

  • customizable grid line lightness/opacity to make it more subtle
    • Could be implemented passing the parameter as alpha value here, default 0.5
  • customizable grid sub cell amount (currently 5 sub cells, there are use cases when you may want e.g. 4 or 10)
    • Could be implemented passing the parameter here, default 5
  • Adjustable grid origin offset (e.g. to match story iframe padding)
    • Could be implemented by here using calc(-1 px + <offsetX>) calc(-1px + <offsetY>), default 0

Regarding your comment here about creating a theme selector, do you see any chance the background selector could be "remote controlled" based on a selected theme (light background for light theme, dark background for dark theme)?

@shilman
Copy link
Member

shilman commented Sep 25, 2020

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants