diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts index dfac921e27..7f629633b1 100644 --- a/packages/components-vue/lib/components.ts +++ b/packages/components-vue/lib/components.ts @@ -323,7 +323,6 @@ export const IfxRadioButton = /*@__PURE__*/ defineContainer( export const IfxSearchBar = /*@__PURE__*/ defineContainer('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 index c689e2a110..eef84d0b77 100644 --- 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 index 1c64a648f0..788c347a8b 100644 --- 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 index a8e86ecad2..7df1d53611 100644 --- 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 { - {this.showCloseButton && - Close} + + Close ) : (