Update generic storybook styling to reflect gitlab look and feel

[A783270]

In GitLab by @tauriedavis on Oct 23, 2017, 15:58

[A783270]

In GitLab by @tauriedavis on Nov 17, 2017, 24:20

@psimyn I think I need some guidance here. Are we able to change/style the generic layout at all?

For example, remove the "Storybook" link on the sidebar, style the sidebar and the main content section? What is the action logger at the bottom for? I don't think its necessary, at least not on every page?

If there were some templates or stylesheets that can override some content, I could probably do the styling myself.

[A783270]

In GitLab by @tauriedavis on Nov 17, 2017, 24:21

assigned to @psimyn

[A783270]

In GitLab by @tauriedavis on Nov 17, 2017, 24:23

Is http://www.carbondesignsystem.com/ really using storybook or embedding it? 🤔

[A783270]

In GitLab by @psimyn on Nov 17, 2017, 05:17

they are using it, but they built their own UI to replace the default components.

the link, title and bottom bar can all be hidden using Options - pushed MR to https://gitlab.com/gitlab-org/design.gitlab.com/merge_requests/3

"Action Logger" specifically is used to print Vuex Actions (not useful here). That space at the bottom is for custom plugins, can be used for things like changing props or showing notes

You can add custom CSS to a <style> block in .storybook/preview-head.html (need to create that file). But theme support is currently limited, as most elements don't have classes on them.

Issues about theme support in UI
storybookjs/storybook#428
storybookjs/storybook#1576

and work is ongoing in storybookjs/storybook#2101

[A783270]

In GitLab by @tauriedavis on Dec 9, 2017, 05:38

@psimyn I'm back to working on this. As you said, a custom theme seems very limited with storybook currently. Most things don't have classes. So I dug more into Carbon because I couldn't understand how they possibly styled their site to look the way it does with the limitations that storybook currently has.

I found that carbon has multiple repos. They use storybook for their react components here:

• http://react.carbondesignsystem.com/
• https://github.com/carbon-design-system/carbon-components-react

But then their actual design system website is here:

• http://www.carbondesignsystem.com/
• https://github.com/carbon-design-system/carbon-components

So they have a separate repo that does not use storybook, that I can tell. What are your thoughts here?

I'm not sure storybook by itself will give us enough flexibility to complete this issue.

[A783270]

In GitLab by @tauriedavis on Dec 9, 2017, 05:59

I'm wondering if it makes sense to have a storybook repo and a separate design system repo so we have more control over the user-facing site?

[A783270]

In GitLab by @psimyn on Dec 11, 2017, 08:01

@tauriedavis that definitely makes sense; there is nothing in particular about storybook needed for this

[A783270]

In GitLab by @tauriedavis on Jan 25, 2018, 02:12

I think this issue is irrelevant right now.

[A783270]

In GitLab by @tauriedavis on Jan 25, 2018, 02:12

closed