Feature/3518 Pill shaped form controls by anna-lach · Pull Request #3594 · sl-design-system/components

anna-lach · 2026-08-12T13:52:20Z

Pill shaped form controls:

combobox
date-field
number-field
search-field
select
text-field
time-field

…, and time fields

…ped-form-controls

…e and number fields

…d-button and date-field

…e-field, search-field, and related components

…g-list

…ll shape support for various form controls, add 'AllLarge' story with large (rect) form controls

…ust date field styling

…ort and adjust button paddings

changeset-bot · 2026-08-12T13:52:24Z

🦋 Changeset detected

Latest commit: 0a713c2

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

This PR includes changesets to release 10 packages

Name	Type
@sl-design-system/tag	Minor
@sl-design-system/text-field	Minor
@sl-design-system/select	Minor
@sl-design-system/date-field	Minor
@sl-design-system/search-field	Minor
@sl-design-system/combobox	Minor
@sl-design-system/number-field	Minor
@sl-design-system/time-field	Minor
@sl-design-system/grid	Patch
@sl-design-system/angular	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

…ped-form-controls # Conflicts: # packages/components/tag/src/tag-list.scss

github-actions · 2026-08-13T05:40:20Z

🕸 Preview deploys

Storybook: https://storybook-3594.d3c5h2uor7jlkj.amplifyapp.com
Website: https://website-3594.d3c5h2uor7jlkj.amplifyapp.com

…ext field, select button, and time field

…ped-form-controls # Conflicts: # packages/components/combobox/src/combobox.ts

…nd time fields

… select fields

Copilot

Pull request overview

Adds pill-shaped and large variants across form controls and aligns supporting stories and styles.

Changes:

Adds shape and size APIs to relevant controls.
Updates control, button, tag, and responsive styling.
Expands Storybook coverage and propagation tests.

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`packages/components/time-field/src/time-field.ts`	Adds shape and size APIs.
`packages/components/time-field/src/time-field.stories.ts`	Adds variant controls and pill story.
`packages/components/time-field/src/time-field.scss`	Styles pill and large variants.
`packages/components/text-field/src/text-field.ts`	Adds the shape API.
`packages/components/text-field/src/text-field.stories.ts`	Adds pill controls and story.
`packages/components/text-field/src/text-field.scss`	Styles pill variants.
`packages/components/text-field/src/field-button.scss`	Revises embedded button styling.
`packages/components/tag/src/tag-list.scss`	Styles pill-shaped stacked tags.
`packages/components/select/src/select.ts`	Adds and propagates shape.
`packages/components/select/src/select.stories.ts`	Adds pill controls and story.
`packages/components/select/src/select.spec.ts`	Tests shape propagation.
`packages/components/select/src/select.scss`	Styles pill clear buttons.
`packages/components/select/src/select-button.ts`	Adds mirrored shape support.
`packages/components/select/src/select-button.scss`	Styles pill select buttons.
`packages/components/search-field/src/search-field.ts`	Exposes shape and size APIs.
`packages/components/search-field/src/search-field.stories.ts`	Adds pill and large stories.
`packages/components/search-field/src/search-field.scss`	Styles pill search fields.
`packages/components/number-field/src/number-field.stories.ts`	Adds pill controls and story.
`packages/components/number-field/src/number-field.scss`	Styles pill step-button layouts.
`packages/components/grid/src/stories/selection.stories.ts`	Reformats story markup.
`packages/components/form/src/form.stories.ts`	Adds number, large, and pill examples.
`packages/components/date-field/src/date-field.ts`	Adds shape and size APIs.
`packages/components/date-field/src/date-field.stories.ts`	Adds variant controls and pill story.
`packages/components/date-field/src/date-field.scss`	Styles pill and large variants.
`packages/components/combobox/src/single.stories.ts`	Adds single-select pill story.
`packages/components/combobox/src/multiple.stories.ts`	Adds multi-select pill story.
`packages/components/combobox/src/combobox.ts`	Adds and propagates shape.
`packages/components/combobox/src/combobox.stories.ts`	Expands pill examples.
`packages/components/combobox/src/combobox.spec.ts`	Tests shape propagation.
`packages/components/combobox/src/combobox.scss`	Styles pill combobox tags.
`packages/components/card/src/card.scss`	Removes redundant whitespace.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Copilot

Pull request overview

Copilot reviewed 31 out of 31 changed files in this pull request and generated no new comments.

Suppressed comments (2)

packages/components/number-field/src/number-field.scss:20

This selector matches every pill-shaped number field because an element is always either [size='lg'] or :not([size='lg']). It therefore removes the inherited right padding even when no step buttons exist (including the new Pill story), contradicting issue #3518's 175/250 right-padding requirement and leaving the control asymmetric. Limit the reset to pill fields that actually render step buttons.

:host([shape='pill']:is(:not([size='lg']), [size='lg'])) {
  padding-inline-end: 0;
}

packages/components/select/src/select-button.scss:48

The medium pill variant only increases the leading wrapper padding; the host still uses the base 150 end padding from line 22. Issue #3518 specifies 175 on both sides, so medium pill selects remain asymmetric. Add matching end padding here and update the clear-button inset in select.scss by the same amount so clearable selects stay aligned.

:host([shape='pill']) {
  border-radius: var(--sl-size-borderRadius-full);

  .wrapper {
    padding-inline-start: calc(var(--sl-size-175) - var(--sl-size-borderWidth-default));
  }
}

Copilot

Pull request overview

Copilot reviewed 39 out of 39 changed files in this pull request and generated no new comments.

Suppressed comments (3)

packages/components/text-field/src/text-field.ts:103

Only suffix field buttons are tracked, so a <sl-field-button slot="prefix"> keeps the host's normal leading padding even though the new prefix button styling gives it the control's outer corner radii and divider. The result is an inset, disconnected leading button, while suffix buttons are flush. Track prefix field-button presence in onPrefixSlotChange as well and add the mirrored host attribute/style that removes padding-inline-start.
packages/components/select/src/select-button.scss:48
The pill style updates only the leading padding; the medium select still keeps the rectangular --sl-size-150 trailing padding from the base rule. Issue #3518 requires pill selects to use --sl-size-175 on both sides, so the control is currently asymmetric. Add the corresponding padding-inline-end here (the more-specific large rule can continue to override it).

:host([shape='pill']) {
  border-radius: var(--sl-size-borderRadius-full);

  .wrapper {
    padding-inline-start: calc(var(--sl-size-175) - var(--sl-size-borderWidth-default));
  }

packages/components/number-field/src/number-field.scss:20

This selector matches every pill number field, including the documented/default case with no step buttons, and therefore overwrites the pill's trailing --sl-size-175/--sl-size-250 padding with zero. The new Pill story has no step-buttons, so it renders asymmetrically. Limit this reset to pill fields that actually render step buttons; button-free fields should retain the inherited TextField pill padding.

:host([shape='pill']:is(:not([size='lg']), [size='lg'])) {
  padding-inline-end: 0;
}

a11ymiko

Should lg size of rect number field with buttons on the edges have the same separators between buttons and form field as in Figma? Right now in storybook separators' height is shorter than form field height but in Figma they are the same height.

Storybook:

Figma:

a11ymiko

Should lg size of rect number field with buttons on the edges have the same hover effect on field buttons as in Figma? Right now in storybook hover makes less than whole button to change the background color but in Figma the whole button changes color on hover.

Storybook:

Figma:

a11ymiko

Maybe it's a good idea to add Pill shaped Date field, Number field, Search field, Select and Text field to All stories so they are more aligned with stories like Combobox > All where there are Pill shaped comboboxes?

…ped-form-controls

Copilot

Pull request overview

Copilot reviewed 38 out of 38 changed files in this pull request and generated no new comments.

Suppressed comments (3)

packages/components/text-field/src/field-button.scss:25

The new prefix edge styling cannot sit at the field edge: sl-text-field always retains its leading padding and gap, while only suffix field buttons trigger padding removal. A prefix field button therefore renders its rounded leading corners and separator inset inside the field. Track prefix-button presence and remove the leading padding/gap analogously to the suffix handling.
packages/components/select/src/select-button.scss:48
The medium pill variant only increases the leading padding; the trailing padding still comes from the rectangular default (space.150). Issue #3518 explicitly requires pill selects to use space.175 on both sides, so the chevron side remains too tight. Set the host's trailing padding in this rule as well.

:host([shape='pill']) {
  border-radius: var(--sl-size-borderRadius-full);

  .wrapper {
    padding-inline-start: calc(var(--sl-size-175) - var(--sl-size-borderWidth-default));
  }

packages/components/text-field/src/field-button.scss:80

This now applies only outline-color to the focused host, but the host has no outline width/style; the actual outline declaration remains on the slotted icon below. Consequently the component's custom focus indicator is no longer activated when the field button receives keyboard focus. Either establish the full outline on the host or keep changing the icon's outline color.

a11ymiko

In Safari field buttons have different color of focus indicator than input field does. This color has not sufficient contrast and should be changed to be the same as color of focus indicator of input field.

…eld button

DanielleRameau · 2026-08-18T14:27:55Z

In date field, number field and time field the border of the field button should be color.border.disabled in disabled state.

Current

Expected

See: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=21216-220911&t=x2UmZDqgXEUBqRPH-4

Diaan · 2026-08-18T14:36:29Z


+export const AllLarge: Story = {
+  args: {
+    fields: ({ disabled }) => html`


can you not make a function that prints the entire form, with only the settings you pass to it (so the size and shape)
That would make it a lot easier to maintain (and read 😁 )

Diaan · 2026-08-18T14:38:24Z

+      expect(el).to.have.attribute('shape', 'pill');
+      expect(el.renderRoot.querySelector('sl-text-field')).to.have.attribute('shape', 'pill');
+    });
+


why have you added this to the tests here but not for some other components?
(i'm not sure this test add anything by the way; you're basically testing lit functionality; whether the 'reflects' property works)

Diaan · 2026-08-18T14:42:01Z

+        shape="pill"
+        size="lg"
+        step-buttons="edges"
+        value="100"></sl-number-field>


do we really need so many variants of the pill number field? what could be different between the default and the disabled one that isn't already tested in the rectangular variant?

Diaan · 2026-08-18T14:43:34Z

+        disabled
+        shape="pill"
+        size="lg"
+        value="Value"></sl-search-field>


same here, do we need all of these?

Diaan · 2026-08-18T15:05:50Z

+          <sl-option>Value 1</sl-option>
+          <sl-option>Value 2</sl-option>
+          <sl-option>Value 3</sl-option>
+        </sl-select>


same, so we need so many?

Diaan · 2026-08-18T15:06:36Z

+          disabled
+          shape="pill"
+          size="lg"
+          value="Value"></sl-text-field>


Diaan · 2026-08-18T15:14:14Z

+            <sl-time-field size="lg"></sl-time-field>
+          </sl-form-field>
+        </div>
+      </section>


This is a bit of a jumble; hard to see the logic in this page; maybe make groups?

Also "Min/Max" and "Custom steps" don't need to be here; they look exactly the same as the default. This all page is basically only for chromatic; you want all variants to be visible, but not more than necessary.

anna-lach added 9 commits July 31, 2026 15:42

feat(form-controls): add 'pill' shape property for text, date, number…

3142684

…, and time fields

Merge remote-tracking branch 'origin/main' into feature/3518-pill-sha…

959e352

…ped-form-controls

feat(form-controls): enhance hover effects and adjust padding for dat…

ff9e9a7

…e and number fields

feat(form-controls): add 'shape' property for select, changes to fiel…

0b6dd58

…d-button and date-field

feat(form-controls): implement 'pill' shape support for combobox, dat…

a56d221

…e-field, search-field, and related components

feat(form-controls): 'pill' shape styling changes for combobox and ta…

59df8d8

…g-list

feat(form-controls): add 'AllPill' and 'AllPillLarge' stories with pi…

6d55255

…ll shape support for various form controls, add 'AllLarge' story with large (rect) form controls

feat(form-controls): add number field with pill shape support and adj…

7c20b3f

…ust date field styling

feat(form-controls): enhance number field styling for pill shape supp…

e396c77

…ort and adjust button paddings

anna-lach linked an issue Aug 12, 2026 that may be closed by this pull request

Pill shaped form controls #3518

Open

15 tasks

Merge remote-tracking branch 'origin/main' into feature/3518-pill-sha…

f138e18

…ped-form-controls # Conflicts: # packages/components/tag/src/tag-list.scss

anna-lach added 4 commits August 13, 2026 15:39

feat(form-controls): pill shape styling for combobox, number field, t…

7383ed9

…ext field, select button, and time field

Merge remote-tracking branch 'origin/main' into feature/3518-pill-sha…

1b4ec8d

…ped-form-controls # Conflicts: # packages/components/combobox/src/combobox.ts

feat(form-controls): update padding for pill shape in date, number, a…

cbfe8c8

…nd time fields

feat(form-controls): pill shape styling changes for date, number, and…

cf3e4bf

… select fields

anna-lach requested a balanced review from Copilot August 14, 2026 08:47

Copilot started reviewing on behalf of anna-lach August 14, 2026 08:47 View session

Copilot AI reviewed Aug 14, 2026

View reviewed changes

Changes after Copilot review

0ed2afc

anna-lach requested a balanced review from Copilot August 14, 2026 09:37

Copilot started reviewing on behalf of anna-lach August 14, 2026 09:37 View session

Copilot AI reviewed Aug 14, 2026

View reviewed changes

Changeset files

86b3643

anna-lach requested a balanced review from Copilot August 14, 2026 10:12

Copilot started reviewing on behalf of anna-lach August 14, 2026 10:13 View session

Copilot AI reviewed Aug 14, 2026

View reviewed changes

Some changeset changes and description for shape in text-field.

feba140

a11ymiko reviewed Aug 17, 2026

View reviewed changes

anna-lach added 3 commits August 17, 2026 12:58

Merge remote-tracking branch 'origin/main' into feature/3518-pill-sha…

ecb5cd6

…ped-form-controls

Some changes after testing

a6ab930

More changes after testing

65d1632

anna-lach requested a balanced review from Copilot August 18, 2026 08:37

Copilot started reviewing on behalf of anna-lach August 18, 2026 08:37 View session

Copilot AI reviewed Aug 18, 2026

View reviewed changes

More changes after testing

92511fd

a11ymiko reviewed Aug 18, 2026

View reviewed changes

Update focus-visible outline style for better accessibility of the fi…

0a713c2

…eld button

a11ymiko marked this pull request as ready for review August 18, 2026 13:51

a11ymiko requested review from Diaan, jpzwarte and michal-sanoma as code owners August 18, 2026 13:51

Diaan reviewed Aug 18, 2026

View reviewed changes

Uh oh!

Conversation

anna-lach commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕸 Preview deploys

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

a11ymiko left a comment

Choose a reason for hiding this comment

Uh oh!

a11ymiko left a comment

Choose a reason for hiding this comment

Uh oh!

a11ymiko left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

a11ymiko left a comment

Choose a reason for hiding this comment

Uh oh!

DanielleRameau commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

anna-lach commented Aug 12, 2026 •

edited

Loading

changeset-bot Bot commented Aug 12, 2026 •

edited

Loading

github-actions Bot commented Aug 13, 2026 •

edited

Loading

DanielleRameau commented Aug 18, 2026 •

edited

Loading