fix(sp-textfield): update border width and color for s2/Express #5734

iuliauta · 2025-09-17T11:58:06Z

This PR improves the textarea component in spectrum-two and Express themes.

The border width, corner radius and paddings between textarea and label/help-text are addressed in this PR: #5733

The changes made in this PR:

textarea border color is updated based on the S2/EXpress themes according to this Express figma and S2 figma
the start padding inside the textarea is updated based on the S2/Express themes according to this Express figma and S2 figma

Motivation and context

Fix the regressions found after changing from the express theme to the spectrum-two theme.

Related issue(s)

SWC-1073 (original)
CCEX-230903

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Descriptive Test Statement
1. Go here
2. Select S2/Express theme.
3. Observe the border color and the start padding inside the input element.

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

changeset-bot · 2025-09-17T11:58:10Z

🦋 Changeset detected

Latest commit: 685b162

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

This PR includes changesets to release 84 packages

Name	Type
@spectrum-web-components/textfield	Patch
@spectrum-web-components/color-field	Patch
@spectrum-web-components/combobox	Patch
@spectrum-web-components/number-field	Patch
@spectrum-web-components/search	Patch
@spectrum-web-components/bundle	Patch
@spectrum-web-components/slider	Patch
documentation	Patch
@spectrum-web-components/eslint-plugin	Patch
@spectrum-web-components/accordion	Patch
@spectrum-web-components/action-bar	Patch
@spectrum-web-components/action-button	Patch
@spectrum-web-components/action-group	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/alert-banner	Patch
@spectrum-web-components/alert-dialog	Patch
@spectrum-web-components/asset	Patch
@spectrum-web-components/avatar	Patch
@spectrum-web-components/badge	Patch
@spectrum-web-components/breadcrumbs	Patch
@spectrum-web-components/button-group	Patch
@spectrum-web-components/button	Patch
@spectrum-web-components/card	Patch
@spectrum-web-components/checkbox	Patch
@spectrum-web-components/clear-button	Patch
@spectrum-web-components/close-button	Patch
@spectrum-web-components/coachmark	Patch
@spectrum-web-components/color-area	Patch
@spectrum-web-components/color-handle	Patch
@spectrum-web-components/color-loupe	Patch
@spectrum-web-components/color-slider	Patch
@spectrum-web-components/color-wheel	Patch
@spectrum-web-components/contextual-help	Patch
@spectrum-web-components/dialog	Patch
@spectrum-web-components/divider	Patch
@spectrum-web-components/dropzone	Patch
@spectrum-web-components/field-group	Patch
@spectrum-web-components/field-label	Patch
@spectrum-web-components/help-text	Patch
@spectrum-web-components/icon	Patch
@spectrum-web-components/icons-ui	Patch
@spectrum-web-components/icons-workflow	Patch
@spectrum-web-components/icons	Patch
@spectrum-web-components/iconset	Patch
@spectrum-web-components/illustrated-message	Patch
@spectrum-web-components/infield-button	Patch
@spectrum-web-components/link	Patch
@spectrum-web-components/menu	Patch
@spectrum-web-components/meter	Patch
@spectrum-web-components/modal	Patch
@spectrum-web-components/overlay	Patch
@spectrum-web-components/picker-button	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/popover	Patch
@spectrum-web-components/progress-bar	Patch
@spectrum-web-components/progress-circle	Patch
@spectrum-web-components/radio	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/split-view	Patch
@spectrum-web-components/status-light	Patch
@spectrum-web-components/swatch	Patch
@spectrum-web-components/switch	Patch
@spectrum-web-components/table	Patch
@spectrum-web-components/tabs	Patch
@spectrum-web-components/tags	Patch
@spectrum-web-components/thumbnail	Patch
@spectrum-web-components/toast	Patch
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/top-nav	Patch
@spectrum-web-components/tray	Patch
@spectrum-web-components/underlay	Patch
@spectrum-web-components/custom-vars-viewer	Patch
@spectrum-web-components/story-decorator	Patch
@spectrum-web-components/vrt-compare	Patch
@spectrum-web-components/base	Patch
@spectrum-web-components/grid	Patch
@spectrum-web-components/opacity-checkerboard	Patch
@spectrum-web-components/reactive-controllers	Patch
@spectrum-web-components/shared	Patch
@spectrum-web-components/styles	Patch
@spectrum-web-components/theme	Patch
@spectrum-web-components/truncated	Patch
example-project-rollup	Patch
example-project-webpack	Patch

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

github-actions · 2025-09-17T11:59:48Z

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5734

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

…d in another PR

github-actions · 2025-09-17T12:02:50Z

Tachometer results

Chrome

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	477 kB	24.92ms - 25.99ms	-	faster ✔ 9% - 14% 2.43ms - 4.23ms
branch	455 kB	28.05ms - 29.51ms	slower ❌ 9% - 17% 2.43ms - 4.23ms	-

Firefox

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	477 kB	47.97ms - 51.47ms	-	faster ✔ 5% - 13% 2.42ms - 7.30ms
branch	455 kB	52.88ms - 56.28ms	slower ❌ 5% - 15% 2.42ms - 7.30ms	-

…press and s2)

…ss themes

tools/styles/tokens-v2/system-theme-bridge.css

marissahuysentruyt

just curious about whether or not these should affect only the text area, or the text field as well.

packages/textfield/src/textfield-overrides.css

tools/styles/tokens-v2/system-theme-bridge.css

tools/styles/tokens/express/system-theme-bridge.css

rise-erpelding

These changes look great! I do have a question, is padding-block-end for textfield/textarea out of scope? I see that it hasn't changed so it's still using the component-bottom-to-text-100 tokens for all sizes. This isn't so noticeable for textarea, but since it also affects textfield, the bottom spacing is a bit large for the small size and a bit small for the XL size.

S:

XL:

marissahuysentruyt

I'm still a little curious if, beyond just the block-start padding, we could explore adjusting the component's block-end padding, too. If I reset the padding-block-end variables to their corresponding component-bottom-to-text-* properties, the text within the textfield/textarea looks more centered.

With only the padding-block-start values:

After adding padding-block-end values:

Would this change still be in scope for your ticket?

iuliauta · 2025-09-24T10:41:29Z

I'm still a little curious if, beyond just the block-start padding, we could explore adjusting the component's block-end padding, too. If I reset the padding-block-end variables to their corresponding component-bottom-to-text-* properties, the text within the textfield/textarea looks more centered.

With only the padding-block-start values:

After adding padding-block-end values:
Would this change still be in scope for your ticket?

Thank you for testing it out! You and @rise-erpelding are totally right, without these other tokens changed, the text will not be aligned. I pushed the changes, if you can verify the VRTs tests. Thank you!

rise-erpelding

Express looks good! I think you've just got a small typo on Spectrum 2. Could you also rebase/resolve conflicts when you get a chance, so we can see this with your other textfield changes that just merged? 🙂

tools/styles/tokens-v2/system-theme-bridge.css

rise-erpelding

This looks great! I have a small request regarding updating the changeset, but otherwise I think this is good to go!

.changeset/new-hounds-admire.md

tools/styles/tokens-v2/system-theme-bridge.css

…operly grouped

…ea-spectrum-two

…ss (#5734)" This reverts commit 5ff5c9b.

…ss (#5734)" (#5754) This reverts commit 5ff5c9b.

castastrophe · 2025-09-25T17:16:10Z

@iuliauta Sorry about this! I jumped the gun in getting this PR merged when we had other priorities that needed to come first. I'll work on getting this PR ready again and see it through once we're able to merge again. Thanks for your patience!

feat(sp-textarea): update border width and color for s2

5840ce7

iuliauta self-assigned this Sep 17, 2025

iuliauta added the Component: Textfield label Sep 17, 2025

iuliauta changed the title ~~feat(sp-textarea): update border width and color for s2~~ feat(sp-textfield): update border width and color for s2 Sep 17, 2025

feat(sp-textarea): removed border width change because it is addresse…

81bf4fd

…d in another PR

iuliauta added 2 commits September 17, 2025 16:49

feat(sp-textarea): use block start padding according to the theme (ex…

43e4389

…press and s2)

feat(sp-textfield): update input block start padding for s2 and expre…

285907b

…ss themes

iuliauta changed the title ~~feat(sp-textfield): update border width and color for s2~~ feat(sp-textfield): update border width and color for s2/Express Sep 18, 2025

iuliauta added 2 commits September 18, 2025 15:15

feat(sp-textfield): added changeset

e8b63e3

feat(sp-textfield): add the start padding values for spectrum 1

b4c8b89

iuliauta marked this pull request as ready for review September 18, 2025 12:55

iuliauta requested a review from a team as a code owner September 18, 2025 12:55

rise-erpelding self-requested a review September 22, 2025 18:49

rise-erpelding reviewed Sep 22, 2025

View reviewed changes

tools/styles/tokens-v2/system-theme-bridge.css Outdated Show resolved Hide resolved

marissahuysentruyt reviewed Sep 22, 2025

View reviewed changes

packages/textfield/src/textfield-overrides.css Show resolved Hide resolved

tools/styles/tokens-v2/system-theme-bridge.css Outdated Show resolved Hide resolved

tools/styles/tokens/express/system-theme-bridge.css Outdated Show resolved Hide resolved

iuliauta added the ready-for-review label Sep 23, 2025

feat(sp-textarea): use the older tokens for s2

44a45e1

rise-erpelding reviewed Sep 23, 2025

View reviewed changes

marissahuysentruyt reviewed Sep 23, 2025

View reviewed changes

marissahuysentruyt changed the title ~~feat(sp-textfield): update border width and color for s2/Express~~ fix(sp-textfield): update border width and color for s2/Express Sep 23, 2025

feat(sp-textarea): updated the spacing-block-end tokens as well

d3ca441

rise-erpelding reviewed Sep 24, 2025

View reviewed changes

tools/styles/tokens-v2/system-theme-bridge.css Outdated Show resolved Hide resolved

feat(sp-textarea): rebase and resolved conflicts and fixed typos for S2

bf40ed3

rise-erpelding approved these changes Sep 24, 2025

View reviewed changes

.changeset/new-hounds-admire.md Outdated Show resolved Hide resolved

castastrophe approved these changes Sep 24, 2025

View reviewed changes

tools/styles/tokens-v2/system-theme-bridge.css Outdated Show resolved Hide resolved

feat(sp-textarea): update changeset message and move a token to be pr…

3b737c7

…operly grouped

chore: merge remote-tracking branch 'origin' into iuta/improve-textar…

5bff4fc

…ea-spectrum-two

castastrophe force-pushed the iuta/improve-textarea-spectrum-two branch from 8b3c1f2 to 5bff4fc Compare September 25, 2025 14:54

chore: apply VRT hash update

685b162

castastrophe merged commit 5ff5c9b into main Sep 25, 2025
24 checks passed

castastrophe deleted the iuta/improve-textarea-spectrum-two branch September 25, 2025 15:25

pfulton added a commit that referenced this pull request Sep 25, 2025

Revert "fix(sp-textfield): update border width and color for s2/Expre…

2d93be4

…ss (#5734)" This reverts commit 5ff5c9b.

pfulton mentioned this pull request Sep 25, 2025

Revert "fix(sp-textfield): update border width and color for s2/Express" #5754

Merged

pfulton added a commit that referenced this pull request Sep 25, 2025

Revert "fix(sp-textfield): update border width and color for s2/Expre…

3f33e43

…ss (#5734)" (#5754) This reverts commit 5ff5c9b.

castastrophe restored the iuta/improve-textarea-spectrum-two branch September 25, 2025 17:06

castastrophe mentioned this pull request Sep 25, 2025

fix(sp-textfield): update border width and color for s2/Express #5756

Merged

12 tasks

fix(sp-textfield): update border width and color for s2/Express #5734

fix(sp-textfield): update border width and color for s2/Express #5734

Uh oh!

Conversation

iuliauta commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Uh oh!

changeset-bot bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

github-actions bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results

textfield permalink

test-basic

textfield permalink

test-basic

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

iuliauta commented Sep 24, 2025

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

castastrophe commented Sep 25, 2025

Uh oh!

Uh oh!

iuliauta commented Sep 17, 2025 •

edited

Loading

changeset-bot bot commented Sep 17, 2025 •

edited

Loading

github-actions bot commented Sep 17, 2025 •

edited

Loading

github-actions bot commented Sep 17, 2025 •

edited

Loading