fix(ButtonTwoLines): split rendering of button or link #14521
+159
−175
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
ButtonTwoLines
component to a dedicatedButtonTwoLines
andButtonLinkTwoLines
.Current Behavior
The current
ButtonTwoLines
relies 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
Button
orButtonLink
and 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
ButtonTwoLines
file.href
prop for theButtonLink
.ButtonLinkTwoLines
story. Although it has the same styling, this will confirm the use ofButtonLink
without 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
ButtonLink
is necessary. Open to discussion of simplification, reverting to the old approach and modifying that, or something else.