fix(ui5-li-custom): correct padding for ListItemCustom #11487
Conversation
| padding-inline: 0 1rem; | ||
| } | ||
|
|
||
| :host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root { | ||
| :host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root, |
There was a problem hiding this comment.
Why is the [ui5-li] selector needed here?
Including this selector allows the parent class to be aware of its child components. However, this approach has a downside: the corresponding CSS will be bundled with all components that extend the ListItem class, even though these selectors may never match in those contexts. This seems unnecessary and potentially inefficient. Please reconsider and revise the implementation accordingly, as the current setup appears conceptually flawed.
There was a problem hiding this comment.
The selector is currently there to enforce stronger CSS specificity, but I agree it’s worth exploring if we can achieve the same effect with a cleaner setup. I’ll see what can be done to optimize it.
There was a problem hiding this comment.
The changes are ready for review.
To address the issue, I increased the specificity of the selection mode padding rules by including [wrapping-type] attribute in the selectors. This ensures they override the generic padding rule without relying on [ui5-li] or [ui5-li-custom].
There was a problem hiding this comment.
Additionally, since ui5-li-custom currently does not have a [wrapping-type] attribute, I included the override styles specifically for it as well to ensure consistent behavior.
This change addresses an issue with padding styles in the ListItem component, ensuring consistent and accurate layout. Fixes: #11480
Increase the specificity of selection mode padding rules by including [wrapping-type] in the selectors, ensuring they override the generic [wrapping-type="None"][description] padding rule. Remove unnecessary [ui5-li] and [ui5-li-custom] selectors to prevent CSS leakage and unnecessary bundling. This change keeps the CSS encapsulated and efficient, while maintaining the intended visual behavior for selection modes.
This change addresses an issue with padding styles in the ListItemCustom component, ensuring consistent and accurate layout.
Fixes: #11480