feat(#1979): filter chips examples

Author: BumbleB2na

src/examples/filter-chip/FilterChipTypedChipExample.tsx

@@ -163,11 +163,11 @@ export class FilterChipComponent {
     this.inputValue = newValue;
   }
 
-  handleInputKeyPress(event: KeyboardEvent): void {
-    const newValue = (event.target as HTMLInputElement).value.trim();
-    if (event.key === "Enter" && newValue !== "") {
+  handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
+    const newValue = detail.value.trim();
+    if (detail.key === "Enter" && newValue !== "") {
       this.addChip();
-    } else if (!this.inputValue && this.typedChips.length > 0 && event.key === "Backspace") {
+    } else if (!this.inputValue && this.typedChips.length > 0 && detail.key === "Backspace") {
       this.typedChips.pop();
     }
   }
@@ -196,7 +196,7 @@ export class FilterChipComponent {
   type="text"
   [value]="inputValue"
   (onChange)="handleInputChange($event)"
-  (keydown)="handleInputKeyPress($event)"
+  (onKeyPress)="handleInputKeyPress($event)"
   placeholder="Type and press Enter"
   mr="s"
 >

src/examples/filter-chip/TableWithGlobalFiltersExample.tsx

@@ -128,7 +128,6 @@ export const TableWithGlobalFiltersExample = () => {
             <GoabInput
               name="filterChipInput"
               aria-labelledby="filterChipInput"
-              placeholder="Filter results"
               value={inputValue}
               leadingIcon="search"
               onChange={handleInputChange}
@@ -198,7 +197,7 @@ export const TableWithGlobalFiltersExample = () => {
             tags="angular"
             allowCopy={true}
             code={`
-export class TableComponent() {
+export class TableComponent {
   typedChips: string[] = [];
   inputValue = "";
   inputError = "";
@@ -307,7 +306,6 @@ export class TableComponent() {
     <goa-input
       name="filterChipInput"
       aria-labelledby="filterChipInput"
-      placeholder="Filter results"
       [value]="inputValue"
       maxlength="100"
       size="large"
@@ -484,7 +482,6 @@ export class TableComponent() {
           <GoAInput
             name="filterChipInput"
             aria-labelledby="filterChipInput"
-            placeholder="Filter results"
             value={inputValue}
             leadingIcon="search"
             onChange={handleInputChange}
@@ -611,8 +608,8 @@ export class TableComponent {
     }
   }
 
-  handleInputKeyPress(event: KeyboardEvent): void {
-    if (event.key === "Enter") {
+  handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
+    if (detail.key === "Enter") {
       this.applyFilter();
     }
   }
@@ -673,13 +670,12 @@ export class TableComponent {
     <goab-input
       name="filterChipInput"
       aria-labelledby="filterChipInput"
-      placeholder="Filter results"
       [value]="inputValue"
       maxlength="100"
       size="large"
       leadingIcon="search"
       (onChange)="handleInputChange($event)"
-      (keydown)="handleInputKeyPress($event)"
+      (onKeyPress)="handleInputKeyPress($event)"
     ></goab-input>
 
     <goab-button
@@ -844,74 +840,73 @@ export class TableComponent {
             tags="react"
             allowCopy={true}
             code={`
-      <>
-        <GoabFormItem id="filterChipInput" error={inputError}>
-          <GoabBlock gap="xs" direction="row" alignment="start">
-            <GoabInput
-              name="filterChipInput"
-              aria-labelledby="filterChipInput"
-              placeholder="Filter results"
-              value={inputValue}
-              leadingIcon="search"
-              onChange={handleInputChange}
-              onKeyPress={handleInputKeyPress}
-            />
-            <GoabButton
-              type="secondary"
-              onClick={applyFilter}
-              disabled={inputValue === ""}
-              leadingIcon="filter">
-              Filter
-            </GoabButton>
-          </GoabBlock>
-        </GoabFormItem>
+    <>
+      <GoabFormItem id="filterChipInput" error={inputError}>
+        <GoabBlock gap="xs" direction="row" alignment="start">
+          <GoabInput
+            name="filterChipInput"
+            aria-labelledby="filterChipInput"
+            value={inputValue}
+            leadingIcon="search"
+            onChange={handleInputChange}
+            onKeyPress={handleInputKeyPress}
+          />
+          <GoabButton
+            type="secondary"
+            onClick={applyFilter}
+            disabled={inputValue === ""}
+            leadingIcon="filter">
+            Filter
+          </GoabButton>
+        </GoabBlock>
+      </GoabFormItem>
 
-        {typedChips.length > 0 && (
-          <div>
-            <GoabText as="span" mr="xs">
-              Filter:
-            </GoabText>
-            {typedChips.length > 0 &&
-              typedChips.map((typedChip, index) => (
-                <GoabFilterChip
-                  key={index}
-                  content={typedChip}
-                  mt="s"
-                  mr="xs"
-                  onClick={() => removeTypedChip(typedChip)}
-                />
-              ))}
-            <GoabButton type="tertiary" size="compact" mt="s" onClick={() => setTypedChips([])}>
-              Clear all
-            </GoabButton>
-          </div>
-        )}
+      {typedChips.length > 0 && (
+        <div>
+          <GoabText as="span" mr="xs">
+            Filter:
+          </GoabText>
+          {typedChips.length > 0 &&
+            typedChips.map((typedChip, index) => (
+              <GoabFilterChip
+                key={index}
+                content={typedChip}
+                mt="s"
+                mr="xs"
+                onClick={() => removeTypedChip(typedChip)}
+              />
+            ))}
+          <GoabButton type="tertiary" size="compact" mt="s" onClick={() => setTypedChips([])}>
+            Clear all
+          </GoabButton>
+        </div>
+      )}
 
-        <GoabTable width="100%">
-          <thead>
-            <tr>
-              <th>Status</th>
-              <th>Name</th>
-              <th className="goa-table-number-header">ID Number</th>
+      <GoabTable width="100%">
+        <thead>
+          <tr>
+            <th>Status</th>
+            <th>Name</th>
+            <th className="goa-table-number-header">ID Number</th>
+          </tr>
+        </thead>
+        <tbody>
+          {dataFiltered.map(item => (
+            <tr key={item.id}>
+              <td>
+                <GoabBadge type={item.status.type} content={item.status.text} />
+              </td>
+              <td>{item.name}</td>
+              <td className="goa-table-number-column">{item.id}</td>
             </tr>
-          </thead>
-          <tbody>
-            {dataFiltered.map(item => (
-              <tr key={item.id}>
-                <td>
-                  <GoabBadge type={item.status.type} content={item.status.text} />
-                </td>
-                <td>{item.name}</td>
-                <td className="goa-table-number-column">{item.id}</td>
-              </tr>
-            ))}
-          </tbody>
-        </GoabTable>
+          ))}
+        </tbody>
+      </GoabTable>
 
-				{dataFiltered.length === 0 && data.length > 0 && (
-					<GoabBlock mt="m">No results found</GoabBlock>
-				)}
-      </>
+      {dataFiltered.length === 0 && data.length > 0 && (
+        <GoabBlock mt="m">No results found</GoabBlock>
+      )}
+    </>
             `}
           />
         </>