feat(Dropdown): expose items list header slot #12493
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
silviuaavram
requested review from
dvdzkwsk,
dzearing,
jurokapsiar,
layershifter,
levithomason,
miroslavstastny,
mnajdova and
pompomon
as code owners
msft-github-bot
added
the
Fluent UI react-northstar (v0)
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: a2a4dc7f9849a742927e209c6aa827e7c3f231b6 (build) |
Perf AnalysisNo significant results to display. All results
Perf Analysis (Fluent)Perf comparison
Perf tests with no regressions
|
pompomon
reviewed
Apr 2, 2020
| @@ -159,7 +161,7 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS | |||
| multiple?: boolean; | |||
|
|
|||
| /** A message to be displayed in the list when the dropdown has no items. */ | |||
| noResultsMessage?: ShorthandValue<ListItemProps>; | |||
There was a problem hiding this comment.
Wouldn't that be a breaking change for consumers since ListItemProps and DropdownItemProps have different interfaces?
pompomon
reviewed
Apr 2, 2020
pompomon
reviewed
Apr 3, 2020
| @@ -181,6 +181,10 @@ const dropdownStyles: ComponentSlotStylesPrepared<DropdownPropsAndState, Dropdow | |||
| fontWeight: 'bold', | |||
| }), | |||
|
|
|||
| itemsListFooterMessage: ({ variables: v }): ICSSInJSStyle => ({ | |||
| backgroundColor: v.listItemBackgroundColor, | |||
There was a problem hiding this comment.
Please could you add a separate variable for footer, for easier customisation?
pompomon
approved these changes
Apr 3, 2020
silviuaavram
changed the title
pompomon
reviewed
Apr 14, 2020
packages/fluentui/CHANGELOG.md
Outdated
| @@ -60,6 +61,7 @@ Removed types: `TeamsSvgIconSpec`, `ThemeIconSpec`, `SvgIconSpec`, `SvgIconSpecW | |||
| - Add `borderRadius` variables to `Card` component @pompomon ([#12552](https://github.com/microsoft/fluentui/pull/12552)) | |||
| - Add `CustomerHubIcon`, `OcrOffIcon`, `OcrOnIcon` and `ContactGroupCallIcon` icons @mnajdova ([#12571](https://github.com/microsoft/fluentui/pull/12571)) | |||
| - Add `SwitchCameraIcon`, `PanoramaOffIcon`, `AttendeeIcon` and `GroupVideoCallGridIcon`. Updated `PanoramaIcon`. @TanelVari ([#12566](https://github.com/microsoft/fluentui/pull/12566)) | |||
| - Add `footerMessage` slot for `Dropdown` @silviuavram ([#12493](https://github.com/microsoft/fluentui/pull/12493)) | |||
There was a problem hiding this comment.
Suggested change
| - Add `footerMessage` slot for `Dropdown` @silviuavram ([#12493](https://github.com/microsoft/fluentui/pull/12493)) | |
| - Add `headerMessage` slot for `Dropdown` @silviuavram ([#12493](https://github.com/microsoft/fluentui/pull/12493)) |
pompomon
reviewed
Apr 14, 2020
| @@ -146,14 +145,17 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS | |||
| /** Used when comparing two items in multiple selection. Default comparison is by the header prop. */ | |||
| itemToValue?: (item: ShorthandValue<DropdownItemProps>) => any; | |||
|
|
|||
| /** A message to be displayed in the list footer. */ | |||
There was a problem hiding this comment.
Suggested change
| /** A message to be displayed in the list footer. */ | |
| /** A message to be displayed in the list header. */ |
silviuaavram
added a commit
that referenced
this pull request
Apr 15, 2020
* add slot for footer * add example to docsite * rename the method * improvements on the example * change component types to DropdownItem * add tests for all footer messages * changelog * wrap text if needed in dropdown item * add breaking change in changelog * rename itemsListFooterMessage to footerMessage * add separate variables for footer messages * move footer to header * delete back dropdown variables from dark theme * adapt the unit tests * change some description from footer to header (cherry picked from commit 40d42e1)
DuanShaolong
pushed a commit
to DuanShaolong/fluentui
that referenced
this pull request
Apr 27, 2020
* add slot for footer * add example to docsite * rename the method * improvements on the example * change component types to DropdownItem * add tests for all footer messages * changelog * wrap text if needed in dropdown item * add breaking change in changelog * rename itemsListFooterMessage to footerMessage * add separate variables for footer messages * move footer to header * delete back dropdown variables from dark theme * adapt the unit tests * change some description from footer to header
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull request checklist
$ yarn changeDescription of changes
Give users the ability to add
headerMessageshorthand in order to be able to add a message to be displayed in the list of items, before the items themselves.In the newly added docsite example, created an external search workflow. When there are no items returned from the search query filtering, we show a single item, which on select will perform an external search, with a loading status. Then we generate items based on the new search query. In this external search scenario we use the
headerMessageto display the information and also use the getA11yStatusMessage to provide the same information to screen readers.BREAKING CHANGE: Replace
ListItemPropswithDropdownItemPropsfor shorthand propsnoResultsMessageandloadingMessage.To migrate, change these signatures from
ShorthandValue<ListItemProps>toShorthandValue<DropdownItemProps>and make sure you are using props only available toDropdownItemProps.Microsoft Reviewers: Open in CodeFlow