From acf0004ae61803f08af28e433a63123e889e8779 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 9 Jul 2026 18:20:12 -0500 Subject: [PATCH 1/7] Change files --- ...le-components-46a29ba0-9f17-47f3-8087-e11186e45247.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-46a29ba0-9f17-47f3-8087-e11186e45247.json 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" +} From 9cef52fee302929755f3c7e021715afe2f4abea6 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 9 Jul 2026 18:17:18 -0500 Subject: [PATCH 2/7] Add padding between switch and its label --- packages/nimble-components/src/switch/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index b4de9b3533..fbe19bb9a2 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -51,6 +51,7 @@ export const styles = css` .label { color: ${controlLabelFontColor}; font: ${controlLabelFont}; + padding-bottom: 2px; } :host([disabled]) .label { From febc35bd8dc44a16e0aaf4702911b95ecd760183 Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Fri, 10 Jul 2026 11:47:54 -0500 Subject: [PATCH 3/7] Apply suggestions from code review Co-authored-by: Milan Raj --- .../nimble-components/src/switch/styles.ts | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index fbe19bb9a2..9bf92861eb 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -66,7 +66,47 @@ export const styles = css` .switch-container { display: flex; align-items: center; - } + :host { + outline: none; + font: ${bodyFont}; + color: ${buttonLabelFontColor}; + flex-direction: column; + cursor: pointer; + --ni-private-switch-height: 24px; + --ni-private-switch-indicator-size: 24px; + --ni-private-switch-indicator-inner-size: 18px; + --ni-private-switch-indicator-margin: -2px; + } + + :host([disabled]) { + cursor: default; + color: ${buttonLabelDisabledFontColor}; + } + + .label { + color: ${controlLabelFontColor}; + font: ${controlLabelFont}; + } + + :host([disabled]) .label { + color: ${controlLabelDisabledFontColor}; + } + + .label__hidden { + display: none; + visibility: hidden; + } + + .switch-container { + display: flex; + align-items: center; + ${'' /* + Reserve space around the 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(*) { margin-inline-end: 8px; From 3ff5900e3be708f19091d812c4729d4d41065901 Mon Sep 17 00:00:00 2001 From: rajsite <1588923+rajsite@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:54:03 -0500 Subject: [PATCH 4/7] fix patch --- .../nimble-components/src/switch/styles.ts | 39 ------------------- 1 file changed, 39 deletions(-) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index 9bf92861eb..ac28efe416 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, @@ -28,44 +27,6 @@ import { themeBehavior } from '../utilities/style/theme'; export const styles = css` ${display('inline-flex')} - :host { - outline: none; - font: ${bodyFont}; - color: ${buttonLabelFontColor}; - flex-direction: column; - cursor: pointer; - --ni-private-switch-height: 24px; - --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]) { - cursor: default; - color: ${buttonLabelDisabledFontColor}; - } - - .label { - color: ${controlLabelFontColor}; - font: ${controlLabelFont}; - padding-bottom: 2px; - } - - :host([disabled]) .label { - color: ${controlLabelDisabledFontColor}; - } - - .label__hidden { - display: none; - visibility: hidden; - } - - .switch-container { - display: flex; - align-items: center; :host { outline: none; font: ${bodyFont}; From c39495e54a18d8e2c9837d7b72de35244625f02e Mon Sep 17 00:00:00 2001 From: rajsite <1588923+rajsite@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:55:58 -0500 Subject: [PATCH 5/7] more fix patch --- .../nimble-components/src/switch/styles.ts | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index ac28efe416..59ab6b6e00 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -28,45 +28,45 @@ export const styles = css` ${display('inline-flex')} :host { - outline: none; - font: ${bodyFont}; - color: ${buttonLabelFontColor}; - flex-direction: column; - cursor: pointer; - --ni-private-switch-height: 24px; - --ni-private-switch-indicator-size: 24px; - --ni-private-switch-indicator-inner-size: 18px; - --ni-private-switch-indicator-margin: -2px; + outline: none; + font: ${bodyFont}; + color: ${buttonLabelFontColor}; + flex-direction: column; + cursor: pointer; + --ni-private-switch-height: 24px; + --ni-private-switch-indicator-size: 24px; + --ni-private-switch-indicator-inner-size: 18px; + --ni-private-switch-indicator-margin: -2px; } :host([disabled]) { - cursor: default; - color: ${buttonLabelDisabledFontColor}; + cursor: default; + color: ${buttonLabelDisabledFontColor}; } .label { - color: ${controlLabelFontColor}; - font: ${controlLabelFont}; + color: ${controlLabelFontColor}; + font: ${controlLabelFont}; } :host([disabled]) .label { - color: ${controlLabelDisabledFontColor}; + color: ${controlLabelDisabledFontColor}; } .label__hidden { - display: none; - visibility: hidden; + display: none; + visibility: hidden; } .switch-container { - display: flex; - align-items: center; - ${'' /* - Reserve space around the 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; + display: flex; + align-items: center; + ${'' /* + Reserve space around the 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(*) { From 8aa0dc3f14816cd51ae813a93f7420ac0e7e18d2 Mon Sep 17 00:00:00 2001 From: rajsite <1588923+rajsite@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:56:45 -0500 Subject: [PATCH 6/7] ugh --- .../nimble-components/src/switch/styles.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index 59ab6b6e00..ed0e27f789 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -27,7 +27,7 @@ import { themeBehavior } from '../utilities/style/theme'; export const styles = css` ${display('inline-flex')} - :host { + :host { outline: none; font: ${bodyFont}; color: ${buttonLabelFontColor}; @@ -37,28 +37,28 @@ export const styles = css` --ni-private-switch-indicator-size: 24px; --ni-private-switch-indicator-inner-size: 18px; --ni-private-switch-indicator-margin: -2px; - } + } - :host([disabled]) { + :host([disabled]) { cursor: default; color: ${buttonLabelDisabledFontColor}; - } + } - .label { + .label { color: ${controlLabelFontColor}; font: ${controlLabelFont}; - } + } - :host([disabled]) .label { + :host([disabled]) .label { color: ${controlLabelDisabledFontColor}; - } + } - .label__hidden { + .label__hidden { display: none; visibility: hidden; - } + } - .switch-container { + .switch-container { display: flex; align-items: center; ${'' /* @@ -67,7 +67,7 @@ export const styles = css` */} padding-top: 2px; padding-bottom: 6px; - } + } slot[name='unchecked-message']::slotted(*) { margin-inline-end: 8px; From 35fc6b68b83e20241f309064c827bce63684ae7a Mon Sep 17 00:00:00 2001 From: rajsite <1588923+rajsite@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:58:51 -0500 Subject: [PATCH 7/7] comment --- packages/nimble-components/src/switch/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts index ed0e27f789..5f0e51c83c 100644 --- a/packages/nimble-components/src/switch/styles.ts +++ b/packages/nimble-components/src/switch/styles.ts @@ -62,7 +62,7 @@ export const styles = css` display: flex; align-items: center; ${'' /* - Reserve space around the control to fill a 32px height until we have a switch 32 design. + 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;