Remove drop shadow in Addon-Info

[t2]

The addon-info inline styling is very strange. Header and prop types are split into separate shadowed containers. Is this on purpose?

Example: https://cl.ly/0h0W0g0T1p1b

[ItsJonQ]

I noticed this as well. I couldn't override it via the styles config. I had to abandon it :(

[t2]

@ItsJonQ Me as well. Moved over to Styleguidist. Maybe someone will clean this up a bit.

[ItsJonQ]

@t2 Oo! Thanks for the recommendation. I'll seriously consider this option! My needs have grown from needing a simple playground to something more of a styleguide.

Thanks!

[danielduan]

We would love a PR for that if you any of you have time to give a try at fixing it.

[Hypnosphi]

I believe #1501 fixes that

[danielduan]

@Hypnosphi #1501 wouldn't fix this, but it would eliminate this problem because it won't be inline anymore.

[SuperOl3g]

@danielduan In common case we can just add style properties for each element of components (like this).

But it's very inflexible solution. For example, now I want to add a light-gray background for each odd row in PropTable.
Inline styles can't do this, we need the power of CSS! ⚡️

AFAIU from #1576 you are planning to separate visual part from logic.
Did you think about CSS modules, styled components, styletron or another CSS-in-JS solution with the possibility of theming?

[Hypnosphi]

@SuperOl3g We actually use glamorous (this is basically styled-components with JS objects instead of CSS string literals)

[SuperOl3g]

@Hypnosphi Hmm, it's kind of theming but very very limited.
With this solution, we can theme the only what we preset to theming. It also doesn't give the possibility to overwrite any styles :<

[SuperOl3g]

Hope #428 will solve not only the problem of theming of the core but also theming of add-ons too.

[danielduan]

I think if you're looking for an inline style guide type react tool, perhaps you should take a look at react-styleguidist: https://react-styleguidist.js.org/

I'd hate for you to leave Storybook but I think it might suit your use case better in its current implementation. You will lose out on Storybook's ecosystem of addons though.

[Hypnosphi]

very very limited

It's actually the same as in styled-components which you have brought up

we can theme the only what we preset to theming

In my view, it's actually a good thing. But anyway, we could just do something like this for all the components:

const Title = glamorous.h1({
  fontSize: '10px'
}, ({theme}) => ({
  color: theme.main.color,
  ...theme.Title
}))

Here, theme.Title will override everything

[SuperOl3g]

@Hypnosphi, sounds good! Look forward when it will be released)

[Hypnosphi]

@SuperOl3g you can actually bring that moment closer! Just clone the release/3.3 branch, pick some component from lib/ui/modules/ui/components, and move it to lib/components replacing inline styles with glamorous stuff. Join us in slack once you have any questions: https://now-examples-slackin-nqnzoygycp.now.sh/

[SuperOl3g]

@Hypnosphi, ok, if I have some time, I will migrate some code

[SuperOl3g]

@Hypnosphi, I'm not very good at glamorous so maybe you know how to add theme styles only for :nth-child(odd) via glamorous?)

[Hypnosphi]

Like this:

{
  ':nth-child(odd)' {
    /* your styles */
  }
}

What do you want to use it for, by the way?