Skip to content

chore: update field components css dependencies #5085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rubencarvalho merged 11 commits into from
Mar 4, 2025
Merged

chore: update field components css dependencies #5085

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
019a2e9
chore: update fields css dependencies
rubencarvalho Feb 11, 2025
b38f57d
chore: updated textfield sizes from config
Feb 12, 2025
a2577fd
chore: cleaned up duplicate size css
Feb 12, 2025
512955c
chore: added specificity in search css
Feb 14, 2025
5e4ba3f
chore: updated yarn lock
Feb 14, 2025
38e3c61
chore: updated config to exclude overrides for size s,l,xl
Feb 14, 2025
4873785
chore: empty to force yarn lock to update
caseyisonit Feb 21, 2025
a9a30ea
chore: hard-code border radius and search-edge-to-visual in search
rubencarvalho Mar 3, 2025
2307347
Merge branch 'main' into ruben/bump-field-components-css
rubencarvalho Mar 4, 2025
b2610a0
Merge branch 'main' into ruben/bump-field-components-css
rubencarvalho Mar 4, 2025
9712be1
chore: update golden images hash
rubencarvalho Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/number-field/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
},
"devDependencies": {
"@formatjs/intl-numberformat": "^8.3.5",
"@spectrum-css/stepper": "7.0.0-s2-foundations.18"
"@spectrum-css/stepper": "7.0.0-s2-foundations.19"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
66 changes: 10 additions & 56 deletions packages/number-field/src/number-field-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ governing permissions and limitations under the License.
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
--spectrum-stepper-border-width: var(--system-stepper-border-width);
--spectrum-stepper-border-color: var(--system-stepper-border-color);
--spectrum-stepper-border-color-default: var(
--system-stepper-border-color-default
);
--spectrum-stepper-border-color-hover: var(
--system-stepper-border-color-hover
);
Expand All @@ -26,13 +28,6 @@ governing permissions and limitations under the License.
--spectrum-stepper-border-color-keyboard-focus: var(
--system-stepper-border-color-keyboard-focus
);
--spectrum-stepper-border-radius: var(--system-stepper-border-radius);
--spectrum-stepper-min-width-multiplier: var(
--system-stepper-min-width-multiplier
);
--spectrum-stepper-animation-duration: var(
--system-stepper-animation-duration
);
--spectrum-stepper-buttons-border-style: var(
--system-stepper-buttons-border-style
);
Expand All @@ -54,25 +49,12 @@ governing permissions and limitations under the License.
--spectrum-stepper-buttons-border-color-keyboard-focus: var(
--system-stepper-buttons-border-color-keyboard-focus
);
--spectrum-stepper-button-padding: var(--system-stepper-button-padding);
--spectrum-stepper-button-border-radius-reset: var(
--system-stepper-button-border-radius-reset
);
--spectrum-stepper-button-border-width: var(
--system-stepper-button-border-width
);
--spectrum-stepper-button-background-color-focus: var(
--system-stepper-button-background-color-focus
);
--spectrum-stepper-button-background-color-keyboard-focus: var(
--system-stepper-button-background-color-keyboard-focus
);
--spectrum-stepper-border-color-invalid: var(
--system-stepper-border-color-invalid
);
--spectrum-stepper-border-color-hover-invalid: var(
--system-stepper-border-color-hover-invalid
);
--spectrum-stepper-border-color-focus-invalid: var(
--system-stepper-border-color-focus-invalid
);
Expand All @@ -82,47 +64,19 @@ governing permissions and limitations under the License.
--spectrum-stepper-border-color-keyboard-focus-invalid: var(
--system-stepper-border-color-keyboard-focus-invalid
);
--spectrum-stepper-focus-indicator-width: var(
--system-stepper-focus-indicator-width
);
--spectrum-stepper-focus-indicator-gap: var(
--system-stepper-focus-indicator-gap
);
--spectrum-stepper-focus-indicator-color: var(
--system-stepper-focus-indicator-color
);
--spectrum-stepper-button-border-color-quiet: var(
--system-stepper-button-border-color-quiet
);
--spectrum-stepper-button-border-color-disabled: var(
--system-stepper-button-border-color-disabled
);
--spectrum-stepper-button-border-width-disabled: var(
--system-stepper-button-border-width-disabled
);
--spectrum-stepper-buttons-background-color-disabled: var(
--system-stepper-buttons-background-color-disabled
);
--spectrum-stepper-button-width: var(--system-stepper-button-width);
--spectrum-stepper-height: var(--system-stepper-height);
}

:host([size='s']) #textfield {
--spectrum-stepper-button-width: var(--system-stepper-size-s-button-width);
--spectrum-stepper-height: var(--system-stepper-size-s-height);
}

:host([size='m']) #textfield {
--spectrum-stepper-button-width: var(--system-stepper-size-m-button-width);
--spectrum-stepper-height: var(--system-stepper-size-m-height);
}

:host([size='l']) #textfield {
--spectrum-stepper-button-width: var(--system-stepper-size-l-button-width);
--spectrum-stepper-height: var(--system-stepper-size-l-height);
}

:host([size='xl']) #textfield {
--spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width);
--spectrum-stepper-height: var(--system-stepper-size-xl-height);
:host([quiet]) #textfield {
--spectrum-stepper-buttons-border-style: var(
--system-stepper-quiet-buttons-border-style
);
--spectrum-stepper-button-edge-to-fill: var(
--system-stepper-quiet-button-edge-to-fill
);
}
37 changes: 0 additions & 37 deletions packages/number-field/src/number-field.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,43 +13,6 @@ governing permissions and limitations under the License.
@import url('./spectrum-number-field.css');
@import url('./number-field-overrides.css');

:host {
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);
}

:host([size='s']) {
--spectrum-stepper-width: calc(var(--swc-number-field-width) / 5 * 4);
}

:host([size='l']) {
--spectrum-stepper-width: calc(var(--swc-number-field-width) * 1.25);
}

:host([size='xl']) {
--spectrum-stepper-width: calc(var(--swc-number-field-width) * 1.25 * 1.25);
}

#textfield {
inline-size: 100%;
}

.input {
font-variant-numeric: tabular-nums;
Expand Down
Loading
Loading