Skip to content
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

Jump to bottom

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

Merged
merged 16 commits into from
Nov 27, 2024
Merged

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and tooltips #8174

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
48688f7
[shadows] Add new option to allow components to specify border-all in…
cee-chen Sep 23, 2024
cda36a2
[EuiPanel] High contrast mode updates
cee-chen Sep 23, 2024
c40532b
[EuiPopover] Update for high contrast mode
cee-chen Sep 23, 2024
11dbad3
[EuiPopover] VRT screenshots
cee-chen Nov 21, 2024
f9010d3
[EuiToolTip] Fix rendering in Windows high contrast mode
cee-chen Nov 12, 2024
b601612
[EuiToolTip] VRT screenshots
cee-chen Nov 21, 2024
1b59c0a
[PR feedback] Increase high contrast border colors further to meet WC…
cee-chen Nov 25, 2024
e9ace4c
Simplify EuiPopover and EuiToolTip arrow CSS
cee-chen Nov 26, 2024
23ece37
Update VRT screenshots
cee-chen Nov 26, 2024
25dd6ab
Fix EuiTour beacon display
cee-chen Nov 26, 2024
f5b96f6
Update downstream position snapshots
cee-chen Nov 26, 2024
5025828
Update Cypress popover dimension assertion
cee-chen Nov 26, 2024
abc2e09
[PR feedback] DRY out high contrast fns slightly more
cee-chen Nov 26, 2024
be472af
[PR feedback] DRY out arrow styles to a service
cee-chen Nov 26, 2024
8bc755b
Replace failing EuiRange Cypress test with VRT
cee-chen Nov 26, 2024
420570d
changelog documenting intentional dark mode border change
cee-chen Nov 26, 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
95 changes: 61 additions & 34 deletions packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,68 +7,95 @@
*/

import { css } from '@emotion/react';
import { logicals, logicalSizeCSS } from '../../../global_styling';
import {
logicalCSS,
logicalSizeCSS,
mathWithUnits,
} from '../../../global_styling';
import { UseEuiTheme } from '../../../services';

export const popoverArrowSize = 'm';

export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const { euiTheme, highContrastMode } = euiThemeContext;

const borderColor = 'var(--euiPopoverBackgroundColor)';
const arrowSize = euiTheme.size[popoverArrowSize];
const arrowDoubleSize = mathWithUnits(arrowSize, (x) => x * 2);

const highContrastPseudoElement = (css: string) => {
return highContrastMode ? `&::before {${css}}` : '';
};
const highContrastBorderAffordance = mathWithUnits(
euiTheme.border.width.thin,
(x) => x * -2
);

return {
// Base
euiPopoverArrow: css`
position: absolute;
${logicalSizeCSS(0, 0)}
background-color: var(--euiPopoverBackgroundColor);

/* This part of the arrow matches the panel. */
&::before {
${highContrastPseudoElement(`
content: '';
position: absolute;
${logicalSizeCSS(0, 0)}
}
background-color: inherit;
border: ${euiTheme.border.thin};
transform: rotate(45deg);
transform-origin: top;
${logicalSizeCSS(mathWithUnits(arrowDoubleSize, (x) => x * 0.75))}
`)}
`,

// POSITIONS
top: css`
&::before {
${logicals.bottom}: -${arrowSize};
${logicals['border-left']}: ${arrowSize} solid transparent;
${logicals['border-right']}: ${arrowSize} solid transparent;
${logicals['border-top']}: ${arrowSize} solid ${borderColor};
}
clip-path: polygon(0 0, 50% 100%, 100% 0);
${logicalSizeCSS(arrowDoubleSize, arrowSize)}
${logicalCSS(
'margin-top',
highContrastMode ? highContrastBorderAffordance : 0
)}

${highContrastPseudoElement(`
${logicalCSS('top', '-60%')}
${logicalCSS('left', '38%')}
`)}
`,

bottom: css`
&::before {
${logicals.top}: -${arrowSize};
${logicals['border-left']}: ${arrowSize} solid transparent;
${logicals['border-right']}: ${arrowSize} solid transparent;
${logicals['border-bottom']}: ${arrowSize} solid ${borderColor};
}
clip-path: polygon(0 100%, 50% 0, 100% 100%);
${logicalSizeCSS(arrowDoubleSize, arrowSize)}
${logicalCSS('margin-top', `-${arrowSize}`)}

${highContrastPseudoElement(`
${logicalCSS('top', '54%')}
${logicalCSS('left', '38%')}
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
`)}
`,

left: css`
&::before {
${logicals.top}: 50%;
${logicals.right}: -${arrowSize};
${logicals['border-top']}: ${arrowSize} solid transparent;
${logicals['border-bottom']}: ${arrowSize} solid transparent;
${logicals['border-left']}: ${arrowSize} solid ${borderColor};
}
clip-path: polygon(0 0, 100% 50%, 0 100%);
${logicalSizeCSS(arrowSize, arrowDoubleSize)}
${logicalCSS(
'margin-left',
highContrastMode ? highContrastBorderAffordance : 0
)}

${highContrastPseudoElement(`
${logicalCSS('top', '24%')}
${logicalCSS('left', '-30%')}
`)}
`,

right: css`
&::before {
${logicals.top}: 50%;
${logicals.left}: -${arrowSize};
${logicals['border-top']}: ${arrowSize} solid transparent;
${logicals['border-bottom']}: ${arrowSize} solid transparent;
${logicals['border-right']}: ${arrowSize} solid ${borderColor};
}
clip-path: polygon(100% 0, 0 50%, 100% 100%);
${logicalSizeCSS(arrowSize, arrowDoubleSize)}
${logicalCSS('margin-left', `-${arrowSize}`)}

${highContrastPseudoElement(`
${logicalCSS('top', '24%')}
${logicalCSS('left', '90%')}
`)}
`,
};
};
23 changes: 18 additions & 5 deletions packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const openAnimationTiming = 'slow';
*/

export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme, colorMode } = euiThemeContext;
const { euiTheme, colorMode, highContrastMode } = euiThemeContext;

const translateDistance = euiTheme.size.s;
const animationSpeed = euiTheme.animation[openAnimationTiming];
Expand Down Expand Up @@ -59,6 +59,9 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
&:focus {
outline-offset: 0;
}

/* We're already setting 'borders' via euiShadow below, so skip the borders inherited from EuiPanel */
${highContrastMode ? 'border: none;' : ''}
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
`,
isOpen: css`
opacity: 1;
Expand All @@ -78,7 +81,10 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
hasTransform: {
hasTransform: css`
transform: translateY(0) translateX(0) translateZ(0); /* 2 */
${euiShadowMedium(euiThemeContext, { property: 'filter' })}
${euiShadowMedium(euiThemeContext, {
property: 'filter',
borderAllInHighContrastMode: true,
})}

${euiCanAnimate} {
transition: ${opacityTransition}, ${transformTransition}; /* 2 */
Expand Down Expand Up @@ -107,10 +113,14 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
}
`,
top: css`
${euiShadowFlat(euiThemeContext)}
${euiShadowFlat(euiThemeContext, {
borderAllInHighContrastMode: true,
})}
`,
bottom: css`
${euiShadow(euiThemeContext, 'm')}
${euiShadow(euiThemeContext, 'm', {
borderAllInHighContrastMode: true,
})}
`,
get left() {
return this.bottom;
Expand All @@ -124,7 +134,10 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
// stacking context that messes up the drag/drop fixed positioning
hasDragDrop: {
hasDragDrop: css`
${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })}
${euiShadowMedium(euiThemeContext, {
property: 'box-shadow',
borderAllInHighContrastMode: true,
})}

${euiCanAnimate} {
transition: ${opacityTransition}; /* 2 */
Expand Down