Set spacing between step and panel in Hds::Stepper::Nav

[dchyun]

📌 Summary

This PR would set a margin between the Step and Panel of 24px in the Hds::Stepper::Nav

🛠️ Detailed description

Currently there is guidance for consumers to set a spacing of 24px between the stepper and the step panel content in the Hds::Stepper::Nav. The component itself does not set any spacing between the steps and panels currently.

Handling this spacing inside the component would ensure that anytime the stepper is used in a non-standalone fashion there is a proper spacing between the steps and panels. In adoption testing, it was found that this could ease adoption, as the majority of instances do not set any spacing between the panel and steps via their step content blocks.

In many cases adding in the margin would require wrapping the content in the <:body> with the div that sets the margin itself.

<Hds::Stepper::Nav
  @currentStep={{this.currentStep}}
  @steps={{this.steps}}
  @onStepChange={{this.onStepChange}}
>
  <:body>
    <div class="has-margin-top-md">
      {{!-- Step content --}}
    </div>
  </:body>
</Hds::Stepper::Nav>

📸 Screenshots

Current Example implementation

After

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Apr 18, 2025 7:04pm
hds-website	✅ Ready (Inspect)	Visit Preview	Apr 18, 2025 7:04pm

[dchyun]

@majedelass this is just an idea I'm exploring, but in adoption testing I think it could be helpful if the spacing between the steps and panels is handled inside the component. Can go through it in more detail next week if you think it could be a good idea.

[heatherlarsen]

We don't typically set margins like this and tend to leave it to consumers to define. I don't recall why that is, so I'd like @didoo to weigh in on this before we proceed. It's also not included in the Figma component, so we'd need to determine if we need to make changes there, as well.

[didoo]

We don't typically set margins like this and tend to leave it to consumers to define. I don't recall why that is, so I'd like @didoo to weigh in on this before we proceed. It's also not included in the Figma component, so we'd need to determine if we need to make changes there, as well.

@dchyun a few considerations:

• as @heatherlarsen says, usually we tend leave this responsibility to the consumers (see for example the Tabs implementation). The reason for this is that we (HDS) don't know all the possible contexts in which it will be used, and so defining a single value that works for every use case is generally not possible: what if what follows is a heading, or another element that already provides visual white space above it, or something else we didn't consider)?
• even if we think the 24px is universal, why not apply it to the hds-stepper-nav__list element, as bottom padding, instead of a margin top for the hds-stepper-nav__panel (we tend to avoid using external margins for the components/subcomponents)?
• and if there are reasons to use the margin, then we could consider applying a CSS rule like this one

.hds-stepper-nav__list:has(+ .hds-stepper-nav__panel) {
  [padding|margin]-bottom: 24px;
}

• one last consideration, which is probably the most important, is what @heatherlarsen said above, about Figma: if the visual space between the steps list and the panels below should always include 24px below the boundary of the "step", why is this "rule" not been embedded in the Figma components?

[dchyun]

we (HDS) don't know all the possible contexts in which it will be used

This is a fair point, and if we aren't able to say this for certain then it wouldn't be right to introduce this and have such a strict setting for it. The tabs also don't set spacing between the tabs and body so makes sense to align to that.

why not apply it to the hds-stepper-nav__list element, as bottom padding

The tabs can be used without panels, so hence why I set the margin top on the panel, but .hds-stepper-nav__list:has(+ .hds-stepper-nav__panel) is a cleaner selector.

Going to close this as it makes sense that we can't be for certain that 24px is universal, along with the other points brought up. Thanks yall for all the feedback.

CC: @didoo @heatherlarsen