Merge pull request #507 from Infineon/310-design-review-component-sea…

…rch-bar search-bar design review updates implemented
Infineon · Sep 12, 2023 · f76c32a · f76c32a
2 parents 3d05977 + 2c5c221
commit f76c32a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 16 deletions.
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -323,7 +323,6 @@ export const IfxRadioButton = /*@__PURE__*/ defineContainer<JSX.IfxRadioButton>(
 
 
 export const IfxSearchBar = /*@__PURE__*/ defineContainer<JSX.IfxSearchBar, JSX.IfxSearchBar["value"]>('ifx-search-bar', undefined, [
-  'showCloseButton',
   'isOpen',
   'disabled',
   'value',

diff --git a/packages/components/src/components/search-bar/readme.md b/packages/components/src/components/search-bar/readme.md
@@ -7,12 +7,11 @@
 
 ## Properties
 
-| Property          | Attribute           | Description | Type      | Default     |
-| ----------------- | ------------------- | ----------- | --------- | ----------- |
-| `disabled`        | `disabled`          |             | `boolean` | `false`     |
-| `isOpen`          | `is-open`           |             | `boolean` | `true`      |
-| `showCloseButton` | `show-close-button` |             | `boolean` | `true`      |
-| `value`           | `value`             |             | `string`  | `undefined` |
+| Property   | Attribute  | Description | Type      | Default     |
+| ---------- | ---------- | ----------- | --------- | ----------- |
+| `disabled` | `disabled` |             | `boolean` | `false`     |
+| `isOpen`   | `is-open`  |             | `boolean` | `true`      |
+| `value`    | `value`    |             | `string`  | `undefined` |
 
 
 ## Events

diff --git a/packages/components/src/components/search-bar/search-bar.stories.ts b/packages/components/src/components/search-bar/search-bar.stories.ts
@@ -6,7 +6,6 @@ export default {
   tags: ['autodocs'],
 
   args: {
-    showCloseButton: true,
     disabled: false,
 
   },
@@ -20,19 +19,16 @@ export default {
           detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
         },
       },
-    }, showCloseButton: {
-      control: { type: 'boolean' },
     },
   },
 };
 
 
 
-const DefaultTemplate = ({ isOpen, showCloseButton, disabled }) => {
+const DefaultTemplate = ({ isOpen, disabled }) => {
   const element = document.createElement('ifx-search-bar');
   element.setAttribute('is-open', isOpen);
   element.setAttribute('disabled', disabled);
-  element.setAttribute('show-close-button', showCloseButton);
   element.addEventListener('ifxInput', action('ifxInput'));
 
   return element;

diff --git a/packages/components/src/components/search-bar/search-bar.tsx b/packages/components/src/components/search-bar/search-bar.tsx
@@ -6,14 +6,13 @@ import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/
   shadow: true,
 })
 export class SearchBar {
-  @Prop() showCloseButton: boolean = true;
   @Prop() isOpen: boolean = true;
   @Prop() disabled: boolean = false;
   @State() internalState: boolean;
   @Prop({ mutable: true }) value: string;
   @Event() ifxInput: EventEmitter;
   @Event() ifxSearchBarIsOpen: EventEmitter;
-  
+
 
   @Watch('isOpen')
   handlePropChange() {
@@ -51,8 +50,8 @@ export class SearchBar {
             <ifx-search-field disabled={this.disabled} value={this.value} onIfxInput={this.handleInput.bind(this)}>
               <ifx-icon icon="search-16" slot="search-icon"></ifx-icon>
             </ifx-search-field>
-            {this.showCloseButton &&
-              <a href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>}
+
+            <a href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>
           </div>
         ) : (
           <div class="search-bar__icon-wrapper" onClick={this.handleCloseButton}>