Skip to content

[Bug]: CSS of Number Field not correct - creating large right paddings #5412

Closed
@spdev3000

Description

@spdev3000

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

Number Field

Expected behavior

Number Field should be smaller by default to match previous version, also it should not push slider track to the left, if used in a editable slider component.

Actual behavior

Number Field is defined as always 240px wide via

--spectrum-textfield-width: 240px;

while the old definition was

    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
    --swc-number-field-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
    --mod-infield-button-border-width: var(--unset-value-resets-inheritance);
    --spectrum-stepper-width: var(--swc-number-field-width);

This pushes the Number Field to the left and creating unnecessary right "padding". See screens:

Screenshots

Number Field as standalone:

Image

Number Field in editable slider:

Image

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

Check https://opensource.adobe.com/spectrum-web-components/components/number-field/ and https://opensource.adobe.com/spectrum-web-components/components/slider/#editable

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 4

Logs taken while reproducing problem

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions