-
Notifications
You must be signed in to change notification settings - Fork 55
fix(styles): removed redundant margins from components and examples #945
Conversation
Codecov Report
@@ Coverage Diff @@
## master #945 +/- ##
==========================================
+ Coverage 80.78% 80.96% +0.18%
==========================================
Files 664 664
Lines 8493 8496 +3
Branches 1495 1495
==========================================
+ Hits 6861 6879 +18
+ Misses 1618 1602 -16
- Partials 14 15 +1
Continue to review full report at Codecov.
|
packages/react/src/themes/teams/components/Button/buttonStyles.ts
Outdated
Show resolved
Hide resolved
825309c
to
9573daa
Compare
packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts
Show resolved
Hide resolved
}, | ||
}), | ||
)} | ||
<Flex gap="gap.smaller"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kuzhelov this means introducing an extra DOM node, any suggestions on how to avoid this?
I can think about:
- adding a
marginRight
variable and override it forButton
when needed - or specifying
defaultProps: {
as: Flex,
}
// ...
renderComponent() {
// ...
return <ElementType gap="gap.smaller" {...unhandledProps} className={classes.root} ... />
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, I would expect the second approach being used here as, essentially, this is what we would like to achieve - i.e. to use Flex
as a container.
However, this will introduce one subtle problem (that, depending on the use case, might become not that subtle to spot:). Suppose that client wants to achieve the following
- use as wrapper (this is the place where example seems to be contrived, but I am pretty sure that there might be more appealing scenario)
- preserve layout aspects
Note that this use case won't be covered even with the second approach suggested - however, we might use its core idea being a bit extended. To cover mentioned use case I would suggest to use the following implementation strategy:
renderComponent({ ElementType, classes, unhandledProps, ... }) {
...
return <Flex as={ElementType} gap="gap.smaller" {...unhandledProps} className={classes.root} ... />
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sounds good, applied Flex as={ElementType} gap="gap.smaller"
, thanks
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just couple of small changes I would suggest to introduce
- for ButtonGroup consider to use variant of alternative approach you've suggested: https://github.com/stardust-ui/react/pull/945/files#r259471117
- remove margins from
Button
styles altogether: https://github.com/stardust-ui/react/pull/945/files#r259272014
4ac7f46
to
b843004
Compare
b843004
to
340c303
Compare
fix(styles): removed redundant margins from components and examples
Description
This PR is pretty straightforward. It:
marginRight
styles from the following components:Button
components next to each other in the implementation)Flex
to achieve the necessary spacing previously provided bymarginRight
Screenshots:
These screenshot outline how spacing is achieved in
Button
examples where 2Button
components are placed next to each otherBefore (with
marginRight
):After (with
gap="gap.small"
):