From b7c8bf0cf5d6d763b68bfa34e69b1ed4d87f689c Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 19 Nov 2024 15:28:04 -0800 Subject: [PATCH] perf: implement initial desktop styles and functionality #20 --- components/dropdown/src/auro-dropdown.js | 234 +++++++----------- components/dropdown/src/auro-dropdownBib.js | 54 ++-- components/dropdown/src/floatingUI.mjs | 34 ++- components/dropdown/src/popover.js | 38 --- components/dropdown/src/select.js | 77 ------ components/dropdown/src/styles/bibColors.scss | 18 ++ components/dropdown/src/styles/bibStyles.scss | 18 +- components/dropdown/src/styles/color.scss | 50 ++-- components/dropdown/src/styles/style.scss | 31 ++- components/dropdown/src/styles/tokens.scss | 17 +- .../dropdown/test/auro-dropdown.test.js | 75 ++---- 11 files changed, 247 insertions(+), 399 deletions(-) delete mode 100644 components/dropdown/src/popover.js delete mode 100644 components/dropdown/src/select.js create mode 100644 components/dropdown/src/styles/bibColors.scss diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index 90360353..5544c289 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -3,12 +3,11 @@ // --------------------------------------------------------------------- -/* eslint-disable max-lines, lit-a11y/accessible-name */ +/* eslint-disable max-lines, lit-a11y/accessible-name, lit/no-invalid-html, lit/binding-positions, +arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing */ import { html } from "lit/static-html.js"; import { LitElement } from "lit"; -// import Popover from "../lib/popover"; -// import {computePosition, detectOverflow, autoUpdate, offset, autoPlacement, flip, shift, limitShift} from '@floating-ui/dom'; import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; import AuroFloatingUI from './floatingUI.mjs'; @@ -22,16 +21,11 @@ import styleCss from "./styles/style-css.js"; import colorCss from "./styles/color-css.js"; import tokensCss from "./styles/tokens-css.js"; -import { AuroDropdownBib } from './auro-dropdownBib.js'; - -// default internal definition -if (!customElements.get("auro-dropdownbib")) { - customElements.define("auro-dropdownbib", AuroDropdownBib); -} - +import './auro-dropdownBib.js'; /** * @attr { Boolean } bordered - If declared, applies a border around the trigger slot. + * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme. * @attr { Boolean } chevron - If declared, the dropdown displays an display state chevron on the right. * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. @@ -53,9 +47,7 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event dropdownToggled - (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. * @event auroDropdown-ready - Notifies that the component has finished initializing. - * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ export class AuroDropdown extends LitElement { constructor() { @@ -65,9 +57,6 @@ export class AuroDropdown extends LitElement { this.matchWidth = false; this.noHideOnThisFocusLoss = false; - // this.trigger = undefined; - // this.tooltip = undefined; - this.privateDefaults(); } @@ -132,7 +121,6 @@ export class AuroDropdown extends LitElement { // function to define props used within the scope of this component static get properties() { - return { bordered: { type: Boolean, @@ -170,6 +158,10 @@ export class AuroDropdown extends LitElement { type: Boolean, reflect: true }, + common: { + type: Boolean, + reflect: true + }, noToggle: { type: Boolean, reflect: true @@ -218,39 +210,6 @@ export class AuroDropdown extends LitElement { super.disconnectedCallback(); } - // handleTriggerTabIndex() { - // const triggerSlotContentRoot = this.querySelector('[slot="trigger"'); - - // // Don't overwrite any tabindex coded directly into the slotted trigger content - // if (!triggerSlotContentRoot.getAttribute('tabindex')) { - // const focusableElementSelectors = [ - // 'a', - // 'button', - // 'input:not([type="hidden])', - // 'select', - // 'textarea', - // '[tabindex]:not([tabindex="-1"])', - // 'auro-button', - // 'auro-input', - // 'auro-hyperlink' - // ]; - - // focusableElementSelectors.forEach((selector) => { - // // check if the trigger root element itself is focusable - // if (triggerSlotContentRoot.matches(selector)) { - // this.tabIndex = -1; - - // return; - // } - - // // check if any child content is focusable - // if (triggerSlotContentRoot.querySelector(selector)) { - // this.tabIndex = -1; - // } - // }); - // } - // } - updated(changedProperties) { this.floater.handleUpdate(changedProperties); } @@ -261,100 +220,43 @@ export class AuroDropdown extends LitElement { // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - // this.fixWidth(); - - // this.trigger = this.shadowRoot.querySelector(`#trigger`); - - // this.triggerChevron = this.shadowRoot.querySelector(`#showStateIcon`); - - // this.auroPopover = this.shadowRoot.querySelector('#popover'); - - // const hideByKeyboard = (event) => { - // const key = event.key.toLowerCase(); - - // if (key === 'escape') { - // this.toggleHide(); - // } - // }; - - // const showByKeyboard = (event) => { - // const key = event.key.toLowerCase(); - // if (key === ' ' || key === 'enter') { - // event.preventDefault(); - // handleShow(); - // } - // }; - - // const toggleByKeyboard = (event) => { - // const key = event.key.toLowerCase(); - - // if (key === ' ' || key === 'enter') { - // event.preventDefault(); - // toggleDropdown(); /* eslint-disable-line no-unused-expressions */ - // } - // }; - - // const notifyTriggerClicked = () => { - // const event = new CustomEvent('auroDropdown-triggerClick', { - // composed: true - // }); - - // this.dispatchEvent(event); - // }; - - // // this.trigger.addEventListener('keydown', hideByKeyboard); - // // this.auroPopover.addEventListener('keydown', hideByKeyboard); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - } - - // /** - // * @private - // * @returns {void} Dispatches event with an object showing the state of the dropdown. - // */ - // dispatchEventDropdownToggle() { - // const eventDeprecated = new CustomEvent('dropdownToggled', { - // detail: { - // expanded: this.isPopoverVisible, - // }, - // composed: true - // }); - - // this.dispatchEvent(eventDeprecated); - - // const event = new CustomEvent('auroDropdown-toggled', { - // detail: { - // expanded: this.isPopoverVisible, - // }, - // composed: true - // }); - - // this.dispatchEvent(event); - // } - - // applyBibContentFunctionality(bibElem) { - // console.warn('bibElem ----- ', bibElem); - - // this.testInput = bibElem.querySelector('#testInput'); - // this.testInput.addEventListener('input', () => { - // console.info('input value changed', this.testInput.value); - // }); - - - // // console.info(bibElem); - // this.testInput2 = bibElem.querySelector('#testInputTwo'); - - // console.info('this.testInput2', this.testInput2); + this.notifyReady(); + } - // this.testInput2.addEventListener('input', () => { - // console.info('input 2 value changed', this.testInput2.value); - // }); + /** + * Marks the component as ready and sends event. + * @private + * @returns {void} + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroDropdown-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); + } - // } + /** + * Exposes CSS parts for styling from parent components. + * @private + * @returns {void} + */ + exposeCssParts() { + this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, popover:dropdownPopover'); + } + /** + * Determines if content is within a custom slot. + * @private + * @param {HTMLElement} element - The element to check. + * @returns {Boolean} + */ isCustomSlotContent(element) { let path = []; // eslint-disable-line prefer-const let currentElement = element; @@ -373,8 +275,17 @@ export class AuroDropdown extends LitElement { return inCustomSlot; } + /** + * Handles the default slot content. + * @private + * @returns {void} + */ handleDefaultSlot() { - const allSlotContent = this.querySelectorAll(':not([slot])'); + const allSlotContent = Array.from(this.childNodes).filter((node) => { + // Include text nodes and elements without a slot attribute + return node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot')); + }); + this.defaultSlotContent = []; allSlotContent.forEach((item) => { @@ -394,25 +305,56 @@ export class AuroDropdown extends LitElement { // function that renders the HTML and CSS into the scope of the component render() { - return html`
- + > +
+ +
+ +
+
+ ${this.chevron || this.common ? html` +
+ <${this.iconTag} + category="interface" + name="chevron-down" + customColor + ?disabled=${this.disabled} + > + +
+ ` : undefined }
-
-
- -
- - +
+
+ +
+ + `; } diff --git a/components/dropdown/src/auro-dropdownBib.js b/components/dropdown/src/auro-dropdownBib.js index db353242..412ad957 100644 --- a/components/dropdown/src/auro-dropdownBib.js +++ b/components/dropdown/src/auro-dropdownBib.js @@ -7,38 +7,54 @@ import { html } from "lit/static-html.js"; import { LitElement } from "lit"; import styleCss from "./styles/bibStyles-css.js"; -// import colorCss from "./styles/color-css.js"; -// import tokensCss from "./styles/tokens-css.js"; +import colorCss from "./styles/bibColors-css.js"; +import tokensCss from "./styles/tokens-css.js"; + +/** + * @attr { Boolean } common - If declared, will apply all styles for the common theme. + * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. + * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @csspart bibContainer - Apply css to the bib container. + */ export class AuroDropdownBib extends LitElement { static get styles() { - return [styleCss]; + return [ + styleCss, + colorCss, + tokensCss + ]; } - // createRenderRoot() { - // console.warn('createRenderRoot'); - // return document.querySelector('body'); - // // return document.querySelector('#auro-dropdownBibContent'); - // } - - // updated() { - // const elem = document. - // } + static get properties() { + return { + common: { + type: Boolean, + reflect: true + }, + inset: { + type: Boolean, + reflect: true + }, + rounded: { + type: Boolean, + reflect: true + } + }; + } // function that renders the HTML and CSS into the scope of the component render() { - return html` -
+
`; } } - -// // default internal definition -// if (!customElements.get("auro-dropdownbib")) { -// customElements.define("auro-dropdownbib", AuroDropdownBib); -// } +// default internal definition +if (!customElements.get("auro-dropdownbib")) { + customElements.define("auro-dropdownbib", AuroDropdownBib); +} diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 18f945f0..e54a3fa6 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -1,6 +1,6 @@ /* eslint-disable line-comment-position, no-inline-comments */ -import {autoUpdate, computePosition, offset, autoPlacement, flip} from '@floating-ui/dom'; +import { autoUpdate, computePosition, offset, autoPlacement, flip } from '@floating-ui/dom'; export default class AuroFloatingUI { constructor() { @@ -131,6 +131,8 @@ export default class AuroFloatingUI { if (!this.element.disabled && !this.element.isPopoverVisible) { this.updateCurrentExpandedDropdown(); this.element.isPopoverVisible = true; + this.element.triggerChevron?.setAttribute('data-expanded', true); + this.dispatchEventDropdownToggle(); this.position(); // Clean up any existing handlers before setting up new ones @@ -147,9 +149,26 @@ export default class AuroFloatingUI { hideBib() { if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) { this.element.isPopoverVisible = false; + this.element.triggerChevron?.removeAttribute('data-expanded'); + this.dispatchEventDropdownToggle(); } } + /** + * @private + * @returns {void} Dispatches event with an object showing the state of the dropdown. + */ + dispatchEventDropdownToggle() { + const event = new CustomEvent('auroDropdown-toggled', { + detail: { + expanded: this.isPopoverVisible, + }, + composed: true + }); + + this.element.dispatchEvent(event); + } + handleClick() { if (this.element.isPopoverVisible) { this.hideBib(); @@ -221,22 +240,20 @@ export default class AuroFloatingUI { 'auro-input', 'auro-hyperlink' ]; + const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0]; const triggerNodeTagName = triggerNode.tagName.toLowerCase(); focusableElementSelectors.forEach((selector) => { // Check if the trigger node element is focusable if (triggerNodeTagName === selector) { - triggerNode.tabIndex = -1; + this.element.tabIndex = -1; return; } // Check if any child is focusable - const nestedFocusableElements = triggerNode.querySelectorAll(selector); - if (nestedFocusableElements) { - nestedFocusableElements.forEach((nestedFocusableElement) => { - nestedFocusableElement.tabIndex = -1; - }); + if (triggerNode.querySelector(selector)) { + this.element.tabIndex = -1; } }); } @@ -245,6 +262,7 @@ export default class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); // @TODO: Don't hardcode values this.element.bib.style.display = 'none'; @@ -277,4 +295,4 @@ export default class AuroFloatingUI { this.element.trigger.removeEventListener('blur', (event) => this.handleEvent(event)); } } -} \ No newline at end of file +} diff --git a/components/dropdown/src/popover.js b/components/dropdown/src/popover.js deleted file mode 100644 index 2dc8beb3..00000000 --- a/components/dropdown/src/popover.js +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -import { createPopper } from '@popperjs/core/dist/esm/popper'; - -export default class Popover { - constructor(anchor, popover, placement) { - this.anchor = anchor; - this.popover = popover; - this.options = { - placement, - visibleClass: 'data-show' - }; - this.popover.classList.remove(this.options.visibleClass); - } - - show() { - if (this.popper) { - this.popper.destroy(); - } - - this.popper = createPopper(this.anchor, this.popover, { - tooltip: this.anchor, - placement: this.options.placement, - strategy: 'absolute' - }); - } - - hide() { - this.popover.classList.remove(this.options.visibleClass); - } - - triggerUpdate() { - this.popper.update(); - } -} diff --git a/components/dropdown/src/select.js b/components/dropdown/src/select.js deleted file mode 100644 index be2231f0..00000000 --- a/components/dropdown/src/select.js +++ /dev/null @@ -1,77 +0,0 @@ -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -/* eslint-disable */ - -import { html } from "lit/static-html.js"; -import { LitElement } from "lit"; - -export class MySelect extends LitElement { - constructor() { - super(); - - this.value = undefined; - } - - // function to define props used within the scope of this component - static get properties() { - - return { - value: { - type: String, - reflect: true - } - }; - } - - configureBibContent() { - try { - this.inputElement = this.dropdown.bibContent.querySelector('#selectInput'); - - this.inputElement.addEventListener('input', (event) => { - this.value = event.target.value; - }); - } catch (error) { - // console.error('error', error); - } - } - - firstUpdated() { - this.dropdown = this.shadowRoot.querySelector('auro-dropdown'); - - this.dropdown.onSlotChange = () => { - this.configureBibContent(); - }; - } - - updated(changedProperties) { - if (changedProperties.has('value')) { - console.warn('select.value updated to', this.value); - } - } - - // function that renders the HTML and CSS into the scope of the component - render() { - return html` -
- -
- test - - -
-
- -
- -
- `; - } -} - -// default internal definition -if (!customElements.get("my-select")) { - customElements.define("my-select", MySelect); -} diff --git a/components/dropdown/src/styles/bibColors.scss b/components/dropdown/src/styles/bibColors.scss new file mode 100644 index 00000000..1f83fb7e --- /dev/null +++ b/components/dropdown/src/styles/bibColors.scss @@ -0,0 +1,18 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license. +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// layout styles - define any layout specifications for UI that is contained WITHIN the component +// never define layout that would cause effect on element outside the scope of this component + +// Support for fallback values +@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; + +/* stylelint-disable no-descending-specificity */ + +.container { + background-color: var(--ds-auro-dropdownbib-container-color); + box-shadow: var(--ds-auro-dropdownbib-boxshadow-color); + color: var(--ds-auro-dropdownbib-text-color); +} diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss index 8ce81130..97c9268a 100644 --- a/components/dropdown/src/styles/bibStyles.scss +++ b/components/dropdown/src/styles/bibStyles.scss @@ -12,6 +12,20 @@ /* stylelint-disable no-descending-specificity, selector-max-attribute */ .container { - background-color: pink; // stylelint-disable-line - color: maroon; // stylelint-disable-line + display: inline-block; + box-sizing: border-box; +} + +:host([common]), +:host([rounded]) { + .container { + border-radius: var(--ds-border-radius, $ds-border-radius); + } +} + +:host([common]), +:host([inset]) { + .container { + padding: var(--ds-size-50, $ds-size-50) var(--ds-size-100, $ds-size-100); + } } diff --git a/components/dropdown/src/styles/color.scss b/components/dropdown/src/styles/color.scss index db051e16..243c3f7d 100644 --- a/components/dropdown/src/styles/color.scss +++ b/components/dropdown/src/styles/color.scss @@ -7,13 +7,6 @@ /* stylelint-disable no-descending-specificity, declaration-empty-line-before */ -.popover { - border-color: var(--ds-auro-dropdown-popover-border-color); - background-color: var(--ds-auro-dropdown-popover-container-color); - box-shadow: -2px 0 5px 2px rgba(0 0 0 / .08), 0 2px 5px 1px rgba(0 0 0 / .08); - color: var(--ds-auro-dropdown-popover-text-color); -} - .label { color: var(--ds-auro-dropdown-label-text-color); } @@ -30,10 +23,14 @@ &:focus-within { &:not(:active) { - --ds-auro-dropdown-trigger-border-color: var(--ds-color-ui-default-default, #{$ds-color-ui-default-default}); - box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color); + --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); + box-shadow: inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); } } + + &:hover { + --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default}); + } } .helpText { @@ -45,28 +42,9 @@ --ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default}); } -:host([error]) { - --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default}); - --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default}); - - .trigger { - box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color); - - &:focus-within { - --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); - box-shadow: none; - } - - &:active { - --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); - box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color); - } - } -} - :host([common]), :host([bordered]) { - --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default}); + --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default}); .trigger { &:active, @@ -76,13 +54,8 @@ } } -:host([disabled][common]), -:host([disabled][bordered]) { - --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default}); -} - -:host([common][error]), -:host([bordered][error]) { +:host([error]) { + --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default}); --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default}); .trigger { @@ -99,3 +72,8 @@ } } } + +:host([disabled][common]), +:host([disabled][bordered]) { + --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default}); +} diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss index a62d6f3d..2d1639de 100644 --- a/components/dropdown/src/styles/style.scss +++ b/components/dropdown/src/styles/style.scss @@ -8,6 +8,7 @@ // Support for fallback values @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; +@import '@aurodesignsystem/webcorestylesheets/src/breakpoints'; /* stylelint-disable no-descending-specificity, selector-max-attribute */ @@ -15,13 +16,6 @@ position: relative; } -.popover { - display: inline-block; - box-sizing: border-box; - border-width: 1px; - border-style: solid; -} - .label { font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); line-height: var(--ds-text-body-size-default, $ds-text-body-size-default); @@ -87,21 +81,26 @@ } } -:host([common]), -:host([rounded]) { - .trigger, - .popover { - border-radius: var(--ds-border-radius, $ds-border-radius); +:host([disabled]) { + pointer-events: none; +} + +:host([inset]) { + .trigger { + padding: var(--ds-size-150, $ds-size-150) var(--ds-size-200, $ds-size-200); } } :host([common]), -:host([inset]) { +:host([inset][bordered]) { .trigger { - padding: var(--ds-size-100, $ds-size-100) var(--ds-size-150, $ds-size-150); + padding: var(--ds-size-200, $ds-size-200) var(--ds-size-150, $ds-size-150); } } -:host([disabled]) { - pointer-events: none; +:host([common]), +:host([rounded]) { + .trigger { + border-radius: var(--ds-border-radius, $ds-border-radius); + } } diff --git a/components/dropdown/src/styles/tokens.scss b/components/dropdown/src/styles/tokens.scss index a01f1f3a..91554248 100644 --- a/components/dropdown/src/styles/tokens.scss +++ b/components/dropdown/src/styles/tokens.scss @@ -1,10 +1,15 @@ +@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + :host { - --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); - --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); - --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); --ds-auro-dropdown-popover-border-color: transparent; - --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); - --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); + --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); --ds-auro-dropdown-trigger-border-color: transparent; - --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); + --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); + --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200}); + --ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); } diff --git a/components/dropdown/test/auro-dropdown.test.js b/components/dropdown/test/auro-dropdown.test.js index c1102a75..8906ef0f 100644 --- a/components/dropdown/test/auro-dropdown.test.js +++ b/components/dropdown/test/auro-dropdown.test.js @@ -1,35 +1,8 @@ -import { fixture, html, expect, oneEvent } from '@open-wc/testing'; +import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing'; import '../src/auro-dropdown.js'; -/* @TODO: remove, this is just a placeholder */ -describe('auro-dropdown', () => { - it('passes coverage requirements', async () => { - const el = await fixture(html` - - Label - - - `); - - await el.show(); - await el.hide(); - el.click(); - }); - - it('handles keyboard events', async () => { - const el = await fixture(html` - - - - `); - - const trigger = el.shadowRoot.querySelector('#trigger'); - trigger.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' })); - }); -}); - /* @TODO: remove skip, and continue writing test*/ -describe.skip('auro-dropdown', () => { +describe('auro-dropdown', () => { it('auro-dropdown is accessible', async () => { const el = await fixture(html` @@ -55,7 +28,7 @@ describe.skip('auro-dropdown', () => { const chevronEl = el.shadowRoot.querySelector('#showStateIcon'); expect(chevronEl).to.be.visible; - }) + }); it('auro-dropdown with non-focusable trigger', async () => { const el = await fixture(html` @@ -65,7 +38,7 @@ describe.skip('auro-dropdown', () => { `); await expect (el.shadowRoot.querySelector('#trigger').getAttribute('tabindex')).to.equal('0'); - }) + }); it('auro-dropdown with focusable trigger', async () => { const el = await fixture(html` @@ -75,7 +48,7 @@ describe.skip('auro-dropdown', () => { `); await expect (el.shadowRoot.querySelector('#trigger').getAttribute('tabindex')).to.equal('-1'); - }) + }); it('auro-dropdown with focusable trigger child element', async () => { const el = await fixture(html` @@ -87,7 +60,7 @@ describe.skip('auro-dropdown', () => { `); await expect (el.shadowRoot.querySelector('#trigger').getAttribute('tabindex')).to.equal('-1'); - }) + }); it('auro-dropdown aria rules with label slot content', async () => { const el = await fixture(html` @@ -102,7 +75,7 @@ describe.skip('auro-dropdown', () => { const triggerEl = el.shadowRoot.querySelector('.trigger'); expect(triggerEl).to.have.attribute('aria-labelledby', 'triggerLabel'); expect(triggerEl).to.have.attribute('aria-controls', 'popover'); - }) + }); it('auro-dropdown shows only with click when using noToggle attribute', async () => { const el = await fixture(html` @@ -119,7 +92,7 @@ describe.skip('auro-dropdown', () => { trigger.click(); expectPopoverShown(el); - }) + }); it('auro-dropdown toggle with click', async () => { const el = await fixture(html` @@ -136,7 +109,7 @@ describe.skip('auro-dropdown', () => { trigger.click(); expectPopoverHidden(el); - }) + }); it('auro-dropdown programmatically hide', async () => { const el = await fixture(html` @@ -157,7 +130,7 @@ describe.skip('auro-dropdown', () => { el.hide(); expectPopoverHidden(el); expect(chevron).to.not.have.attribute('data-expanded'); - }) + }); it('auro-dropdown fires event - auroDropdown-triggerClick', async () => { const el = await fixture(html` @@ -174,7 +147,7 @@ describe.skip('auro-dropdown', () => { const { result } = await listener; expect(result).to.equal(undefined); - }) + }); it('auro-dropdown fires event - auroDropdown-toggled', async () => { const el = await fixture(html` @@ -195,7 +168,7 @@ describe.skip('auro-dropdown', () => { trigger.click(); expect(result).to.equal(undefined); - }) + }); it('auro-dropdown toggles with spacebar', async () => { const el = await fixture(html` @@ -211,7 +184,7 @@ describe.skip('auro-dropdown', () => { })); expectPopoverShown(el); - }) + }); it('auro-dropdown toggles with enter key', async () => { const el = await fixture(html` @@ -223,11 +196,11 @@ describe.skip('auro-dropdown', () => { const trigger = el.shadowRoot.querySelector('#trigger'); trigger.dispatchEvent(new KeyboardEvent('keydown', { - 'key': 'enter' + 'key': 'Enter' })); expectPopoverShown(el); - }) + }); it('auro-dropdown shows with spacebar', async () => { const el = await fixture(html` @@ -243,7 +216,7 @@ describe.skip('auro-dropdown', () => { })); expectPopoverShown(el); - }) + }); it('auro-dropdown shows with enter key', async () => { const el = await fixture(html` @@ -255,15 +228,15 @@ describe.skip('auro-dropdown', () => { const trigger = el.shadowRoot.querySelector('#trigger'); trigger.dispatchEvent(new KeyboardEvent('keydown', { - 'key': 'enter' + 'key': 'Enter' })); expectPopoverShown(el); - }) + }); it('auro-dropdown hides with esc key', async () => { const el = await fixture(html` - +
Trigger
 `); @@ -274,18 +247,18 @@ describe.skip('auro-dropdown', () => { expectPopoverShown(el); - trigger.dispatchEvent(new KeyboardEvent('keydown', { - 'key': 'escape' + document.dispatchEvent(new KeyboardEvent('keydown', { + 'key': 'Escape' })); expectPopoverHidden(el); - }) + }); }); function expectPopoverShown(el) { - expect(el.hasAttribute('data-show')).to.equal(true); + expect(el.isPopoverVisible).to.equal(true); } function expectPopoverHidden(el) { - expect(el.hasAttribute('data-show')).to.equal(false); + expect(el.isPopoverVisible).to.equal(false); }