feat(textfield): update spectrum css input

adobe · Jan 6, 2021 · 2ce4ba2 · 2ce4ba2
1 parent 183ee95
commit 2ce4ba2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
@@ -49,12 +49,13 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/textfield": "^3.0.0-beta.5"
+        "@spectrum-css/textfield": "^3.0.0-beta.6"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
+        "@spectrum-web-components/icons-workflow": "^0.3.6",
         "@spectrum-web-components/shared": "^0.7.4",
         "tslib": "^2.0.0"
     }

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -23,18 +23,15 @@ import {
 
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    AlertMediumIcon,
-    CheckmarkMediumIcon,
-} from '@spectrum-web-components/icons-ui';
+import { Checkmark100Icon } from '@spectrum-web-components/icons-ui';
+import { AlertIcon } from '@spectrum-web-components/icons-workflow';
 
 import textfieldStyles from './textfield.css.js';
-import checkmarkMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.js';
-import alertMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js';
+import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
 
 export class Textfield extends Focusable {
     public static get styles(): CSSResultArray {
-        return [textfieldStyles, checkmarkMediumStyles, alertMediumStyles];
+        return [textfieldStyles, checkmarkStyles];
     }
 
     @property({ attribute: 'allowed-keys' })
@@ -133,14 +130,18 @@ export class Textfield extends Focusable {
     protected renderStateIcons(): TemplateResult | typeof nothing {
         if (this.invalid) {
             return html`
-                <sp-icon id="invalid" class="icon alert-medium">
-                    ${AlertMediumIcon({ hidden: true })}
+                <sp-icon id="invalid" class="icon" size="none">
+                    ${AlertIcon()}
                 </sp-icon>
             `;
         } else if (this.valid) {
             return html`
-                <sp-icon id="valid" class="icon checkmark-medium">
-                    ${CheckmarkMediumIcon({ hidden: true })}
+                <sp-icon
+                    id="valid"
+                    class="icon spectrum-UIIcon-Checkmark100"
+                    size="none"
+                >
+                    ${Checkmark100Icon()}
                 </sp-icon>
             `;
         }

diff --git a/packages/textfield/tsconfig.json b/packages/textfield/tsconfig.json
@@ -9,6 +9,7 @@
     "references": [
         { "path": "../icon" },
         { "path": "../icons-ui" },
+        { "path": "../icons-workflow" },
         { "path": "../shared" }
     ]
 }