fix(stepper): express theme button border

[mdt2]

Description

Per issue #2235, in the Express theme the infield buttons used in stepper shouldn't have a border. This work adjusts the theming variables so that Express theme matches the spec, and Spectrum theme work remains unchanged since it already matches the spec.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Note that if you refresh the page, the theme will automatically reset to Spectrum.

• Open the Stepper in the docs site. It will be handy to also have the prod docs site open for comparison.
  • Spectrum theme hasn't changed (including hover, focus, keyboard focus)
  • Express theme has been updated so that infield buttons don't have a border on any variant
  • Express theme hover, focus, and keyboard focus states still work (they should be the same as prod just without the border around the buttons)

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

🚀 Deployed on https://pr-2272--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 3.61 MB^*
Total change (Δ): -14.55 KB ⬇ (-0.39%)

Package	Size	Δ
stepper	53.70 KB	-14.55 KB ⬇

Details

stepper

File	Size	Original size	Δ	Δ%
Total changes	68.26 KB	53.70 KB	-14.55 KB ⬇	-21.32%
index-base.css	17.55 KB	14.48 KB	-3.07 KB ⬇
index-theme.css	3.85 KB	2.57 KB	-1.27 KB ⬇
index-vars.css	20.82 KB	16.47 KB	-4.35 KB ⬇
index.css	20.82 KB	16.47 KB	-4.35 KB ⬇
mods.json	1.38 KB	1.13 KB	-0.25 KB ⬇
themes/express.css	2.25 KB	1.71 KB	-0.56 KB ⬇
themes/spectrum.css	1.59 KB	0.88 KB	-0.75 KB ⬇

^* An ASCII character in UTF-8 is 8 bits or 1 byte.

[jawinn]

Nice work on this. The Express version is looking more like the spec now.

I did notice one small thing on the Large and Extra Large sizes on the docs. The buttons are a different height, which I think can be fixed by removing the transparent top border on the bottom button's .spectrum-InfieldButton-fill? I tried it and it seems to improve the spacing around the buttons on those two sizes and make the heights the same.

This is also a problem in prod, but the Express version in high contrast mode is a little weird in places. I don't know what the best fix might be as there isn't a design to go off of. The disabled state border cuts off a little, and the small size buttons get a little harder to read. There's also the gap / missing border between the buttons. It makes me wonder if WHCM for Express should show like WHCM Spectrum, but with the 2px border.

[mdt2]

Nice work on this. The Express version is looking more like the spec now.

I did notice one small thing on the Large and Extra Large sizes on the docs. The buttons are a different height, which I think can be fixed by removing the transparent top border on the bottom button's .spectrum-InfieldButton-fill? I tried it and it seems to improve the spacing around the buttons on those two sizes and make the heights the same.

This is also a problem in prod, but the Express version in high contrast mode is a little weird in places. I don't know what the best fix might be as there isn't a design to go off of. The disabled state border cuts off a little, and the small size buttons get a little harder to read. There's also the gap / missing border between the buttons. It makes me wonder if WHCM for Express should show like WHCM Spectrum, but with the 2px border.

Great catches, thanks @jawinn! You should see the height difference in L and XL fixed in #2300. It does look like there's still some weirdness on S and M sizes there though, so I'll plan to address that as part of PR 2300.

As far as WHCM for Express, I'll make a card for this since it sounds like there might need to be some convo with the design team.