Hide Clear All in filter-dropdown when nothing is selected (#1683)

Hide Clear All in filter-dropdown when nothing is selected
OurPlanscape · Aug 21, 2024 · cb510f4 · cb510f4
1 parent 40cc2bb
commit cb510f4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/interface/src/styleguide/filter-dropdown/filter-dropdown.component.html b/src/interface/src/styleguide/filter-dropdown/filter-dropdown.component.html
@@ -63,9 +63,14 @@
   </div>
   <div class="bottom-section">
     <div class="bottom-content">
-      <button class="clear-all-text" (click)="clearSelections($event)">
-        clear all
-      </button>
+      <div class="clear-all-area">
+        <button
+          *ngIf="hasSelections()"
+          class="clear-all-text"
+          (click)="clearSelections($event)">
+          Clear All
+        </button>
+      </div>
       <div class="button-box">
         <button sg-button variant="ghost" (click)="handleCancel()">
           Cancel

diff --git a/src/interface/src/styleguide/filter-dropdown/filter-dropdown.component.scss b/src/interface/src/styleguide/filter-dropdown/filter-dropdown.component.scss
@@ -237,23 +237,27 @@
 
 .button-box {
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-end;
+  align-items: flex-end;
   gap: 8px;
   display: flex;
+  width: 120px;
+}
+
+.clear-all-area {
+  width: 120px;
 }
 
 .clear-all-text {
   @include xs-label();
   cursor: pointer;
-  text-transform: uppercase;
   color: $color-text-gray;
   padding: 10px;
   text-align: left;
   border: none;
   background-color: inherit;
 }
 
-.clear-all-text:hover {
-  color: black;
+.clear-all-text:hover:not(:disabled) {
+  color: $color-standard-blue;
 }