-
Notifications
You must be signed in to change notification settings - Fork 50
[terra-clinical-label-value-view] Fix margin for dl elements #904
Conversation
#dl-wrapper { | ||
margin-bottom: 0; | ||
margin-top: 0; | ||
} |
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.
Why do we need to add a style on the wrapper element if we are updating our sass file?
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.
This is being applied to the <dl>
element on line 19 for this specific example and not the one in LableValueView that had its sass file updated. This change is maybe not needed, as it is just an example, but I added it to be consistent in removing these default margins whenever we use a definition list.
cc9d3d3
to
4fcc529
Compare
How do these changes compare to the original styling utilizing div elements? Are the margins same or different? etc. |
4fcc529
to
76f0b0a
Compare
76f0b0a
to
318b13d
Compare
Summary
What was changed:
Removed top and bottom margins added by the default stylesheet of the
<dl>
element within the LabelValueView element (the wrapper element whenisChildOfDescriptionList
prop is 'false' or undefined).Why it was changed:
These margins were added unintentionally when a definition list was added to this component as part of a11y changes, and this change fixes that by removing them.
Testing
This change was tested using:
Component example (before/after):
Multiple adjacent LabelValueViews (before/after):
Note: Some components, like DetailListItem, add their own padding to separate each ListValueView, as seen below
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-9469
Thank you for contributing to Terra.
@cerner/terra