From 83764b4964cda812be592408c9c7f624e0f7edc7 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:18:49 -0400 Subject: [PATCH 01/10] 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 a9d6141eda..7db6cdaeeb 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 3f9d0f6ab506e0ec80ec314916c8b4e77ed15aab Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:21:32 -0400 Subject: [PATCH 02/10] 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 fb14155af8..fc14b5e9e7 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 aeaa529fc32d788b161fd2d81731d7deecdf06a3 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:24:55 -0400 Subject: [PATCH 03/10] 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 8775574a34..04cb210130 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 80e00d5b3b380eefe9ffd1d78575394101ff2a68 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:28:10 -0400 Subject: [PATCH 04/10] 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 60246d2133..40f0de52b0 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 3006ce5a3fe1462d383bc181ec4bbf06f73a9448 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:54:24 -0400 Subject: [PATCH 05/10] 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 bfc3ca2bfc..f2082ea835 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 da46b6ef95ed435cab03424d10637a1271be018e Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:56:46 -0400 Subject: [PATCH 06/10] 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 905208b825..4d41ebe55b 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 5677a09d8a..7165690810 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 3bd073d6dc2f4321ad01d1d7a65d1bc9ab49fcdd Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:57:59 -0400 Subject: [PATCH 07/10] 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 42b3c76d4e..d5c82d6473 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 ec69a4751044252d33a85f055b51a135e0b775de Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 13:59:54 -0400 Subject: [PATCH 08/10] 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 0000000000..eb1a4171c2 --- /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 5b61f78ad7de7ff9fac78706e1fa82648fff5724 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 14:30:49 -0400 Subject: [PATCH 09/10] 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 0000000000..296143885f --- /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 785d2f97cd16abe78f7e36b05a3fd6c38b508b57 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 23 Apr 2025 15:19:41 -0400 Subject: [PATCH 10/10] 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 d5c82d6473..c8a1dbd0f1 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 f2082ea835..797cc86008 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) {