From fd1123bbb614d3bfe06031400afa2d54b0984a4b Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 9 Oct 2023 11:16:57 -0400 Subject: [PATCH 1/5] Add ToggleSelect component --- .../index.hbs => product-select.hbs} | 26 ++++------------- .../index.ts => product-select.ts} | 8 +++--- .../components/inputs/product-select/item.hbs | 28 +++++++++++-------- web/app/components/x/dropdown-list/_shared.ts | 3 +- web/app/components/x/dropdown-list/index.hbs | 16 +++++++++++ web/app/components/x/dropdown-list/index.ts | 6 ++++ web/app/components/x/dropdown-list/item.hbs | 1 + web/app/components/x/dropdown-list/item.ts | 3 +- .../x/dropdown-list/toggle-select.hbs | 18 ++++++++++++ .../x/dropdown-list/toggle-select.ts | 18 ++++++++++++ .../components/x/dropdown/toggle-select.scss | 6 +--- .../index-test.ts => product-select-test.ts} | 0 web/types/hds/flight-icon.d.ts | 28 +++++++++++-------- 13 files changed, 107 insertions(+), 54 deletions(-) rename web/app/components/inputs/{product-select/index.hbs => product-select.hbs} (74%) rename web/app/components/inputs/{product-select/index.ts => product-select.ts} (90%) create mode 100644 web/app/components/x/dropdown-list/toggle-select.hbs create mode 100644 web/app/components/x/dropdown-list/toggle-select.ts rename web/tests/integration/components/inputs/{product-select/index-test.ts => product-select-test.ts} (100%) diff --git a/web/app/components/inputs/product-select/index.hbs b/web/app/components/inputs/product-select.hbs similarity index 74% rename from web/app/components/inputs/product-select/index.hbs rename to web/app/components/inputs/product-select.hbs index 1e33787ca..bcabbf963 100644 --- a/web/app/components/inputs/product-select/index.hbs +++ b/web/app/components/inputs/product-select.hbs @@ -38,26 +38,12 @@ ...attributes > <:anchor as |dd|> - - - - - {{or @selected "Select a product/area"}} - - - {{#if this.selectedProductAbbreviation}} - - {{this.selectedProductAbbreviation}} - - {{/if}} - - - + + + <:item as |dd|> diff --git a/web/app/components/inputs/product-select/index.ts b/web/app/components/inputs/product-select.ts similarity index 90% rename from web/app/components/inputs/product-select/index.ts rename to web/app/components/inputs/product-select.ts index b3a28c44d..af251e8f7 100644 --- a/web/app/components/inputs/product-select/index.ts +++ b/web/app/components/inputs/product-select.ts @@ -15,7 +15,7 @@ interface InputsProductSelectSignature { Element: HTMLDivElement; Args: { selected?: string; - onChange: (value: string, attributes?: ProductArea) => void; + onChange: (value: string, attributes: ProductArea) => void; formatIsBadge?: boolean; placement?: Placement; isSaving?: boolean; @@ -42,16 +42,16 @@ export default class InputsProductSelectComponent extends Component - - {{@product}} - +
- {{#if @abbreviation}} - - {{@abbreviation}} - - {{/if}} + {{#if @product}} + + {{@product}} + + {{else}} + + {{/if}} + + {{#if @abbreviation}} + + {{@abbreviation}} + + {{/if}} +
{{#if @isSelected}} void; @@ -30,4 +30,5 @@ export interface XDropdownListToggleComponentArgs { contentIsShown: boolean; ariaControls: string; disabled?: boolean; + // TODO: do we need isLoading, isActive? } diff --git a/web/app/components/x/dropdown-list/index.hbs b/web/app/components/x/dropdown-list/index.hbs index b5e4e93fa..0ea04dfcc 100644 --- a/web/app/components/x/dropdown-list/index.hbs +++ b/web/app/components/x/dropdown-list/index.hbs @@ -53,6 +53,22 @@ f.contentID ) ) + ToggleSelect=(component + "x/dropdown-list/toggle-select" + contentIsShown=f.contentIsShown + registerAnchor=f.registerAnchor + onTriggerKeydown=(fn + this.onTriggerKeydown f.contentIsShown f.showContent + ) + toggleContent=f.toggleContent + disabled=@disabled + ariaControls=(concat + "x-dropdown-list-" + (if this.inputIsShown "container" "items") + "-" + f.contentID + ) + ) ariaControls=(concat "x-dropdown-list-" (if this.inputIsShown "container" "items") diff --git a/web/app/components/x/dropdown-list/index.ts b/web/app/components/x/dropdown-list/index.ts index e54dd5be1..8c57ca65f 100644 --- a/web/app/components/x/dropdown-list/index.ts +++ b/web/app/components/x/dropdown-list/index.ts @@ -18,6 +18,7 @@ import { XDropdownListItemAPI } from "./item"; import { restartableTask, timeout } from "ember-concurrency"; import maybeScrollIntoView from "hermes/utils/maybe-scroll-into-view"; import { MatchAnchorWidthOptions } from "hermes/components/floating-u-i/content"; +import XDropdownListToggleSelectComponent from "./toggle-select"; export type XDropdownListToggleComponentBoundArgs = | "contentIsShown" @@ -37,7 +38,12 @@ export interface XDropdownListAnchorAPI typeof XDropdownListToggleButtonComponent, XDropdownListToggleComponentBoundArgs | "color" | "text" >; + ToggleSelect: WithBoundArgs< + typeof XDropdownListToggleSelectComponent, + XDropdownListToggleComponentBoundArgs + >; focusedItemIndex: number; + selected: any; resetFocusedItemIndex: () => void; scheduleAssignMenuItemIDs: () => void; hideContent: () => void; diff --git a/web/app/components/x/dropdown-list/item.hbs b/web/app/components/x/dropdown-list/item.hbs index cd3d22bf9..27be5e0d6 100644 --- a/web/app/components/x/dropdown-list/item.hbs +++ b/web/app/components/x/dropdown-list/item.hbs @@ -59,6 +59,7 @@ contentID=@contentID value=@value attrs=@attributes + selected=@selected isSelected=@isSelected ) }} diff --git a/web/app/components/x/dropdown-list/item.ts b/web/app/components/x/dropdown-list/item.ts index e2287ae7e..68250fd69 100644 --- a/web/app/components/x/dropdown-list/item.ts +++ b/web/app/components/x/dropdown-list/item.ts @@ -43,7 +43,7 @@ export interface XDropdownListItemComponentArgs { onItemClick?: (value: any, attributes: any) => void; setFocusedItemIndex: ( focusDirection: FocusDirection | number, - maybeScrollIntoView?: boolean + maybeScrollIntoView?: boolean, ) => void; hideContent: () => void; } @@ -51,6 +51,7 @@ export interface XDropdownListItemComponentArgs { interface XDropdownListItemComponentSignature { Args: XDropdownListItemComponentArgs & { value: string; + selected?: any; }; Blocks: { default: [dd: XDropdownListItemAPI]; diff --git a/web/app/components/x/dropdown-list/toggle-select.hbs b/web/app/components/x/dropdown-list/toggle-select.hbs new file mode 100644 index 000000000..20ca785cf --- /dev/null +++ b/web/app/components/x/dropdown-list/toggle-select.hbs @@ -0,0 +1,18 @@ + + {{yield}} + + diff --git a/web/app/components/x/dropdown-list/toggle-select.ts b/web/app/components/x/dropdown-list/toggle-select.ts new file mode 100644 index 000000000..cddc539a0 --- /dev/null +++ b/web/app/components/x/dropdown-list/toggle-select.ts @@ -0,0 +1,18 @@ +import Component from "@glimmer/component"; +import { XDropdownListToggleComponentArgs } from "./_shared"; + +interface XDropdownListToggleSelectComponentSignature { + Element: HTMLButtonElement; + Args: XDropdownListToggleComponentArgs; + Blocks: { + default: []; + }; +} + +export default class XDropdownListToggleSelectComponent extends Component {} + +declare module "@glint/environment-ember-loose/registry" { + export default interface Registry { + "x/dropdown-list/toggle-select": typeof XDropdownListToggleSelectComponent; + } +} diff --git a/web/app/styles/components/x/dropdown/toggle-select.scss b/web/app/styles/components/x/dropdown/toggle-select.scss index 91dced7b4..f881b2282 100644 --- a/web/app/styles/components/x/dropdown/toggle-select.scss +++ b/web/app/styles/components/x/dropdown/toggle-select.scss @@ -1,5 +1,5 @@ .x-dropdown-list-toggle-select { - @apply text-left border; + @apply relative flex min-h-[36px] w-full items-center justify-start gap-0 rounded-button-md border border-color-border-strong px-2.5 leading-none; .flight-icon { @apply shrink-0; @@ -19,9 +19,5 @@ &.hds-button--color-secondary:not(:hover) { @apply bg-color-surface-primary; - - .caret { - @apply text-color-foreground-faint; - } } } diff --git a/web/tests/integration/components/inputs/product-select/index-test.ts b/web/tests/integration/components/inputs/product-select-test.ts similarity index 100% rename from web/tests/integration/components/inputs/product-select/index-test.ts rename to web/tests/integration/components/inputs/product-select-test.ts diff --git a/web/types/hds/flight-icon.d.ts b/web/types/hds/flight-icon.d.ts index 417d6403e..419e80327 100644 --- a/web/types/hds/flight-icon.d.ts +++ b/web/types/hds/flight-icon.d.ts @@ -1,13 +1,19 @@ -// https://helios.hashicorp.design/icons/usage-guidelines?tab=code +declare module "@hashicorp/ember-flight-icons/components/flight-icon" { + import Component from "@glimmer/component"; + import { ComponentLike } from "@glint/template"; -import { ComponentLike } from "@glint/template"; + // https://helios.hashicorp.design/icons/usage-guidelines?tab=code -export type FlightIconComponent = ComponentLike<{ - Element: SVGElement; - Args: { - name: string; - size?: "16" | "24"; - color?: string; - stretched?: boolean; - }; -}>; + interface FlightIconComponentSignature { + Element: SVGElement; + Args: { + name: string; + size?: "16" | "24"; + color?: string; + stretched?: boolean; + }; + } + + export type FlightIconComponent = ComponentLike; + export default class FlightIcon extends Component {} +} From 0ccfd1c504e3c6b91b07492a5266f2efc5e7997c Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 9 Oct 2023 11:18:41 -0400 Subject: [PATCH 2/5] Remove unused change --- web/types/hds/flight-icon.d.ts | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/web/types/hds/flight-icon.d.ts b/web/types/hds/flight-icon.d.ts index 419e80327..417d6403e 100644 --- a/web/types/hds/flight-icon.d.ts +++ b/web/types/hds/flight-icon.d.ts @@ -1,19 +1,13 @@ -declare module "@hashicorp/ember-flight-icons/components/flight-icon" { - import Component from "@glimmer/component"; - import { ComponentLike } from "@glint/template"; +// https://helios.hashicorp.design/icons/usage-guidelines?tab=code - // https://helios.hashicorp.design/icons/usage-guidelines?tab=code +import { ComponentLike } from "@glint/template"; - interface FlightIconComponentSignature { - Element: SVGElement; - Args: { - name: string; - size?: "16" | "24"; - color?: string; - stretched?: boolean; - }; - } - - export type FlightIconComponent = ComponentLike; - export default class FlightIcon extends Component {} -} +export type FlightIconComponent = ComponentLike<{ + Element: SVGElement; + Args: { + name: string; + size?: "16" | "24"; + color?: string; + stretched?: boolean; + }; +}>; From b10492dd774a39e8bc63e0d70b95f23e953ac3a1 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 9 Oct 2023 13:16:45 -0400 Subject: [PATCH 3/5] Update tests and test selectors --- web/app/components/document/sidebar.hbs | 2 +- web/app/components/inputs/product-select.hbs | 2 +- .../components/inputs/product-select/item.hbs | 6 +- .../components/inputs/product-select/item.ts | 2 +- web/app/components/new/doc-form.hbs | 2 +- .../x/dropdown-list/toggle-select.hbs | 1 + web/app/styles/app.scss | 1 - .../inputs/product-select/index.scss | 19 ------ .../acceptance/authenticated/new/doc-test.ts | 2 +- .../components/inputs/product-select-test.ts | 66 ++++++------------- .../inputs/product-select/item-test.ts | 32 +++++---- .../components/x/dropdown-list/index-test.ts | 55 ++++++++++++++++ 12 files changed, 102 insertions(+), 88 deletions(-) delete mode 100644 web/app/styles/components/inputs/product-select/index.scss diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 143d8137c..4081cf128 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -147,7 +147,7 @@
{{#if (and this.isDraft this.isOwner)}} -
+
+
{{#if this.products}} {{#if @formatIsBadge}} @@ -16,7 +16,7 @@ {{@product}} {{else}} - + {{/if}} {{#if @abbreviation}} @@ -28,7 +28,7 @@ {{#if @isSelected}} diff --git a/web/app/components/inputs/product-select/item.ts b/web/app/components/inputs/product-select/item.ts index 8a44e10b6..ccb127b39 100644 --- a/web/app/components/inputs/product-select/item.ts +++ b/web/app/components/inputs/product-select/item.ts @@ -3,7 +3,7 @@ import Component from "@glimmer/component"; interface InputsProductSelectItemComponentSignature { Element: HTMLDivElement; Args: { - product: string; + product?: string; isSelected?: boolean; abbreviation?: string; }; diff --git a/web/app/components/new/doc-form.hbs b/web/app/components/new/doc-form.hbs index 63c75020f..d6a1ed4ec 100644 --- a/web/app/components/new/doc-form.hbs +++ b/web/app/components/new/doc-form.hbs @@ -75,7 +75,7 @@
diff --git a/web/app/components/x/dropdown-list/toggle-select.hbs b/web/app/components/x/dropdown-list/toggle-select.hbs index 20ca785cf..99871e784 100644 --- a/web/app/components/x/dropdown-list/toggle-select.hbs +++ b/web/app/components/x/dropdown-list/toggle-select.hbs @@ -12,6 +12,7 @@ > {{yield}} diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss index 49bd5cccc..79aa2b4a0 100644 --- a/web/app/styles/app.scss +++ b/web/app/styles/app.scss @@ -26,7 +26,6 @@ @use "components/header/active-filter-list"; @use "components/header/active-filter-list-item"; @use "components/header/search"; -@use "components/inputs/product-select/index.scss"; @use "components/dashboard/docs-awaiting-review/doc"; @use "components/doc/tile-list"; @use "components/doc/thumbnail"; diff --git a/web/app/styles/components/inputs/product-select/index.scss b/web/app/styles/components/inputs/product-select/index.scss deleted file mode 100644 index 5b5ad4c36..000000000 --- a/web/app/styles/components/inputs/product-select/index.scss +++ /dev/null @@ -1,19 +0,0 @@ -.product-select-dropdown-list { - @apply max-h-[217px]; -} - -.product-select-default-toggle { - @apply min-w-[300px] relative flex items-center justify-start leading-none; -} - -.product-select-toggle-abbreviation { - @apply opacity-50 inline-flex ml-2 text-body-100 leading-none; -} - -.product-select-selected-value { - @apply flex ml-2.5 leading-none; -} - -.product-select-toggle-caret { - @apply absolute top-1/2 -translate-y-1/2 right-2 text-color-foreground-faint; -} diff --git a/web/tests/acceptance/authenticated/new/doc-test.ts b/web/tests/acceptance/authenticated/new/doc-test.ts index 7a5091085..923dd735d 100644 --- a/web/tests/acceptance/authenticated/new/doc-test.ts +++ b/web/tests/acceptance/authenticated/new/doc-test.ts @@ -12,7 +12,7 @@ import { DRAFT_CREATED_LOCAL_STORAGE_KEY } from "hermes/components/modals/draft- // Selectors const DOC_FORM = "[data-test-new-doc-form]"; const PRODUCT_SELECT = `${DOC_FORM} [data-test-product-select]`; -const PRODUCT_SELECT_TOGGLE = `${PRODUCT_SELECT} [data-test-x-dropdown-list-toggle-action]`; +const PRODUCT_SELECT_TOGGLE = `${PRODUCT_SELECT} [data-test-x-dropdown-list-toggle-select]`; const CREATE_BUTTON = `${DOC_FORM} [data-test-create-button]`; const TITLE_INPUT = `${DOC_FORM} [data-test-title-input]`; const SUMMARY_INPUT = `${DOC_FORM} [data-test-summary-input]`; diff --git a/web/tests/integration/components/inputs/product-select-test.ts b/web/tests/integration/components/inputs/product-select-test.ts index 1c60d376c..75a212c02 100644 --- a/web/tests/integration/components/inputs/product-select-test.ts +++ b/web/tests/integration/components/inputs/product-select-test.ts @@ -7,8 +7,9 @@ import { MirageTestContext } from "ember-cli-mirage/test-support"; import { Placement } from "@floating-ui/dom"; import { Response } from "miragejs"; -const DEFAULT_DROPDOWN_SELECTOR = ".product-select-default-toggle"; -const LIST_ITEM_SELECTOR = "[data-test-product-select-item]"; +const TOGGLE = "[data-test-x-dropdown-list-toggle-select]"; +const DROPDOWN_PRODUCT = + "[data-test-x-dropdown-list-content] [data-test-product-select-item]"; interface InputsProductSelectContext extends MirageTestContext { selected?: any; @@ -30,7 +31,9 @@ module("Integration | Component | inputs/product-select", function (hooks) { }); this.set("selected", "Vault"); - this.set("onChange", () => {}); + this.set("onChange", (value: string) => { + this.set("selected", value); + }); }); test("it can render in two formats", async function (this: InputsProductSelectContext, assert) { @@ -47,61 +50,31 @@ module("Integration | Component | inputs/product-select", function (hooks) { `); assert.dom(badgeDropdownSelector).exists("badge dropdown is rendered"); - assert - .dom(DEFAULT_DROPDOWN_SELECTOR) - .doesNotExist("default dropdown is not rendered"); + assert.dom(TOGGLE).doesNotExist("default dropdown is not rendered"); this.set("formatIsBadge", false); assert .dom(badgeDropdownSelector) .doesNotExist("badge dropdown is not rendered"); - assert - .dom(DEFAULT_DROPDOWN_SELECTOR) - .exists("default dropdown is rendered"); - }); - - test("it can render the toggle with a product abbreviation", async function (this: InputsProductSelectContext, assert) { - this.set("selected", this.server.schema.products.first().name); - - await render(hbs` - - `); - - assert.dom(".product-select-toggle-abbreviation").hasText("TP0"); - }); - - test("it shows an empty state when nothing is selected (default toggle)", async function (this: InputsProductSelectContext, assert) { - this.set("selected", undefined); - - await render(hbs` - - `); - assert - .dom(".product-select-selected-value") - .hasText("Select a product/area"); + assert.dom(TOGGLE).exists("default dropdown is rendered"); }); - test("it displays the products in a dropdown list with abbreviations", async function (this: InputsProductSelectContext, assert) { + test("it displays the products with abbreviations", async function (this: InputsProductSelectContext, assert) { await render(hbs` `); - await click(DEFAULT_DROPDOWN_SELECTOR); + assert.dom(TOGGLE).hasText("Vault VLT"); - assert.dom(LIST_ITEM_SELECTOR).exists({ count: 4 }); + await click(TOGGLE); - let firstListItem = this.element.querySelector(LIST_ITEM_SELECTOR); - assert.dom(firstListItem).hasText("Test Product 0 TP0"); + assert.dom(DROPDOWN_PRODUCT).exists({ count: 4 }); + assert.dom(DROPDOWN_PRODUCT).hasText("Test Product 0 TP0"); }); test("it fetches the products if they aren't already loaded", async function (this: InputsProductSelectContext, assert) { @@ -109,16 +82,17 @@ module("Integration | Component | inputs/product-select", function (hooks) { await render(hbs` `); - await click(DEFAULT_DROPDOWN_SELECTOR); + await click(TOGGLE); // In Mirage, we return a default product when there are no products in the database. // This simulates the `fetchProducts` task being run. - assert.dom(LIST_ITEM_SELECTOR).exists({ count: 1 }); - assert.dom(LIST_ITEM_SELECTOR).hasText("Default Fetched Product NONE"); + assert.dom(DROPDOWN_PRODUCT).exists({ count: 1 }); + assert.dom(DROPDOWN_PRODUCT).hasText("Default Fetched Product NONE"); }); test("it performs the passed-in action on click", async function (this: InputsProductSelectContext, assert) { @@ -134,8 +108,8 @@ module("Integration | Component | inputs/product-select", function (hooks) { /> `); - await click(DEFAULT_DROPDOWN_SELECTOR); - await click(LIST_ITEM_SELECTOR); + await click(TOGGLE); + await click(DROPDOWN_PRODUCT); assert.equal(count, 1, "the action was called once"); }); diff --git a/web/tests/integration/components/inputs/product-select/item-test.ts b/web/tests/integration/components/inputs/product-select/item-test.ts index 3d329a297..661f5cc2e 100644 --- a/web/tests/integration/components/inputs/product-select/item-test.ts +++ b/web/tests/integration/components/inputs/product-select/item-test.ts @@ -5,6 +5,11 @@ import { render } from "@ember/test-helpers"; import { setupMirage } from "ember-cli-mirage/test-support"; import { MirageTestContext } from "ember-cli-mirage/test-support"; +const VALUE = "[data-test-selected-value]"; +const ABBREVIATION = "[data-test-product-select-item-abbreviation]"; +const PRODUCT_ICON = "[data-test-product-icon]"; +const CHECK = "[data-test-check]"; + interface InputsProductSelectItemContext extends MirageTestContext { product: string; isSelected?: boolean; @@ -28,37 +33,36 @@ module( /> `); - // assert that the icon has the "data-test-icon="vault" attribute assert - .dom("[data-test-product-select-item-icon]") + .dom(PRODUCT_ICON) .hasAttribute( "data-test-icon", "vault", "the correct product icon is shown", ); - assert - .dom("[data-test-product-select-item-value]") - .hasText("Vault", "the product name is rendered"); - - assert - .dom("[data-test-product-select-item-abbreviation]") - .doesNotExist("no abbreviation specified"); - - assert - .dom("[data-test-product-select-item-selected]") - .doesNotExist("check icon only rendered when selected"); + assert.dom(VALUE).hasText("Vault", "the product name is rendered"); + assert.dom(ABBREVIATION).doesNotExist("no abbreviation specified"); + assert.dom(CHECK).doesNotExist("check icon only rendered when selected"); this.set("product", "Engineering"); this.set("isSelected", true); assert - .dom("[data-test-product-select-item-icon]") + .dom(PRODUCT_ICON) .hasAttribute( "data-test-icon", "folder", "the correct product icon is shown", ); }); + + test("it shows an empty state when no product is provided", async function (this: InputsProductSelectItemContext, assert) { + await render(hbs` + + `); + + assert.dom("[data-test-empty-state]").hasText("Select a product/area"); + }); }, ); diff --git a/web/tests/integration/components/x/dropdown-list/index-test.ts b/web/tests/integration/components/x/dropdown-list/index-test.ts index c12a0e752..651846399 100644 --- a/web/tests/integration/components/x/dropdown-list/index-test.ts +++ b/web/tests/integration/components/x/dropdown-list/index-test.ts @@ -51,6 +51,7 @@ interface XDropdownListComponentTestContext extends TestContext { buttonWasClicked?: boolean; isLoading?: boolean; placement?: Placement | null; + selected?: string; } module("Integration | Component | x/dropdown-list", function (hooks) { @@ -941,4 +942,58 @@ module("Integration | Component | x/dropdown-list", function (hooks) { assert.dom("[data-test-nothing]").exists("the custom empty state is shown"); }); + + test("it renders a ToggleSelect to the anchor API", async function (assert) { + this.set("items", {}); + + await render(hbs` + + <:anchor as |dd|> + + --- + + + + `); + + const toggleSelect = "[data-test-toggle]"; + const content = `.${CONTAINER_CLASS}`; + + assert.dom(toggleSelect).hasClass("x-dropdown-list-toggle-select"); + assert.dom(`${toggleSelect} [data-test-caret]`).exists(); + + assert.dom(content).doesNotExist(); + + await click(toggleSelect); + + assert.dom(content).exists(); + + await click(toggleSelect); + + assert.dom(content).doesNotExist(); + }); + + test("it renders the selected value to the anchor API", async function (assert) { + this.set("items", {}); + this.set("selected", { + 3: { + name: "Three", + }, + }); + + await render(hbs` + + <:anchor as |dd|> +
+ {{dd.selected}} - {{dd.selected.attrs.name}} +
+ + + `); + + assert.dom("[data-test-div]").hasText("3 - Three"); + }); }); From 176d5f44b7ddae0198594e36bcd11d2fdde39472 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 9 Oct 2023 13:25:49 -0400 Subject: [PATCH 4/5] Update test, increase dropdown height --- web/app/components/new/doc-form.hbs | 12 +++++++----- .../components/x/dropdown-list/index-test.ts | 10 +++------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/web/app/components/new/doc-form.hbs b/web/app/components/new/doc-form.hbs index d6a1ed4ec..47ca20b38 100644 --- a/web/app/components/new/doc-form.hbs +++ b/web/app/components/new/doc-form.hbs @@ -72,11 +72,13 @@ Where your doc should be categorized.
- +
+ +
diff --git a/web/tests/integration/components/x/dropdown-list/index-test.ts b/web/tests/integration/components/x/dropdown-list/index-test.ts index 651846399..b083faac9 100644 --- a/web/tests/integration/components/x/dropdown-list/index-test.ts +++ b/web/tests/integration/components/x/dropdown-list/index-test.ts @@ -975,11 +975,7 @@ module("Integration | Component | x/dropdown-list", function (hooks) { test("it renders the selected value to the anchor API", async function (assert) { this.set("items", {}); - this.set("selected", { - 3: { - name: "Three", - }, - }); + this.set("selected", "Foo"); await render(hbs` <:anchor as |dd|>
- {{dd.selected}} - {{dd.selected.attrs.name}} + {{dd.selected}}
`); - assert.dom("[data-test-div]").hasText("3 - Three"); + assert.dom("[data-test-div]").hasText("Foo"); }); }); From 1b107faa7122b677470c4adeac4289d067f03d0c Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 9 Oct 2023 13:45:45 -0400 Subject: [PATCH 5/5] Remove comment --- web/app/components/x/dropdown-list/_shared.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web/app/components/x/dropdown-list/_shared.ts b/web/app/components/x/dropdown-list/_shared.ts index a0365c9fe..835766311 100644 --- a/web/app/components/x/dropdown-list/_shared.ts +++ b/web/app/components/x/dropdown-list/_shared.ts @@ -30,5 +30,4 @@ export interface XDropdownListToggleComponentArgs { contentIsShown: boolean; ariaControls: string; disabled?: boolean; - // TODO: do we need isLoading, isActive? }