fix(list): move margins from host to internal container element #957
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.
PR Checklist
Please check if your PR fulfills the following requirements:
Describe the new behavior?
As a general best practice in Forge we do not like to set external margins on host elements to ensure the components do not affect layouts with whitespace. Margins are typically something we expect consuming developers to place on the host elements with their own styles.
The list and list item components are unique in that they have some usage patterns for built-in whitespace such as navlist block margin (typically used within dropdown lists), and
indented
where list items havemargin-inline-start
applied to convey that they are visually beneath a parent list item.These styles were previously set on the host element, making them susceptible to global style overrides. This PR moves those styles to the shadow DOM root container element. The CSS variables are still usable, and any
margin
styles set directly on the host elements will now compound instead of override. Developers should always prefer using the tokens where possible.Additional information
This was brought up in relation to a global reset stylesheet setting
margin: 0
on all (*
) elements, and it was conflicting with the indentation styles for nested lists.