feat: Peer review

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;

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('');
   });

packages/ember-core/src/components/form/search.gts

@@ -1,18 +1,22 @@
 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';
 
 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<T> = {
   label: string;
@@ -30,9 +34,6 @@ interface SearchItemSignature<T> {
 }
 
 class SearchItem<T> extends Component<SearchItemSignature<T>> {
-  @tracked
-  active = true;
-
   get classList() {
     const classes = ['dropdown-item'];
 
@@ -104,6 +105,9 @@ export default class Search<T> extends BoundValue<
   @tracked
   searchString = '';
 
+  @service
+  declare intl: IntlService;
+
   get clearable() {
     if (this.args.basic) {
       return false;
@@ -129,15 +133,15 @@ export default class Search<T> extends BoundValue<
   }
 
   get noResultsLabel() {
-    return this.args.noResultsLabel ?? 'No results found';
+    return this.args.noResultsLabel ?? this.intl.t('nrg.search.noResults');
   }
 
   get placeholder() {
     if (this.args.basic) {
       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<T> extends BoundValue<
           {{onInsert this.onSearchBarInsert}}
         />
         {{#if this.clearable}}
-          <button
-            class="input-group-text"
-            type="button"
-            {{on "click" this.clear}}
+          <Button
+            aria-label={{t "nrg.base.clear"}}
+            class="btn-outline-secondary"
+            @onClick={{this.clear}}
           >
             <i class="bi bi-x-lg" />
-          </button>
+          </Button>
         {{/if}}
       </div>
       <div class="dropdown {{if this.scrollable 'scrollable'}}">

packages/ember-core/translations/en-us.json

@@ -9,7 +9,8 @@
       },
       "loading": "Loading",
       "next": "Next",
-      "previous": "Previous"
+      "previous": "Previous",
+      "clear" : "Clear"
     },
     "navbar": {
       "toggleContextMenu": "Toggle context menu"
@@ -21,6 +22,10 @@
     "select": {
       "defaultText": "Select an Option"
     },
+    "search": {
+      "placeholder": "Search",
+      "noResults": "No results found"
+    },
     "validation": {
       "confirmation": {
         "invalid": "This field does not match {label}",