diff --git a/change/@ni-nimble-components-46a29ba0-9f17-47f3-8087-e11186e45247.json b/change/@ni-nimble-components-46a29ba0-9f17-47f3-8087-e11186e45247.json new file mode 100644 index 0000000000..6529eb5feb --- /dev/null +++ b/change/@ni-nimble-components-46a29ba0-9f17-47f3-8087-e11186e45247.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add padding between switch and its label", + "packageName": "@ni/nimble-components", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index b4de9b3533..5f0e51c83c 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -14,7 +14,6 @@ import { borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, - controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, @@ -38,9 +37,6 @@ export const styles = css` --ni-private-switch-indicator-size: 24px; --ni-private-switch-indicator-inner-size: 18px; --ni-private-switch-indicator-margin: -2px; - padding-bottom: calc( - ${controlHeight} - var(--ni-private-switch-height) - ); } :host([disabled]) { @@ -65,6 +61,12 @@ export const styles = css` .switch-container { display: flex; align-items: center; + ${'' /* + Reserve space around the 24px control to fill a 32px height until we have a switch 32 design. + See: https://github.com/ni/nimble/issues/3013 + */} + padding-top: 2px; + padding-bottom: 6px; } slot[name='unchecked-message']::slotted(*) {