Skip to content

Commit

Permalink
Merge pull request #390 from MapsPeople/feature/matb/MICMS-3835_add_p…
Browse files Browse the repository at this point in the history
…laceholder_to_dropdown

Add placeholder property to mi-dropdown
  • Loading branch information
matbmapspeople authored Sep 18, 2024
2 parents 719a115 + f8ac308 commit 73cefe8
Showing 5 changed files with 41 additions and 16 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [13.20.3] - 2024-09-18

### Added

- Added new property to the `mi-dropdown` component called `placeholder`.

## [13.20.2] - 2024-07-17

### Fixed
10 changes: 10 additions & 0 deletions packages/components/src/components.d.ts
Original file line number Diff line number Diff line change
@@ -230,6 +230,11 @@ export namespace Components {
* @type {boolean}
*/
"open": boolean;
/**
* If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'.
* @type {string}
*/
"placeholder": string;
/**
* Gets the selected items.
* @type {Array<HTMLMiDropdownItemElement>}
@@ -1616,6 +1621,11 @@ declare namespace LocalJSX {
* @type {boolean}
*/
"open"?: boolean;
/**
* If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'.
* @type {string}
*/
"placeholder"?: string;
/**
* Gets the selected items.
* @type {Array<HTMLMiDropdownItemElement>}
10 changes: 9 additions & 1 deletion packages/components/src/components/dropdown/dropdown.tsx
Original file line number Diff line number Diff line change
@@ -99,6 +99,14 @@ export class Dropdown {
*/
@Prop() filterable = false;


/**
* If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'.
*
* @type {string}
*/
@Prop() placeholder: string = 'Type to filter...';

/**
* This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time.
*
@@ -591,7 +599,7 @@ export class Dropdown {
return (
<div class="filter">
<input type="text" class="mi-input filter__input"
placeholder="Type to filter"
placeholder={this.placeholder}
ref={(el): HTMLInputElement => this.filterElement = el}
onInput={(): void => { this.filter(); }}
tabIndex={this.open ? 0 : -1} />
27 changes: 14 additions & 13 deletions packages/components/src/components/dropdown/readme.md
Original file line number Diff line number Diff line change
@@ -138,19 +138,20 @@ mi-dropdown::part(button) {

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------- |
| `disabled` | `disabled` | Sets the disabled state for the dropdown. | `boolean` | `false` |
| `filterable` | `filterable` | This attribute indicates that the items can be filtered using the input field present at the top. If it is not specified, the input field will not be visible, and filtering is not possible. | `boolean` | `false` |
| `iconAlt` | `icon-alt` | Sets the alternative text for the icon. | `string` | `undefined` |
| `iconSrc` | `icon` | Sets the icon on the left-hand side of the component. | `string` | `undefined` |
| `items` | -- | Gets or sets the list items. | `HTMLMiDropdownItemElement[]` | `[]` |
| `itemsOrder` | `items-order` | Sort order of items. | `SortOrder.Asc \| SortOrder.Desc` | `undefined` |
| `label` _(required)_ | `label` | The label will be displayed in as the text of the dropdown if the attribute multiple is present. Only required if multiple is present. | `string` | `undefined` |
| `multiple` | `multiple` | This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. | `boolean` | `false` |
| `noResultsMessage` | `no-results-message` | Guiding message when presented with a content window that has no rows. Default language is English. | `string` | `'No results found'` |
| `open` | `open` | Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. | `boolean` | `false` |
| `selected` | -- | Gets the selected items. | `HTMLMiDropdownItemElement[]` | `[]` |
| Property | Attribute | Description | Type | Default |
| -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --------------------- |
| `disabled` | `disabled` | Sets the disabled state for the dropdown. | `boolean` | `false` |
| `filterable` | `filterable` | This attribute indicates that the items can be filtered using the input field present at the top. If it is not specified, the input field will not be visible, and filtering is not possible. | `boolean` | `false` |
| `iconAlt` | `icon-alt` | Sets the alternative text for the icon. | `string` | `undefined` |
| `iconSrc` | `icon` | Sets the icon on the left-hand side of the component. | `string` | `undefined` |
| `items` | -- | Gets or sets the list items. | `HTMLMiDropdownItemElement[]` | `[]` |
| `itemsOrder` | `items-order` | Sort order of items. | `SortOrder.Asc \| SortOrder.Desc` | `undefined` |
| `label` _(required)_ | `label` | The label will be displayed in as the text of the dropdown if the attribute multiple is present. Only required if multiple is present. | `string` | `undefined` |
| `multiple` | `multiple` | This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. | `boolean` | `false` |
| `noResultsMessage` | `no-results-message` | Guiding message when presented with a content window that has no rows. Default language is English. | `string` | `'No results found'` |
| `open` | `open` | Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. | `boolean` | `false` |
| `placeholder` | `placeholder` | If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. | `string` | `'Type to filter...'` |
| `selected` | -- | Gets the selected items. | `HTMLMiDropdownItemElement[]` | `[]` |


## Events

0 comments on commit 73cefe8

Please sign in to comment.