Add guideline to last step of the `<Steps>` component

[HiDeoo]

Description

The initial design of the <Steps> component does not include a guideline for the last step:

Based on some feedback, this PR introduces a guideline for the last step to help visualizing the context of the last step, specially for long last steps.

Different approaches are possible:

Using the existing guideline	Fading the guideline linearly	Fading the guideline in the last 5rem

This PR uses the third approach, fading the guideline near the end of the last step.

I'm totally open to any feedback regarding the approach or values used.

Remaining tasks

• [x] Remove the docs/src/content/docs/guides/steps.mdx file

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 6a39d38bf4a3bb9abbe59111f01c8d61a411b8af

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Jun 25, 2024 1:00pm

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

Locale	File	Note
en	guides/steps.mdx	Source added, will be tracked.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[lorenzolewis]

Really like this! The only thing I'm not a fan of are the one-line last steps. I would prefer no trailing line if only a single line, but I can understand that may be tricky (if even possible at all) to do with text wrapping (unless using some magic-numbers).

[evadecker]

Fade-outs are often used to imply that content continues off-screen or is truncated. When I see the guideline fade out it makes me think that there are additional steps hidden from view.

I think the existing design is preferable, even for long final steps. The content is indented, which communicates its hierarchy and relation to the number. No extra visuals needed.

[HiDeoo]

The only thing I'm not a fan of are the one-line last steps.

This is indeed something I noticed as well but did not bother me. I'll try to see if there is some kind of trick we can use but I cannot think of an obvious one right now.

The content is indented, which communicates its hierarchy and relation to the number. No extra visuals needed.

I would guess this highly depends on the content and your screen size. If you're in the middle of a relatively long step, or on a phone or small window and cannot see the previous/next step number indicator, you have no point of reference to know the content you're seeing is indented. And this seems to be the case for most of the negative feedback I got on this. Definitely not saying this solution is the proper one ofc (it's just the only one we thought of so far), but I think there may be some room for improvement on our side to address the issue.

[netlify[bot]]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	6a39d38bf4a3bb9abbe59111f01c8d61a411b8af
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/66bf1c15faea200008cd9d1d
😎 Deploy Preview	https://deploy-preview-2051--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[HiDeoo]

I wonder if actually the simpler solid line is the better choice given this?

I think this is perfectly fine too (it was one of the 3 suggested approaches in the original post) and it also addresses the issue. I updated the PR to remove the gradient.

As we discussed, the one-line case is indeed tricky and inconsistent and I don't think there is even an upcoming CSS feature that would allow us to address this in a more elegant/reliable way.