feat(MessageBar): Initial implementation #29313
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
Adds an initial implementation of MessageBar that includes design for different intents and multiline handling.
📊 Bundle size report🤖 This report was generated against e7c0c14830fc2a29b66c4433bce8e7dde7eceba0 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit eaca078:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: e7c0c14830fc2a29b66c4433bce8e7dde7eceba0 (build) |
layershifter
changed the title
bsunderhus
approved these changes
Sep 27, 2023
ling1726
added a commit
to ling1726/fluentui
that referenced
this pull request
Sep 28, 2023
Cypress test config previously did not use TsConfigPathsPlugin so it relied on code being built in CI. However there is an edge case encountered in microsoft#29313. Lage will run the cypress tests of depednencies which *_can depend on depedencies not in the package.json tree_* 💣💣 ``` - react-message-bar-preview - react-button - react-tabster - react-provider (not in package.json, but used in cypress test) ```
ling1726
force-pushed
the
react-message-bar/feat/initial-implementation
branch
from
05c1cd2
to
e328ff0
Compare
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 634 | 616 | 5000 | |
| Button | mount | 309 | 315 | 5000 | |
| Field | mount | 1111 | 1111 | 5000 | |
| FluentProvider | mount | 680 | 691 | 5000 | |
| FluentProviderWithTheme | mount | 78 | 85 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 65 | 64 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 74 | 71 | 10 | |
| InfoButton | mount | 10 | 10 | 5000 | |
| MakeStyles | mount | 856 | 858 | 50000 | |
| Persona | mount | 1775 | 1677 | 5000 | |
| SpinButton | mount | 1365 | 1370 | 5000 |
🕵 fluentuiv9 No visual regressions between this PR and main |
ling1726
added a commit
that referenced
this pull request
Sep 28, 2023
Cypress test config previously did not use TsConfigPathsPlugin so it relied on code being built in CI. However there is an edge case encountered in #29313. Lage will run the cypress tests of depednencies which *_can depend on depedencies not in the package.json tree_* 💣💣 ``` - react-message-bar-preview - react-button - react-tabster - react-provider (not in package.json, but used in cypress test) ```
…eat/initial-implementation
| */ | ||
| export type MessageBarProps = ComponentProps<MessageBarSlots> & | ||
| Pick<MessageBarContextValue, 'layout'> & { | ||
| multiline?: boolean; |
| Component: MessageBarActions, | ||
| displayName: 'MessageBarActions', | ||
| disabledTests: [ | ||
| // TODO: having problems due to the fact root of DialogTitle is Fragment |
There was a problem hiding this comment.
I copied that config from DialogTitle, will remove in another PR - the test itself should still be disabled tho
| import type { MessageBarActionsProps } from './MessageBarActions.types'; | ||
|
|
||
| /** | ||
| * MessageBarActions component - TODO: add more docs |
| /** | ||
| * MessageBarActions Props | ||
| */ | ||
| export type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots> & {}; |
There was a problem hiding this comment.
Let's remove {} as it's any
| assertSlots<MessageBarActionsSlots>(state); | ||
| if (state.layout === 'multiline') { | ||
| return ( | ||
| <ButtonContextProvider value={{ size: 'small' }}> |
There was a problem hiding this comment.
- This should be a memoized value as
ButtonContextProvideris not using context selectors - The value should be defined in
useMessageBarContextValues
| /** | ||
| * MessageBarBody Props | ||
| */ | ||
| export type MessageBarBodyProps = ComponentProps<MessageBarBodySlots> & {}; |
| /** | ||
| * MessageBarTitle Props | ||
| */ | ||
| export type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots> & {}; |
| export const renderMessageBarTitle_unstable = (state: MessageBarTitleState) => { | ||
| assertSlots<MessageBarTitleSlots>(state); | ||
|
|
||
| // TODO Add additional slots in the appropriate place |
|
|
||
| // TODO Add additional slots in the appropriate place | ||
| return ( | ||
| <> |
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.
Adds an initial implementation of MessageBar that includes design for different intents and multiline handling.
Addresses: #22579