Consistent box sizing border box (#2115)

# Pull Request ## 🤨 Rationale Switch to using `box-sizing: border-box;` consistently in all our components. ## 👩‍💻 Implementation - 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 look innocuous. Added the interaction design figma we have but don't think there are strict visual design docs to reference. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
ni · Jun 10, 2024 · db8b50e · db8b50e
1 parent 96e1725
commit db8b50e
Show file tree

Hide file tree

Showing 40 changed files with 30 additions and 47 deletions.
diff --git a/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json b/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch to custom box-sizing: border-box consistently",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json b/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch to custom box-sizing: border-box consistently",
+  "packageName": "@ni/spright-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/anchor-menu-item/styles.ts b/packages/nimble-components/src/anchor-menu-item/styles.ts
@@ -37,7 +37,6 @@ export const styles = css`
         display: grid;
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;

diff --git a/packages/nimble-components/src/anchor-tab/styles.ts b/packages/nimble-components/src/anchor-tab/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};

diff --git a/packages/nimble-components/src/anchor-tabs/styles.ts b/packages/nimble-components/src/anchor-tabs/styles.ts
@@ -5,7 +5,6 @@ export const styles = css`
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }

diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts
@@ -54,7 +54,6 @@ export const styles = css`
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
         width: 100%;
     }

diff --git a/packages/nimble-components/src/anchor/styles.ts b/packages/nimble-components/src/anchor/styles.ts
@@ -18,7 +18,6 @@ export const styles = css`
         ${display('inline')}
 
         :host {
-            box-sizing: border-box;
             font: ${linkFont};
         }
 

diff --git a/packages/nimble-components/src/breadcrumb-item/styles.ts b/packages/nimble-components/src/breadcrumb-item/styles.ts
@@ -16,7 +16,6 @@ export const styles = css`
 
     :host {
         height: ${controlHeight};
-        box-sizing: border-box;
         padding-left: calc(4px - ${borderWidth});
 
         ${

diff --git a/packages/nimble-components/src/breadcrumb/styles.ts b/packages/nimble-components/src/breadcrumb/styles.ts
@@ -13,7 +13,6 @@ export const styles = css`
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${linkFont};
         --ni-private-breadcrumb-link-font-color: ${linkFontColor};
         --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};

diff --git a/packages/nimble-components/src/card-button/styles.ts b/packages/nimble-components/src/card-button/styles.ts
@@ -29,7 +29,6 @@ export const styles = css`
         cursor: pointer;
         outline: none;
         border: none;
-        box-sizing: border-box;
         transition: box-shadow ${smallDelay};
     }
 

diff --git a/packages/nimble-components/src/checkbox/styles.ts b/packages/nimble-components/src/checkbox/styles.ts
@@ -34,7 +34,6 @@ export const styles = css`
     .control {
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;

diff --git a/packages/nimble-components/src/combobox/styles.ts b/packages/nimble-components/src/combobox/styles.ts
@@ -75,7 +75,7 @@ export const styles = css`
         border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
         height: calc(${controlHeight} - 12px);
         align-self: center;
-        padding-left: 4px;
+        margin-left: 4px;
     }
 
     .dropdown-button {

diff --git a/packages/nimble-components/src/drawer/styles.ts b/packages/nimble-components/src/drawer/styles.ts
@@ -67,7 +67,6 @@ export const styles = css`
     }
 
     .dialog-contents {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;

diff --git a/packages/nimble-components/src/menu-item/styles.ts b/packages/nimble-components/src/menu-item/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
     :host {
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;

diff --git a/packages/nimble-components/src/menu/styles.ts b/packages/nimble-components/src/menu/styles.ts
@@ -48,7 +48,7 @@ export const styles = css`
     }
 
     ::slotted(hr) {
-        box-sizing: content-box;
+        box-sizing: border-box;
         height: 2px;
         margin: ${smallPadding};
         border: none;

diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
@@ -52,7 +52,6 @@ export const styles = css`
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -170,7 +169,7 @@ export const styles = css`
 
     .error-icon {
         order: 1;
-        padding-right: ${smallPadding};
+        margin-right: ${smallPadding};
     }
 `.withBehaviors(
     appearanceBehavior(

diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts
@@ -39,7 +39,6 @@ export const styles = css`
             cursor: pointer;
             outline: none;
             border: none;
-            box-sizing: border-box;
             ${
                 /*
                     Not sure why but this is needed to get buttons with icons and buttons
@@ -55,7 +54,6 @@ export const styles = css`
             height: 100%;
             width: 100%;
             border: ${borderWidth} solid transparent;
-            box-sizing: border-box;
             color: inherit;
             border-radius: inherit;
             fill: inherit;
@@ -89,10 +87,9 @@ export const styles = css`
             width: 100%;
             height: 100%;
             pointer-events: none;
-            box-sizing: border-box;
             outline: 0px solid transparent;
             color: transparent;
-            background-clip: content-box;
+            background-clip: border-box;
             transition: outline ${smallDelay} ease-in-out;
         }
 

diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -31,7 +31,6 @@ export const styles = css`
     ${display('inline-flex')}
 
     :host {
-        box-sizing: border-box;
         color: ${bodyFontColor};
         font: ${bodyFont};
         height: ${controlHeight};
@@ -109,7 +108,6 @@ export const styles = css`
 
     .control {
         align-items: center;
-        box-sizing: border-box;
         cursor: pointer;
         display: flex;
         min-height: 100%;
@@ -136,7 +134,6 @@ export const styles = css`
     }
 
     .listbox {
-        box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         overflow-y: auto;

diff --git a/packages/nimble-components/src/radio/styles.ts b/packages/nimble-components/src/radio/styles.ts
@@ -33,7 +33,6 @@ export const styles = css`
         position: relative;
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         border-radius: 100%;

diff --git a/packages/nimble-components/src/rich-text-mention/users/view/styles.ts b/packages/nimble-components/src/rich-text-mention/users/view/styles.ts
@@ -10,7 +10,6 @@ export const styles = css`
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${mentionFont};
     }
 

diff --git a/packages/nimble-components/src/rich-text/editor/styles.ts b/packages/nimble-components/src/rich-text/editor/styles.ts
@@ -50,7 +50,6 @@ export const styles = css`
     }
 
     .container {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -132,7 +131,6 @@ export const styles = css`
             /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''
         }
         padding-right: calc(${iconSize});
-        box-sizing: border-box;
         position: relative;
         color: inherit;
     }
@@ -258,7 +256,6 @@ export const styles = css`
     ${toolbarTag}::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
-        box-sizing: border-box;
         gap: 0px;
         height: var(--ni-private-rich-text-editor-footer-section-height);
     }

diff --git a/packages/nimble-components/src/rich-text/viewer/styles.ts b/packages/nimble-components/src/rich-text/viewer/styles.ts
@@ -21,7 +21,6 @@ export const styles = css`
     .viewer {
         font: inherit;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         overflow-wrap: anywhere;

diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts
@@ -72,7 +72,6 @@ export const styles = css`
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        box-sizing: border-box;
         background-color: ${fillHoverColor};
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
@@ -101,7 +100,6 @@ export const styles = css`
         justify-content: center;
         align-items: center;
         background-color: var(--ni-private-switch-indicator-background-color);
-        box-sizing: border-box;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);

diff --git a/packages/nimble-components/src/tab-panel/styles.ts b/packages/nimble-components/src/tab-panel/styles.ts
@@ -10,7 +10,6 @@ export const styles = css`
     ${display('block')}
 
     :host {
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
         padding-top: ${standardPadding};

diff --git a/packages/nimble-components/src/tab/styles.ts b/packages/nimble-components/src/tab/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};

diff --git a/packages/nimble-components/src/table/components/group-row/styles.ts b/packages/nimble-components/src/table/components/group-row/styles.ts
@@ -23,7 +23,6 @@ export const styles = css`
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
-        box-sizing: border-box;
         grid-template-columns:
             calc(
                 ${controlHeight} *

diff --git a/packages/nimble-components/src/table/components/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts
@@ -27,7 +27,6 @@ export const styles = css`
         background-color: ${applicationBackgroundColor};
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid transparent;
-        box-sizing: border-box;
         background-clip: padding-box;
     }
 
@@ -36,7 +35,6 @@ export const styles = css`
         width: 100%;
         height: ${controlHeight};
         pointer-events: none;
-        box-sizing: border-box;
         bottom: 0px;
         position: absolute;
     }

diff --git a/packages/nimble-components/src/tabs-toolbar/styles.ts b/packages/nimble-components/src/tabs-toolbar/styles.ts
@@ -16,7 +16,6 @@ export const styles = css`
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }

diff --git a/packages/nimble-components/src/tabs/styles.ts b/packages/nimble-components/src/tabs/styles.ts
@@ -5,7 +5,6 @@ export const styles = css`
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }

diff --git a/packages/nimble-components/src/text-area/styles.ts b/packages/nimble-components/src/text-area/styles.ts
@@ -92,7 +92,6 @@ export const styles = css`
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;

diff --git a/packages/nimble-components/src/text-field/styles.ts b/packages/nimble-components/src/text-field/styles.ts
@@ -53,7 +53,6 @@ export const styles = css`
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;

diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -34,7 +34,6 @@ export const styles = css`
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};

diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts
@@ -57,7 +57,6 @@ export const styles = css`
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
     }
 

diff --git a/packages/nimble-components/src/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
@@ -10,4 +10,4 @@ import {
  */
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}`;
+) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
diff --git a/packages/spright-components/src/utilities/style/display.ts b/packages/spright-components/src/utilities/style/display.ts
@@ -10,4 +10,4 @@ import {
  */
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}`;
+) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
@@ -105,5 +105,5 @@ configureActions({
     depth: 1
 });
 
-// Update the GUID on this line to trigger a turbosnap full rebuild: 835ca179-52c1-4c5c-87c7-f2989f63ec9c
+// Update the GUID on this line to trigger a turbosnap full rebuild: 48e02ae5-fcf1-48ed-8108-b7a1f54b7b3b
 // See https://www.chromatic.com/docs/turbosnap/#full-rebuilds
diff --git a/packages/storybook/src/docs/component-status.stories.ts b/packages/storybook/src/docs/component-status.stories.ts
@@ -316,6 +316,9 @@ const components = [
     {
         componentName: 'Rich Text Editor',
         componentHref: './?path=/docs/incubating-rich-text-editor--docs',
+        designHref:
+            'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+        designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,
@@ -325,6 +328,9 @@ const components = [
     {
         componentName: 'Rich Text Viewer',
         componentHref: './?path=/docs/incubating-rich-text-viewer--docs',
+        designHref:
+            'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+        designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,

diff --git a/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts b/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts
@@ -60,7 +60,7 @@ const component = (
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${numberFieldTag}
-        style="width: 250px; padding: 8px;"
+        style="width: 250px; margin: 8px;"
         value="${() => valueValue}"
         placeholder="${() => placeholderValue}"
         appearance="${() => appearance}"

diff --git a/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts b/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts
@@ -186,7 +186,7 @@ export const richTextEditorSlotButtons: StoryFn = createStory(html`
 
 // prettier-ignore
 const mobileWidthComponent = html`
-    <${richTextEditorTag} style="padding: 20px; width: 360px; height: 250px;">
+    <${richTextEditorTag} style="margin: 20px; width: 360px; height: 250px;">
         <${richTextMentionUsersTag} pattern="^user:(.*)">
             <${mappingUserTag} key="user:1" display-name="John Doe"></${mappingUserTag}>
         </${richTextMentionUsersTag}>