feat: Add box-sizing:border-box automatically to all styles created by createStyles
#2721
Conversation
Passing run #7265 ↗︎
Details:
Review all test suite changes for PR #2721 ↗︎ |
||||||||||||||||||||
| @@ -55,7 +54,7 @@ export const InformationHighlight = createContainer('section')({ | |||
| return ( | |||
| <Base | |||
| as={Element} | |||
| cs={[containerStyles, containerModifiers({variant: model.state.variant})]} | |||
| {...informationHighlightStencil({variant: model.state.variant})} | |||
There was a problem hiding this comment.
While a stencil does return a spreadable object, this pattern doesn't handle merging. There's a very simple way to break InformationHighlight:
<InformationHighlight className="whoops" />The className prop returned by the stencil will be overwritten by the incoming prop. At this point, Base isn't doing anything useful for us.
This is also why I'm not a fan of us using a Base component because even though we can use the cs prop, our component cannot handle the cs prop because it will get overridden instead of merged. I think the safest way these components work is by using handleCsProp and dropping Base:
return (
<Element {...handleCsProp(props, informationHighlightStencil({variant: model.state.variant}))} />
| @@ -421,13 +423,21 @@ export function createModifiers<M extends ModifierConfig>(input: M): ModifierRet | |||
| const modifierFn = (modifiers: Partial<ModifierValues<M>>) => { | |||
| return Object.keys(modifiers) | |||
| .filter(key => input[key] && (input as any)[key][modifiers[key]]) | |||
| .map(key => (input as any)[key][modifiers[key]]) | |||
| .map(key => (modifierFn as any)[key][modifiers[key]]) | |||
There was a problem hiding this comment.
This will conflict with #2719
|
There's something that's missing here: A Current// source
const myModifiers = createModifiers({
size: {
large: createStyles({padding: 20}),
small: createStyles({padding: 10})
}
})
// transform
const myModifiers = createModifiers({
size: {
large: createStyles({name: 'abcde1', styles: 'padding:20px;'}),
small: createStyles({name: 'abcde2', styles: 'padding:10px;'}),
}
})With this change// source
const myModifiers = createModifiers({
size: {
large: {padding: 20},
small: {padding: 10}
}
})
// transform
const myModifiers = createModifiers({
size: {
large: {padding: 20}, // should be {name: 'abcde1', styles: 'padding:20px;'} like stencils
small: {padding: 10}
}
})This change means |
|
This is a bit more involved than we initially thought. We're going to close it for now, and we can revisit later. |
Summary
Resolves: #2720
This PR adds
box-sizing:border-boxto all style created bycreateStylesas we do the same for stencils. Also,createModifiershas been updated to support styles passed as an object to remove usage ofcreateStyles.Release Category
Infrastructure
BREAKING CHANGES
Adds
box-sizing: border-boxto all styles created bycreateStyles. If you did not add this style already, it may change the way width works for the component. Our intent is to make all elements useborder-boxlayouts to make width calculations more predictable. This change may change the way your component works if you use the width style property.Thank You Gif (optional)