feat(search,textfield): use core tokens

adobe · May 25, 2023 · 2ed5135 · 2ed5135
1 parent a6bf2b1
commit 2ed5135
Show file tree

Hide file tree

Showing 12 changed files with 1,162 additions and 635 deletions.
diff --git a/packages/search/src/Search.ts b/packages/search/src/Search.ts
@@ -108,7 +108,7 @@ export class Search extends Textfield {
                 @keydown=${this.handleKeydown}
             >
                 <sp-icon-magnify
-                    class="icon magnifier icon-workflow"
+                    class="icon magnifier icon-workflow icon-search"
                 ></sp-icon-magnify>
                 ${super.renderField()}
                 ${this.value

diff --git a/packages/search/src/search.css b/packages/search/src/search.css
@@ -12,14 +12,8 @@ governing permissions and limitations under the License.
 
 @import './spectrum-search.css';
 
-:host([dir='ltr']) {
-    --spectrum-textfield-texticon-padding-right: var(
-        --spectrum-alias-infieldbutton-full-height-m
-    );
-}
-
-:host([dir='rtl']) {
-    --spectrum-textfield-texticon-padding-left: var(
+:host {
+    --mod-textfield-spacing-inline: var(
         --spectrum-alias-infieldbutton-full-height-m
     );
 }

diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js
@@ -32,7 +32,7 @@ const config = {
                 converter.classToId('spectrum-Search', 'textfield'),
                 converter.classToClass('spectrum-Search-input', 'input'),
                 converter.classToClass('spectrum-Icon', 'icon'),
-                converter.classToClass('spectrum-Search-icon', 'icon'),
+                converter.classToClass('spectrum-Search-icon', 'icon-search'),
                 converter.classToAttribute('spectrum-Search--quiet', 'quiet'),
                 converter.classToId('spectrum-Search-clearButton', 'button'),
                 converter.classToId('spectrum-Search-textfield', 'textfield'),

diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
@@ -51,10 +51,10 @@ governing permissions and limitations under the License.
         var(--spectrum-global-dimension-size-50)
     );
 }
-:host([dir='ltr']:not([quiet])) #textfield .icon {
+:host([dir='ltr']:not([quiet])) #textfield .icon-search {
     left: var(--spectrum-alias-search-padding-left-m);
 }
-:host([dir='rtl']:not([quiet])) #textfield .icon {
+:host([dir='rtl']:not([quiet])) #textfield .icon-search {
     right: var(--spectrum-alias-search-padding-left-m);
 }
 :host([dir='ltr']:not([quiet])) #textfield .input {
@@ -100,37 +100,37 @@ governing permissions and limitations under the License.
 :host([quiet]) #textfield:after {
     border-radius: var(--spectrum-alias-search-border-radius-quiet, 0);
 }
-.icon {
+.icon-search {
     color: var(
         --spectrum-textfield-m-texticon-icon-color,
         var(--spectrum-alias-component-icon-color-default)
     );
 }
-.input:hover ~ .icon {
+.input:hover ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-hover,
         var(--spectrum-alias-component-icon-color-hover)
     );
 }
-.input:active ~ .icon {
+.input:active ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-down,
         var(--spectrum-alias-component-icon-color-down)
     );
 }
-.input.focus-visible ~ .icon {
+.input.focus-visible ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-key-focus,
         var(--spectrum-alias-component-icon-color-key-focus)
     );
 }
-.input:focus-visible ~ .icon {
+.input:focus-visible ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-key-focus,
         var(--spectrum-alias-component-icon-color-key-focus)
     );
 }
-.input:disabled ~ .icon {
+.input:disabled ~ .icon-search {
     color: var(
         --spectrum-textfield-m-texticon-text-color-disabled,
         var(--spectrum-alias-component-text-color-disabled)

diff --git a/packages/textfield/package.json b/packages/textfield/package.json
@@ -65,7 +65,7 @@
         "@spectrum-web-components/shared": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/textfield": "^3.2.16"
+        "@spectrum-css/textfield": "^5.1.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js
@@ -51,8 +51,13 @@ export default {
                     'spectrum-Textfield-icon',
                     'icon-workflow'
                 ),
+                converter.classToClass('spectrum-Search-icon', 'icon-search'),
                 converter.classToAttribute('spectrum-Textfield--multiline'),
                 converter.classToAttribute('spectrum-Textfield--quiet'),
+                converter.classToAttribute(
+                    'spectrum-Textfield--grows',
+                    'grows'
+                ),
                 converter.classToAttribute('is-focused', 'focused'),
                 converter.classToAttribute('is-keyboardFocused', 'focused'),
                 converter.classToAttribute('is-valid', 'valid'),