feat(StyledSystem): Adds styled-system components to map to Core glob… #836
Conversation
jschuler
requested review from
karelhala,
dlabaj,
dmiller9911,
amarie401 and
tlabaj
|
PatternFly-React preview: https://836-pr-patternfly-react-patternfly.surge.sh |
Pull Request Test Coverage Report for Build 2834
💛 - Coveralls |
|
Added do not merge label since i saw a few things that i want to cleanup first |
| @@ -0,0 +1,62 @@ | |||
| import { SFC, HTMLProps, ReactNode } from 'react'; | |||
|
|
|||
| export interface StyledBoxProps { | |||
There was a problem hiding this comment.
These should be available from styled-system @types/styled-system I am still not sure the best way to handle that though. That can either be listed as a peerDependency, and optional, or a straight dependency. @priley86 might have a better idea for that.
There was a problem hiding this comment.
Okay cool, I can extend my interface with those typings. (just fixing a small issue with them here as well DefinitelyTyped/DefinitelyTyped#30170).
I am adding it as an optional dependency for now, sound good?
| const StyledBox = ({ className, children, component, ...props }) => { | ||
| const StyledBoxBaseWithComponent = StyledBoxBase.withComponent(component); | ||
| return ( | ||
| <ThemeProvider theme={StyledTheme}> |
There was a problem hiding this comment.
Wonder if we should take the time to add a PatternFlyThemeProvider that contains this. That would allow people to overwrite the theme anywhere in the tree. Also, it would take some of the overhead out of this.
| // use values directly so that the user can concatenate multiple shadows | ||
| // e.g. boxShadow={`${StyledConstants.sm_right}, ${StyledConstants.sm_bottom}`} | ||
| shadows: { | ||
| sm: global_BoxShadow_sm.value, |
There was a problem hiding this comment.
Does using the global_BoxShadow_sm.var work for all of these? That would allow people to choose to overwrite using JS or CSS Custom Properties
There was a problem hiding this comment.
Yes, have switched what I could do .var instead. Addressed in #891
|
this will be a huge help.... @jschuler to the rescue |
|
I am fine w/ iterating on these... these constants will likely change over time, but this gives us a very useful baseline. |
|
my vote would be to get this PR in a.s.a.p. and iterate in future issues/PRs. I think it will provide a lot of value to many teams now (and some of the PRs coming into PF-R) and would allow less refactor later on...thoughts? |
|
Creating a @patternfly/react-styled-system package today then going to add this component to it |
|
this is great news. nice job! I think this interface will potentially help a lot of React components be more versatile and meet PF design specification. I think in the future one could even break out the underlying emotion objects constructed into a base package consumable by other frameworks/systems, but that is definitely less pressing... |
|
Closing in favor of #891 |
…al CSS
Closes:
#753
These components give consumers another avenue to style their pages and components so that they are consistent with the PF-Core theme, e.g. for media breakpoints, paddings, margins, colors, fonts, etc.