feat(search): support "quiet" variant

adobe · Oct 7, 2019 · d0f85f1 · d0f85f1
1 parent 8014345
commit d0f85f1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/search/src/search.ts b/packages/search/src/search.ts
@@ -75,13 +75,13 @@ export class Search extends Textfield {
                 @submit=${this.handleSubmit}
             >
                 <sp-icons-medium></sp-icons-medium>
+                ${super.render()}
                 <sp-icon
                     id="icon"
                     class="icon magnifier"
                     size="s"
                     name="ui:Magnifier"
                 ></sp-icon>
-                ${super.render()}
                 <button id="button" type="reset" aria-label="Reset">
                     <sp-icon
                         class="icon cross-medium"

diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js
@@ -19,6 +19,13 @@ module.exports = {
                 selector: '.spectrum-Search',
             },
             focus: '#input',
+            attributes: [
+                {
+                    type: 'boolean',
+                    selector: '.spectrum-Textfield--quiet',
+                    name: 'quiet',
+                },
+            ],
             ids: [
                 {
                     selector: '.spectrum-Search-input',
@@ -32,6 +39,10 @@ module.exports = {
                     selector: '.spectrum-ClearButton',
                     name: 'button',
                 },
+                {
+                    selector: '.spectrum-Search-clear',
+                    name: 'button',
+                },
             ],
             classes: [
                 {

diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
@@ -36,20 +36,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
    * .spectrum-Search-input::-webkit-search-decoration */
     -webkit-appearance: none;
 }
-#input.spectrum-Textfield--quiet {
+:host([quiet]) #input {
     /* .spectrum-Search-input.spectrum-Textfield--quiet */
     padding-left: var(--spectrum-search-quiet-padding-left, 24px);
     padding-right: var(--spectrum-search-quiet-padding-right, 20px);
 }
-#input.spectrum-Textfield--quiet ~ #icon {
+:host([quiet]) #input ~ #icon {
     /* .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-icon */
     left: 0;
 }
-#input.spectrum-Textfield--quiet ~ .spectrum-Search-clear {
+:host([quiet]) #input ~ #button {
     /* .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-clear */
     right: -8px;
 }
-#input.spectrum-Textfield--quiet ~ .spectrum-Search-rightIcon {
+:host([quiet]) #input ~ .spectrum-Search-rightIcon {
     /* .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-rightIcon */
     right: 0;
 }