Skip to content
This repository has been archived by the owner on Jan 6, 2023. It is now read-only.

Commit

Permalink
feat: UiFilter reset button only shows when there is something to reset
Browse files Browse the repository at this point in the history
  • Loading branch information
mdeanjones committed Dec 29, 2022
1 parent 563de37 commit cb406f9
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 16 deletions.
8 changes: 7 additions & 1 deletion addon/components/ui-filter/input/component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
/**
Expand All @@ -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.
Expand Down
21 changes: 10 additions & 11 deletions addon/components/ui-filter/input/template.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions app/styles/_ui-foundation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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-*;

Expand All @@ -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();
Expand Down
52 changes: 52 additions & 0 deletions app/styles/ui-foundation/components/_filter.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
6 changes: 2 additions & 4 deletions tests/integration/components/ui-filter-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down

0 comments on commit cb406f9

Please sign in to comment.