From 03d4c55a8eeb0373b307ce42442251ba2d0236de Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 22 May 2020 11:38:50 +0100
Subject: [PATCH] Fixed dropdown styling for content filter and members chart
 timeframe

refs https://github.com/TryGhost/Ghost-Admin/commit/654d37365570b503bf408086907039558cc21832

- `<PowerSelect>` no longer has it's own wrapper element so `@classNames=` has no effect and needs to be added to an explicit wrapper element
---
 ghost/admin/app/components/gh-contentfilter.hbs  | 16 ++++------------
 .../app/components/gh-members-chart-old.hbs      |  4 +---
 ghost/admin/app/components/gh-members-chart.hbs  |  4 +---
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/ghost/admin/app/components/gh-contentfilter.hbs b/ghost/admin/app/components/gh-contentfilter.hbs
index 8122f62b2f..fc1dc04663 100644
--- a/ghost/admin/app/components/gh-contentfilter.hbs
+++ b/ghost/admin/app/components/gh-contentfilter.hbs
@@ -1,13 +1,11 @@
 <div class="gh-contentfilter" ...attributes>
     {{#unless this.session.user.isContributor}}
-        <div data-test-type-select="true">
+        <div class="gh-contentfilter-menu gh-contentfilter-type {{if @selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
             <PowerSelect
                 @selected={{@selectedType}}
                 @options={{@availableTypes}}
                 @searchEnabled={{false}}
                 @onChange={{@onTypeChange}}
-                @tagName="div"
-                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-type " (if @selectedType.value "gh-contentfilter-selected")}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
                 @dropdownClass="gh-contentfilter-menu-dropdown"
@@ -20,14 +18,12 @@
     {{/unless}}
 
     {{#unless this.session.user.isAuthorOrContributor}}
-        <div data-test-author-select="true">
+        <div class="gh-contentfilter-menu gh-contentfilter-author {{if @selectedAuthor.slug "gh-contentfilter-selected"}}" data-test-author-select="true">
             <PowerSelect
                 @selected={{@selectedAuthor}}
                 @options={{@availableAuthors}}
                 @searchField="name"
                 @onChange={{@onAuthorChange}}
-                @tagName="div"
-                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-author " (if @selectedAuthor.slug "gh-contentfilter-selected")}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
                 @dropdownClass="gh-contentfilter-menu-dropdown"
@@ -41,14 +37,12 @@
     {{/unless}}
 
     {{#unless this.session.user.isContributor}}
-        <div data-test-tag-select="true">
+        <div class="gh-contentfilter-menu gh-contentfilter-tag {{if @selectedTag.slug "gh-contentfilter-selected"}}" data-test-tag-select="true">
             <PowerSelect
                 @selected={{@selectedTag}}
                 @options={{@availableTags}}
                 @searchField="name"
                 @onChange={{@onTagChange}}
-                @tagName="div"
-                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-tag " (if @selectedTag.slug "gh-contentfilter-selected")}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
                 @dropdownClass="gh-contentfilter-menu-dropdown"
@@ -62,14 +56,12 @@
         </div>
     {{/unless}}
 
-    <div data-test-order-select="true">
+    <div class="gh-contentfilter-menu gh-contentfilter-sort" data-test-order-select="true">
         <PowerSelect
             @selected={{@selectedOrder}}
             @options={{@availableOrders}}
             @searchEnabled={{false}}
             @onChange={{@onOrderChange}}
-            @tagName="div"
-            @classNames="gh-contentfilter-menu gh-contentfilter-sort"
             @triggerComponent="gh-power-select/trigger"
             @triggerClass="gh-contentfilter-menu-trigger"
             @dropdownClass="gh-contentfilter-menu-dropdown"
diff --git a/ghost/admin/app/components/gh-members-chart-old.hbs b/ghost/admin/app/components/gh-members-chart-old.hbs
index 4d5a72f0f0..59467638d6 100644
--- a/ghost/admin/app/components/gh-members-chart-old.hbs
+++ b/ghost/admin/app/components/gh-members-chart-old.hbs
@@ -5,14 +5,12 @@
         <div class="flex justify-between items-center gh-members-chart-header">
             <h2 class="f-small ttu midgrey fw5 mb0">Total members</h2>
             <div class="view-actions">
-                <div class="gh-contentfilter">
+                <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
                     <PowerSelect
                         @selected={{this.selectedRange}}
                         @options={{this.availableRange}}
                         @searchEnabled={{false}}
                         @onChange={{action "changeDateRange"}}
-                        @tagName="div"
-                        @classNames="gh-contentfilter-menu gh-contentfilter-type"
                         @triggerComponent="gh-power-select/trigger"
                         @triggerClass="gh-contentfilter-menu-trigger"
                         @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"
diff --git a/ghost/admin/app/components/gh-members-chart.hbs b/ghost/admin/app/components/gh-members-chart.hbs
index 4d5a72f0f0..59467638d6 100644
--- a/ghost/admin/app/components/gh-members-chart.hbs
+++ b/ghost/admin/app/components/gh-members-chart.hbs
@@ -5,14 +5,12 @@
         <div class="flex justify-between items-center gh-members-chart-header">
             <h2 class="f-small ttu midgrey fw5 mb0">Total members</h2>
             <div class="view-actions">
-                <div class="gh-contentfilter">
+                <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
                     <PowerSelect
                         @selected={{this.selectedRange}}
                         @options={{this.availableRange}}
                         @searchEnabled={{false}}
                         @onChange={{action "changeDateRange"}}
-                        @tagName="div"
-                        @classNames="gh-contentfilter-menu gh-contentfilter-type"
                         @triggerComponent="gh-power-select/trigger"
                         @triggerClass="gh-contentfilter-menu-trigger"
                         @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"