feat(dropdown): update spectrum css input

adobe · Jan 6, 2021 · 4fd3585 · 4fd3585
1 parent 0f5a667
commit 4fd3585
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 106 deletions.
diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json
@@ -54,13 +54,14 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/picker": "^1.0.0-beta.2"
+        "@spectrum-css/picker": "^1.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
         "@spectrum-web-components/button": "^0.9.4",
         "@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/menu": "^0.4.4",
         "@spectrum-web-components/overlay": "^0.6.4",
         "@spectrum-web-components/popover": "^0.5.4",

diff --git a/packages/dropdown/src/Dropdown.ts b/packages/dropdown/src/Dropdown.ts
@@ -22,16 +22,12 @@ import {
 } from '@spectrum-web-components/base';
 
 import dropdownStyles from './dropdown.css.js';
-import '@spectrum-web-components/button/sp-field-button.js';
-import alertSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.js';
-import chevronDownMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css.js';
+import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    AlertSmallIcon,
-    ChevronDownMediumIcon,
-} from '@spectrum-web-components/icons-ui';
+import { Chevron100Icon } from '@spectrum-web-components/icons-ui';
+import { AlertIcon } from '@spectrum-web-components/icons-workflow';
 import {
     MenuItem,
     MenuItemQueryRoleEventDetail,
@@ -51,10 +47,6 @@ import {
  * @slot {"sp-menu"} - The menu of options that will display when the dropdown is open
  */
 export class DropdownBase extends Focusable {
-    public static get styles(): CSSResultArray {
-        return [dropdownStyles, alertSmallStyles, chevronDownMediumStyles];
-    }
-
     public static openOverlay = async (
         target: HTMLElement,
         interaction: TriggerInteractions,
@@ -178,7 +170,7 @@ export class DropdownBase extends Focusable {
     }
 
     public onKeydown = (event: KeyboardEvent): void => {
-        if (event.code !== 'ArrowDown') {
+        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {
             return;
         }
         event.preventDefault();
@@ -298,7 +290,7 @@ export class DropdownBase extends Focusable {
     protected get buttonContent(): TemplateResult[] {
         return [
             html`
-                <div
+                <span
                     id="label"
                     class=${ifDefined(this.value ? undefined : 'placeholder')}
                 >
@@ -307,24 +299,27 @@ export class DropdownBase extends Focusable {
                         : html`
                               <slot name="label">${this.label}</slot>
                           `}
-                </div>
+                </span>
                 ${this.invalid
                     ? html`
-                          <sp-icon class="icon alert-small" size="s">
-                              ${AlertSmallIcon({ hidden: true })}
+                          <sp-icon class="validationIcon" size="m">
+                              ${AlertIcon({ hidden: true })}
                           </sp-icon>
                       `
                     : nothing}
-                <sp-icon class="icon dropdown chevron-down-medium" size="s">
-                    ${ChevronDownMediumIcon({ hidden: true })}
+                <sp-icon
+                    class="icon dropdown spectrum-UIIcon-ChevronDown100"
+                    size="m"
+                >
+                    ${Chevron100Icon()}
                 </sp-icon>
             `,
         ];
     }
 
     protected get renderButton(): TemplateResult {
         return html`
-            <sp-field-button
+            <button
                 aria-haspopup="true"
                 aria-controls="popover"
                 aria-expanded=${this.open ? 'true' : 'false'}
@@ -337,7 +332,7 @@ export class DropdownBase extends Focusable {
                 ?disabled=${this.disabled}
             >
                 ${this.buttonContent}
-            </sp-field-button>
+            </button>
         `;
     }
 
@@ -429,6 +424,6 @@ export class DropdownBase extends Focusable {
 
 export class Dropdown extends DropdownBase {
     public static get styles(): CSSResultArray {
-        return [...super.styles];
+        return [dropdownStyles, chevronStyles];
     }
 }
diff --git a/packages/dropdown/src/dropdown.css b/packages/dropdown/src/dropdown.css
@@ -11,6 +11,11 @@ governing permissions and limitations under the License.
 */
 @import './spectrum-dropdown.css';
 
+:host {
+    display: inline-flex;
+    vertical-align: top;
+}
+
 sp-popover {
     display: none;
 }

diff --git a/packages/dropdown/src/spectrum-config.js b/packages/dropdown/src/spectrum-config.js
@@ -16,6 +16,7 @@ const config = {
             name: 'dropdown',
             host: {
                 selector: '.spectrum-Picker',
+                shadowSelector: '#button',
             },
             attributes: [
                 {
@@ -32,14 +33,24 @@ const config = {
                     selector: '.is-invalid',
                     name: 'invalid',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.is-open',
+                    name: 'open',
+                },
+                {
+                    type: 'boolean',
+                    selector: '.is-focused',
+                    name: 'focused',
+                },
             ],
             classes: [
                 {
                     selector: '.spectrum-Icon',
                     name: 'icon',
                 },
                 {
-                    selector: '.spectrum-Picker-icon',
+                    selector: '.spectrum-Picker-menuIcon',
                     name: 'dropdown',
                 },
                 {
@@ -50,6 +61,10 @@ const config = {
                     selector: '.is-placeholder',
                     name: 'placeholder',
                 },
+                {
+                    selector: '.spectrum-Picker-validationIcon',
+                    name: 'validationIcon',
+                },
             ],
             ids: [
                 {