fix: apply margin to wrapperStyles when drag wrapper is enabled [ALT-1293] #784
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
primeinteger
commented
Oct 4, 2024
Comment on lines
-15
to
+8
| export const ContentfulDivider = (props: ContentfulDividerProps) => { | ||
| const { className } = props; | ||
| export const ContentfulDivider = ({ className = '', ...props }: ContentfulDividerProps) => { |
There was a problem hiding this comment.
This subtle change makes it so className will not be spread via ...props to the div.cf-divider element
Comment on lines
-5
to
-9
| const styles = { | ||
| hr: css({ | ||
| border: 'none', | ||
| }), | ||
| }; |
There was a problem hiding this comment.
The components package doesn't have emotion installed. I moved this style to the component's css file instead.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
Fixes the Divider component after the changes in #778 caused a regression with the Divider's position
Approach
The Divider positioning issue was due to the Divider component having Margin on by default. This issue was affecting any component that applies Margins and Relative height/width.
I updated the
useComponentPropshook to apply the Margin styles towrapperStyleswhile removing the Margin from the component viaoverrideStyleswhich positions the component correctly when mixing margins + relative height/width.I adjusted the conditions in
useComponentPropsso that thewrapperStylesandoverrideStyleswill only be used when the hook is called withrequireDragWrapper: true-- making sure that we aren't accidentally usingwrapperStylesunless the wrapper is actually being used.Video
Screen.Recording.2024-10-04.at.3.59.26.PM.mov