feat(textfield): use Spectrum CSS ^3.0.0

adobe · Aug 29, 2020 · 1c1acb9 · 1c1acb9
1 parent 966d3b6
commit 1c1acb9
Show file tree

Hide file tree

Showing 8 changed files with 566 additions and 397 deletions.
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
@@ -47,9 +47,10 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/textfield": "^2.0.5"
+        "@spectrum-css/textfield": "^3.0.0-beta.3"
     },
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "@spectrum-web-components/icon": "^0.5.2",
         "@spectrum-web-components/icons-ui": "^0.2.2",
         "@spectrum-web-components/shared": "^0.6.0",

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -17,7 +17,7 @@ import {
     query,
     TemplateResult,
     PropertyValues,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icon/sp-icon.js';
@@ -127,53 +127,49 @@ export class Textfield extends Focusable {
     protected renderStateIcons(): TemplateResult | typeof nothing {
         if (this.invalid) {
             return html`
-                <sp-icon id="invalid" class="alert-small">
+                <sp-icon id="invalid" class="icon alert-small">
                     ${AlertSmallIcon({ hidden: true })}
                 </sp-icon>
             `;
         } else if (this.valid) {
             return html`
-                <sp-icon id="valid" class="checkmark-small">
+                <sp-icon id="valid" class="icon checkmark-small">
                     ${CheckmarkSmallIcon({ hidden: true })}
                 </sp-icon>
             `;
         }
         return nothing;
     }
 
-    protected render(): TemplateResult {
-        if (this.multiline) {
-            return html`
-                ${this.grows
-                    ? html`
-                          <div id="sizer">${this.value}</div>
-                      `
-                    : nothing}
-                <!-- @ts-ignore -->
-                <textarea
-                    aria-label=${this.label || this.placeholder}
-                    id="input"
-                    maxlength=${ifDefined(this.maxlength)}
-                    minlength=${ifDefined(this.minlength)}
-                    pattern=${ifDefined(this.pattern)}
-                    placeholder=${this.placeholder}
-                    .value=${this.value}
-                    @change=${this.onChange}
-                    @input=${this.onInput}
-                    ?disabled=${this.disabled}
-                    ?required=${this.required}
-                    autocomplete=${ifDefined(this.autocomplete)}
-                ></textarea>
-                ${this.renderStateIcons()}
-            `;
-        }
+    private get renderMultiline(): TemplateResult {
+        return html`
+            ${this.grows
+                ? html`
+                      <div id="sizer">${this.value}</div>
+                  `
+                : nothing}
+            <!-- @ts-ignore -->
+            <textarea
+                aria-label=${this.label || this.placeholder}
+                id="input"
+                pattern=${ifDefined(this.pattern)}
+                placeholder=${this.placeholder}
+                .value=${this.value}
+                @change=${this.onChange}
+                @input=${this.onInput}
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                autocomplete=${ifDefined(this.autocomplete)}
+            ></textarea>
+        `;
+    }
+
+    private get renderInput(): TemplateResult {
         return html`
             <!-- @ts-ignore -->
             <input
                 aria-label=${this.label || this.placeholder}
                 id="input"
-                maxlength=${ifDefined(this.maxlength)}
-                minlength=${ifDefined(this.minlength)}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${this.value}
@@ -183,7 +179,13 @@ export class Textfield extends Focusable {
                 ?required=${this.required}
                 autocomplete=${ifDefined(this.autocomplete)}
             />
+        `;
+    }
+
+    protected render(): TemplateResult {
+        return html`
             ${this.renderStateIcons()}
+            ${this.multiline ? this.renderMultiline : this.renderInput}
         `;
     }
 

diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js
@@ -17,8 +17,23 @@ const config = {
             name: 'textfield',
             host: {
                 selector: '.spectrum-Textfield',
-                shadowSelector: '#input',
             },
+            ids: [
+                {
+                    selector: '.spectrum-Textfield-input',
+                    name: 'input',
+                },
+            ],
+            classes: [
+                {
+                    selector: '.spectrum-Textfield-validationIcon',
+                    name: 'icon',
+                },
+                {
+                    selector: '.spectrum-Textfield-icon',
+                    name: 'icon-workflow',
+                },
+            ],
             attributes: [
                 {
                     type: 'boolean',
@@ -42,9 +57,14 @@ const config = {
                 },
                 {
                     type: 'boolean',
-                    selector: 'spectrum-Textfield--quiet',
+                    selector: '.spectrum-Textfield--quiet',
                     name: 'quiet',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.is-disabled',
+                    name: 'disabled',
+                },
             ],
         },
     ],