diff --git a/apps/docs-app/app/components/f/form/search.gts b/apps/docs-app/app/components/f/form/search.gts index aaad74893..3cb14e34d 100644 --- a/apps/docs-app/app/components/f/form/search.gts +++ b/apps/docs-app/app/components/f/form/search.gts @@ -9,8 +9,6 @@ import FreestyleSection from 'ember-freestyle/components/freestyle-section'; import CodeBlock from '../../code-block'; -// TypeScript doesn't recognize that this function is used in the template -// eslint-disable-next-line @typescript-eslint/no-unused-vars function log(...msg: string[]) { console.log(msg.join(' ')); } @@ -105,10 +103,10 @@ export default class extends Component { minCharacters = 1; @tracked - noResultsLabel = 'No results found'; + noResultsLabel; @tracked - placeholder = 'Search'; + placeholder; @tracked readonly = false; diff --git a/apps/test-app/tests/integration/components/form/search-test.gts b/apps/test-app/tests/integration/components/form/search-test.gts index 2776f41e4..327e442c4 100644 --- a/apps/test-app/tests/integration/components/form/search-test.gts +++ b/apps/test-app/tests/integration/components/form/search-test.gts @@ -1,6 +1,6 @@ -import { fillIn, render, click } from '@ember/test-helpers'; +import { click, fillIn, render } from '@ember/test-helpers'; import { tracked } from '@glimmer/tracking'; -import { Bind as bind, Search } from '@nrg-ui/core'; +import { Search, bind } from '@nrg-ui/core'; import { module, test } from 'qunit'; import { setupRenderingTest } from '../../../helpers'; @@ -13,7 +13,7 @@ class Model { module('Integration | Component | form/search', function (hooks) { setupRenderingTest(hooks); - const actionHandler = (text) => { + const actionHandler = (text: string) => { const fruits = [ 'Apple', 'Banana', @@ -132,7 +132,7 @@ module('Integration | Component | form/search', function (hooks) { assert.dom('.spinner-border').doesNotExist(); assert.dom('.bi-search').doesNotExist(); - assert.dom('button > i.bi-x-lg').doesNotExist(); + assert.dom('button').doesNotExist(); }); test('it shows clear button', async function (assert) { @@ -154,9 +154,9 @@ module('Integration | Component | form/search', function (hooks) { assert.dom('div > input').hasValue('an'); - assert.dom('button > i.bi-x-lg').exists(); + assert.dom('button').exists(); - await click('button > i.bi-x-lg'); + await click('button'); assert.dom('div > input').hasValue(''); }); diff --git a/packages/ember-core/src/components/form/search.gts b/packages/ember-core/src/components/form/search.gts index 6fbbdfdbd..3be9dc14c 100644 --- a/packages/ember-core/src/components/form/search.gts +++ b/packages/ember-core/src/components/form/search.gts @@ -1,9 +1,11 @@ import { fn } from '@ember/helper'; import { on } from '@ember/modifier'; import { action, get } from '@ember/object'; +import { service } from '@ember/service'; import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { restartableTask, timeout } from 'ember-concurrency'; +import { t } from 'ember-intl'; // @ts-expect-error Ember keyboard doesn't currently ship a type for the `on-key` modifier // https://github.com/adopted-ember-addons/ember-keyboard/issues/464 import onKey from 'ember-keyboard/modifiers/on-key'; @@ -11,8 +13,10 @@ import onKey from 'ember-keyboard/modifiers/on-key'; import BoundValue from './bound-value.ts'; import onClickOutside from '../../modifiers/on-click-outside.ts'; import onInsert from '../../modifiers/on-insert.ts'; +import Button from '../button.gts'; import type { Optional } from '../../'; +import type IntlService from 'ember-intl/services/intl'; declare type SearchOption = { label: string; @@ -30,9 +34,6 @@ interface SearchItemSignature { } class SearchItem extends Component> { - @tracked - active = true; - get classList() { const classes = ['dropdown-item']; @@ -104,6 +105,9 @@ export default class Search extends BoundValue< @tracked searchString = ''; + @service + declare intl: IntlService; + get clearable() { if (this.args.basic) { return false; @@ -129,7 +133,7 @@ export default class Search extends BoundValue< } get noResultsLabel() { - return this.args.noResultsLabel ?? 'No results found'; + return this.args.noResultsLabel ?? this.intl.t('nrg.search.noResults'); } get placeholder() { @@ -137,7 +141,7 @@ export default class Search extends BoundValue< return ''; } - return this.args.placeholder ?? 'Search'; + return this.args.placeholder ?? this.intl.t('nrg.search.placeholder'); } get scrollable() { @@ -392,13 +396,13 @@ export default class Search extends BoundValue< {{onInsert this.onSearchBarInsert}} /> {{#if this.clearable}} - + {{/if}}