feat: UiFilter reset button only shows when there is something to reset

Author: mdeanjones

addon/components/ui-filter/input/component.ts

@@ -1,4 +1,4 @@
-import { className, layout } from '@ember-decorators/component';
+import { className, classNames, layout } from '@ember-decorators/component';
 import { action } from '@ember/object';
 import { empty, or } from '@ember/object/computed';
 import Component from '@ember/component';
@@ -7,6 +7,7 @@ import template from './template';
 /**
  * The UiFilterInput component
  */
+@classNames('ui-filter ui-filter-input')
 @layout(template)
 export default class UiFilterInput extends Component {
   /**
@@ -29,6 +30,11 @@ export default class UiFilterInput extends Component {
    */
   public showClearButton = false;
 
+  /**
+   * The name of the icon to use with the close button.
+   */
+  public clearButtonIcon = 'times';
+
   /**
    * An array that will be used to populate a menu of options that can
    * be selected to auto-populate the text input.

addon/components/ui-filter/input/template.hbs

@@ -25,17 +25,16 @@
   oninput={{this.handleInputChange}}
 >
 
-{{#if this.showClearButton}}
-  <span class="input-group-btn">
-    <UiButton
-      @variant="{{if this.showErrorMessage "danger" "default"}}"
-      @ariaLabel="{{concat "Reset " this.label}}"
-      @title="{{concat "Reset " this.label}}"
-      @disabled={{or this.disabled this.noValue}}
-      @onClick={{this.handleInputReset}}
-      @icon="times"
-    />
-  </span>
+{{#if (and this.showClearButton this.value)}}
+  <UiButton
+    @variant="{{if this.showErrorMessage "danger" "default"}}"
+    @ariaLabel="{{concat "Reset " this.label}}"
+    @title="{{concat "Reset " this.label}}"
+    @disabled={{or this.disabled this.noValue}}
+    @onClick={{this.handleInputReset}}
+    @icon="{{this.clearButtonIcon}}"
+    class="ui-filter-reset"
+  />
 {{/if}}
 
 <UiTooltipAttachment

app/styles/_ui-foundation.scss

@@ -7,6 +7,7 @@
 @forward "ui-foundation/components/button-column"    as button-column-*;
 @forward "ui-foundation/components/progress-chevron" as progress-chevron-*;
 @forward "ui-foundation/components/table"            as table-*;
+@forward "ui-foundation/components/filter"           as filter-*;
 @forward "ui-foundation/utilities/responsive"        as responsive-utilities-*;
 @forward "ui-foundation/utilities/spacing"           as spacing-utilities-*;
 
@@ -21,11 +22,13 @@
 @use "ui-foundation/components/button-column";
 @use "ui-foundation/components/progress-chevron";
 @use "ui-foundation/components/table";
+@use "ui-foundation/components/filter";
 
 @mixin style() {
   @include button-column.style();
   @include progress-chevron.style();
   @include table.style();
+  @include filter.style();
 
   @include responsive.style();
   @include spacing.style();

app/styles/ui-foundation/components/_filter.scss

@@ -0,0 +1,52 @@
+@use "../functions/logic";
+
+$-input-border-radius: 4px;
+$-input-background-color: #fff;
+$-input-danger-color: #d9534f;
+
+/**
+ * Configuration for the UiFilter module.
+ */
+@mixin configure(
+  $input-border-radius: null,
+  $input-background-color: null,
+  $input-danger-color: null,
+) {
+  $-input-border-radius:    logic.truthy($input-border-radius,    $-input-border-radius) !global;
+  $-input-background-color: logic.truthy($input-background-color, $-input-background-color) !global;
+  $-input-danger-color:     logic.truthy($input-danger-color,     $-input-danger-color) !global;
+}
+
+/**
+ * UiFilter Styling.
+ */
+@mixin style() {
+  .ui-filter {
+    &.ui-filter-input {
+      position: relative;
+
+      input {
+        border-top-right-radius: $-input-border-radius !important;
+        border-bottom-right-radius: $-input-border-radius !important;
+      }
+
+      input + button {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 2;
+        border: none;
+        background: $-input-background-color;
+
+        &:hover, &:focus, &:active {
+          background: $-input-background-color;
+        }
+
+        &.btn-danger {
+          color: $-input-danger-color;
+        }
+      }
+    }
+  }
+}

tests/integration/components/ui-filter-test.ts

@@ -313,11 +313,9 @@ module('Integration | Component | ui-filter', function (hooks) {
 
     assert.dom('table tbody tr').exists({ count: 11 });
 
-    assert
-      .dom('.input-group .input-group-btn:last-child button')
-      .hasAria('label', 'Reset Filter Input Field');
+    assert.dom('.input-group button.ui-filter-reset').hasAria('label', 'Reset Filter Input Field');
 
-    await click('.input-group .input-group-btn:last-child button');
+    await click('.input-group button.ui-filter-reset');
 
     assert.dom('input[type="text"]').hasNoValue();
   });