Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HDinger opened this issue Oct 28, 2024 · 3 comments
Open
Assignees
Labels

Comments

@HDinger
Copy link
Contributor

HDinger commented Oct 28, 2024

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
Bildschirmfoto 2024-10-28 um 12 41 23 Bildschirmfoto 2024-10-28 um 12 42 40

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
Bildschirmfoto 2024-10-28 um 12 48 51 Bildschirmfoto 2024-10-28 um 12 48 04

Setup

  • Version 0.34.0
  • Browser: Chrome (130), Firefox (131)
  • OS: Mac (14.1)
@camertron
Copy link
Contributor

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
Copy link
Contributor Author

HDinger commented Oct 29, 2024

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:

Oct-29-2024 13-19-06

Locally I am running on 82c2b0a7c

@camertron
Copy link
Contributor

Hey @HDinger, I wonder if the discrepancy was caused by the asset issue we looked at earlier this week 🤔 I just recorded a video showing the two are now identical spacing-wise:

toggle_switch_form_spacing.mov

Could you take another look now that primer.style is serving the correct assets?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants