Add hasChevron argument to dd.ToggleAction (#421)

Add chevron to toggleAction
hashicorp-forge · Nov 15, 2023 · 21f177d · 21f177d
1 parent 7d15f09
commit 21f177d
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 21 deletions.
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -56,21 +56,14 @@
                 <dd.ToggleAction
                   data-test-draft-visibility-toggle
                   data-test-icon={{this.draftVisibilityIcon}}
-                  data-test-chevron-direction={{if
-                    dd.contentIsShown
-                    "up"
-                    "down"
-                  }}
                   class="sidebar-header-button draft-visibility-button flex items-center text-color-foreground-faint"
                   {{tooltip
                     this.toggleDraftVisibilityTooltipText
                     placement="bottom"
                   }}
+                  @hasChevron={{true}}
                 >
                   <FlightIcon @name={{this.draftVisibilityIcon}} />
-                  <FlightIcon
-                    @name={{if dd.contentIsShown "chevron-up" "chevron-down"}}
-                  />
                 </dd.ToggleAction>
               </:anchor>
               <:item as |dd|>

diff --git a/web/app/components/project/index.hbs b/web/app/components/project/index.hbs
@@ -23,12 +23,12 @@
           <dd.ToggleAction
             data-test-project-status-toggle
             class="hds-button hds-button--size-medium hds-button--color-secondary rounded-r-full rounded-l-full border-color-border-strong"
+            @hasChevron={{true}}
           >
             <FlightIcon @name={{this.statusIcon}} class="-mr-1" />
             <span class="status ml-2">
               {{this.statusLabel}}
             </span>
-            <FlightIcon @name="chevron-down" />
           </dd.ToggleAction>
         </:anchor>
         <:item as |dd|>

diff --git a/web/app/components/x/dropdown-list/items.ts b/web/app/components/x/dropdown-list/items.ts
@@ -54,6 +54,10 @@ export default class XDropdownListItemsComponent extends Component<XDropdownList
    * "no matches found" message should be shown.
    */
   protected get itemsAreShown(): boolean {
+    if (this.args.shownItems === undefined) {
+      return false;
+    }
+
     return Object.entries(this.args.shownItems).length !== 0;
   }
 

diff --git a/web/app/components/x/dropdown-list/toggle-action.hbs b/web/app/components/x/dropdown-list/toggle-action.hbs
@@ -7,7 +7,16 @@
   aria-controls={{@ariaControls}}
   aria-expanded={{@contentIsShown}}
   aria-haspopup="listbox"
+  class="{{if @hasChevron 'flex items-center gap-1'}}
+    {{if @contentIsShown 'open'}}
+    "
   ...attributes
 >
   {{yield}}
+  {{#if @hasChevron}}
+    <FlightIcon
+      data-test-toggle-action-chevron
+      @name={{if @contentIsShown "chevron-up" "chevron-down"}}
+    />
+  {{/if}}
 </Action>
diff --git a/web/app/components/x/dropdown-list/toggle-action.ts b/web/app/components/x/dropdown-list/toggle-action.ts
@@ -3,7 +3,9 @@ import { XDropdownListToggleComponentArgs } from "./_shared";
 
 interface XDropdownListToggleActionComponentSignature {
   Element: HTMLButtonElement;
-  Args: XDropdownListToggleComponentArgs;
+  Args: XDropdownListToggleComponentArgs & {
+    hasChevron?: boolean;
+  };
   Blocks: {
     default: [];
   };

diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss
@@ -50,15 +50,10 @@
   }
 
   .draft-visibility-button {
-    @apply px-2.5;
     // match the height of the header buttons
     @apply h-[38px];
     // offset the extra height relative to the badge
     @apply my-[-7px];
-
-    [class*=" flight-icon-chevron"] {
-      @apply ml-px -mr-px;
-    }
   }
 
   .sidebar-header-icon-controls {

diff --git a/web/tests/acceptance/authenticated/document-test.ts b/web/tests/acceptance/authenticated/document-test.ts
@@ -237,9 +237,6 @@ module("Acceptance | authenticated/document", function (hooks) {
     assert
       .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR)
       .hasAttribute("data-test-icon", DraftVisibilityIcon.Restricted);
-    assert
-      .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR)
-      .hasAttribute("data-test-chevron-direction", "down");
 
     assert.dom(TOOLTIP_SELECTOR).doesNotExist();
 
@@ -251,9 +248,6 @@ module("Acceptance | authenticated/document", function (hooks) {
 
     await click(DRAFT_VISIBILITY_TOGGLE_SELECTOR);
 
-    assert
-      .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR)
-      .hasAttribute("data-test-chevron-direction", "up");
     assert.dom(DRAFT_VISIBILITY_DROPDOWN_SELECTOR).exists("dropdown is open");
 
     assert.dom(DRAFT_VISIBILITY_OPTION_SELECTOR).exists({ count: 2 });

diff --git a/web/tests/integration/components/x/dropdown-list/index-test.ts b/web/tests/integration/components/x/dropdown-list/index-test.ts
@@ -44,6 +44,7 @@ const DEFAULT_NO_MATCHES_SELECTOR = ".x-dropdown-list-default-empty-state";
 const LOADED_CONTENT_SELECTOR = "[data-test-x-dropdown-list-loaded-content]";
 const LOADING_BLOCK_SELECTOR = "[data-test-x-dropdown-list-loading-block]";
 const DEFAULT_LOADER_SELECTOR = ".x-dropdown-list-default-loading-container";
+const TOGGLE_ACTION_CHEVRON = "[data-test-toggle-action-chevron]";
 
 interface XDropdownListComponentTestContext extends TestContext {
   items: Record<string, { count: number; isSelected: boolean }>;
@@ -52,6 +53,7 @@ interface XDropdownListComponentTestContext extends TestContext {
   isLoading?: boolean;
   placement?: Placement | null;
   selected?: string;
+  hasChevron?: boolean;
 }
 
 module("Integration | Component | x/dropdown-list", function (hooks) {
@@ -629,6 +631,33 @@ module("Integration | Component | x/dropdown-list", function (hooks) {
     );
   });
 
+  test("the toggle action can render with a chevron", async function (assert) {
+    this.set("hasChevron", false);
+
+    await render<XDropdownListComponentTestContext>(hbs`
+      <X::DropdownList>
+        <:anchor as |dd|>
+          <dd.ToggleAction @hasChevron={{this.hasChevron}} data-test-toggle>
+            ---
+          </dd.ToggleAction>
+        </:anchor>
+      </X::DropdownList>
+    `);
+
+    assert.dom(TOGGLE_ACTION_CHEVRON).doesNotExist();
+
+    this.set("hasChevron", true);
+
+    assert.dom(TOGGLE_ACTION_CHEVRON).exists();
+    assert.dom(TOGGLE_ACTION_CHEVRON).hasClass("flight-icon-chevron-down");
+
+    await click(TOGGLE_ACTION_SELECTOR);
+
+    assert.dom(TOGGLE_ACTION_SELECTOR).hasClass("open");
+
+    assert.dom(TOGGLE_ACTION_CHEVRON).hasClass("flight-icon-chevron-up");
+  });
+
   test("the list can be rendered with a toggle button", async function (assert) {
     this.set("items", SHORT_ITEM_LIST);