Right now we're wrapping every component in styled() and React.fowardRef. I don't think we need to wrap everything in forwardRef; really just commonly-ref-needed components like Button and Input are the ones that need forwardRef.
For styled, we are only using it because we want to be able to reference styled components inside our CSS like a selector (see: https://github.com/octopusthink/nautilus/blob/master/src/components/ui/Heading/index.js#L29-L34). But it adds a lot of complexity to how we create components, to the React component tree, and was already the cause of a bug (#127). I think having explicit CSS classNames we assign and reference is a better solution and we should switch to that.
Right now we're wrapping every component in
styled()andReact.fowardRef. I don't think we need to wrap everything inforwardRef; really just commonly-ref-needed components likeButtonandInputare the ones that needforwardRef.For
styled, we are only using it because we want to be able to reference styled components inside our CSS like a selector (see: https://github.com/octopusthink/nautilus/blob/master/src/components/ui/Heading/index.js#L29-L34). But it adds a lot of complexity to how we create components, to the React component tree, and was already the cause of a bug (#127). I think having explicit CSS classNames we assign and reference is a better solution and we should switch to that.