Skip to content

[EuiPageHeader] Fix single right side items from overflowing past its max width #8110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 3 commits into from
Nov 1, 2024
Merged

[EuiPageHeader] Fix single right side items from overflowing past its max width #8110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
081fcc4
Add VRT story showing bug/issue
cee-chen Oct 31, 2024
ab8b79a
max-width fix
cee-chen Oct 31, 2024
c810d15
changelog
cee-chen Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...ayout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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