From a14c6c7b8164d78345c3eb644e2dce7914cc6699 Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Wed, 5 Jul 2023 08:11:22 -0700 Subject: [PATCH] depracate --- .../fast-foundation/docs/api-report.md | 11 +++- .../fast-foundation/src/picker/README.md | 61 ++++++++++--------- .../fast-foundation/src/picker/picker.spec.md | 2 +- .../fast-foundation/src/picker/picker.ts | 50 ++++++++++----- .../src/picker/stories/picker.stories.ts | 8 +-- 5 files changed, 79 insertions(+), 53 deletions(-) diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 72d250de312..bfaeec07942 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -1517,6 +1517,12 @@ export class FASTPicker extends FormAssociatedPicker { defaultMenuOptionTemplate?: ViewTemplate; // (undocumented) protected defaultMenuOptionTemplateChanged(): void; + disableQueryFilter: boolean; + // (undocumented) + protected disableQueryFilterChanged(): void; + disableSelectionFilter: boolean; + // (undocumented) + protected disableSelectionFilterChanged(): void; // (undocumented) disconnectedCallback(): void; // @internal @@ -1525,6 +1531,8 @@ export class FASTPicker extends FormAssociatedPicker { // (undocumented) protected filterQueryChanged(): void; filterSelected: boolean; + // (undocumented) + protected filterSelectedChanged(): void; // @internal flyoutOpen: boolean; // (undocumented) @@ -1579,9 +1587,6 @@ export class FASTPicker extends FormAssociatedPicker { query: string; // (undocumented) protected queryChanged(): void; - queryFilterDisabled: boolean; - // (undocumented) - protected queryFilterDisabledChanged(): void; // @internal region: FASTAnchoredRegion; // @internal (undocumented) diff --git a/packages/web-components/fast-foundation/src/picker/README.md b/packages/web-components/fast-foundation/src/picker/README.md index 885146149dc..7eb8d39a8f5 100644 --- a/packages/web-components/fast-foundation/src/picker/README.md +++ b/packages/web-components/fast-foundation/src/picker/README.md @@ -189,32 +189,33 @@ export class FASTTextField extends TextField {} #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------------------- | ------- | --------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------- | -| `selection` | public | `string` | `""` | Currently selected items. Comma delineated string ie. "apples,oranges". | | -| `options` | public | `string` | | Currently available options. Comma delineated string ie. "apples,oranges". | | -| `filterSelected` | public | `boolean` | `false` | Whether the component should remove an option from the list when it is in the selection | | -| `filterQuery` | public | `boolean` | `true` | DEPRACATED -- use queryFilterDisabled. Whether the component should remove options based on the current query | | -| `queryFilterDisabled` | public | `boolean` | `false` | Whether the component should remove options based on the current query | | -| `maxSelected` | public | `number or undefined` | | The maximum number of items that can be selected. | | -| `noSuggestionsText` | public | `string` | `"No suggestions available"` | The text to present to assistive technolgies when no suggestions are available. | | -| `suggestionsAvailableText` | public | `string` | `"Suggestions available"` | The text to present to assistive technolgies when suggestions are available. | | -| `loadingText` | public | `string` | `"Loading suggestions"` | The text to present to assistive technologies when suggestions are loading. | | -| `label` | public | `string` | | Applied to the aria-label attribute of the input element | | -| `labelledBy` | public | `string` | | Applied to the aria-labelledby attribute of the input element | | -| `placeholder` | public | `string` | | Applied to the placeholder attribute of the input element | | -| `menuPlacement` | public | `MenuPlacement` | | Controls menu placement | | -| `showLoading` | public | `boolean` | `false` | Whether to display a loading state if the menu is opened. | | -| `listItemTemplate` | public | `ViewTemplate` | | Template used to generate selected items. This is used in a repeat directive. | | -| `defaultListItemTemplate` | public | `ViewTemplate or undefined` | | Default template to use for selected items (usually specified in the component template). This is used in a repeat directive. | | -| `menuOptionTemplate` | public | `ViewTemplate` | | Template to use for available options. This is used in a repeat directive. | | -| `defaultMenuOptionTemplate` | public | `ViewTemplate or undefined` | | Default template to use for available options (usually specified in the template). This is used in a repeat directive. | | -| `listItemContentsTemplate` | public | `ViewTemplate` | | Template to use for the contents of a selected list item | | -| `menuOptionContentsTemplate` | public | `ViewTemplate` | | Template to use for the contents of menu options | | -| `optionsList` | public | `string[]` | `[]` | Current list of options in array form | | -| `query` | public | `string` | | The text value currently in the input field | | -| `itemsPlaceholderElement` | public | `Node` | | Reference to the placeholder element for the repeat directive | | -| `proxy` | | | | | FormAssociatedPicker | +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------------------- | ------- | --------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| `selection` | public | `string` | `""` | Currently selected items. Comma delineated string ie. "apples,oranges". | | +| `options` | public | `string` | | Currently available options. Comma delineated string ie. "apples,oranges". | | +| `filterSelected` | public | `boolean` | `false` | DEPRACATED -- use disableSelectionFilter. Whether the component should remove an option from the list when it is in the selection | | +| `disableSelectionFilter` | public | `boolean` | `false` | Whether the component should remove an option from the list when it is in the selection. Default is false. | | +| `filterQuery` | public | `boolean` | `true` | DEPRACATED -- use disableQueryFilter. Whether the component should remove options based on the current query | | +| `disableQueryFilter` | public | `boolean` | `false` | Whether the component should remove options based on the current query. Default is false. | | +| `maxSelected` | public | `number or undefined` | | The maximum number of items that can be selected. | | +| `noSuggestionsText` | public | `string` | `"No suggestions available"` | The text to present to assistive technolgies when no suggestions are available. | | +| `suggestionsAvailableText` | public | `string` | `"Suggestions available"` | The text to present to assistive technolgies when suggestions are available. | | +| `loadingText` | public | `string` | `"Loading suggestions"` | The text to present to assistive technologies when suggestions are loading. | | +| `label` | public | `string` | | Applied to the aria-label attribute of the input element | | +| `labelledBy` | public | `string` | | Applied to the aria-labelledby attribute of the input element | | +| `placeholder` | public | `string` | | Applied to the placeholder attribute of the input element | | +| `menuPlacement` | public | `MenuPlacement` | | Controls menu placement | | +| `showLoading` | public | `boolean` | `false` | Whether to display a loading state if the menu is opened. | | +| `listItemTemplate` | public | `ViewTemplate` | | Template used to generate selected items. This is used in a repeat directive. | | +| `defaultListItemTemplate` | public | `ViewTemplate or undefined` | | Default template to use for selected items (usually specified in the component template). This is used in a repeat directive. | | +| `menuOptionTemplate` | public | `ViewTemplate` | | Template to use for available options. This is used in a repeat directive. | | +| `defaultMenuOptionTemplate` | public | `ViewTemplate or undefined` | | Default template to use for available options (usually specified in the template). This is used in a repeat directive. | | +| `listItemContentsTemplate` | public | `ViewTemplate` | | Template to use for the contents of a selected list item | | +| `menuOptionContentsTemplate` | public | `ViewTemplate` | | Template to use for the contents of menu options | | +| `optionsList` | public | `string[]` | `[]` | Current list of options in array form | | +| `query` | public | `string` | | The text value currently in the input field | | +| `itemsPlaceholderElement` | public | `Node` | | Reference to the placeholder element for the repeat directive | | +| `proxy` | | | | | FormAssociatedPicker | #### Methods @@ -222,8 +223,10 @@ export class FASTTextField extends TextField {} | ---------------------------------- | --------- | ------------------------------------------------------------- | ------------------ | --------- | -------------- | | `selectionChanged` | protected | | | `void` | | | `optionsChanged` | protected | | | `void` | | +| `filterSelectedChanged` | protected | | | `void` | | +| `disableSelectionFilterChanged` | protected | | | `void` | | | `filterQueryChanged` | protected | | | `void` | | -| `queryFilterDisabledChanged` | protected | | | `void` | | +| `disableQueryFilterChanged` | protected | | | `void` | | | `menuPlacementChanged` | protected | | | `void` | | | `showLoadingChanged` | protected | | | `void` | | | `listItemTemplateChanged` | protected | | | `void` | | @@ -247,8 +250,8 @@ export class FASTTextField extends TextField {} | ---------------------------- | ------------------------ | -------------- | | `selection` | selection | | | `options` | options | | -| `filter-selected` | filterSelected | | -| `query-filter-disabled` | queryFilterDisabled | | +| `disable-selection-filter` | disableSelectionFilter | | +| `disable-query-filter` | disableQueryFilter | | | `max-selected` | maxSelected | | | `no-suggestions-text` | noSuggestionsText | | | `suggestions-available-text` | suggestionsAvailableText | | diff --git a/packages/web-components/fast-foundation/src/picker/picker.spec.md b/packages/web-components/fast-foundation/src/picker/picker.spec.md index e39e083cc1a..99765db0cde 100644 --- a/packages/web-components/fast-foundation/src/picker/picker.spec.md +++ b/packages/web-components/fast-foundation/src/picker/picker.spec.md @@ -50,7 +50,7 @@ Picker is the top level container which hosts both a `picker-list` component to - `labelledby`: The text applied to the `aria-labelledby` attribute of the internal input element. - `placeholder`: The text used as the `placeholder` value for the internal input element. - `filter-selected`: Whether to remove selected elements from the option list (default=false) -- `query-filter-disabled`: Whether to remove elements that don't match the query string (default=false) +- `disable-query-filter`: Whether to remove elements that don't match the query string (default=false) - `menu-placement`: Controls the placement of the menu relative to the input element. (default="bottom-fill") diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts index f211c8e286c..697689383c4 100644 --- a/packages/web-components/fast-foundation/src/picker/picker.ts +++ b/packages/web-components/fast-foundation/src/picker/picker.ts @@ -94,38 +94,56 @@ export class FASTPicker extends FormAssociatedPicker { } /** - * Whether the component should remove an option from the list when it is in the selection + * DEPRACATED -- use disableSelectionFilter. Whether the component should remove an option from the list when it is in the selection + */ + @observable + public filterSelected: boolean = false; + protected filterSelectedChanged(): void { + // keep the main prop in sync + if (this.disableSelectionFilter === this.filterSelected) { + this.disableSelectionFilter = !this.filterSelected; + } + } + + /** + * Whether the component should remove an option from the list when it is in the selection. Default is false. * * @remarks - * HTML Attribute: filter-selected + * HTML Attribute: disable-selection-filter */ - @attr({ attribute: "filter-selected", mode: "boolean" }) - public filterSelected: boolean = false; + @attr({ attribute: "disable-selection-filter", mode: "boolean" }) + public disableSelectionFilter: boolean = false; + protected disableSelectionFilterChanged(): void { + // keep depracated prop in sync + if (this.disableSelectionFilter === this.filterQuery) { + this.filterSelected = !this.disableSelectionFilter; + } + } /** - * DEPRACATED -- use queryFilterDisabled. Whether the component should remove options based on the current query + * DEPRACATED -- use disableQueryFilter. Whether the component should remove options based on the current query */ @observable public filterQuery: boolean = true; protected filterQueryChanged(): void { // keep the main prop in sync - if (this.queryFilterDisabled === this.filterQuery) { - this.queryFilterDisabled = !this.filterQuery; + if (this.disableQueryFilter === this.filterQuery) { + this.disableQueryFilter = !this.filterQuery; } } /** - * Whether the component should remove options based on the current query + * Whether the component should remove options based on the current query. Default is false. * * @remarks - * HTML Attribute: query-filter-disabled + * HTML Attribute: disable-query-filter */ - @attr({ attribute: "query-filter-disabled", mode: "boolean" }) - public queryFilterDisabled: boolean = false; - protected queryFilterDisabledChanged(): void { + @attr({ attribute: "disable-query-filter", mode: "boolean" }) + public disableQueryFilter: boolean = false; + protected disableQueryFilterChanged(): void { // keep depracated prop in sync - if (this.queryFilterDisabled === this.filterQuery) { - this.filterQuery = !this.queryFilterDisabled; + if (this.disableQueryFilter === this.filterQuery) { + this.filterQuery = !this.disableQueryFilter; } } @@ -995,12 +1013,12 @@ export class FASTPicker extends FormAssociatedPicker { */ private updateFilteredOptions(): void { this.filteredOptionsList = this.optionsList.slice(0); - if (this.filterSelected) { + if (!this.disableSelectionFilter) { this.filteredOptionsList = this.filteredOptionsList.filter( el => this.selectedItems.indexOf(el) === -1 ); } - if (!this.queryFilterDisabled && this.query !== "" && this.query !== undefined) { + if (!this.disableQueryFilter && this.query !== "" && this.query !== undefined) { // compare case-insensitive const filterQuery = this.query.toLowerCase(); this.filteredOptionsList = this.filteredOptionsList.filter( diff --git a/packages/web-components/fast-foundation/src/picker/stories/picker.stories.ts b/packages/web-components/fast-foundation/src/picker/stories/picker.stories.ts index eb7aa80a7b3..bbd533072c9 100644 --- a/packages/web-components/fast-foundation/src/picker/stories/picker.stories.ts +++ b/packages/web-components/fast-foundation/src/picker/stories/picker.stories.ts @@ -8,8 +8,8 @@ const storyTemplate = html>`