Merge pull request #1292 from Infineon/1288-search-field-implement-a-…

…prop-for-customizing-the-placeholder-text Search-field: implement ```placeholder``` prop to customize placeholder text
Infineon · Jun 13, 2024 · 32a45ae · 32a45ae
2 parents 48feb27 + 0a75074
commit 32a45ae
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/packages/components/src/components/search-field/readme.md b/packages/components/src/components/search-field/readme.md
@@ -7,12 +7,13 @@
 
 ## Properties
 
-| Property         | Attribute          | Description | Type      | Default |
-| ---------------- | ------------------ | ----------- | --------- | ------- |
-| `disabled`       | `disabled`         |             | `boolean` | `false` |
-| `showDeleteIcon` | `show-delete-icon` |             | `boolean` | `false` |
-| `size`           | `size`             |             | `string`  | `'l'`   |
-| `value`          | `value`            |             | `string`  | `''`    |
+| Property         | Attribute          | Description | Type      | Default       |
+| ---------------- | ------------------ | ----------- | --------- | ------------- |
+| `disabled`       | `disabled`         |             | `boolean` | `false`       |
+| `placeholder`    | `placeholder`      |             | `string`  | `"Search..."` |
+| `showDeleteIcon` | `show-delete-icon` |             | `boolean` | `false`       |
+| `size`           | `size`             |             | `string`  | `'l'`         |
+| `value`          | `value`            |             | `string`  | `''`          |
 
 
 ## Events

diff --git a/packages/components/src/components/search-field/search-field.stories.ts b/packages/components/src/components/search-field/search-field.stories.ts
@@ -15,6 +15,10 @@ export default {
       options: ['s', 'm'],
       control: { type: 'radio' },
     },
+    placeholder: {
+      description: 'Place holder text - default value: "Search..."',
+      control: { type: 'text'}
+    },
     ifxInput: {
       action: 'ifxInput',
       description: 'Custom event',
@@ -29,11 +33,12 @@ export default {
   },
 };
 
-const DefaultTemplate = ({ disabled, size, showDeleteIcon }) => {
+const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder }) => {
   const element = document.createElement('ifx-search-field');
   element.setAttribute('size', size);
   element.setAttribute('disabled', disabled);
   element.setAttribute('show-delete-icon', showDeleteIcon);
+  if(placeholder != undefined) element.setAttribute('placeholder', placeholder);
   element.addEventListener('ifxInput', action('ifxInput'));
 
   return element;

diff --git a/packages/components/src/components/search-field/search-field.tsx b/packages/components/src/components/search-field/search-field.tsx
@@ -21,6 +21,7 @@ export class SearchField {
   @Prop() disabled: boolean = false;
   @Prop() size: string = 'l';
   @State() isFocused: boolean = false;
+  @Prop() placeholder: string = "Search...";
 
   @Listen('mousedown', { target: 'document' })
   handleOutsideClick(event: MouseEvent) {
@@ -75,7 +76,7 @@ export class SearchField {
             ref={(el) => (this.inputElement = el)}
             type="text"
             onInput={() => this.handleInput()}
-            placeholder="Search..."
+            placeholder={this.placeholder}
             disabled={this.disabled}
             value={this.value} // bind the value property to input element
           />