fix(ButtonTwoLines): split rendering of button or link #14521
Merged
+159
−175
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
TylerAPfledderer
requested review from
wackerow,
corwintines,
pettinarip and
minimalsm
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
pettinarip
approved these changes
Dec 23, 2024
There was a problem hiding this comment.
LGTM @TylerAPfledderer. I'm fine with this refactor, its cleaner and easier to understand than the previous one IMO.
| Pick<ButtonProps, "size" | "variant" | "isSecondary"> & { | ||
| href: string |
There was a problem hiding this comment.
just curious, is the intention of this change to make the field required? looks good if so
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.
Splits
ButtonTwoLinescomponent to a dedicatedButtonTwoLinesandButtonLinkTwoLines.Current Behavior
The current
ButtonTwoLinesrelies on type guarding to check if a button or button link should render and accept the appropriate props.The unintended side-effect with the current approach is that there is child content with specific props used that should not be sent to the Button/ButtonLink component, adding complexity in addressing unexpected issues.
New Behavior
Split the component into dedicated renders of either the
ButtonorButtonLinkand add a creator function (createSplitProps) to help split the props so that only the needed ones for the child content are sent down, and the rest go to the parent component.Most props are not explicit and are meant for the parent component only, some are meant for both, so need an intermediary to correctly identify who goes to the child content and not to the parent.
Additional Information
ButtonTwoLinesfile.hrefprop for theButtonLink.ButtonLinkTwoLinesstory. Although it has the same styling, this will confirm the use ofButtonLinkwithout error or regression.I will note that this seems like overengineering at the moment, as we currently do not employ the component in prod, and therefore do not even know if a rendering with
ButtonLinkis necessary. Open to discussion of simplification, reverting to the old approach and modifying that, or something else.