refactor(*): replace style props with CSS classNames - #320

[98lenvi]

Signed-off-by: Lenvin Gonsalves lenvin@oykuapp.com

Issue #320

The goal is to remove all style props in favor of CSS class names. One pro I can think of is the user will have more flexibility on the appearance of the component,

Changes

• The following will be done for each component

  • Removing the reliance on user passed props for styling in the styled-components.
  • Not passing these styling props down.
  • Removing them from propTypes as well.
  • Creating a new file customStyles.js which will have the classNames of the components.
  • The above file will export a styled-component div which will wrap around the main component.

• Will be done for the following components

• [x] ErrorLogger

• [x] ContractEditor (already done during slate migration to 0.57)

• [x] Navigation

• [x] TemplateLibrary

Flags

• I have done it for the ErrorLogger component, Once the maintainers feel the approach is right, I will perform the above for the other components as well.
• Documentation must be updated.
• Storybook must be updated.
• Tests must be updated. Currently, snapshots are causing tests to fail.

Related Issues

• Issue #320

[98lenvi]

@arteevraina. Tagging you here so you can get notified when this PR gets merged.

[98lenvi]

Can we also give the highest parent of each component a common class name? maybe ciceroUI? That way we can easily target specific elements within the ciceroUI parent.

I'd also like an explanation of the CustomStylesWrapper that you've added for each component. Thanks!

@DianaLease Yes I'll work on adding a common className. Thank you for the feedback

When I first added them they meant sense to me as it is one of the best way for me to added custom CSS style to elements. But now it doesn't seem required at all since the user will be adding his/her own wrapper around the component or style document. Sorry for the inconvenience, I'll be removing it!

[DianaLease]

@irmerk I think it makes sense to have a common className at the top level for all cicero-ui components. Like how semantic-ui adds ui as a class name to their parent components. That way when we apply styles we can limit those styles to elements within the .ciceroUI hierarchy.

[irmerk]

Following up on this @98lenvi, need any assistance?

[98lenvi]

@irmerk, actually my laptop's hard drive died a week ago. I'm waiting for the new drive to arrive (most probably tonight or tomorrow morning). I'll do the changes tomorrow morning! Thanks for asking!

[irmerk]

Also note the proposed changes in https://github.com/accordproject/cicero-ui/pull/411

[irmerk]

We're migrating this repository into web-components the next couple of days, so I'll be closing this soon and you should reopen there.