fix(number-field,search,textfield): add t-shirt sizes

adobe · Jun 30, 2023 · fda8f96 · fda8f96
1 parent b607b28
commit fda8f96
Show file tree

Hide file tree

Showing 21 changed files with 656 additions and 147 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,6 @@
         "tools/**/*.dev.js": { "when": "$(basename).js" },
         "tools/**/*.d.ts": { "when": "$(basename).ts" },
         "**/*.test-vrt.ts": true
-    }
+    },
+    "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/packages/number-field/README.md b/packages/number-field/README.md
@@ -24,16 +24,63 @@ When looking to leverage the `NumberField` base class as a type and/or for exten
 import { NumberField } from '@spectrum-web-components/number-field';
 ```
 
-## Example
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
 
 ```html
 <sp-number-field
     label="Size"
     value="1024"
-    style="width: 200px"
+    size="s"
+    style="--spectrum-stepper-width: 85px"
+></sp-number-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-number-field
+    label="Size"
+    value="1024"
+    size="m"
+    style="--spectrum-stepper-width: 110px"
 ></sp-number-field>
 ```
 
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-number-field
+    label="Size"
+    value="1024"
+    size="l"
+    style="--spectrum-stepper-width: 135px"
+></sp-number-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-number-field
+    label="Size"
+    value="1024"
+    size="xl"
+    style="--spectrum-stepper-width: 160px"
+></sp-number-field>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
 ## Number formatting
 
 An `<sp-number-field>` element will process its numeric value with `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.value)` in order to prepare it for visual delivery in the input. In order to customize this processing supply your own `Intl.NumberFormatOptions` via the `formatOptions` property, or `format-options` attribute as seen below.

diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -28,6 +28,8 @@ import { streamingListener } from '@spectrum-web-components/base/src/streaming-l
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import {
     isAndroid,
@@ -61,6 +63,33 @@ export const remapMultiByteCharacters: Record<string, string> = {
     ー: '-',
 };
 
+const chevronIcon: Record<string, (dir: 'Down' | 'Up') => TemplateResult> = {
+    s: (dir) => html`
+        <sp-icon-chevron75
+            slot="icon"
+            class="stepper-icon spectrum-UIIcon-Chevron${dir}75"
+        ></sp-icon-chevron75>
+    `,
+    m: (dir) => html`
+        <sp-icon-chevron75
+            slot="icon"
+            class="stepper-icon spectrum-UIIcon-Chevron${dir}75"
+        ></sp-icon-chevron75>
+    `,
+    l: (dir) => html`
+        <sp-icon-chevron100
+            slot="icon"
+            class="stepper-icon spectrum-UIIcon-Chevron${dir}100"
+        ></sp-icon-chevron100>
+    `,
+    xl: (dir) => html`
+        <sp-icon-chevron200
+            slot="icon"
+            class="stepper-icon spectrum-UIIcon-Chevron${dir}200"
+        ></sp-icon-chevron200>
+    `,
+};
+
 /**
  * @element sp-number-field
  * @slot help-text - default or non-negative help text to associate to your form element
@@ -557,7 +586,7 @@ export class NumberField extends TextfieldBase {
                           })}
                       >
                           <sp-action-button
-                              class="stepUp"
+                              class="step-up"
                               label="Increment"
                               tabindex="-1"
                               ?focused=${this.focused}
@@ -567,13 +596,10 @@ export class NumberField extends TextfieldBase {
                                   this.value === this.max)}
                               ?quiet=${this.quiet}
                           >
-                              <sp-icon-chevron75
-                                  slot="icon"
-                                  class="stepper-icon spectrum-UIIcon-ChevronUp75"
-                              ></sp-icon-chevron75>
+                              ${chevronIcon[this.size]('Up')}
                           </sp-action-button>
                           <sp-action-button
-                              class="stepDown"
+                              class="step-down"
                               label="Decrement"
                               tabindex="-1"
                               ?focused=${this.focused}
@@ -583,10 +609,7 @@ export class NumberField extends TextfieldBase {
                                   this.value === this.min)}
                               ?quiet=${this.quiet}
                           >
-                              <sp-icon-chevron75
-                                  slot="icon"
-                                  class="stepper-icon spectrum-UIIcon-ChevronDown75"
-                              ></sp-icon-chevron75>
+                              ${chevronIcon[this.size]('Down')}
                           </sp-action-button>
                       </span>
                   `}

diff --git a/packages/number-field/src/number-field.css b/packages/number-field/src/number-field.css
@@ -16,6 +16,22 @@ governing permissions and limitations under the License.
     inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
+:host([size='s']) {
+    --spectrum-stepper-width: calc(
+        var(--spectrum-stepper-width-medium) / 5 * 4
+    );
+}
+
+:host([size='l']) {
+    --spectrum-stepper-width: calc(var(--spectrum-stepper-width-medium) * 1.25);
+}
+
+:host([size='xl']) {
+    --spectrum-stepper-width: calc(
+        var(--spectrum-stepper-width-medium) * 1.25 * 1.25
+    );
+}
+
 #textfield {
     inline-size: 100%;
 }
@@ -35,6 +51,25 @@ sp-field-button {
     );
 
     flex-shrink: 0;
+    block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
+    inline-size: calc(
+        var(--mod-textfield-height, var(--spectrum-textfield-height)) * 3 / 4
+    );
+    padding-block: var(--spectrum-stepper-button-gap);
+}
+
+.step-up,
+.step-down {
+    width: 100%;
+    height: 50%;
+    overflow: hidden;
+    padding: 0;
+}
+
+.step-down .stepper-icon,
+.step-up .stepper-icon {
+    margin-inline-start: 0;
+    translate: 5%;
 }
 
 :host([readonly]) .buttons {

diff --git a/packages/number-field/src/spectrum-config.js b/packages/number-field/src/spectrum-config.js
@@ -236,8 +236,11 @@ const config = {
                     'keyboard-focused'
                 ),
                 converter.classToClass('spectrum-Stepper-buttons', 'buttons'),
-                converter.classToClass('spectrum-Stepper-stepDown', 'stepDown'),
-                converter.classToClass('spectrum-Stepper-stepUp', 'stepUp'),
+                converter.classToClass(
+                    'spectrum-Stepper-stepDown',
+                    'step-down'
+                ),
+                converter.classToClass('spectrum-Stepper-stepUp', 'step-up'),
                 converter.classToClass(
                     'spectrum-Stepper-textfield',
                     'textfield'