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

[EuiTourStep] className consistency with EuiPopover + performance/cleanups #7497

Merged
merged 7 commits into from
Feb 2, 2024
Merged

[EuiTourStep] className consistency with EuiPopover + performance/cleanups #7497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4f0c2ce
Fix `className` DOM location to match EuiPopover
cee-chen Jan 31, 2024
43241a6
Fix `style` DOM location to match EuiPopover
cee-chen Jan 31, 2024
13f7ac2
[tests] Convert Enzyme to RTL
cee-chen Jan 31, 2024
0f1971d
[css] Convert inline styles to logical property equivalents
cee-chen Jan 31, 2024
049e269
[Perf] Memoize & clean up code
cee-chen Jan 31, 2024
f0b0603
TS fixes
cee-chen Jan 31, 2024
85e5abe
changelog
cee-chen Jan 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
4 changes: 4 additions & 0 deletions changelogs/upcoming/7497.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Breaking changes**

- `EuiTourStep`'s `className` and `style` props now apply to the anchoring element instead of to the popover panel, to match `EuiPopover` behavior.
- Convert your existing usages to `panelClassName` and `panelStyle` respectively instead.
16 changes: 8 additions & 8 deletions src/components/beacon/__snapshots__/beacon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`EuiBeacon is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -14,7 +14,7 @@ exports[`EuiBeacon props color accent is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-accent-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -23,7 +23,7 @@ exports[`EuiBeacon props color danger is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-danger-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -32,7 +32,7 @@ exports[`EuiBeacon props color primary is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-primary-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -41,7 +41,7 @@ exports[`EuiBeacon props color subdued is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-subdued-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -50,7 +50,7 @@ exports[`EuiBeacon props color success is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -59,7 +59,7 @@ exports[`EuiBeacon props color warning is rendered 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-warning-euiTestCss"
data-test-subj="test subject string"
style="height: 12px; width: 12px;"
style="block-size: 12px; inline-size: 12px;"
/>
`;

Expand All @@ -68,6 +68,6 @@ exports[`EuiBeacon props size accepts size 1`] = `
aria-label="aria-label"
class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
data-test-subj="test subject string"
style="height: 14px; width: 14px;"
style="block-size: 14px; inline-size: 14px;"
/>
`;
20 changes: 13 additions & 7 deletions src/components/beacon/beacon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
* Side Public License, v 1.
*/

import React, { FunctionComponent, HTMLAttributes } from 'react';
import React, { FunctionComponent, HTMLAttributes, useMemo } from 'react';
import { CommonProps } from '../common';
import classNames from 'classnames';

import { euiBeaconStyles } from './beacon.styles';
import { logicalStyles } from '../../global_styling';
import { useEuiTheme } from '../../services';

import { euiBeaconStyles } from './beacon.styles';

export const COLORS = [
'subdued',
'primary',
Expand Down Expand Up @@ -51,11 +53,15 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
const styles = euiBeaconStyles(euiTheme);
const cssStyles = [styles.euiBeacon, styles[color]];

const beaconStyle = {
...style,
height: size,
width: size,
};
const beaconStyle = useMemo(
() =>
logicalStyles({
...style,
height: size,
width: size,
}),
[style, size]
);

return (
<div className={classes} css={cssStyles} style={beaconStyle} {...rest} />
Expand Down
Loading
Loading