feat(GlFilteredSearch): Improve option interactions
This changes several aspects of options lists: - The first static option which case-insensitively contains the given non-empty text is now selected automatically. This includes token options of a search term, which previously were only selected when the entire `value` was typed out. Custom token components which use the `suggestions` slot are not affected. - Static options can now be rendered with a custom component by providing a `component` property on them. The component is given the `option` prop object representing the option. - Token options (i.e., when choosing the type of token) can now be rendered with a custom component by providing an `optionComponent` property to the token definition in `GlFilteredSearch`'s `available-tokens` prop. This keeps the information about how to display the option near the option definition. - Token option rendering is now delegated to `GlFilteredSearchTokenSegment` via its `options` prop, deduplicating some display logic. - The `complete` event emitted by a title segment now passes the token `type` instead of its `title`. This is more consistent with other `complete` events in the component tree, as `type` is designed to be a unique value, whereas `title` is designed to be a user-facing string. - `GlFilteredSearchTokenSegment`'s `optionTextField` prop now defaults to `title` instead of `value`, as that's a more sensible default. Only the operator segment needs the latter. This also reverts !3274 and !3318 (see below). BREAKING CHANGE: `GlFilteredSearch`/`GlFilteredSearchTerm`'s `title` slot and `GlFilteredSearchToken`'s `title-option` slot have been removed. Similar functionality is available by setting the `optionComponent` property on the given token object passed to `GlFilteredSearch`'s `available-tokens` prop. The component will be given an `option` prop, which will be the option object representing the token.
Loading
-
mentioned in commit 763ab540
-
mentioned in merge request gitlab-org/frontend/pajamas-adoption-scanner!133 (merged)
-
mentioned in merge request status-page!758 (merged)
-
mentioned in merge request gitlab!117429 (merged)
-
mentioned in merge request gitlab-docs!3775 (merged)
-
mentioned in merge request gitlab-org/gitlab-services/design.gitlab.com!3353 (merged)
-
mentioned in merge request gitlab!118512 (merged)
Please register or sign in to comment