EuiHeaderSection side='right' now seems to rely on the presence of EuiHeaderBreadcrumbs

[gjones]

Hi all,
I was just updating Cloud from 5.3.0 to 5.8.1 and ran into a problem with how the EuiHeader was rendering.

The problem is that the <EuiHeaderSection side='right'> no longer aligns to the right. See image below (where profile image item should be on the right of the screen):

I've tracked the issue down to here #1346. In Cloud I was able to 'fix' the alignment by adding a valid EuiHeaderBreadcrumbs tag between the two EuiHeaderSection. So I think that the issue is that when the EuiHeaderBreadcrumbs tag is not present, <EuiHeaderSection side='right'> is not honoured.

I was able to recreate this in the EUI docs by removing EuiHeaderBreadcrumbs from the header demo, here's the result.

Thanks!

cc @cchaos

[cchaos]

Ugh, sorry about that @gjones. I didn't test what would happen without breadcrumbs. I'll get a fix in.

[cchaos]

Oh @gjones, so the problem I ran into is that I couldn't necessarily determine how many sections a consumer might add, so the way I actually solved this was by adding a new prop of grow to EuiHeaderSection.

If you set the left section to be: <EuiHeaderSection grow={true}> it will take up most of the space, pushing the right section to the right.

[gjones]

@cchaos ah perfect, I should have tried that, thank you!

[cchaos]

Glad it worked!