Skip to content

Commit

Permalink
Fix broken application breadcrumb popover styles
Browse files Browse the repository at this point in the history 
- separate `truncation` styles from breadcrumb type styles (truncation styles go on the inner text, breadcrumb styles go on the outer element)

- create new separate `EuiBreadcrumbPopover` subcomponent for easier dev readability and one-off behavior
  • Loading branch information
@cee-chen
cee-chen committed Mar 13, 2024
1 parent 7b98e45 commit 1abf1c2
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 86 deletions.
6 changes: 3 additions & 3 deletions src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
<body>
<div>
<div
class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
data-test-subj="popover"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
data-test-subj="popoverToggle"
title="Toggles a popover - Clicking this button will toggle a popover dialog."
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
Toggles a popover
</span>
Expand Down
36 changes: 18 additions & 18 deletions src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down Expand Up @@ -143,15 +143,15 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down Expand Up @@ -329,15 +329,15 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down Expand Up @@ -514,15 +514,15 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down Expand Up @@ -617,15 +617,15 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down Expand Up @@ -695,15 +695,15 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
data-test-subj="euiBreadcrumb"
>
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
>
<button
class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
title="See collapsed breadcrumbs"
type="button"
>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
Expand Down
40 changes: 25 additions & 15 deletions src/components/breadcrumbs/breadcrumb.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
text-align: center;
vertical-align: baseline;
`,

// Truncation styles
isTruncated: css`
${euiTextTruncate(mathWithUnits(euiTheme.size.base, (x) => x * 10))}
`,
Expand All @@ -80,21 +82,6 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
${euiTextTruncate('none')}
`,

// Popover styles
euiBreadcrumb__popoverButton: css`
max-inline-size: 100%;
display: inline-flex;
align-items: center;
gap: ${euiTheme.size.xs};
`,
euiBreadcrumb__popoverWrapper: css`
/* At small container widths, the popover anchor needs to leave room for the breadcrumb separator,
which is weird to get an exact width for because it's transformed at an angle */
max-inline-size: calc(
100% - ${mathWithUnits(euiTheme.size.base, (x) => x + 1)}
);
`,

// Types
page: css`
&:is(a):focus {
Expand Down Expand Up @@ -173,3 +160,26 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
},
};
};

export const euiBreadcrumbPopoverStyles = ({ euiTheme }: UseEuiTheme) => {
return {
euiBreadcrumb__popoverButton: css`
max-inline-size: 100%;
display: inline-flex;
align-items: center;
gap: ${euiTheme.size.xs};
`,
euiBreadcrumb__popoverTruncation: css``,
popoverWrapper: {
euiBreadcrumb__popoverWrapper: css``,
page: css`
/* At small container widths, the popover anchor needs to leave room for the breadcrumb separator,
which is weird to get an exact width for because it's transformed at an angle */
max-inline-size: calc(
100% - ${mathWithUnits(euiTheme.size.base, (x) => x + 1)}
);
`,
application: null,
},
};
};
Loading

0 comments on commit 1abf1c2

Please sign in to comment.