Skip to content

Commit

Permalink
[PR feedback] Split out new _breadcrumb_content file + move shared …
Browse files Browse the repository at this point in the history
…types into a separate file

- the breadcrumb types weren't super married to the actual component usage in any case

+ move unit tests for content to its own file, add new basic it renders test for other components
  • Loading branch information
cee-chen committed Mar 14, 2024
1 parent 501198a commit 94d528b
Show file tree
Hide file tree
Showing 12 changed files with 808 additions and 627 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverContent\` 1`] = `
<body>
<div>
<div
class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
data-test-subj="popover"
>
<button
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="emotion-euiBreadcrumb__popoverTruncation"
>
Toggles a popover
</span>
<span
data-euiicon-type="arrowDown"
>
- Clicking this button will toggle a popover dialog.
</span>
</button>
</div>
</div>
<div
data-euiportal="true"
>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
data-focus-lock-disabled="false"
>
<div
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
data-autofocus="true"
data-popover-open="true"
data-popover-panel="true"
role="dialog"
style="top: 16px; left: -22px; z-index: 2000;"
tabindex="0"
>
<div
class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
data-popover-arrow="bottom"
style="left: 10px; top: 0px;"
/>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a dialog. Press Escape, or tap/click outside the dialog to close.
</p>
<div>
Hello popover world
</div>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
</body>
`;

exports[`EuiBreadcrumbContent renders interactive breadcrumbs with href or onClick 1`] = `
<div>
<a
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
href="#"
rel="noreferrer"
title="Link"
>
Link
</a>
<button
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
title="Button"
type="button"
>
Button
</button>
</div>
`;

exports[`EuiBreadcrumbContent renders plain uninteractive breadcrumb text 1`] = `
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
title="Text"
>
Text
</span>
`;
100 changes: 42 additions & 58 deletions src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,52 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverContent\` 1`] = `
exports[`EuiBreadcrumb is a light <li> wrapper around the content 1`] = `
<li
class="euiBreadcrumb emotion-euiBreadcrumb-page-isTruncated"
data-test-subj="euiBreadcrumb"
>
Hello world
</li>
`;
exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content in a popover 1`] = `
<body>
<div>
<div
class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
data-test-subj="popover"
<li
class="euiBreadcrumb emotion-euiBreadcrumb-application-isCollapsed"
data-test-subj="euiBreadcrumb"
>
<button
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"
<div
class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
>
<span
class="emotion-euiBreadcrumb__popoverTruncation"
<button
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application"
title="See collapsed breadcrumbs"
type="button"
>
Toggles a popover
</span>
<span
data-euiicon-type="arrowDown"
>
- Clicking this button will toggle a popover dialog.
</span>
</button>
</div>
<span
class="emotion-euiBreadcrumb__popoverTruncation"
>
<span
aria-label="See collapsed breadcrumbs"
>
</span>
</span>
<span
data-euiicon-type="arrowDown"
>
- Clicking this button will toggle a popover dialog.
</span>
</button>
</div>
</li>
</div>
<div
data-euiportal="true"
>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
tabindex="-1"
/>
<div
data-focus-lock-disabled="false"
data-focus-lock-disabled="disabled"
>
<div
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-hasTransform"
data-autofocus="true"
data-popover-open="true"
data-popover-panel="true"
role="dialog"
style="top: 16px; left: -22px; z-index: 2000;"
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
tabindex="0"
>
<div
Expand All @@ -61,46 +76,15 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
You are in a dialog. Press Escape, or tap/click outside the dialog to close.
</p>
<div>
Hello popover world
I render inside the popover
</div>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
tabindex="-1"
/>
</div>
</body>
`;

exports[`EuiBreadcrumbContent renders interactive breadcrumbs with href or onClick 1`] = `
<div>
<a
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
href="#"
rel="noreferrer"
title="Link"
>
Link
</a>
<button
class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
title="Button"
type="button"
>
Button
</button>
</div>
`;

exports[`EuiBreadcrumbContent renders plain uninteractive breadcrumb text 1`] = `
<div>
<span
class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
title="Text"
>
Text
</span>
</div>
`;
143 changes: 143 additions & 0 deletions src/components/breadcrumbs/_breadcrumb_content.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css } from '@emotion/react';
import { UseEuiTheme } from '../../services';
import { transparentize } from '../../services/color';
import {
euiFontSize,
euiTextTruncate,
euiFocusRing,
logicalCSS,
logicalBorderRadiusCSS,
mathWithUnits,
} from '../../global_styling';

/**
* Styles cast to inner <a>, <button>, <span> elements
*/
export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
return {
euiBreadcrumb__content: css`
font-weight: ${euiTheme.font.weight.medium};
text-align: center;
vertical-align: baseline;
`,

// Truncation styles
isTruncated: css`
${euiTextTruncate(mathWithUnits(euiTheme.size.base, (x) => x * 10))}
`,
isTruncatedLast: css`
/* This removes the default breadcrumb max-width while ensuring that the last breadcrumb
still cuts off with a '...' if it's overflowing outside the parent breadcrumbs container */
${euiTextTruncate('none')}
`,

// Types
page: css`
&:is(a):focus {
${euiFocusRing(euiThemeContext, 'inset')}
}
&:is(button):focus {
${euiFocusRing(euiThemeContext, 'center')}
}
`,
application: css`
${euiFontSize(euiThemeContext, 'xs')}
background-color: ${transparentize(euiTheme.colors.darkestShade, 0.2)};
clip-path: polygon(
0 0,
calc(100% - ${euiTheme.size.s}) 0,
100% 50%,
calc(100% - ${euiTheme.size.s}) 100%,
0 100%,
${euiTheme.size.s} 50%
);
color: ${euiTheme.colors.darkestShade};
line-height: ${euiTheme.size.base};
${logicalCSS('padding-vertical', euiTheme.size.xs)}
${logicalCSS('padding-horizontal', euiTheme.size.base)}
&:is(a),
&:is(button) {
background-color: ${transparentize(euiTheme.colors.primary, 0.2)};
color: ${euiTheme.colors.link};
:focus {
${euiFocusRing(euiThemeContext, 'inset')}
:focus-visible {
border-radius: ${euiTheme.border.radius.medium};
clip-path: none;
}
}
}
`,
applicationStyles: {
onlyChild: css`
border-radius: ${euiTheme.border.radius.medium};
clip-path: none;
${logicalCSS('padding-horizontal', euiTheme.size.m)}
`,
firstChild: css`
${logicalBorderRadiusCSS(
`${euiTheme.border.radius.medium} 0 0 ${euiTheme.border.radius.medium}`,
true
)}
clip-path: polygon(
0 0,
calc(100% - ${euiTheme.size.s}) 0,
100% 50%,
calc(100% - ${euiTheme.size.s}) 100%,
0 100%
);
${logicalCSS('padding-left', euiTheme.size.m)}
`,
lastChild: css`
${logicalBorderRadiusCSS(
`0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0`,
true
)}
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%,
${euiTheme.size.s} 50%
);
${logicalCSS('padding-right', euiTheme.size.m)}
`,
},
};
};

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 94d528b

Please sign in to comment.