Each component should use the display helper when defined which was made consistent in #2114. This PR leverages that helper to make sure each component sets the elements in the shadow root to use box-sizing: border-box; consistently
Created separate selectors for targeting all children, i.e. * {}, the host itself, i.e. :host {}, and all before and after pseduo-elements so devtools stays clearer, specifically the selector for :host and the selector for * are clear in dev tools without the noise of the ::before and ::after selectors
Cleared the manual configuration for box-sizing
Cleaned up some padding configurations (now consistently included in the size inside the border) to be margin configurations (which are outside the border and not part of the size).
🧪 Testing
Rely on chromatic, explanation of some of the changes:
Menu changes look correct, the minimum size now includes the border instead of the border going outside the configured size
Select filter box changes look improved. The sizing of the filter box and the no options box now fit the control height instead of being larger than the control height
Rich text changes align with figma (border included in the 40px of the footer section). Added the interaction design figma to the component status table but don't think there are strict visual design docs to reference.
Recreated the PR from squashed commits so that reviewers can see Chromatic Test changes more easily.
✅ Checklist
[x] I have updated the project documentation to reflect my changes or determined no changes are needed.
Pull Request
🤨 Rationale
Switch to using
box-sizing: border-box;
consistently in all our components. fixes https://github.com/ni/nimble/issues/1326👩💻 Implementation
display
helper when defined which was made consistent in #2114. This PR leverages that helper to make sure each component sets the elements in the shadow root to usebox-sizing: border-box;
consistently* {}
, the host itself, i.e.:host {}
, and all before and after pseduo-elements so devtools stays clearer, specifically the selector for:host
and the selector for*
are clear in dev tools without the noise of the::before
and::after
selectorsbox-sizing
🧪 Testing
Rely on chromatic, explanation of some of the changes:
✅ Checklist