Skip to content

Commit

Permalink
[EuiPageHeader] Fix single right side items from overflowing past its…
Browse files Browse the repository at this point in the history 
… max width (#8110)
  • Loading branch information
@cee-chen
cee-chen authored Nov 1, 2024
1 parent 54bf470 commit e985cd6
Show file tree
Hide file tree
Showing 8 changed files with 54 additions and 25 deletions.
Binary file added ...ayout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ayout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/8110.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width
20 changes: 10 additions & 10 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -83,14 +83,14 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -125,14 +125,14 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -167,14 +167,14 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -311,14 +311,14 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
data-test-subj="test subject string"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down
28 changes: 14 additions & 14 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -74,14 +74,14 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -112,14 +112,14 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -150,14 +150,14 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -271,14 +271,14 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -482,14 +482,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand All @@ -516,14 +516,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered with rightSideGro
data-test-subj="test subject string"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down
18 changes: 18 additions & 0 deletions packages/eui/src/components/page/page_header/page_header_content.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,24 @@ export const WrappingContent: Story = {
),
};

export const TruncatedRightSideItems: Story = {
tags: ['vrt-only'],
args: {
pageTitle: 'Truncated right side items',
rightSideItems: [
<EuiButton>
I am a very incredibly long looong button that should truncate
</EuiButton>,
],
},
render: (args) => (
// Screenshot truncation behavior on desktop
<div style={{ maxWidth: 800 }}>
<EuiPageHeaderContent {...args} />
</div>
),
};

export const ResponsiveReverse: Story = {
tags: ['vrt-only'],
args: {
Expand Down
4 changes: 4 additions & 0 deletions packages/eui/src/components/page/page_header/page_header_content.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,16 @@ export const euiPageHeaderContentStyles = ({ euiTheme }: UseEuiTheme) => ({
euiPageHeaderContent__rightSideItems: css`
flex: 0 1 auto;
align-content: flex-start;
${logicalCSS('max-width', '100%')}
@container (min-width: ${euiTheme.breakpoint.m}px) {
${logicalCSS('max-width', '50%')}
justify-content: flex-end;
}
`,
euiPageHeaderContent__rightSideItem: css`
${logicalCSS('max-width', '100%')}
`,

euiPageHeaderContent__titleIcon: css`
position: relative;
Expand Down
6 changes: 5 additions & 1 deletion packages/eui/src/components/page/page_header/page_header_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,11 @@ export const EuiPageHeaderContent: FunctionComponent<
: [...rightSideItems].reverse();

const rightSideFlexItems = itemsToRender.map((item, index) => (
<EuiFlexItem grow={false} key={index}>
<EuiFlexItem
key={index}
grow={false}
css={contentStyles.euiPageHeaderContent__rightSideItem}
>
{item}
</EuiFlexItem>
));
Expand Down

0 comments on commit e985cd6

Please sign in to comment.