Primer::Forms::ToggleSwitchForm has a large gap between label and caption

[HDinger]

Problem

• When using the Primer::Forms::ToggleSwitchForm, there is a really large gap between the label and the caption.

Steps to reproduce

• Go to the ExampleToggleSwitchForm locally and in production
• Compare the spacing between the label and the caption

Locally	Production

Actual behavior

• The spacing is locally much larger then shown in the production lookbook
• This is because the elements have a different DOM structure:
  • Locally the toggle-swich-input and the caption are direct children of the SpacingWrapper which then applies a row-gap between them.
  • On production, there is a div as direct child of SpacingWrapper which then contains the toggleSwitch elements. Thus the row-gap is applied on the div and not on the toggle elements

Locally	Production

Setup

• Version 0.34.0
• Browser: Chrome (130), Firefox (131)
• OS: Mac (14.1)

[camertron]

Hey @HDinger thanks for bringing this up 😄 I'm actually not seeing the difference between the local and prod environments you described - they both look the same to me. Could you verify you're still seeing the same behavior after pulling main?

The larger gap is however still apparent locally for me, but it's actually desired behavior. Captions used to appear closer to the label, but we changed it for consistency with our docs. This is the PR that introduced the change: #2952

ToggleSwitch docs are here: https://primer.style/components/toggle-switch#label-and-description

[HDinger]

Hi @camertron

Maybe the difference is not so clear because the images do not have the same size. I recorded a video in which the jump is clearly visual between what is currently deployed and what is rendered locally:

Locally I am running on 82c2b0a7c