Rework how styling is handled in this library

namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.

MIT License

1.91k stars 613 forks source link

Rework how styling is handled in this library #224

Closed mcMickJuice closed 6 years ago

mcMickJuice commented 6 years ago

There are complications with build steps and including stylesheets and appropriate loaders when using this library. I think that replacing the current css solution with a CSS in JS solution removes a lot of friction related to style. I think we should strive for the following characteristics:

completely remove css/sass in build
provide default theme (same as current theme)
allow extensibility through "themes". This would supplant users providing their own css sheet targeting internal classes.
have deprecation step so that users utilizing css overrides have time to transition over...or not?
expose js in css api when using groupRenderer, item renderer etc (similar to material-ui)

mcMickJuice commented 6 years ago

I'd be looking at JSS as the library to use here: https://github.com/cssinjs/jss

educastellano commented 6 years ago

I think the CSS should be imported outside the component (already transpiled from SCSS to CSS), so the user can import it in whatever bundler is using:

import Timeline from 'react-calendar-timeline'
import 'react-calendar-timeline/lib/Timeline.css'

ReactDOM.render(
  <Timeline />,
  document.getElementById('root')
);

mcMickJuice commented 6 years ago

this is a great idea and would take like...5 minutes to do (just update the docs, remove import from the code). Next release is gonna be a major bump, prob just go to 1.0 so this will definitely be in there.

narmadham commented 6 years ago

@mcMickJuice. That would be great. This will ease theme customization. When is v1.0 planned to be released?

vasdee commented 6 years ago

is this making it into the next release or available in the dev branch?

mcMickJuice commented 6 years ago

hey @vasdee i havent looked at this yet (not importing CSS in library code). I can try to get it into the next release but I've lately been focusing on performance improvements.

Can follow https://github.com/namespace-ee/react-calendar-timeline/issues/274 for this change

If you're asking about CSS in JS solution, I'm not sure if thats the right approach or even what the API for this would look like...

mcMickJuice commented 6 years ago

Closing. Might address this once we do an API redesign.