Fluentui: Root styles not being applied to MessageBar root div.

[maxswa]

Environment Information

• Package version(s): Latest (7.42.0)

Please provide a reproduction of the bug in a codepen:

https://codepen.io/maxswa/pen/dybxeyq

Actual behavior:

Styles are applied to a child div under the root div:
https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.base.tsx#L118
This causes issues when you want to set a percentage width, among other unexpected behavior.

Expected behavior:

Styles should be applied to the root div so they work as expected.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

[micahgodbolt]

@phkuo the messagebar root is wrapped with a div with a fixed background color. if you are trying to say absolute position the messagebar, what happens with that div? Should we make that wrapping div optional?

@maxswa if you are using flex, you could use Flex and FlexItem to apply your layout to the message bar. Not the easiest solution, but would certainly work as intended.

[maxswa]

@maxswa if you are using flex, you could use Flex and FlexItem to apply your layout to the message bar. Not the easiest solution, but would certainly work as intended.

You mean apply this to the parent div?

alignItems: 'stretch',
flexDirection: 'column'

It works, but could screw up the layout of other child elements. E.g. If you wanted the other elements of the div centered.

[phkuo]

That wrapping div is supposed to just hold the background color, the bodyBackground of the global (not contextual) theme. Since Vitalie's PR was put on hold, I have no idea what the state of MessageBar is or what our plan for moving forward on it is. We need to figure that out and then decide what we do with that root div. If we end up keeping it, we should probably change it to a ::before so that styles are applied as expected to the box that holds the main color and message.

[khmakoto]

@phkuo @micahgodbolt any update here?

[phkuo]

I've said my piece, your team needs to drive an agreement between Micah and David, and Janice, Sirena, and Ben regarding how it should look/behave on different themes in different variants, and whether or not that ties into list item highlighting colors.

[Katli95]

I too would very much like to be able to set styles on the wrapping div :) My use case is setting the position absolutely in order for the message bar to appear at the top of my container without displacing the other contents of said container.

I am however limited to v6.x as I am using the SharePoint Framework, so not sure if you guys will make the same update to that version. If you do, I'd be ecstatic, if you don't I understand and at least I chimed in.

Like always, love working with this package guys, keep up the good work.

[khowling]

I'd also like to set root styles, my case is the width

[dzearing]

I think it's a violation of principles that root is not root, and that we should consider a breaking change here in the messagebar