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
43 changes: 5 additions & 38 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,23 +7,16 @@
*/

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

export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme, highContrastMode, colorMode } = euiThemeContext;
const hasBorder = highContrastMode || colorMode === 'DARK';

const arrowSize = euiTheme.size.base;
const arrowOffset = mathWithUnits(arrowSize, (x) => x / -2);
const arrowBorderRadius = mathWithUnits(
euiTheme.border.radius.small,
(x) => x / 2
);
const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);

return {
// Wrapper
Expand All @@ -34,37 +27,11 @@ export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {

// Base
euiPopoverArrow: css`
position: absolute;
${logicalSizeCSS(arrowSize)}
${arrowStyles._arrowStyles}
background-color: var(--euiPopoverBackgroundColor);
${hasBorder ? `border: ${euiTheme.border.thin};` : ''}
border-radius: ${arrowBorderRadius};
/* Use clip-path to ensure that arrows don't overlap into popover content */
clip-path: polygon(0 0, 100% 100%, 0 100%);
transform-origin: center;
`,

// POSITIONS
top: css`
${logicalCSS('margin-top', arrowOffset)}
transform: rotate(-45deg);
`,

bottom: css`
${logicalCSS('bottom', 0)}
${logicalCSS('margin-bottom', arrowOffset)}
transform: rotate(135deg);
`,

left: css`
${logicalCSS('margin-left', arrowOffset)}
transform: rotate(-135deg);
`,

right: css`
${logicalCSS('right', 0)}
${logicalCSS('margin-right', arrowOffset)}
transform: rotate(45deg);
`,
...arrowStyles.positions,
};
};
43 changes: 5 additions & 38 deletions packages/eui/src/components/tool_tip/tool_tip.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,9 @@
*/

import { css, keyframes } from '@emotion/react';
import {
logicalCSS,
logicalSizeCSS,
euiFontSize,
euiCanAnimate,
mathWithUnits,
} from '../../global_styling';
import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
import { COLOR_MODES_STANDARD, UseEuiTheme, tint, shade } from '../../services';
import { _popoverArrowStyles } from '../../services/popover';
import { euiShadow } from '../../themes/amsterdam';

export const euiToolTipBackgroundColor = (
Expand Down Expand Up @@ -65,11 +60,7 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
const animationTiming = `${euiTheme.animation.slow} ease-out 0s forwards`;

const arrowSize = euiTheme.size.m;
const arrowOffset = mathWithUnits(arrowSize, (x) => x / -2);
const arrowBorderRadius = mathWithUnits(
euiTheme.border.radius.small,
(x) => x / 2
);
const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);

return {
// Base
Expand Down Expand Up @@ -123,35 +114,11 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
`,
// Arrow
euiToolTip__arrow: css`
content: '';
position: absolute;
${logicalSizeCSS(arrowSize)}
${arrowStyles._arrowStyles}
background-color: inherit;
border: inherit;
border-radius: ${arrowBorderRadius};
clip-path: polygon(0 0, 100% 100%, 0 100%);
transform-origin: center;
`,
arrowPositions: {
top: css`
transform: rotate(-45deg);
${logicalCSS('margin-top', arrowOffset)}
`,
bottom: css`
${logicalCSS('bottom', 0)}
transform: rotate(135deg);
${logicalCSS('margin-bottom', arrowOffset)}
`,
left: css`
transform: rotate(-135deg);
${logicalCSS('margin-left', arrowOffset)}
`,
right: css`
${logicalCSS('right', 0)}
transform: rotate(45deg);
${logicalCSS('margin-right', arrowOffset)}
`,
},
arrowPositions: arrowStyles.positions,
// Title
euiToolTip__title: css`
font-weight: ${euiTheme.font.weight.bold};
Expand Down
3 changes: 3 additions & 0 deletions packages/eui/src/services/popover/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@

export { calculatePopoverPosition } from './calculate_popover_position';
export { findPopoverPosition, getElementZIndex } from './popover_positioning';

// Not exported as public APIs
export { _popoverArrowStyles } from './popover_arrow.styles';
export type { EuiPopoverPosition } from './types';
65 changes: 65 additions & 0 deletions packages/eui/src/services/popover/popover_arrow.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/*
* 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 {
logicalCSS,
logicalSizeCSS,
mathWithUnits,
} from '../../global_styling/functions';
import { UseEuiTheme } from '../../services';

/**
* Arrow clipping/transform/positioning CSS shared between EuiPopover and EuiToolTip
*/
export const _popoverArrowStyles = (
{ euiTheme }: UseEuiTheme,
arrowSize: string
) => {
const arrowOffset = mathWithUnits(arrowSize, (x) => x / -2);

const arrowBorderRadius = mathWithUnits(
euiTheme.border.radius.small,
(x) => x / 2
);

return {
_arrowStyles: `
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the starting underscore for the base styles. Adds some more distinction between same named object and key 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To add some more context - I tend to use underscore prefixes to denote private or internal usage. In this case I also don't want Emotion to render this extra label in its generated classNames, hence the underscore and the static string as opposed to css template literal.

position: absolute;
${logicalSizeCSS(arrowSize)}
border-radius: ${arrowBorderRadius};
/* Use clip-path to ensure that arrows don't overlap into popover content */
clip-path: polygon(0 0, 100% 100%, 0 100%);
transform-origin: center;
`,

positions: {
top: css`
${logicalCSS('margin-top', arrowOffset)}
transform: rotate(-45deg);
`,

bottom: css`
${logicalCSS('bottom', 0)}
${logicalCSS('margin-bottom', arrowOffset)}
transform: rotate(135deg);
`,

left: css`
${logicalCSS('margin-left', arrowOffset)}
transform: rotate(-135deg);
`,

right: css`
${logicalCSS('right', 0)}
${logicalCSS('margin-right', arrowOffset)}
transform: rotate(45deg);
`,
},
};
};