Merge pull request #595 from Infineon/584-multiselect-placeholder-pro…

…perty-missing Feature for multiselect - placeholder prop now modifiable
Infineon · Oct 17, 2023 · 7f763fa · 7f763fa
2 parents 13d8096 + 4a58f8a
commit 7f763fa
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 1 deletion.
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -244,6 +244,7 @@ export const IfxMultiselect = /*@__PURE__*/ defineContainer<JSX.IfxMultiselect>(
   'error',
   'errorMessage',
   'label',
+  'placeholder',
   'maxItemCount',
   'ifxSelect',
   'ifxMultiselectIsOpen'

diff --git a/packages/components/src/components/select/multi-select/Development.mdx b/packages/components/src/components/select/multi-select/Development.mdx
@@ -24,6 +24,7 @@ The Multi Select component takes an array of objects in the following format as
 const options = [{
   value: "a",
   label: "option a",
+  placeholder: "Placeholder",
   selected: false,
   children: [
     {

diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts
@@ -39,6 +39,7 @@ export default {
     errorMessage: 'Some error',
     label: '',
     disabled: false,
+    placeholder: 'Placeholder'
 
 
   },
@@ -66,6 +67,7 @@ export default {
     },
     errorMessage: { control: 'text' },
     label: { control: 'text' },
+    placeholder: { control: 'text' },
     options: {
       description: 'Takes an array of objects in the following format',
     },
@@ -81,6 +83,7 @@ const DefaultTemplate = (args) => {
   error='${args.error}'
   error-message='${args.errorMessage}'
   label='${args.label}'
+  placeholder='${args.placeholder}'
   disabled='${args.disabled}'>
 </ifx-multiselect>`;
 

diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -17,6 +17,7 @@ export class Multiselect {
   @Prop() errorMessage: string = "Error";
   @Prop() label: string = "";
   @State() persistentSelectedOptions: Option[] = [];
+  @Prop() placeholder: string = "";
   @State() listOfOptions: Option[] = [];
   @State() dropdownOpen = false;
   @State() dropdownFlipped: boolean;
@@ -422,7 +423,7 @@ export class Multiselect {
           `}
             onClick={this.disabled ? undefined : () => this.toggleDropdown()}
           >
-            {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : 'Placeholder'}
+            {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}
           </div>
           {this.dropdownOpen && (
             <div class="ifx-multiselect-dropdown-menu" style={{ '--dynamic-z-index': this.zIndex.toString() }}>

diff --git a/packages/components/src/components/select/multi-select/readme.md b/packages/components/src/components/select/multi-select/readme.md
@@ -15,6 +15,7 @@
 | `label`        | `label`          |             | `string`          | `""`              |
 | `maxItemCount` | `max-item-count` |             | `number`          | `undefined`       |
 | `options`      | `options`        |             | `any[] \| string` | `undefined`       |
+| `placeholder`  | `placeholder`    |             | `string`          | `""`              |
 | `size`         | `size`           |             | `string`          | `'medium (40px)'` |