Discussion: Standard Spacing and/or CSS utilities about rover-ui HOT 12 CLOSED

Yeah, I like the idea.
For vertical rhythm, we should standardize on a font-size basis, line-height multiplier/s, padding.

I think we'll need less flexibility that Basscss, so the danger would be divergence from the standard / too much choice. We could cherry-pick, but I think we (hopefully) only need a couple of standard paddings, margins, etc.

So, @alexzelenak said he works from a 16px grid. We should find out what the main font-size/line-height/paddings are from him and Neal.

from rover-ui.

Eh, I don't hate the Basscss implementation though. If our 3 padding sizes are diff from our 3 margin sizes (for example), it's nice to have consolidated --space-1 scales.

I think we should steal the size scale concept, in any case.

from rover-ui.

Theoretically, "dark mode" could be something we integrate in using React contexts (that could lay the foundation for theming?)

from rover-ui.

Another option is to use a CSS utility library that mitigates us having to implement this into a HOC or individual components. Perhaps something like Basscss?

// eg
<Paper className='p3 pb4 border'>

from rover-ui.

Yeah, I'm not necessarily interested in tons of flexibility. Just a bit that can allow some customization without having to resort to inline styles.

from rover-ui.

So, CSS variables:

• font size scales (pair with line-heights?)
• space size scales (space between elements, padding)
• semantic and dark mode colors (2-dimensional scale, so dark danger, light danger, etc. Include background-color, border-color, color) Do we need gradients?
• z-indexes (e.g. modals > dropdown panels > tooltips)

HOCs

• withMargin
• withPosition
• withFlex
• withDisplay, i.e. inline, block, inline-block, flex, inline-flex, etc. Maybe grid?
• withLayout, i.e. withMargin(withPosition(withDisplay(withFlex(withFloat( ))))
• withPadding
• withSemanticColors
• withDarkMode
• withZIndex

The HOCs just standardize propTypes that map to style. (maybe they use style props, maybe they go through a css module or classic style).

from rover-ui.

We only support dark mode in 1 or 2 places atm, but it shouldn't be a weird outlier

from rover-ui.

Ya i think instead of classnames and basscss it should be more reacty, aka not global css classes. in props and css modules(or style prop). I am not sold on using hocs just to enforce common prop names though. seems like overkill, as hocs are brittle. but not sure a different solution. like withMargin(withPosition(withDisplay(withFlex(withFloat( )))) scares me. I think it might be good looking into making components that do these things like a "Flex" component a "Block" component etc.

from rover-ui.

I can <Margin> component. <Block/> and <Flex/> (any CSS display-setting components) are weirder, because the parent has to change the children's style prop, and I can easily see devs using it in 2 ways:

• <DisplayWhatever/> generating a wrapping div wouldn't work because the children are still inline.
• <DisplayWhatever/> sets all children's display type and render them in a <Fragment/>. This would work, I think, but I suspect ppl wouldn't anticipate this behavior, and accidentally wrap groups of components in a <Block/>, not realizing they will stack.

from rover-ui.

Hey, how about we have a utils/props.js somewhere that has propTypes and defaultProps for spacing, margins, displays, etc., and when working on a button, for example, you do

Button.propTypes = {
  ...props.margins.types,
  // custom button proptypes
}

Button.defaultProps = {
    ...props.margins.default,
  // custom button default props,
}

Would that be a good balance between React-y-ness and consolidation of type names and values?
We could still have a shorthand like ...props.layout.types that expanded to give you margin, display, etc. in one fell swoop, but we don't have to write anything except the type definitions.

from rover-ui.

I guess we still have to implement them all though , for each component. :(

from rover-ui.

Closing now that we've begun to use styled-system

from rover-ui.