From 3a28b43201f0346e46b3429e489ad947d1a4df8f Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:18:49 -0400 Subject: [PATCH 01/24] chore(numberfield): update package.json rootClass to NumberField --- components/stepper/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/stepper/package.json b/components/stepper/package.json index a9d6141eda1..7db6cdaeeb2 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -70,7 +70,7 @@ "spectrum": [ { "guidelines": "https://spectrum-contributions.corp.adobe.com/page/number-field-beta", - "rootClass": "spectrum-Stepper" + "rootClass": "spectrum-NumberField" } ] } From 6c8741755b1b26af31b1912ef2086ab7ad5f4ab2 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:21:32 -0400 Subject: [PATCH 02/24] docs(numberfield): update template.js - updates rootClass to NumberField - imports new nested components - use inline infield buttons instead of separate stacked infield buttons - adds support for side label - updates templates for docs page --- components/stepper/stories/template.js | 160 +++++++++++++------------ 1 file changed, 82 insertions(+), 78 deletions(-) diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fb14155af87..fc14b5e9e72 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -1,6 +1,8 @@ +import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js"; -import { Container, getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -10,96 +12,114 @@ import { when } from "lit/directives/when.js"; import "../index.css"; export const Template = ({ - rootClass = "spectrum-Stepper", + rootClass = "spectrum-NumberField", size = "m", - isQuiet = false, + displayLabel = true, + label, + labelPosition = "top", isFocused = false, isHovered = false, isKeyboardFocused = false, isInvalid = false, isDisabled = false, hideStepper = false, - id = getRandomId("stepper"), + helpText, + value = "0", + id = getRandomId("numberfield"), customClasses = [], customStyles = {}, } = {}, context = {}) => { - let iconSize = "75"; - switch (size) { - case "s": - iconSize = "50"; - break; - case "l": - iconSize = "100"; - break; - case "xl": - iconSize = "200"; - break; - default: - iconSize = "75"; - } - + const { updateArgs } = context; return html`
({ ...a, [c]: true }), {}), })} + @keyup=${function(e) { + // Tab key was used. + if (e.keyCode === 9) { + // The element that was focused when the key was released is this textfield / input. + if (e.target == this || e.target?.parentNode == this) { + updateArgs?.({ isKeyboardFocused: true }); + // Manually add class since updateArgs doesn't always work on the Docs page. + this.classList.add("is-keyboardFocused"); + } + } + }} + @focusout=${function() { + updateArgs?.({ + isFocused: false, + isKeyboardFocused: false, + }); + // Manually remove class since updateArgs doesn't always work on the Docs page. + this.classList.remove("is-keyboardFocused"); + }} id=${ifDefined(id)} style=${styleMap({ - "--mod-actionbutton-icon-size": "10px", ...customStyles })} > - ${Textfield({ - size, - type: "number", - min: "-2", - max: "2", - step: "0.5", - value: "0", - isDisabled, - isQuiet, - id: id ? `${id}-input` : undefined, - customClasses: [`${rootClass}-textfield`], - customInputClasses: [`${rootClass}-input`], - }, context)} - ${when(!hideStepper, () => html` - - ${InfieldButton({ - size, - customClasses: [`${rootClass}-button`], - iconName: `ChevronUp${iconSize}`, - iconSet: "ui", - isDisabled, - isQuiet, - position: "top", - tabIndex: "-1" - }, context)} - ${InfieldButton({ + ${when(displayLabel && label, () => html` + ${FieldLabel({ + size, + label: label, + labelPosition: labelPosition, + isDisabled, + customClasses: [`${rootClass}-fieldLabel`], + }, context)} + `)} +
+ ${Textfield({ + size, + type: "number", + min: "-2", + max: "2", + step: "0.5", + value, + isInvalid, + isFocused, + isDisabled, + displayLabel: false, + id: id ? `${id}-input` : undefined, + customClasses: [`${rootClass}-textfield`], + customInputClasses: [`${rootClass}-input`], + }, context)} + ${when(!hideStepper, () => html` + + ${InfieldButton({ + isInline: true, + size, + customClasses: [`${rootClass}-button`], + isDisabled, + }, context)} + + `)} +
+ ${when(helpText, () => html` +
+ ${HelpText({ size, - customClasses: [`${rootClass}-button`], - iconName: `ChevronDown${iconSize}`, - iconSet: "ui", + text: helpText, + variant: isInvalid ? "negative" : undefined, + hideIcon: true, isDisabled, - isQuiet, - position: "bottom", - tabIndex: "-1" }, context)} - +
`)}
`; }; -/* Shows all of the stepper states in one grouping. */ +/* Shows all of the number field states in one grouping. */ export const AllDefaultVariantsGroup = (args, context) => Container({ withBorder: false, content: html` @@ -111,14 +131,6 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ heading: "Default", content: Template(args, context) }, context)} - ${Container({ - withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Invalid", - content: Template({...args, isInvalid: true}, context) - }, context)} ${Container({ withBorder: false, containerStyles: { @@ -140,8 +152,8 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ containerStyles: { "gap": "8px", }, - heading: "Invalid, focused", - content: Template({...args, isInvalid: true, isFocused: true}, context) + heading: "Focused, hovered", + content: Template({...args, isHovered: true, isFocused: true}, context) }, context)} ${Container({ withBorder: false, @@ -151,18 +163,10 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ heading: "Keyboard-focused", content: Template({...args, isKeyboardFocused: true}, context) }, context)} - ${Container({ - withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Invalid, keyboard-focused", - content: Template({...args, isInvalid: true, isKeyboardFocused: true}, context) - }, context)} ` }, context); -/* Shows the disabled variants of the default and quiet stories one grouping. */ +/* Shows the disabled states of the default and hidden stepper stories one grouping. */ export const DisabledVariantsGroup = (args, context) => Container({ withBorder: false, content: html` @@ -179,8 +183,8 @@ export const DisabledVariantsGroup = (args, context) => Container({ containerStyles: { "gap": "8px", }, - heading: "Quiet", - content: Template({...args, isQuiet: true}, context) + heading: "Hidden stepper buttons", + content: Template({...args, hideStepper: true}, context) }, context)} ` }, context); From 010e080441cc2952d6b85f0d60956a33f4d48864 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:24:55 -0400 Subject: [PATCH 03/24] docs(numberfield): update stories for docs page - updates documentation to use number field language instead of stepper - imports new numberfield templates - adds support for displaying the field label, label position, help text and label text - adds side label, invalid states stories - updates some sentence-case display names for stories - removes quiet variant stories - updates display title to Number field --- components/stepper/stories/stepper.stories.js | 81 +++++++++++++------ 1 file changed, 55 insertions(+), 26 deletions(-) diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 8775574a342..04cb210130f 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,22 +1,22 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isKeyboardFocused, size } from "@spectrum-css/preview/types"; +import { default as TextfieldStories } from "@spectrum-css/textfield/stories/textfield.stories.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { StepperGroup } from "./stepper.test.js"; +import { NumberFieldGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js"; /** - * A stepper can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value. + * A number field can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value. */ export default { - title: "Stepper", + title: "Number field", component: "Stepper", argTypes: { size: size(["s", "m", "l", "xl"]), - isQuiet, hideStepper: { - name: "Hide stepper", + name: "Hide stepper buttons", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -25,21 +25,39 @@ export default { control: "boolean", }, isDisabled, - isInvalid, + isInvalid: { + ...TextfieldStories?.argTypes?.isInvalid ?? {}, + }, isFocused, isHovered, isKeyboardFocused, + displayLabel: { + ...TextfieldStories?.argTypes?.displayLabel ?? {}, + }, + label: { + ...TextfieldStories?.argTypes?.labelText ?? {}, + }, + labelPosition: { + ...TextfieldStories?.argTypes?.labelPosition ?? {}, + }, + helpText: { + ...TextfieldStories?.argTypes?.helpText, + }, + value: { table: { disable: true, } }, }, args: { - rootClass: "spectrum-Stepper", + rootClass: "spectrum-NumberField", size: "m", - isQuiet: false, isFocused: false, isHovered: false, isKeyboardFocused: false, isInvalid: false, isDisabled: false, - hideStepper: false + hideStepper: false, + displayLabel: true, + label: "Field label", + labelPosition: "top", + helpText: "", }, parameters: { design: { @@ -51,7 +69,7 @@ export default { }, }; -export const Default = StepperGroup.bind({}); +export const Default = NumberFieldGroup.bind({}); Default.args = {}; Default.tags = ["!autodocs"]; @@ -68,7 +86,9 @@ Sizing.parameters = { }; /** - * Steppers come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. + * Number fields come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. + * + * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a secondary option to be positioned on the side of the field. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is to long for the available space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. */ export const DefaultStates = AllDefaultVariantsGroup.bind({}); DefaultStates.args = {}; @@ -78,6 +98,26 @@ DefaultStates.parameters = { }; DefaultStates.storyName = "Default"; +export const SideLabel = AllDefaultVariantsGroup.bind({}); +SideLabel.args = { + labelPosition: "side", +}; +SideLabel.tags = ["!dev"]; +SideLabel.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const InvalidStates = AllDefaultVariantsGroup.bind({}); +InvalidStates.args = { + isInvalid: true, + helpText: "Help text is here to assist", +}; +InvalidStates.tags = ["!dev"]; +InvalidStates.parameters = { + chromatic: { disableSnapshot: true }, +}; +InvalidStates.storyName = "Invalid"; + export const Disabled = DisabledVariantsGroup.bind({}); Disabled.args = { isDisabled: true, @@ -88,19 +128,8 @@ Disabled.parameters = { }; Disabled.storyName = "Disabled"; -export const QuietStates = AllDefaultVariantsGroup.bind({}); -QuietStates.args = { - isQuiet: true, -}; -QuietStates.tags = ["!dev"]; -QuietStates.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietStates.storyName = "Quiet"; - - // ********* VRT ONLY ********* // -export const WithForcedColors = StepperGroup.bind({}); +export const WithForcedColors = NumberFieldGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { @@ -111,7 +140,7 @@ WithForcedColors.parameters = { // ********* DOCS ONLY ********* // /** - * Optional stepper buttons would appear to the side of the field. Regardless of if a stepper has these buttons or not, is should always accommodate arrow key shortcuts to increase or decrease the number. + * Number fields typically have stepper buttons visible by default, but implementations have the option to hide them. The component should always accommodate arrow key shortcuts to increase or decrease the value, regardless of whether its stepper buttons are visible. */ export const HideStepper = Template.bind({}); HideStepper.tags = ["!dev"]; @@ -123,4 +152,4 @@ HideStepper.parameters = { disableSnapshot: true, }, }; -HideStepper.storyName = "Hide stepper"; +HideStepper.storyName = "Hide stepper buttons"; From 24bd4a2c1fc13cbbeedc8e8c3cdb97e393e645f1 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:28:10 -0400 Subject: [PATCH 04/24] docs(numberfield): adds more test coverage - updates any stepper language to number field - adds test coverage for hidden stepper, side label, help text, invalid, minimum width, and truncation - adds test case for focus + hover, keyboardFocus + hover, disabled+ keyboardFocus --- components/stepper/stories/stepper.test.js | 69 +++++++++++++++++++--- 1 file changed, 61 insertions(+), 8 deletions(-) diff --git a/components/stepper/stories/stepper.test.js b/components/stepper/stories/stepper.test.js index 60246d2133f..40f0de52b0e 100644 --- a/components/stepper/stories/stepper.test.js +++ b/components/stepper/stories/stepper.test.js @@ -1,31 +1,69 @@ import { Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; -export const StepperGroup = Variants({ +export const NumberFieldGroup = Variants({ Template, testData: [ { testHeading: "Default", }, { - testHeading: "Quiet", - isQuiet: true, + testHeading: "Hidden stepper", + hideStepper: true, + }, + { + testHeading: "With help text", + helpText: "Help text is here to assist", + }, + { + testHeading: "Side label", + labelPosition: "side", + }, + { + testHeading: "Side label with help text", + labelPosition: "side", + helpText: "Help text is here to assist", }, { testHeading: "Invalid", isInvalid: true, + helpText: "Help text is here to assist", }, { - testHeading: "Quiet + invalid", - isQuiet: true, + testHeading: "Invalid hidden stepper", isInvalid: true, + hideStepper: true, + helpText: "Help text is here to assist", + }, + { + testHeading: "Minimum width (100px)", + wrapperStyles: { + "inline-size": "100px", + }, }, - ], - stateData: [ { - testHeading: "Hide stepper", + testHeading: "Default + truncation", + withStates: false, + value: "1234567890123456789012345678901", + }, + { + testHeading: "Hidden Stepper + truncation", + withStates: false, hideStepper: true, + value: "1234567890123456789012345678901", }, + { + testHeading: "Side label + truncation", + withStates: false, + labelPosition: "side", + value: "1234567890123456789012345678901", + }, + // { + // testHeading: "Internationalization (Thai)", + // value: "๐๑๒๓๔๕๖๗๘๙๑๐", + // } + ], + stateData: [ { testHeading: "Disabled", isDisabled: true, @@ -38,10 +76,20 @@ export const StepperGroup = Variants({ testHeading: "Focused", isFocused: true, }, + { + testHeading: "Focused + hovered", + isFocused: true, + isHovered: true, + }, { testHeading: "Keyboard-focused", isKeyboardFocused: true, }, + { + testHeading: "Keyboard-focused + hovered", + isKeyboardFocused: true, + isHovered: true, + }, { testHeading: "Disabled + hovered", isDisabled: true, @@ -57,5 +105,10 @@ export const StepperGroup = Variants({ isDisabled: true, isKeyboardFocused: true, }, + { + testHeading: "Disabled + keyboard-focused", + isDisabled: true, + isKeyboardFocused: true, + }, ] }); From eb1e689f037abfb9d11360fbf17f42c3e4d9fe79 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:54:24 -0400 Subject: [PATCH 05/24] feat(numberfield): s2 style migration - new tokens used - cleans up/standardizes mod usage for textfield - cleans up/standardizes selectors so they are consistent across states/ variants - updates all custom properties to use numberfield prefix instead of stepper - adds style definitions for new features including hidden stepper, side label, help text, invalid, minimum width --- components/stepper/index.css | 649 +++++++++++++++++++---------------- 1 file changed, 351 insertions(+), 298 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index bfc3ca2bfc4..f2082ea8352 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,378 +12,431 @@ */ /* --- Component-level definitions --- */ -.spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-border-color-default: var(--spectrum-gray-500); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); - - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-buttons-border-width: 0; - --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-100); - --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - - /** Disabled **/ - --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - - --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); - --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); - - --spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); - --spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))); - - --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); +.spectrum-NumberField { + /* Border */ + --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-medium)); + --spectrum-numberfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-border-width-200)); + --spectrum-numberfield-border-color-default: var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300))); + --spectrum-numberfield-border-color-hover: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400))); + --spectrum-numberfield-border-color-focus: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800))); + --spectrum-numberfield-border-color-keyboard-focus: var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))); + --spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900))); + --spectrum-numberfield-border-color-disabled: var(--highcontrast-numberfield-border-color-disabled, var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))); + + /* Invalid border */ + --spectrum-numberfield-border-color-invalid-default: var(--highcontrast-numberfield-border-color-invalid-default, var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))); + --spectrum-numberfield-border-color-invalid-hover: var(--highcontrast-numberfield-border-color-invalid-hover, var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))); + --spectrum-numberfield-border-color-invalid-focus: var(--highcontrast-numberfield-border-color-invalid-focus, var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))); + --spectrum-numberfield-border-color-invalid-focus-hover: var(--highcontrast-numberfield-border-color-invalid-focus-hover, var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))); + --spectrum-numberfield-border-color-invalid-keyboard-focus: var(--highcontrast-numberfield-border-color-invalid-keyboard-focus, var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))); + + /* Text color */ + --spectrum-numberfield-text-color: var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default)); + --spectrum-numberfield-text-color-hover: var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-numberfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus)); + --spectrum-numberfield-text-color-focus-hover: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover)); + --spectrum-numberfield-text-color-keyboard-focus: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus)); + --spectrum-numberfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color)); + + /* Background */ + --spectrum-numberfield-background-color: var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25))); + --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25)); + + /* Font */ + --spectrum-numberfield-font-family: var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack)); + --spectrum-numberfield-font-weight: var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight)); + --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-100)); + --spectrum-numberfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-default-font-style)); + --spectrum-numberfield-line-height: var(--mod-numberfield-line-height, var(--spectrum-line-height-100)); + + /* Focus indicator */ + --spectrum-numberfield-focus-indicator-width: var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); + --spectrum-numberfield-focus-indicator-gap: var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-numberfield-focus-indicator-color: var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))); + + /* Dimensions */ + --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-100)); + --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-medium)); + --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-medium)); + --spectrum-numberfield-hidden-stepper-min-inline-size: calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size)); + + /* Icons */ + --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-100); + + /* Spacing */ + --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-100); + --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-numberfield-spacing-field-to-helptext: var(--spectrum-help-text-to-component); + --spectrum-numberfield-spacing-label-to-field: var(--spectrum-field-label-to-component); + --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-medium); + --spectrum-numberfield-spacing-side-label-to-field: var(--spectrum-spacing-200); + + /* Button size and offset (to properly position the validation icons/padding) */ + --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-100)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-medium))) * 2); + --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); + + --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-100); + + &.spectrum-NumberField--sizeS { + --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-small)); + --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-75)); + --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-small)); + --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-small)); + --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-75)); + --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-75); + --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-small); + + --spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-75)) * 2); + --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small)); + + --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-75); } - &.spectrum-Stepper--sizeS { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75)); + &.spectrum-NumberField--sizeL { + --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-large)); + --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-200)); + --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-large)); + --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-large)); + --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-200)); + --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-200); + --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-large); + + --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-large))) * 2); + --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large)); + + --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-200); } - &.spectrum-Stepper--sizeL { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200)); + &.spectrum-NumberField--sizeXL { + --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); + --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-300)); + --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large)); + --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large)); + --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-300)); + --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-300); + --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-extra-large); + + --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-extra-large))) * 2); + --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large)); + + --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden: var(--spectrum-component-top-to-workflow-icon-300); } - &.spectrum-Stepper--sizeXL { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-extra-large)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-300)); - } - - &.is-disabled { - --spectrum-stepper-buttons-border-width: var(--spectrum-stepper-button-border-width-disabled); - --spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled); + &:not(.is-disabled).is-hover, + &:not(.is-disabled):hover { + --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))); } &.is-invalid { - --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); - --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); - } - - &:not(.is-disabled):hover { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + --mod-numberfield-border-color: var(--mod-numberfield-border-color-invalid, var(--spectrum-negative-border-color-default)); + --mod-numberfield-border-color-hover: var(--mod-numberfield-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); + --mod-numberfield-border-color-focus: var(--mod-numberfield-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); + --mod-numberfield-border-color-focus-hover: var(--mod-numberfield-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); + --mod-numberfield-border-color-keyboard-focus: var(--mod-numberfield-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); } &:not(.is-disabled).is-focused, - &:not(.is-disabled):focus { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); - --mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); + &:not(.is-disabled):focus, + &:not(.is-disabled):focus-within { + --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus))); + &.is-hover, &:hover { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - --mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); } } - &:not(.is-disabled).is-keyboardFocused { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-keyboard-focus))); - } - - &.spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - - --mod-stepper-buttons-background-color: transparent; - - /* quiet hover */ - &:not(.is-disabled) { - &:hover { - --mod-stepper-buttons-background-color: transparent; - } - - &.is-keyboardFocused { - /* quiet focus indicator only on bottom border */ - --mod-stepper-focus-indicator-visibility: visible; - } - } + &:not(.is-disabled).is-keyboardFocused, + &:not(.is-disabled):focus-visible, + &:not(.is-disabled):focus-within { + --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))); - &.is-invalid { - --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); + &.is-hover, + &:hover { + --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); } } -} - -/* --- High contrast settings --- */ -@media (forced-colors: active) { - .spectrum-Stepper { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-focus-indicator-color: Highlight; - &.is-invalid { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - } - - &.is-disabled { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - } - - &:not(.is-disabled) { - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover); - } + &.is-disabled { + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); - &.is-focused, - &:focus { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus); + /* --mod-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); */ + --mod-numberfield-background-color: var(--spectrum-gray-25); + } - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover); - } - } + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-numberfield-line-height: var(--spectrum-cjk-line-height-100); + } - &.is-keyboardFocused, - &:focus-visible { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus); - } - } + /* @passthrough start -- MODS for sub components */ + /* nested textfield */ + --mod-textfield-corner-radius: var(--mod-numberfield-border-radius, var(--spectrum-numberfield-border-radius)); + --mod-textfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)); + --mod-textfield-border-color: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-default)); + --mod-textfield-border-color-hover: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-hover)); + --mod-textfield-border-color-focus: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-focus)); + --mod-textfield-border-color-keyboard-focus: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-keyboard-focus)); + --mod-textfield-border-color-focus-hover: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-focus-hover)); + --mod-textfield-border-color-disabled: var(--spectrum-numberfield-border-color-disabled); + --mod-textfield-border-color-invalid-default: var(--mod-numberfield-border-color-invalid-default, var(--spectrum-numberfield-border-color-invalid-default)); + --mod-textfield-border-color-invalid-hover: var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-numberfield-border-color-invalid-hover)); + --mod-textfield-border-color-invalid-focus: var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-numberfield-border-color-invalid-focus)); + --mod-textfield-border-color-invalid-focus-hover: var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-numberfield-border-color-invalid-focus-hover)); + --mod-textfield-spacing-block-start: var(--mod-numberfield-spacing-block-start-edge-to-text, var(--spectrum-numberfield-spacing-block-start-edge-to-text)); + --mod-textfield-spacing-block-end: var(--mod-numberfield-spacing-block-end-edge-to-text, var(--spectrum-numberfield-spacing-block-end-edge-to-text)); + --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); + --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper) - var(--spectrum-numberfield-border-width)); + --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); + --mod-textfield-width: var(--mod-numberfield-inline-size, var(--spectrum-numberfield-inline-size)); + --mod-textfield-min-width: var(--mod-numberfield-min-inline-size, var(--spectrum-numberfield-min-inline-size)); + --mod-textfield-height: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)); + --mod-textfield-icon-spacing-inline-start-invalid: var(--mod-numberfield-spacing-min-inline-end-value-to-icon, var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon)); + --mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); + --mod-textfield-text-color-default: var(--mod-numberfield-text-color-invalid, var(--spectrum-numberfield-text-color)); + --mod-textfield-text-color-hover: var(--mod-numberfield-text-color-hover, var(--spectrum-numberfield-text-color-hover)); + --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-numberfield-text-color-focus)); + --mod-textfield-text-color-focus-hover: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-numberfield-text-color-focus-hover)); + --mod-textfield-text-color-keyboard-focus: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-numberfield-text-color-keyboard-focus)); + --mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled)); + --mod-textfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-numberfield-background-color-disabled)); + --mod-textfield-font-family: var(--mod-numberfield-font-family, var(--spectrum-numberfield-font-family)); + --mod-textfield-font-weight: var(--mod-numberfield-font-weight, var(--spectrum-numberfield-font-weight)); + --mod-textfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-numberfield-font-style)); + --mod-textfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-numberfield-font-size)); + --mod-textfield-line-height: var(--mod-numberfield-line-height, var(--spectrum-numberfield-line-height)); + + &.spectrum-NumberField--hiddenStepper { + --mod-textfield-min-width: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size)); } - /* @passthrough start */ - .spectrum-Stepper-input { - --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color); + &:not(.is-disabled).is-keyboardFocused, + &:not(.is-disabled):focus-visible, + &:not(.is-disabled):focus-within { + /* overrides the textfield mod */ + --mod-textfield-text-color-default: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-numberfield-text-color-keyboard-focus)); } - /* @passthrough end */ - /* @passthrough start */ - .spectrum-Stepper-button { - --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color); - --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color); + &:not(.is-disabled).is-focused, + &:not(.is-disabled):focus, + &:not(.is-disabled):focus-within { + &.is-hover, + &:hover { + /* overrides the textfield mod */ + --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-numberfield-text-color-focus-hover)); + } } /* @passthrough end */ } -/* --- Component-level passthroughs for nested components --- */ -/* @passthrough start -- MODS for sub components */ -.spectrum-Stepper { - --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color)); - --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); - --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); +/* --- Component styles --- */ +.spectrum-NumberField { + position: relative; + display: inline-grid; - --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-textfield-border-color: var(--spectrum-stepper-border-color); + min-inline-size: var(--spectrum-numberfield-min-inline-size); + inline-size: var(--spectrum-numberfield-inline-size); - &:not(.spectrum-Stepper--quiet) { - --mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled); + &::before { + content: ""; } - &:hover:not(.is-invalid, .is-disabled, .is-focused) { - --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)); + &:not(.is-disabled).is-keyboardFocused .spectrum-NumberField-inputs, + &:focus-visible .spectrum-NumberField-inputs { + outline: var(--spectrum-numberfield-focus-indicator-width) solid; + outline-color: var(--spectrum-numberfield-focus-indicator-color); + outline-offset: var(--spectrum-numberfield-focus-indicator-gap); } - &:not(.is-disabled) { - .is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); - --mod-textfield-focus-indicator-width: 0; + &.spectrum-NumberField--hiddenStepper { + min-inline-size: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size)); - &:hover { - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */ - --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover)); - --mod-textfield-focus-indicator-width: 0; - --mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + .spectrum-NumberField-textfield { + padding-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text); + + .spectrum-NumberField-input { + padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size)); } - } - &.is-keyboardFocused, - &:focus-visible { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); - --mod-textfield-focus-indicator-width: 0; - --mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + &.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { + /* accommodate validation icons when stepper buttons are hidden */ + inset-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text); + } + } - /* keyboard focus indicator is visible */ - outline: var(--spectrum-stepper-focus-indicator-width) solid; - outline-color: var(--spectrum-stepper-focus-indicator-color); - outline-offset: var(--spectrum-stepper-focus-indicator-gap); + .spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) { + .spectrum-NumberField-input { + padding-inline-end: 0; + } } } - &.is-invalid { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid))); - --mod-textfield-icon-spacing-inline-start-invalid: 0; + &.spectrum-NumberField--sideLabel { + grid-template-columns: auto auto auto; + grid-template-rows: auto auto; - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover))); + .spectrum-NumberField-fieldLabel { + grid-row: 1 / span 2; + grid-column: 1 / span 1; + margin-inline-end: var(--spectrum-numberfield-spacing-side-label-to-field, var(--spectrum-numberfield-spacing-side-label-to-field)); } - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid))); - - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid))); - } + .spectrum-NumberField-inputs { + grid-row: 1 / span 1; + grid-column: 2 / span 1; } - &.is-keyboardFocused, - &:focus-visible { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid))); + .spectrum-NumberField-helpText { + grid-row: 2; + grid-column: 2 / span 1; } } +} - &.spectrum-Stepper--quiet { - /* @passthrough start */ - --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); - --mod-infield-button-border-color: var(--spectrum-stepper-border-color); - --mod-infield-button-border-color-quiet: var(--spectrum-stepper-border-color); - --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-infield-button-stacked-bottom-border-radius-end-end: 0; - --mod-infield-button-stacked-bottom-border-radius-end-start: 0; - --mod-infield-button-fill-justify-content: flex-end; - --mod-infield-button-inner-edge-to-fill: var(--spectrum-stepper-button-edge-to-fill); - --mod-infield-button-edge-to-fill: var(--spectrum-stepper-button-edge-to-fill); - - --mod-textfield-focus-indicator-color: transparent; - --mod-textfield-background-color: transparent; - --mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - /* @passthrough end */ - - &:not(.is-disabled) { - &:hover { - --mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - } +/* Number field label */ +.spectrum-NumberField-fieldLabel { + margin-block-end: var(--mod-numberfield-label-to-field, var(--spectrum-numberfield-spacing-label-to-field)); +} - /* quiet focus */ - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); +/* Number field help text */ +.spectrum-NumberField-helpText { + margin-block-start: var(--mod-numberfield-spacing-field-to-helptext, var(--spectrum-numberfield-spacing-field-to-helptext)); +} - /* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */ - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - } - } +/* Number field container includes .spectrum-Textfield and .spectrum-InfieldButtons */ +.spectrum-NumberField-inputs { + block-size: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)); + border-radius: var(--spectrum-numberfield-border-radius); + display: flex; + align-items: center; - &.is-keyboardFocused { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + & .spectrum-Textfield .spectrum-Textfield-input { + /* removes the border-radius and outline from unstyled input to avoid double focus rings + (which was being inherited from .spectrum-Textfield) */ + outline: none; + border-radius: 0; - /* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */ - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - } - } - } + padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper)); } } -/* @passthrough end */ - -/* --- Component styles --- */ -.spectrum-Stepper { - --spectrum-stepper-width: var(--mod-stepper-width, calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2))); - position: relative; +/* Nested textfield subcomponent */ +.spectrum-NumberField-textfield { + inline-size: 100%; display: inline-flex; - flex-flow: row nowrap; - - inline-size: var(--spectrum-stepper-width); - block-size: var(--spectrum-stepper-height); - - border-radius: var(--spectrum-stepper-border-radius); - - &::before { - content: ""; + flex-flow: column-reverse nowrap; + block-size: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--spectrum-numberfield-border-width) * 2); + + border: var(--spectrum-numberfield-border-width) solid var(--spectrum-numberfield-border-color-default); + padding-inline-start: var(--spectrum-numberfield-spacing-inline-edge-to-text); + padding-inline-end: var(--spectrum-numberfield-button-container-size); + border-radius: var(--spectrum-numberfield-border-radius); + background-color: var(--spectrum-numberfield-background-color, transparent); + + /* accommodate stepper buttons and validation icons */ + &.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { + inset-inline-end: calc(var(--spectrum-numberfield-button-container-size) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper)); } } -/* Nested textfield subcomponent */ -.spectrum-Stepper-input { - border-start-end-radius: 0; - border-end-end-radius: 0; - border-inline-end-width: 0; +/* unstyled input element */ +.spectrum-NumberField-input { + line-height: var(--spectrum-numberfield-line-height); + padding-inline-start: 0; + padding-inline-end: var(--spectrum-numberfield-spacing-min-inline-end-text-to-stepper); + border: none; + min-inline-size: 100%; + block-size: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--spectrum-numberfield-border-width) * 2); + background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); } /* container for stepUp and stepDown buttons */ -.spectrum-Stepper-buttons { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; +.spectrum-NumberField-buttons { + position: absolute; + inset-inline-end: calc(var(--mod-numberfield-button-inline-offset, var(--spectrum-numberfield-button-inline-offset, 0px))); +} - block-size: var(--spectrum-stepper-height); - inline-size: var(--spectrum-stepper-button-width); +/* --- High contrast settings --- */ +@media (forced-colors: active) { + .spectrum-NumberField { + --highcontrast-numberfield-border-color: CanvasText; + --highcontrast-numberfield-background-color: Canvas; + --highcontrast-numberfield-border-color-hover: Highlight; + --highcontrast-numberfield-border-color-focus: Highlight; + --highcontrast-numberfield-border-color-focus-hover: Highlight; + --highcontrast-numberfield-border-color-keyboard-focus: CanvasText; + --highcontrast-numberfield-focus-indicator-color: Highlight; - border-color: var(--spectrum-stepper-border-color); - border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style)); - border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))); - border-inline-start-width: 0; + &.is-invalid { + --highcontrast-numberfield-border-color: Highlight; + --highcontrast-numberfield-border-color-hover: Highlight; + --highcontrast-numberfield-border-color-focus: Highlight; + --highcontrast-numberfield-border-color-focus-hover: Highlight; + --highcontrast-numberfield-border-color-keyboard-focus: Highlight; + } - /* Have to add border radius here to avoid overlapping textfield border */ - border-start-end-radius: var(--spectrum-stepper-border-radius); - border-end-end-radius: var(--spectrum-stepper-border-radius); + &.is-disabled { + --highcontrast-numberfield-border-color: GrayText; + --highcontrast-numberfield-buttons-border-width: var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)); + } - background-color: var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color)); - transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out; -} + &:not(.is-disabled) { + &.is-hover, + &:hover { + --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover); + } -/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ -.spectrum-Stepper.hide-stepper .spectrum-Stepper-input { - border-start-end-radius: var(--spectrum-stepper-border-radius); - border-end-end-radius: var(--spectrum-stepper-border-radius); - border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); -} + &.is-focused, + &:focus, + &:focus-within { + --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus); -/* --- Quiet variant styles --- */ -.spectrum-Stepper--quiet { - /* quiet corners are not rounded */ - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - - /* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ - &.hide-stepper .spectrum-Stepper-input { - border-inline-end-width: 0; - border-end-end-radius: 0; - } - /* stylelint-enable selector-class-pattern */ + &.is-hover, + &:hover { + --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover); + } + } - &::after { - visibility: var(--mod-stepper-focus-indicator-visibility, hidden); - content: ""; - position: absolute; - inset-block-end: calc(-1 * (var(--spectrum-stepper-focus-indicator-gap) + var(--spectrum-stepper-focus-indicator-width))); - inset-inline-start: 0; - inline-size: 100%; - block-size: var(--spectrum-stepper-focus-indicator-width); - background-color: var(--spectrum-stepper-focus-indicator-color); + &.is-keyboardFocused, + &:focus-visible, + &:focus-within { + --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-keyboard-focus); + + &.is-hover, + &:hover { + --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover); + } + } + } } - /* quiet hover */ - &.is-keyboardFocused:not(.is-disabled) { - outline: none; + /* @passthrough start */ + .spectrum-NumberField-textfield { + --highcontrast-textfield-border-color: var(--highcontrast-numberfield-border-color); } + /* @passthrough end */ } From 1f1785a98eedd2d608fa84e3015db5ac8828c5e9 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:56:46 -0400 Subject: [PATCH 06/24] fix(form): updates number field language in comments - updates form to use number field import --- components/form/index.css | 2 +- components/form/stories/form.stories.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/form/index.css b/components/form/index.css index 905208b8256..4d41ebe55bb 100644 --- a/components/form/index.css +++ b/components/form/index.css @@ -46,7 +46,7 @@ display: block; } -/* Fix extra space after inline-flex elements such as stepper. */ +/* Fix extra space after inline-flex elements such as number field. */ .spectrum-Form-itemField > * { vertical-align: top; } diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 380d72c513e..ab7af9d944b 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -1,7 +1,7 @@ import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js"; import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js"; +import { Template as NumberField } from "@spectrum-css/stepper/stories/template.js"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -97,7 +97,7 @@ export default { label: "Age", id: "form-example-amount", content: [ - (passthroughs, context) => Stepper({ + (passthroughs, context) => NumberField({ ...passthroughs, }, context), ] From e26d1d1dc6eb81288c1bfee8348d178bd4f0c95c Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:57:59 -0400 Subject: [PATCH 07/24] chore(numberfield): updates metadata.json --- components/stepper/dist/metadata.json | 397 ++++++++++++++++---------- 1 file changed, 253 insertions(+), 144 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 42b3c76d4e8..d5c82d6473b 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -1,180 +1,289 @@ { "sourceFile": "index.css", "selectors": [ - ".spectrum-Stepper", - ".spectrum-Stepper--quiet", - ".spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input", - ".spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)", - ".spectrum-Stepper--quiet:after", - ".spectrum-Stepper-button", - ".spectrum-Stepper-buttons", - ".spectrum-Stepper-input", - ".spectrum-Stepper.hide-stepper .spectrum-Stepper-input", - ".spectrum-Stepper.is-disabled", - ".spectrum-Stepper.is-focused:not(.is-disabled)", - ".spectrum-Stepper.is-focused:not(.is-disabled):hover", - ".spectrum-Stepper.is-invalid", - ".spectrum-Stepper.is-invalid.is-focused", - ".spectrum-Stepper.is-invalid.is-focused:hover", - ".spectrum-Stepper.is-invalid.is-keyboardFocused", - ".spectrum-Stepper.is-invalid:focus", - ".spectrum-Stepper.is-invalid:focus-visible", - ".spectrum-Stepper.is-invalid:focus:hover", - ".spectrum-Stepper.is-invalid:hover", - ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)", - ".spectrum-Stepper.spectrum-Stepper--quiet", - ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled)", - ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover", - ".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid", - ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)", - ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", - ".spectrum-Stepper.spectrum-Stepper--sizeL", - ".spectrum-Stepper.spectrum-Stepper--sizeM", - ".spectrum-Stepper.spectrum-Stepper--sizeS", - ".spectrum-Stepper.spectrum-Stepper--sizeXL", - ".spectrum-Stepper:before", - ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)", - ".spectrum-Stepper:not(.is-disabled) .is-focused", - ".spectrum-Stepper:not(.is-disabled) .is-focused:hover", - ".spectrum-Stepper:not(.is-disabled):focus", - ".spectrum-Stepper:not(.is-disabled):focus-visible", - ".spectrum-Stepper:not(.is-disabled):focus:hover", - ".spectrum-Stepper:not(.is-disabled):hover", - ".spectrum-Stepper:not(.spectrum-Stepper--quiet)" + ".spectrum-NumberField", + ".spectrum-NumberField-buttons", + ".spectrum-NumberField-fieldLabel", + ".spectrum-NumberField-helpText", + ".spectrum-NumberField-input", + ".spectrum-NumberField-inputs", + ".spectrum-NumberField-inputs .spectrum-Textfield .spectrum-Textfield-input", + ".spectrum-NumberField-textfield", + ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-NumberField.is-disabled", + ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)", + ".spectrum-NumberField.is-focused:not(.is-disabled)", + ".spectrum-NumberField.is-focused:not(.is-disabled):hover", + ".spectrum-NumberField.is-hover:not(.is-disabled)", + ".spectrum-NumberField.is-hover:not(.is-disabled):focus", + ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible", + ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within", + ".spectrum-NumberField.is-invalid", + ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled) .spectrum-NumberField-inputs", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover", + ".spectrum-NumberField.spectrum-NumberField--hiddenStepper", + ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield", + ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input", + ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) .spectrum-NumberField-input", + ".spectrum-NumberField.spectrum-NumberField--sideLabel", + ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel", + ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-helpText", + ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-inputs", + ".spectrum-NumberField.spectrum-NumberField--sizeL", + ".spectrum-NumberField.spectrum-NumberField--sizeS", + ".spectrum-NumberField.spectrum-NumberField--sizeXL", + ".spectrum-NumberField:before", + ".spectrum-NumberField:focus-visible .spectrum-NumberField-inputs", + ".spectrum-NumberField:lang(ja)", + ".spectrum-NumberField:lang(ko)", + ".spectrum-NumberField:lang(zh)", + ".spectrum-NumberField:not(.is-disabled):focus", + ".spectrum-NumberField:not(.is-disabled):focus-visible", + ".spectrum-NumberField:not(.is-disabled):focus-visible:hover", + ".spectrum-NumberField:not(.is-disabled):focus-within", + ".spectrum-NumberField:not(.is-disabled):focus-within:hover", + ".spectrum-NumberField:not(.is-disabled):focus:hover", + ".spectrum-NumberField:not(.is-disabled):hover" ], "modifiers": [ - "--mod-stepper-animation-duration", - "--mod-stepper-border-color", - "--mod-stepper-border-color-focus", - "--mod-stepper-border-color-focus-hover", - "--mod-stepper-border-color-focus-hover-invalid", - "--mod-stepper-border-color-focus-invalid", - "--mod-stepper-border-color-hover", - "--mod-stepper-border-color-hover-invalid", - "--mod-stepper-border-color-invalid", - "--mod-stepper-border-color-keyboard-focus", - "--mod-stepper-border-color-keyboard-focus-invalid", - "--mod-stepper-border-radius", - "--mod-stepper-border-width", - "--mod-stepper-button-border-width", - "--mod-stepper-button-width", - "--mod-stepper-button-width-quiet", - "--mod-stepper-buttons-background-color", - "--mod-stepper-buttons-border-color", - "--mod-stepper-buttons-border-color-focus", - "--mod-stepper-buttons-border-color-focus-hover", - "--mod-stepper-buttons-border-color-hover", - "--mod-stepper-buttons-border-color-keyboard-focus", - "--mod-stepper-buttons-border-style", - "--mod-stepper-buttons-border-width", - "--mod-stepper-focus-indicator-color", - "--mod-stepper-focus-indicator-gap", - "--mod-stepper-focus-indicator-visibility", - "--mod-stepper-focus-indicator-width", - "--mod-stepper-height", - "--mod-stepper-min-width-multiplier", - "--mod-stepper-width" - ], - "component": [ - "--spectrum-stepper-animation-duration", - "--spectrum-stepper-border-color", - "--spectrum-stepper-border-color-default", - "--spectrum-stepper-border-color-disabled", - "--spectrum-stepper-border-color-focus", - "--spectrum-stepper-border-color-focus-hover", - "--spectrum-stepper-border-color-focus-hover-invalid", - "--spectrum-stepper-border-color-focus-invalid", - "--spectrum-stepper-border-color-hover", - "--spectrum-stepper-border-color-invalid", - "--spectrum-stepper-border-color-keyboard-focus", - "--spectrum-stepper-border-color-keyboard-focus-invalid", - "--spectrum-stepper-border-radius", - "--spectrum-stepper-border-width", - "--spectrum-stepper-button-border-width", - "--spectrum-stepper-button-border-width-disabled", - "--spectrum-stepper-button-edge-to-fill", - "--spectrum-stepper-button-width", - "--spectrum-stepper-buttons-background-color", - "--spectrum-stepper-buttons-background-color-disabled", - "--spectrum-stepper-buttons-border-color", - "--spectrum-stepper-buttons-border-color-focus", - "--spectrum-stepper-buttons-border-color-focus-hover", - "--spectrum-stepper-buttons-border-color-hover", - "--spectrum-stepper-buttons-border-color-keyboard-focus", - "--spectrum-stepper-buttons-border-style", - "--spectrum-stepper-buttons-border-width", - "--spectrum-stepper-focus-indicator-color", - "--spectrum-stepper-focus-indicator-gap", - "--spectrum-stepper-focus-indicator-width", - "--spectrum-stepper-height", - "--spectrum-stepper-width" + "--mod-numberfield-background-color", + "--mod-numberfield-background-color-disabled", + "--mod-numberfield-block-size", + "--mod-numberfield-border-color", + "--mod-numberfield-border-color-disabled", + "--mod-numberfield-border-color-focus", + "--mod-numberfield-border-color-focus-hover", + "--mod-numberfield-border-color-focus-hover-invalid", + "--mod-numberfield-border-color-focus-invalid", + "--mod-numberfield-border-color-hover", + "--mod-numberfield-border-color-hover-invalid", + "--mod-numberfield-border-color-invalid", + "--mod-numberfield-border-color-invalid-default", + "--mod-numberfield-border-color-invalid-focus", + "--mod-numberfield-border-color-invalid-focus-hover", + "--mod-numberfield-border-color-invalid-hover", + "--mod-numberfield-border-color-invalid-keyboard-focus", + "--mod-numberfield-border-color-keyboard-focus", + "--mod-numberfield-border-color-keyboard-focus-invalid", + "--mod-numberfield-border-radius", + "--mod-numberfield-border-width", + "--mod-numberfield-button-inline-offset", + "--mod-numberfield-focus-indicator-color", + "--mod-numberfield-focus-indicator-gap", + "--mod-numberfield-focus-indicator-width", + "--mod-numberfield-font-family", + "--mod-numberfield-font-size", + "--mod-numberfield-font-style", + "--mod-numberfield-font-weight", + "--mod-numberfield-hidden-stepper-min-inline-size", + "--mod-numberfield-inline-size", + "--mod-numberfield-label-to-field", + "--mod-numberfield-line-height", + "--mod-numberfield-min-inline-size", + "--mod-numberfield-spacing-block-end-edge-to-text", + "--mod-numberfield-spacing-block-start-edge-to-text", + "--mod-numberfield-spacing-field-to-helptext", + "--mod-numberfield-spacing-min-inline-end-value-to-icon", + "--mod-numberfield-text-color", + "--mod-numberfield-text-color-disabled", + "--mod-numberfield-text-color-focus", + "--mod-numberfield-text-color-focus-hover", + "--mod-numberfield-text-color-hover", + "--mod-numberfield-text-color-invalid", + "--mod-numberfield-text-color-keyboard-focus" ], + "component": [], "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", + "--spectrum-component-bottom-to-text-75", + "--spectrum-component-edge-to-text-100", + "--spectrum-component-edge-to-text-200", + "--spectrum-component-edge-to-text-300", + "--spectrum-component-edge-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-text-100", + "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", + "--spectrum-component-top-to-text-75", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", + "--spectrum-default-font-style", + "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", + "--spectrum-disabled-content-color", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-default-width-small", + "--spectrum-field-label-to-component", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", - "--spectrum-gray-100", + "--spectrum-font-size-100", + "--spectrum-font-size-200", + "--spectrum-font-size-300", + "--spectrum-font-size-75", + "--spectrum-gray-25", "--spectrum-gray-300", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", - "--spectrum-in-field-button-width-stacked-extra-large", - "--spectrum-in-field-button-width-stacked-large", - "--spectrum-in-field-button-width-stacked-medium", - "--spectrum-in-field-button-width-stacked-small", + "--spectrum-help-text-to-component", + "--spectrum-in-field-button-edge-to-fill-extra-large", + "--spectrum-in-field-button-edge-to-fill-large", + "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-stepper-to-end-extra-large", + "--spectrum-in-field-stepper-to-end-large", + "--spectrum-in-field-stepper-to-end-medium", + "--spectrum-in-field-stepper-to-end-small", + "--spectrum-infield-button-edge-to-fill", + "--spectrum-infield-button-width", + "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", - "--spectrum-text-field-minimum-width-multiplier" + "--spectrum-neutral-content-color-default", + "--spectrum-neutral-content-color-focus", + "--spectrum-neutral-content-color-focus-hover", + "--spectrum-neutral-content-color-hover", + "--spectrum-neutral-content-color-key-focus", + "--spectrum-number-field-minimum-width-multiplier", + "--spectrum-number-field-visual-to-in-field-stepper-extra-large", + "--spectrum-number-field-visual-to-in-field-stepper-large", + "--spectrum-number-field-visual-to-in-field-stepper-medium", + "--spectrum-number-field-visual-to-in-field-stepper-small", + "--spectrum-number-field-with-stepper-minimum-width-extra-large", + "--spectrum-number-field-with-stepper-minimum-width-large", + "--spectrum-number-field-with-stepper-minimum-width-medium", + "--spectrum-number-field-with-stepper-minimum-width-small", + "--spectrum-numberfield-alert-icon-size", + "--spectrum-numberfield-background-color", + "--spectrum-numberfield-background-color-disabled", + "--spectrum-numberfield-block-size", + "--spectrum-numberfield-border-color-default", + "--spectrum-numberfield-border-color-disabled", + "--spectrum-numberfield-border-color-focus", + "--spectrum-numberfield-border-color-focus-hover", + "--spectrum-numberfield-border-color-hover", + "--spectrum-numberfield-border-color-invalid-default", + "--spectrum-numberfield-border-color-invalid-focus", + "--spectrum-numberfield-border-color-invalid-focus-hover", + "--spectrum-numberfield-border-color-invalid-hover", + "--spectrum-numberfield-border-color-invalid-keyboard-focus", + "--spectrum-numberfield-border-color-keyboard-focus", + "--spectrum-numberfield-border-radius", + "--spectrum-numberfield-border-width", + "--spectrum-numberfield-button-container-size", + "--spectrum-numberfield-button-inline-offset", + "--spectrum-numberfield-focus-indicator-color", + "--spectrum-numberfield-focus-indicator-gap", + "--spectrum-numberfield-focus-indicator-width", + "--spectrum-numberfield-font-family", + "--spectrum-numberfield-font-size", + "--spectrum-numberfield-font-style", + "--spectrum-numberfield-font-weight", + "--spectrum-numberfield-hidden-stepper-min-inline-size", + "--spectrum-numberfield-inline-size", + "--spectrum-numberfield-line-height", + "--spectrum-numberfield-min-inline-size", + "--spectrum-numberfield-spacing-block-end-edge-to-text", + "--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper", + "--spectrum-numberfield-spacing-block-start-edge-to-text", + "--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper", + "--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden", + "--spectrum-numberfield-spacing-field-to-helptext", + "--spectrum-numberfield-spacing-inline-edge-to-text", + "--spectrum-numberfield-spacing-label-to-field", + "--spectrum-numberfield-spacing-min-inline-end-text-to-stepper", + "--spectrum-numberfield-spacing-min-inline-end-value-to-icon", + "--spectrum-numberfield-spacing-side-label-to-field", + "--spectrum-numberfield-spacing-validation-icon-to-stepper", + "--spectrum-numberfield-text-color", + "--spectrum-numberfield-text-color-disabled", + "--spectrum-numberfield-text-color-focus", + "--spectrum-numberfield-text-color-focus-hover", + "--spectrum-numberfield-text-color-hover", + "--spectrum-numberfield-text-color-keyboard-focus", + "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", + "--spectrum-spacing-200", + "--spectrum-text-to-visual-100", + "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-75", + "--spectrum-workflow-icon-size-100", + "--spectrum-workflow-icon-size-200", + "--spectrum-workflow-icon-size-75" ], "passthroughs": [ - "--mod-infield-button-border-block-end-width", - "--mod-infield-button-border-color", - "--mod-infield-button-border-color-quiet", - "--mod-infield-button-border-color-quiet-disabled", - "--mod-infield-button-border-width", - "--mod-infield-button-edge-to-fill", - "--mod-infield-button-fill-justify-content", - "--mod-infield-button-inner-edge-to-fill", - "--mod-infield-button-stacked-bottom-border-block-end-width", - "--mod-infield-button-stacked-bottom-border-radius-end-end", - "--mod-infield-button-stacked-bottom-border-radius-end-start", - "--mod-infield-button-width-stacked", "--mod-textfield-background-color", + "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", "--mod-textfield-border-color-disabled", + "--mod-textfield-border-color-focus", + "--mod-textfield-border-color-focus-hover", "--mod-textfield-border-color-hover", + "--mod-textfield-border-color-invalid-default", + "--mod-textfield-border-color-invalid-focus", + "--mod-textfield-border-color-invalid-focus-hover", + "--mod-textfield-border-color-invalid-hover", + "--mod-textfield-border-color-invalid-keyboard-focus", + "--mod-textfield-border-color-keyboard-focus", "--mod-textfield-border-width", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-icon-spacing-inline-start-invalid" + "--mod-textfield-corner-radius", + "--mod-textfield-font-family", + "--mod-textfield-font-size", + "--mod-textfield-font-style", + "--mod-textfield-font-weight", + "--mod-textfield-height", + "--mod-textfield-icon-spacing-block-invalid", + "--mod-textfield-icon-spacing-inline-end-invalid", + "--mod-textfield-icon-spacing-inline-start-invalid", + "--mod-textfield-line-height", + "--mod-textfield-min-width", + "--mod-textfield-spacing-block-end", + "--mod-textfield-spacing-block-start", + "--mod-textfield-text-color-default", + "--mod-textfield-text-color-disabled", + "--mod-textfield-text-color-focus", + "--mod-textfield-text-color-focus-hover", + "--mod-textfield-text-color-hover", + "--mod-textfield-text-color-keyboard-focus", + "--mod-textfield-width" ], "high-contrast": [ - "--highcontrast-infield-button-border-color", - "--highcontrast-infield-button-border-color-active", - "--highcontrast-stepper-border-color", - "--highcontrast-stepper-border-color-focus", - "--highcontrast-stepper-border-color-focus-hover", - "--highcontrast-stepper-border-color-hover", - "--highcontrast-stepper-border-color-keyboard-focus", - "--highcontrast-stepper-buttons-border-width", - "--highcontrast-stepper-focus-indicator-color", + "--highcontrast-numberfield-background-color", + "--highcontrast-numberfield-border-color", + "--highcontrast-numberfield-border-color-disabled", + "--highcontrast-numberfield-border-color-focus", + "--highcontrast-numberfield-border-color-focus-hover", + "--highcontrast-numberfield-border-color-hover", + "--highcontrast-numberfield-border-color-invalid-default", + "--highcontrast-numberfield-border-color-invalid-focus", + "--highcontrast-numberfield-border-color-invalid-focus-hover", + "--highcontrast-numberfield-border-color-invalid-hover", + "--highcontrast-numberfield-border-color-invalid-keyboard-focus", + "--highcontrast-numberfield-border-color-keyboard-focus", + "--highcontrast-numberfield-buttons-border-width", + "--highcontrast-numberfield-focus-indicator-color", "--highcontrast-textfield-border-color" ] } From c77a8579dce072668eb7a696cd4ccdfdca200684 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:59:54 -0400 Subject: [PATCH 08/24] chore(form): add changeset --- .changeset/purple-flies-grow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/purple-flies-grow.md diff --git a/.changeset/purple-flies-grow.md b/.changeset/purple-flies-grow.md new file mode 100644 index 00000000000..eb1a4171c2a --- /dev/null +++ b/.changeset/purple-flies-grow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/form": patch +--- + +Updates comment to reference number field instead of stepper. From 4c5925d91367870815bb3235cfe1feab84cacf32 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 14:30:49 -0400 Subject: [PATCH 09/24] chore(numberfield): add changeset --- .changeset/itchy-waves-work.md | 82 ++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 .changeset/itchy-waves-work.md diff --git a/.changeset/itchy-waves-work.md b/.changeset/itchy-waves-work.md new file mode 100644 index 00000000000..296143885ff --- /dev/null +++ b/.changeset/itchy-waves-work.md @@ -0,0 +1,82 @@ +--- +"@spectrum-css/stepper": major +--- + +### Number field S2 Migration + +This work migrations the stepper/number field component to Spectrum 2! 🎉 The S1 stepper was very minimal, and didn't align with SWC or React's implementation. This migration should bring parity to the CSS component. New features include: + +- the display name for this component has changed from `stepper` to `number field` (based on design's, React's and SWC's naming conventions.) + - _**Note:**_ The NPM package name has remained as "stepper," and hasn't yet changed to "number field."" +- an error state with alert icon +- optional help text +- embedded field label & optional positions + +#### Quick overview + +Because of all the new features and to align more with design, SWC and React, below is a quick recap of the following tokens & classes that have been renamed in the CSS: + +- All `.spectrum-Stepper*` class names have been converted to `.spectrum-NumberField*` +- The `.hide-stepper` class has been converted to `.spectrum-NumberField--hiddenStepper` +- Custom properties have been renamed from `--spectrum-stepper*` to `--spectrum-numberfield*` +- Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield*` +- Markup has changed +- Styling lives on different elements +- Lots more Chromatic test coverage + +#### Markup + +Following React's lead, the markup of the number field has changed. More obviously, help text and field label components are embedded into `.spectrum-NumberField`, instead of necessitating separate components. The number field now incorporates an error state that better reflects the embedded textfield's error state, so there is now an alert icon within the markup in an invalid number field. Additionally, a new `.spectrum-NumberField-inputs` containing wrapper was introduced to encapsulate the textfield element and infield button elements. This container allowed for some extra alignment styles for those 2 elements and then freed up the opportunity to introduced an "unstyled" `input` (as described more below). Custom classes were also added to the nested textfield and input elements to ensure styles for number field were passed correctly to the correct elements (`.spectrum-NumberField-textfield` and `.spectrum-NumberField-input`). + +Stemming from the infield button S2 migration, there is also an extra container for the inline (previously "stacked") stepper buttons. + +#### Styling + +The `.spectrum-NumberField-textfield` div is where the S2 design language lives (instead of on the input element), while the actual `input` (`.spectrum-NumberField-input`) is unstyled and incorporated more subtly. Breaking changes were introduced in all previous custom properties, where any `--spectrum-stepper-*` or `--mod-stepper-*` properties were renamed to `--spectrum-numberfield-*`or `--mod-numberfield-*`. This also applied to class names, where `.spectrum-Stepper` changed to `.spectrum-NumberField`. The `hide-stepper` class has also been updated to match our class naming conventions (`.spectrum-NumberField--hiddenStepper`). + +#### Mods + +Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield`. + +##### Removed custom properties include + +--mod-stepper-animation-duration +--mod-stepper-button-border-width +--mod-stepper-button-width +--mod-stepper-button-width-quiet +--mod-stepper-buttons-background-color +--mod-stepper-buttons-border-color +--mod-stepper-buttons-border-color-focus +--mod-stepper-buttons-border-color-focus-hover +--mod-stepper-buttons-border-color-hover +--mod-stepper-buttons-border-color-keyboard-focus +--mod-stepper-buttons-border-style +--mod-stepper-buttons-border-width +--mod-stepper-focus-indicator-visibility +--mod-stepper-height (renamed to --mod-numberfield-block-size) +--mod-stepper-width (renamed to --mod-numberfield-inline-size) + +##### New custom properties include + +--mod-numberfield-background-color +--mod-numberfield-background-color-disabled +--mod-numberfield-block-size (renamed from --mod-stepper-height) +--mod-numberfield-border-color-disabled +--mod-numberfield-border-color-invalid-default +--mod-numberfield-border-color-invalid-focus +--mod-numberfield-border-color-invalid-focus-hover +--mod-numberfield-border-color-invalid-hover +--mod-numberfield-border-color-invalid-keyboard-focus +--mod-numberfield-button-inline-offset +--mod-numberfield-font-family +--mod-numberfield-font-size +--mod-numberfield-font-style +--mod-numberfield-font-weight +--mod-numberfield-hidden-stepper-min-inline-size +--mod-numberfield-inline-size (renamed from --mod-stepper-width) +--mod-numberfield-label-to-field +--mod-numberfield-line-height +--mod-numberfield-min-inline-size +--mod-numberfield-spacing-block-end-edge-to-text +--mod-numberfield-spacing-block-start-edge-to-text +--mod-numberfield-spacing-field-to-helptext From d57d6de77df911ec1e600fd4fbcbcbea7ddd0886 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 15:19:41 -0400 Subject: [PATCH 10/24] fix(numberfield): linter fixes and update metadata --- components/stepper/dist/metadata.json | 14 ++------- components/stepper/index.css | 44 ++++++++++++++++----------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index d5c82d6473b..c8a1dbd0f1b 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -124,7 +124,6 @@ "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-field-default-width-extra-large", @@ -204,11 +203,10 @@ "--spectrum-numberfield-inline-size", "--spectrum-numberfield-line-height", "--spectrum-numberfield-min-inline-size", + "--spectrum-numberfield-spacing-block-end-edge-to-alert-icon", "--spectrum-numberfield-spacing-block-end-edge-to-text", - "--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper", + "--spectrum-numberfield-spacing-block-start-edge-to-alert-icon", "--spectrum-numberfield-spacing-block-start-edge-to-text", - "--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper", - "--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden", "--spectrum-numberfield-spacing-field-to-helptext", "--spectrum-numberfield-spacing-inline-edge-to-text", "--spectrum-numberfield-spacing-label-to-field", @@ -231,6 +229,7 @@ "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", + "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], "passthroughs": [ @@ -272,17 +271,10 @@ "high-contrast": [ "--highcontrast-numberfield-background-color", "--highcontrast-numberfield-border-color", - "--highcontrast-numberfield-border-color-disabled", "--highcontrast-numberfield-border-color-focus", "--highcontrast-numberfield-border-color-focus-hover", "--highcontrast-numberfield-border-color-hover", - "--highcontrast-numberfield-border-color-invalid-default", - "--highcontrast-numberfield-border-color-invalid-focus", - "--highcontrast-numberfield-border-color-invalid-focus-hover", - "--highcontrast-numberfield-border-color-invalid-hover", - "--highcontrast-numberfield-border-color-invalid-keyboard-focus", "--highcontrast-numberfield-border-color-keyboard-focus", - "--highcontrast-numberfield-buttons-border-width", "--highcontrast-numberfield-focus-indicator-color", "--highcontrast-textfield-border-color" ] diff --git a/components/stepper/index.css b/components/stepper/index.css index f2082ea8352..797cc86008a 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -21,14 +21,14 @@ --spectrum-numberfield-border-color-focus: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800))); --spectrum-numberfield-border-color-keyboard-focus: var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))); --spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900))); - --spectrum-numberfield-border-color-disabled: var(--highcontrast-numberfield-border-color-disabled, var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))); + --spectrum-numberfield-border-color-disabled: var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color)); /* Invalid border */ - --spectrum-numberfield-border-color-invalid-default: var(--highcontrast-numberfield-border-color-invalid-default, var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))); - --spectrum-numberfield-border-color-invalid-hover: var(--highcontrast-numberfield-border-color-invalid-hover, var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))); - --spectrum-numberfield-border-color-invalid-focus: var(--highcontrast-numberfield-border-color-invalid-focus, var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))); - --spectrum-numberfield-border-color-invalid-focus-hover: var(--highcontrast-numberfield-border-color-invalid-focus-hover, var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))); - --spectrum-numberfield-border-color-invalid-keyboard-focus: var(--highcontrast-numberfield-border-color-invalid-keyboard-focus, var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))); + --spectrum-numberfield-border-color-invalid-default: var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default)); + --spectrum-numberfield-border-color-invalid-hover: var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover)); + --spectrum-numberfield-border-color-invalid-focus: var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus)); + --spectrum-numberfield-border-color-invalid-focus-hover: var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover)); + --spectrum-numberfield-border-color-invalid-keyboard-focus: var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus)); /* Text color */ --spectrum-numberfield-text-color: var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default)); @@ -40,7 +40,8 @@ /* Background */ --spectrum-numberfield-background-color: var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25))); - --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-disabled-background-color)); + + /* --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-disabled-background-color)); */ --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25)); /* Font */ @@ -79,8 +80,10 @@ --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-100)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-medium))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); - --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- documenting from token specs, but not used in textfield mod */ + --spectrum-numberfield-spacing-block-end-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); &.spectrum-NumberField--sizeS { --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-small)); @@ -98,8 +101,10 @@ --spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-75)) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small)); - --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- documenting from token specs, but not used in textfield mod */ + --spectrum-numberfield-spacing-block-end-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-75); } @@ -119,8 +124,10 @@ --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-large))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large)); - --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- documenting from token specs, but not used in textfield mod */ + --spectrum-numberfield-spacing-block-end-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-200); } @@ -140,9 +147,11 @@ --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-extra-large))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large)); - --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- documenting from token specs, but not used in textfield mod */ + --spectrum-numberfield-spacing-block-end-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-300); } &:not(.is-disabled).is-hover, @@ -210,7 +219,7 @@ --mod-textfield-spacing-block-start: var(--mod-numberfield-spacing-block-start-edge-to-text, var(--spectrum-numberfield-spacing-block-start-edge-to-text)); --mod-textfield-spacing-block-end: var(--mod-numberfield-spacing-block-end-edge-to-text, var(--spectrum-numberfield-spacing-block-end-edge-to-text)); --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); - --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper) - var(--spectrum-numberfield-border-width)); + --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-edge-to-alert-icon) - var(--spectrum-numberfield-border-width)); --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); --mod-textfield-width: var(--mod-numberfield-inline-size, var(--spectrum-numberfield-inline-size)); --mod-textfield-min-width: var(--mod-numberfield-min-inline-size, var(--spectrum-numberfield-min-inline-size)); @@ -401,7 +410,6 @@ &.is-disabled { --highcontrast-numberfield-border-color: GrayText; - --highcontrast-numberfield-buttons-border-width: var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)); } &:not(.is-disabled) { From bf3cc743252559f7a404a977fd1c7da279b23823 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 29 Apr 2025 09:25:49 -0400 Subject: [PATCH 11/24] chore(numberfield): clean up testing file - removes i18n test comments - removes duplicate disabled+keyboard-focused test --- components/stepper/stories/stepper.test.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/components/stepper/stories/stepper.test.js b/components/stepper/stories/stepper.test.js index 40f0de52b0e..02f886b5bf9 100644 --- a/components/stepper/stories/stepper.test.js +++ b/components/stepper/stories/stepper.test.js @@ -58,10 +58,6 @@ export const NumberFieldGroup = Variants({ labelPosition: "side", value: "1234567890123456789012345678901", }, - // { - // testHeading: "Internationalization (Thai)", - // value: "๐๑๒๓๔๕๖๗๘๙๑๐", - // } ], stateData: [ { @@ -105,10 +101,5 @@ export const NumberFieldGroup = Variants({ isDisabled: true, isKeyboardFocused: true, }, - { - testHeading: "Disabled + keyboard-focused", - isDisabled: true, - isKeyboardFocused: true, - }, ] }); From 0d87c3efab3886ac42a5d89506d7595dde679545 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 29 Apr 2025 15:33:21 -0400 Subject: [PATCH 12/24] docs(numberfield): corrects grammar, adds migrated tag/status --- components/stepper/stories/stepper.stories.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 04cb210130f..5c35199f8a1 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -66,7 +66,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + } }, + tags: ["migrated"], }; export const Default = NumberFieldGroup.bind({}); @@ -88,7 +92,7 @@ Sizing.parameters = { /** * Number fields come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. * - * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a secondary option to be positioned on the side of the field. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is to long for the available space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. + * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a secondary option to be positioned on the side of the field. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is too long for the available space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. */ export const DefaultStates = AllDefaultVariantsGroup.bind({}); DefaultStates.args = {}; From 3a81f7b5f9b672b4a3931e91a67f34c33f7fdf84 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 29 Apr 2025 15:36:00 -0400 Subject: [PATCH 13/24] chore(numberfield): linting, remove displayLabel --- components/stepper/stories/template.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fc14b5e9e72..c6f113f1760 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -1,8 +1,8 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; -import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; -import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js"; +import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -88,7 +88,6 @@ export const Template = ({ isInvalid, isFocused, isDisabled, - displayLabel: false, id: id ? `${id}-input` : undefined, customClasses: [`${rootClass}-textfield`], customInputClasses: [`${rootClass}-input`], From 4ae151ba83ffca231c833fbd84d8a6de198fc31c Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 29 Apr 2025 15:37:51 -0400 Subject: [PATCH 14/24] chore(numberfield): adds min width size test cases --- components/stepper/stories/stepper.test.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/components/stepper/stories/stepper.test.js b/components/stepper/stories/stepper.test.js index 02f886b5bf9..e683c6d5482 100644 --- a/components/stepper/stories/stepper.test.js +++ b/components/stepper/stories/stepper.test.js @@ -1,5 +1,6 @@ import { Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; +import { capitalize } from "lodash-es"; export const NumberFieldGroup = Variants({ Template, @@ -35,12 +36,23 @@ export const NumberFieldGroup = Variants({ hideStepper: true, helpText: "Help text is here to assist", }, - { - testHeading: "Minimum width (100px)", + ...["s", "m", "l", "xl"].map((size) => ({ + testHeading: `Min width: ${capitalize(size)} number field, 100px width container`, wrapperStyles: { "inline-size": "100px", }, - }, + size, + withStates: false, + })), + ...["s", "m", "l", "xl"].map((size) => ({ + testHeading: `Min width: ${capitalize(size)} number field (hidden stepper buttons), 25px width container`, + wrapperStyles: { + "inline-size": "25px", + }, + size, + withStates: false, + hideStepper: true, + })), { testHeading: "Default + truncation", withStates: false, From a21f6cec1cd05f0ddc0bf796bf845de68cfd8b07 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 29 Apr 2025 15:38:59 -0400 Subject: [PATCH 15/24] refactor(numberfield): address textfield mods - uses textfield mods where possible to reduce the number of custom styles number field has - removes any textfield mods that are overwritten by number field styles - updates metadata - general clean up (stylelint warnings are addressed, some corrected mod definitions) --- components/stepper/dist/metadata.json | 18 ------- components/stepper/index.css | 67 ++++++++++++--------------- 2 files changed, 29 insertions(+), 56 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index c8a1dbd0f1b..aeaac48d4c9 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -92,7 +92,6 @@ "--mod-numberfield-text-color-focus", "--mod-numberfield-text-color-focus-hover", "--mod-numberfield-text-color-hover", - "--mod-numberfield-text-color-invalid", "--mod-numberfield-text-color-keyboard-focus" ], "component": [], @@ -235,19 +234,6 @@ "passthroughs": [ "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-corner-radius", "--mod-textfield-font-family", "--mod-textfield-font-size", "--mod-textfield-font-style", @@ -256,16 +242,12 @@ "--mod-textfield-icon-spacing-block-invalid", "--mod-textfield-icon-spacing-inline-end-invalid", "--mod-textfield-icon-spacing-inline-start-invalid", - "--mod-textfield-line-height", "--mod-textfield-min-width", "--mod-textfield-spacing-block-end", "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus", "--mod-textfield-width" ], "high-contrast": [ diff --git a/components/stepper/index.css b/components/stepper/index.css index 797cc86008a..b309f1fac1f 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -33,7 +33,9 @@ /* Text color */ --spectrum-numberfield-text-color: var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default)); --spectrum-numberfield-text-color-hover: var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover)); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-numberfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus)); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ --spectrum-numberfield-text-color-focus-hover: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover)); --spectrum-numberfield-text-color-keyboard-focus: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus)); --spectrum-numberfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color)); @@ -160,11 +162,11 @@ } &.is-invalid { - --mod-numberfield-border-color: var(--mod-numberfield-border-color-invalid, var(--spectrum-negative-border-color-default)); - --mod-numberfield-border-color-hover: var(--mod-numberfield-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --mod-numberfield-border-color-focus: var(--mod-numberfield-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --mod-numberfield-border-color-focus-hover: var(--mod-numberfield-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --mod-numberfield-border-color-keyboard-focus: var(--mod-numberfield-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); + --mod-numberfield-border-color: var(--mod-numberfield-border-color-invalid, var(--spectrum-numberfield-border-color-invalid-default)); + --mod-numberfield-border-color-hover: var(--mod-numberfield-border-color-hover-invalid, var(--spectrum-numberfield-border-color-invalid-hover)); + --mod-numberfield-border-color-focus: var(--mod-numberfield-border-color-focus-invalid, var(--spectrum-numberfield-border-color-invalid-focus)); + --mod-numberfield-border-color-focus-hover: var(--mod-numberfield-border-color-focus-hover-invalid, var(--spectrum-numberfield-border-color-invalid-focus-hover)); + --mod-numberfield-border-color-keyboard-focus: var(--mod-numberfield-border-color-keyboard-focus-invalid, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); } &:not(.is-disabled).is-focused, @@ -191,9 +193,7 @@ &.is-disabled { --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); - - /* --mod-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); */ - --mod-numberfield-background-color: var(--spectrum-gray-25); + --mod-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); } &:lang(ja), @@ -204,45 +204,34 @@ /* @passthrough start -- MODS for sub components */ /* nested textfield */ - --mod-textfield-corner-radius: var(--mod-numberfield-border-radius, var(--spectrum-numberfield-border-radius)); - --mod-textfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)); - --mod-textfield-border-color: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-default)); - --mod-textfield-border-color-hover: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-hover)); - --mod-textfield-border-color-focus: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-focus)); - --mod-textfield-border-color-keyboard-focus: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-keyboard-focus)); - --mod-textfield-border-color-focus-hover: var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-focus-hover)); - --mod-textfield-border-color-disabled: var(--spectrum-numberfield-border-color-disabled); - --mod-textfield-border-color-invalid-default: var(--mod-numberfield-border-color-invalid-default, var(--spectrum-numberfield-border-color-invalid-default)); - --mod-textfield-border-color-invalid-hover: var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-numberfield-border-color-invalid-hover)); - --mod-textfield-border-color-invalid-focus: var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-numberfield-border-color-invalid-focus)); - --mod-textfield-border-color-invalid-focus-hover: var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-numberfield-border-color-invalid-focus-hover)); --mod-textfield-spacing-block-start: var(--mod-numberfield-spacing-block-start-edge-to-text, var(--spectrum-numberfield-spacing-block-start-edge-to-text)); --mod-textfield-spacing-block-end: var(--mod-numberfield-spacing-block-end-edge-to-text, var(--spectrum-numberfield-spacing-block-end-edge-to-text)); - --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-edge-to-alert-icon) - var(--spectrum-numberfield-border-width)); --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); - --mod-textfield-width: var(--mod-numberfield-inline-size, var(--spectrum-numberfield-inline-size)); - --mod-textfield-min-width: var(--mod-numberfield-min-inline-size, var(--spectrum-numberfield-min-inline-size)); - --mod-textfield-height: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)); + + /* this mod overrides the inline-size of the nested textfield */ + --mod-textfield-width: 100%; + --mod-textfield-height: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)) * 2); --mod-textfield-icon-spacing-inline-start-invalid: var(--mod-numberfield-spacing-min-inline-end-value-to-icon, var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon)); --mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); - --mod-textfield-text-color-default: var(--mod-numberfield-text-color-invalid, var(--spectrum-numberfield-text-color)); - --mod-textfield-text-color-hover: var(--mod-numberfield-text-color-hover, var(--spectrum-numberfield-text-color-hover)); - --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-numberfield-text-color-focus)); - --mod-textfield-text-color-focus-hover: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-numberfield-text-color-focus-hover)); - --mod-textfield-text-color-keyboard-focus: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-numberfield-text-color-keyboard-focus)); + --mod-textfield-text-color-default: var(--mod-numberfield-text-color, var(--spectrum-numberfield-text-color)); --mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled)); --mod-textfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-numberfield-background-color-disabled)); --mod-textfield-font-family: var(--mod-numberfield-font-family, var(--spectrum-numberfield-font-family)); --mod-textfield-font-weight: var(--mod-numberfield-font-weight, var(--spectrum-numberfield-font-weight)); --mod-textfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-numberfield-font-style)); --mod-textfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-numberfield-font-size)); - --mod-textfield-line-height: var(--mod-numberfield-line-height, var(--spectrum-numberfield-line-height)); &.spectrum-NumberField--hiddenStepper { --mod-textfield-min-width: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size)); } + &:not(.is-disabled).is-hover, + &:not(.is-disabled):hover { + /* overrides the textfield mod */ + --mod-textfield-text-color-default: var(--mod-numberfield-text-color-hover, var(--spectrum-numberfield-text-color-hover)); + } + &:not(.is-disabled).is-keyboardFocused, &:not(.is-disabled):focus-visible, &:not(.is-disabled):focus-within { @@ -253,6 +242,8 @@ &:not(.is-disabled).is-focused, &:not(.is-disabled):focus, &:not(.is-disabled):focus-within { + --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-numberfield-text-color-focus)); + &.is-hover, &:hover { /* overrides the textfield mod */ @@ -266,7 +257,6 @@ .spectrum-NumberField { position: relative; display: inline-grid; - min-inline-size: var(--spectrum-numberfield-min-inline-size); inline-size: var(--spectrum-numberfield-inline-size); @@ -338,7 +328,7 @@ /* Number field container includes .spectrum-Textfield and .spectrum-InfieldButtons */ .spectrum-NumberField-inputs { - block-size: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)); + /* gives the focus ring the proper border-radius */ border-radius: var(--spectrum-numberfield-border-radius); display: flex; align-items: center; @@ -348,22 +338,23 @@ (which was being inherited from .spectrum-Textfield) */ outline: none; border-radius: 0; - - padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper)); } } /* Nested textfield subcomponent */ .spectrum-NumberField-textfield { - inline-size: 100%; display: inline-flex; flex-flow: column-reverse nowrap; - block-size: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--spectrum-numberfield-border-width) * 2); + /* gives the textfield container (instead of the input) the proper border styles */ border: var(--spectrum-numberfield-border-width) solid var(--spectrum-numberfield-border-color-default); padding-inline-start: var(--spectrum-numberfield-spacing-inline-edge-to-text); padding-inline-end: var(--spectrum-numberfield-button-container-size); + + /* gives the textfield container (instead of the input) the proper border-radius */ border-radius: var(--spectrum-numberfield-border-radius); + + /* gives the textfield container (instead of the input) the proper background color */ background-color: var(--spectrum-numberfield-background-color, transparent); /* accommodate stepper buttons and validation icons */ @@ -378,9 +369,9 @@ padding-inline-start: 0; padding-inline-end: var(--spectrum-numberfield-spacing-min-inline-end-text-to-stepper); border: none; + + /* overrides the min-inline-size of the nested textfield input element */ min-inline-size: 100%; - block-size: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--spectrum-numberfield-border-width) * 2); - background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); } /* container for stepUp and stepDown buttons */ From 1c9e8321c20b94c22f828f92caaa6fc8a3a420a2 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 30 Apr 2025 09:37:36 -0400 Subject: [PATCH 16/24] fix(numberfield): add readOnly state - adds styles for read-only state - adds test cases - adds story for read-only state on docs page and expands on some documentation - updates metadata --- components/stepper/dist/metadata.json | 22 +++++++++++++-- components/stepper/index.css | 22 +++++++++------ components/stepper/stories/stepper.stories.js | 28 +++++++++++++++++-- components/stepper/stories/stepper.test.js | 24 ++++++++++++++++ components/stepper/stories/template.js | 7 +++-- 5 files changed, 87 insertions(+), 16 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index aeaac48d4c9..4b80c742f83 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -12,17 +12,28 @@ ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", ".spectrum-NumberField.is-disabled", ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)", + ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly)", ".spectrum-NumberField.is-focused:not(.is-disabled)", ".spectrum-NumberField.is-focused:not(.is-disabled):hover", + ".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly)", + ".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover", ".spectrum-NumberField.is-hover:not(.is-disabled)", ".spectrum-NumberField.is-hover:not(.is-disabled):focus", ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible", ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within", + ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)", + ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus", + ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within", ".spectrum-NumberField.is-invalid", ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)", + ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)", - ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled) .spectrum-NumberField-inputs", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly)", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs", + ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover", + ".spectrum-NumberField.is-readOnly", ".spectrum-NumberField.spectrum-NumberField--hiddenStepper", ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield", ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input", @@ -46,7 +57,14 @@ ".spectrum-NumberField:not(.is-disabled):focus-within", ".spectrum-NumberField:not(.is-disabled):focus-within:hover", ".spectrum-NumberField:not(.is-disabled):focus:hover", - ".spectrum-NumberField:not(.is-disabled):hover" + ".spectrum-NumberField:not(.is-disabled):hover", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover", + ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover" ], "modifiers": [ "--mod-numberfield-background-color", diff --git a/components/stepper/index.css b/components/stepper/index.css index b309f1fac1f..8cf51fc2904 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -156,8 +156,8 @@ --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-300); } - &:not(.is-disabled).is-hover, - &:not(.is-disabled):hover { + &:not(.is-disabled, .is-readOnly).is-hover, + &:not(.is-disabled, .is-readOnly):hover { --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))); } @@ -169,9 +169,9 @@ --mod-numberfield-border-color-keyboard-focus: var(--mod-numberfield-border-color-keyboard-focus-invalid, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); } - &:not(.is-disabled).is-focused, - &:not(.is-disabled):focus, - &:not(.is-disabled):focus-within { + &:not(.is-disabled, .is-readOnly).is-focused, + &:not(.is-disabled, .is-readOnly):focus, + &:not(.is-disabled, .is-readOnly):focus-within { --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus))); &.is-hover, @@ -180,9 +180,9 @@ } } - &:not(.is-disabled).is-keyboardFocused, - &:not(.is-disabled):focus-visible, - &:not(.is-disabled):focus-within { + &:not(.is-disabled, .is-readOnly).is-keyboardFocused, + &:not(.is-disabled, .is-readOnly):focus-visible, + &:not(.is-disabled, .is-readOnly):focus-within { --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))); &.is-hover, @@ -191,6 +191,10 @@ } } + &.is-readOnly { + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); + } + &.is-disabled { --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); --mod-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); @@ -264,7 +268,7 @@ content: ""; } - &:not(.is-disabled).is-keyboardFocused .spectrum-NumberField-inputs, + &:not(.is-disabled, .is-readOnly).is-keyboardFocused .spectrum-NumberField-inputs, &:focus-visible .spectrum-NumberField-inputs { outline: var(--spectrum-numberfield-focus-indicator-width) solid; outline-color: var(--spectrum-numberfield-focus-indicator-color); diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 5c35199f8a1..0fb6abd35c1 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isHovered, isKeyboardFocused, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isKeyboardFocused, isReadOnly, size } from "@spectrum-css/preview/types"; import { default as TextfieldStories } from "@spectrum-css/textfield/stories/textfield.stories.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -31,6 +31,7 @@ export default { isFocused, isHovered, isKeyboardFocused, + isReadOnly, displayLabel: { ...TextfieldStories?.argTypes?.displayLabel ?? {}, }, @@ -51,6 +52,7 @@ export default { isFocused: false, isHovered: false, isKeyboardFocused: false, + isReadOnly: false, isInvalid: false, isDisabled: false, hideStepper: false, @@ -90,9 +92,13 @@ Sizing.parameters = { }; /** - * Number fields come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. + * Number fields come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most + * frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. * - * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a secondary option to be positioned on the side of the field. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is too long for the available space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. + * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a + * secondary option to be positioned on the side of the field. Having the label on the top is the default and is recommended + * because this works better with long copy, localization, and responsive layouts. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is too long for the available + * space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. */ export const DefaultStates = AllDefaultVariantsGroup.bind({}); DefaultStates.args = {}; @@ -102,6 +108,9 @@ DefaultStates.parameters = { }; DefaultStates.storyName = "Default"; +/** + * Labels can be placed either on top or on the side of the field. Having the label on the side is most useful for when vertical space is limited. + */ export const SideLabel = AllDefaultVariantsGroup.bind({}); SideLabel.args = { labelPosition: "side", @@ -111,6 +120,19 @@ SideLabel.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * Number fields have a read-only option for when disabled content still needs to be shown. This allows for content to be copied, but not interacted with or changed. + */ +export const ReadOnly = DisabledVariantsGroup.bind({}); +ReadOnly.args = { + isReadOnly: true, +}; +ReadOnly.tags = ["!dev"]; +ReadOnly.parameters = { + chromatic: { disableSnapshot: true }, +}; +ReadOnly.storyName = "Read-only"; + export const InvalidStates = AllDefaultVariantsGroup.bind({}); InvalidStates.args = { isInvalid: true, diff --git a/components/stepper/stories/stepper.test.js b/components/stepper/stories/stepper.test.js index e683c6d5482..5b6f43e5b4c 100644 --- a/components/stepper/stories/stepper.test.js +++ b/components/stepper/stories/stepper.test.js @@ -113,5 +113,29 @@ export const NumberFieldGroup = Variants({ isDisabled: true, isKeyboardFocused: true, }, + { + testHeading: "Read-only", + isReadOnly: true, + }, + { + testHeading: "Read-only + disabled", + isReadOnly: true, + isDisabled: true, + }, + { + testHeading: "Read-only + hovered", + isReadOnly: true, + isHovered: true, + }, + { + testHeading: "Read-only + focused", + isReadOnly: true, + isFocused: true, + }, + { + testHeading: "Read-only + keyboard-focused", + isReadOnly: true, + isKeyboardFocused: true, + }, ] }); diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index c6f113f1760..42c99dbc0de 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -20,6 +20,7 @@ export const Template = ({ isFocused = false, isHovered = false, isKeyboardFocused = false, + isReadOnly = false, isInvalid = false, isDisabled = false, hideStepper = false, @@ -40,6 +41,7 @@ export const Template = ({ "is-focused": isFocused, "is-hover": isHovered, "is-keyboardFocused": isKeyboardFocused, + "is-readOnly": isReadOnly && !isDisabled, "is-invalid": isInvalid, "is-disabled": isDisabled, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -88,6 +90,7 @@ export const Template = ({ isInvalid, isFocused, isDisabled, + isReadOnly, id: id ? `${id}-input` : undefined, customClasses: [`${rootClass}-textfield`], customInputClasses: [`${rootClass}-input`], @@ -98,7 +101,7 @@ export const Template = ({ isInline: true, size, customClasses: [`${rootClass}-button`], - isDisabled, + isDisabled: isDisabled || isReadOnly, }, context)} `)} @@ -110,7 +113,7 @@ export const Template = ({ text: helpText, variant: isInvalid ? "negative" : undefined, hideIcon: true, - isDisabled, + isDisabled: isDisabled || isReadOnly, }, context)} `)} From d84c40372a9b5d0a55d03f29e05c0e179d6ff84f Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 30 Apr 2025 10:49:08 -0400 Subject: [PATCH 17/24] docs(numberfield): adds functionality to number field --- components/infieldbutton/stories/template.js | 4 +-- components/stepper/stories/stepper.stories.js | 34 ++++++++++++++++--- components/stepper/stories/template.js | 23 +++++++++++-- components/textfield/stories/template.js | 2 ++ 4 files changed, 53 insertions(+), 10 deletions(-) diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 50642daa22b..fe54a063aa6 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -20,7 +20,7 @@ export const Template = ( isActive, isInline, tabIndex = 0, - onMinus, + onSubtract, onAdd, onclick, } = {}, @@ -44,7 +44,7 @@ export const Template = ( ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} ?disabled=${isDisabled} - @click=${onMinus} + @click=${onSubtract} aria-haspopup="listbox" type="button" tabindex=${tabIndex} diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 0fb6abd35c1..29d227b9926 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,4 +1,4 @@ -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isKeyboardFocused, isReadOnly, size } from "@spectrum-css/preview/types"; import { default as TextfieldStories } from "@spectrum-css/textfield/stories/textfield.stories.js"; @@ -8,7 +8,9 @@ import { NumberFieldGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js"; /** - * A number field can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value. + * A number field can be used to increment or decrement a value by a specified amount via add and subtract buttons. The input field displays the current value. + * + * Note that the number fields are non-functional on this page, but functionality is demonstrated on [the story page](/story/components-number-field--default). */ export default { title: "Number field", @@ -45,6 +47,15 @@ export default { ...TextfieldStories?.argTypes?.helpText, }, value: { table: { disable: true, } }, + step: { + name: "Step value", + description: "The amount to increment or decrement the input value.", + table: { + type: { summary: "number" }, + category: "Content", + }, + control: "number", + }, }, args: { rootClass: "spectrum-NumberField", @@ -60,6 +71,7 @@ export default { label: "Field label", labelPosition: "top", helpText: "", + step: "1", }, parameters: { design: { @@ -70,9 +82,18 @@ export default { metadata, status: { type: "migrated", - } + }, + actions: { + handles: ["click .spectrum-InfieldButton:not([disabled])"], + }, + downState: { + selectors: [".spectrum-InfieldButton:not(:disabled)"], + }, }, tags: ["migrated"], + decorators: [ + withDownStateDimensionCapture, + ], }; export const Default = NumberFieldGroup.bind({}); @@ -97,8 +118,11 @@ Sizing.parameters = { * * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a * secondary option to be positioned on the side of the field. Having the label on the top is the default and is recommended - * because this works better with long copy, localization, and responsive layouts. The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. When the label is too long for the available - * space, it will wrap to the next line. If the value within the number field input overflows, it will truncate with an ellipsis. + * because this works better with long copy, localization, and responsive layouts. The [inline infield buttons](/docs/components-in-field-button--docs#inline) + * are usually visible, but can be hidden. The amount of the increment/decrement step is 1 by default. + * + * When the label is too long for the available space, it will wrap to the next line. If the value within the number field input + * overflows, it will truncate with an ellipsis. */ export const DefaultStates = AllDefaultVariantsGroup.bind({}); DefaultStates.args = {}; diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index 42c99dbc0de..1f780cb59ba 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -26,11 +26,26 @@ export const Template = ({ hideStepper = false, helpText, value = "0", + step = "1", id = getRandomId("numberfield"), customClasses = [], customStyles = {}, } = {}, context = {}) => { const { updateArgs } = context; + + /* these functions work on the story page, not the docs page. */ + const incrementValue = () => { + const newValue = String(parseFloat(value) + parseFloat(step)); + updateArgs?.({ value: newValue }); + return newValue; + }; + + const decrementValue = () => { + const newValue = String(parseFloat(value) - parseFloat(step)); + updateArgs?.({ value: newValue }); + return newValue; + }; + return html`
`, () => html` Date: Tue, 6 May 2025 16:43:35 -0400 Subject: [PATCH 18/24] docs(numberfield): add more documentation --- components/stepper/stories/stepper.stories.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 29d227b9926..bd51dd147ca 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -80,15 +80,15 @@ export default { }, packageJson, metadata, - status: { - type: "migrated", - }, actions: { handles: ["click .spectrum-InfieldButton:not([disabled])"], }, downState: { selectors: [".spectrum-InfieldButton:not(:disabled)"], }, + status: { + type: "migrated", + }, }, tags: ["migrated"], decorators: [ @@ -116,13 +116,15 @@ Sizing.parameters = { * Number fields come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most * frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. * - * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a - * secondary option to be positioned on the side of the field. Having the label on the top is the default and is recommended - * because this works better with long copy, localization, and responsive layouts. The [inline infield buttons](/docs/components-in-field-button--docs#inline) - * are usually visible, but can be hidden. The amount of the increment/decrement step is 1 by default. + * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default. Having + * the label on the top is the default and is recommended because this works better with long copy, localization, and responsive + * layouts. + * + * The [inline infield buttons](/docs/components-in-field-button--docs#inline) are usually visible, but can be hidden. + * The amount of the increment/decrement step is 1 by default. * * When the label is too long for the available space, it will wrap to the next line. If the value within the number field input - * overflows, it will truncate with an ellipsis. + * overflows, it will truncate with an ellipsis. To view truncated text, implementations can use a tooltip available on hover (desktop) or long press (mobile). If an error state is needed for smaller inputs, implementations should consider hiding the error icon so that more of the input value is visible. */ export const DefaultStates = AllDefaultVariantsGroup.bind({}); DefaultStates.args = {}; @@ -133,7 +135,8 @@ DefaultStates.parameters = { DefaultStates.storyName = "Default"; /** - * Labels can be placed either on top or on the side of the field. Having the label on the side is most useful for when vertical space is limited. + * Number fields have a [field label](/docs/components-field-label--docs) that is positioned above the field by default, with a + * secondary option to be positioned on the side of the field. Having the label on the side is most useful for when vertical space is limited. */ export const SideLabel = AllDefaultVariantsGroup.bind({}); SideLabel.args = { @@ -143,6 +146,7 @@ SideLabel.tags = ["!dev"]; SideLabel.parameters = { chromatic: { disableSnapshot: true }, }; +SideLabel.storyName = "Side label"; /** * Number fields have a read-only option for when disabled content still needs to be shown. This allows for content to be copied, but not interacted with or changed. @@ -176,7 +180,6 @@ Disabled.tags = ["!dev"]; Disabled.parameters = { chromatic: { disableSnapshot: true }, }; -Disabled.storyName = "Disabled"; // ********* VRT ONLY ********* // export const WithForcedColors = NumberFieldGroup.bind({}); From f258a77fc7a6b0c566218e297c283a721a1db742 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 6 May 2025 16:48:00 -0400 Subject: [PATCH 19/24] chore(form): revert comment change and changeset --- .changeset/purple-flies-grow.md | 5 ----- components/form/index.css | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .changeset/purple-flies-grow.md diff --git a/.changeset/purple-flies-grow.md b/.changeset/purple-flies-grow.md deleted file mode 100644 index eb1a4171c2a..00000000000 --- a/.changeset/purple-flies-grow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/form": patch ---- - -Updates comment to reference number field instead of stepper. diff --git a/components/form/index.css b/components/form/index.css index 4d41ebe55bb..905208b8256 100644 --- a/components/form/index.css +++ b/components/form/index.css @@ -46,7 +46,7 @@ display: block; } -/* Fix extra space after inline-flex elements such as number field. */ +/* Fix extra space after inline-flex elements such as stepper. */ .spectrum-Form-itemField > * { vertical-align: top; } From 1a2db66ceb88bf445c70c14e0bee3b965235039e Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 7 May 2025 11:07:01 -0400 Subject: [PATCH 20/24] fix(numberfield): adjust calc for input to stepper spacing - updates the calc for the input to stepper spacing to subtract the infield buttons' inline padding from the text-to-stepper padding - updates metadata --- components/stepper/dist/metadata.json | 6 ++++++ components/stepper/index.css | 16 ++++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 4b80c742f83..cc23bc1c2a5 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -164,11 +164,16 @@ "--spectrum-in-field-button-edge-to-fill-extra-large", "--spectrum-in-field-button-edge-to-fill-large", "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-button-side-edge-to-fill-extra-large", + "--spectrum-in-field-button-side-edge-to-fill-large", + "--spectrum-in-field-button-side-edge-to-fill-medium", + "--spectrum-in-field-button-side-edge-to-fill-small", "--spectrum-in-field-stepper-to-end-extra-large", "--spectrum-in-field-stepper-to-end-large", "--spectrum-in-field-stepper-to-end-medium", "--spectrum-in-field-stepper-to-end-small", "--spectrum-infield-button-edge-to-fill", + "--spectrum-infield-button-inline-edge-to-fill", "--spectrum-infield-button-width", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", @@ -209,6 +214,7 @@ "--spectrum-numberfield-border-width", "--spectrum-numberfield-button-container-size", "--spectrum-numberfield-button-inline-offset", + "--spectrum-numberfield-button-inline-padding", "--spectrum-numberfield-focus-indicator-color", "--spectrum-numberfield-focus-indicator-gap", "--spectrum-numberfield-focus-indicator-width", diff --git a/components/stepper/index.css b/components/stepper/index.css index 8cf51fc2904..34b1bcb495b 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -71,7 +71,9 @@ --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-100); + + /* the input to the stepper buttons spacing accommodates the built-in padding on the infield buttons */ + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-100) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-100); --spectrum-numberfield-spacing-field-to-helptext: var(--spectrum-help-text-to-component); --spectrum-numberfield-spacing-label-to-field: var(--spectrum-field-label-to-component); @@ -79,6 +81,7 @@ --spectrum-numberfield-spacing-side-label-to-field: var(--spectrum-spacing-200); /* Button size and offset (to properly position the validation icons/padding) */ + --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-medium)); --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-100)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-medium))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); @@ -96,10 +99,13 @@ --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-75)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-75); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-75) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-75); --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-small); + --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-small)); + + /* this 👇 container size does not include the infield buttons' inline-padding */ --spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-75)) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small)); @@ -119,10 +125,11 @@ --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-200)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-200); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-200) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-200); --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-large); + --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-large)); --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-large))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large)); @@ -142,10 +149,11 @@ --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-300)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-300); + --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-300); --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-extra-large); + --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-extra-large)); --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-extra-large))) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large)); From b67c1d4eeccd63aa125acc0120531307e22504c2 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 7 May 2025 11:21:18 -0400 Subject: [PATCH 21/24] fix(numberfield): accommodate border width in inline padding --- components/stepper/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index 34b1bcb495b..fea6fe4dbfb 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -68,7 +68,7 @@ --spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-100); /* Spacing */ - --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-numberfield-border-width)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); @@ -95,7 +95,7 @@ --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-75)); --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-small)); --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-small)); - --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-numberfield-border-width)); --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-75)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); @@ -121,7 +121,7 @@ --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-200)); --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-large)); --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-large)); - --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-numberfield-border-width)); --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-200)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); @@ -145,7 +145,7 @@ --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-300)); --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large)); --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large)); - --spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width)); --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-300)); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); From a3d06b5a88b5f5b85df1a6c1f3a90da1eca94a07 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 7 May 2025 11:29:09 -0400 Subject: [PATCH 22/24] fix(numberfield): adjust calc for input to stepper spacing - add calc for validation icon to stepper spacing to subtract the infield button's inline padding --- components/stepper/index.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index fea6fe4dbfb..e17f096341d 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -77,7 +77,7 @@ --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-100); --spectrum-numberfield-spacing-field-to-helptext: var(--spectrum-help-text-to-component); --spectrum-numberfield-spacing-label-to-field: var(--spectrum-field-label-to-component); - --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-medium); + --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-medium) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-side-label-to-field: var(--spectrum-spacing-200); /* Button size and offset (to properly position the validation icons/padding) */ @@ -101,7 +101,7 @@ --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-75) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-small); + --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-small) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-small)); @@ -127,7 +127,7 @@ --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-200) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-large); + --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-large) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-large)); --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-large))) * 2); @@ -151,7 +151,7 @@ --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-extra-large); + --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-extra-large)); --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-extra-large))) * 2); @@ -219,12 +219,12 @@ --mod-textfield-spacing-block-start: var(--mod-numberfield-spacing-block-start-edge-to-text, var(--spectrum-numberfield-spacing-block-start-edge-to-text)); --mod-textfield-spacing-block-end: var(--mod-numberfield-spacing-block-end-edge-to-text, var(--spectrum-numberfield-spacing-block-end-edge-to-text)); --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-edge-to-alert-icon) - var(--spectrum-numberfield-border-width)); - --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); /* this mod overrides the inline-size of the nested textfield */ --mod-textfield-width: 100%; --mod-textfield-height: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)) * 2); --mod-textfield-icon-spacing-inline-start-invalid: var(--mod-numberfield-spacing-min-inline-end-value-to-icon, var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon)); + --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); --mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); --mod-textfield-text-color-default: var(--mod-numberfield-text-color, var(--spectrum-numberfield-text-color)); --mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled)); From 86e55f163d393b5172c938e8bd070fe3d7ecb82e Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 7 May 2025 11:58:52 -0400 Subject: [PATCH 23/24] fix(numberfield): adjust calc for input to stepper spacing - correctly calculates the input padding to account for the spacing between the input and alert icon, alert icon size and the new spacing between the icon and the stepper buttons - updates metadata --- components/stepper/dist/metadata.json | 4 +--- components/stepper/index.css | 6 ++++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index cc23bc1c2a5..506eeaa138a 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -8,6 +8,7 @@ ".spectrum-NumberField-input", ".spectrum-NumberField-inputs", ".spectrum-NumberField-inputs .spectrum-Textfield .spectrum-Textfield-input", + ".spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input", ".spectrum-NumberField-textfield", ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", ".spectrum-NumberField.is-disabled", @@ -104,7 +105,6 @@ "--mod-numberfield-spacing-block-end-edge-to-text", "--mod-numberfield-spacing-block-start-edge-to-text", "--mod-numberfield-spacing-field-to-helptext", - "--mod-numberfield-spacing-min-inline-end-value-to-icon", "--mod-numberfield-text-color", "--mod-numberfield-text-color-disabled", "--mod-numberfield-text-color-focus", @@ -264,8 +264,6 @@ "--mod-textfield-font-weight", "--mod-textfield-height", "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-start-invalid", "--mod-textfield-min-width", "--mod-textfield-spacing-block-end", "--mod-textfield-spacing-block-start", diff --git a/components/stepper/index.css b/components/stepper/index.css index e17f096341d..ac9b38dcda7 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -223,8 +223,6 @@ /* this mod overrides the inline-size of the nested textfield */ --mod-textfield-width: 100%; --mod-textfield-height: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)) * 2); - --mod-textfield-icon-spacing-inline-start-invalid: var(--mod-numberfield-spacing-min-inline-end-value-to-icon, var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon)); - --mod-textfield-icon-spacing-inline-end-invalid: var(--spectrum-numberfield-spacing-validation-icon-to-stepper); --mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); --mod-textfield-text-color-default: var(--mod-numberfield-text-color, var(--spectrum-numberfield-text-color)); --mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled)); @@ -351,6 +349,10 @@ outline: none; border-radius: 0; } + + & .spectrum-Textfield.is-invalid .spectrum-NumberField-input { + padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper)); + } } /* Nested textfield subcomponent */ From bd77043e69fa0d578041ed8007a8680ed9ce6b19 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 8 May 2025 09:49:48 -0400 Subject: [PATCH 24/24] fix(numberfield): add offset to inline-end padding - corrects the padding-inline-end for the textfield by adding the offset to the calc - removes the mod for textfield's min-width since it is being overridden by the numberfield's min-width anyway --- components/stepper/dist/metadata.json | 1 - components/stepper/index.css | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 506eeaa138a..8817bd86903 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -264,7 +264,6 @@ "--mod-textfield-font-weight", "--mod-textfield-height", "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-min-width", "--mod-textfield-spacing-block-end", "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", diff --git a/components/stepper/index.css b/components/stepper/index.css index ac9b38dcda7..1d5604ff369 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -232,10 +232,6 @@ --mod-textfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-numberfield-font-style)); --mod-textfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-numberfield-font-size)); - &.spectrum-NumberField--hiddenStepper { - --mod-textfield-min-width: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size)); - } - &:not(.is-disabled).is-hover, &:not(.is-disabled):hover { /* overrides the textfield mod */ @@ -363,7 +359,7 @@ /* gives the textfield container (instead of the input) the proper border styles */ border: var(--spectrum-numberfield-border-width) solid var(--spectrum-numberfield-border-color-default); padding-inline-start: var(--spectrum-numberfield-spacing-inline-edge-to-text); - padding-inline-end: var(--spectrum-numberfield-button-container-size); + padding-inline-end: calc(var(--spectrum-numberfield-button-container-size) + var(--spectrum-numberfield-button-inline-offset)); /* gives the textfield container (instead of the input) the proper border-radius */ border-radius: var(--spectrum-numberfield-border-radius);