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

[Emotion][perf] Memoize low-impact components (A-C) #7635

Merged
merged 11 commits into from
Apr 2, 2024
Merged

[Emotion][perf] Memoize low-impact components (A-C) #7635

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
126dbcf
[EuiScreenReaderOnly] Optimize styles
cee-chen Feb 14, 2024
f614edf
[EuiSkipLink] Memoize styles
cee-chen Feb 14, 2024
bc4412e
[EuiAspectRatio] Memoize+logical properties inline styles
cee-chen Feb 14, 2024
b3cd6aa
[EuiAvatar] Memoize styles + cleanup/performance
cee-chen Feb 14, 2024
e1e3143
[EuiBottomBar] Memoize styles + cleanup
cee-chen Mar 29, 2024
f294af0
[EuiCodeBlockAnnotation] Memoize styles
cee-chen Mar 29, 2024
ce78aec
[EuiCollapsibleNav] Memoize styles
cee-chen Mar 29, 2024
030bbc2
[EuiCollapsibleNavBeta](+ subcomponents) Memoize styles
cee-chen Mar 29, 2024
537b5bc
[EuiCommentEvent] Memoize styles
cee-chen Mar 29, 2024
5f98d22
[EuiContextMenuItem] Memoize styles
cee-chen Mar 29, 2024
f045214
[PR feedback] EuiAspectRatio changes
cee-chen Apr 2, 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
26 changes: 13 additions & 13 deletions src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`EuiBottomBar is rendered 1`] = `
>
<section
aria-label="aria-label"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
data-test-subj="test subject string"
style="left: 0px; right: 0px; bottom: 0px;"
>
Expand Down Expand Up @@ -43,7 +43,7 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -74,7 +74,7 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -104,7 +104,7 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
>
<section
aria-label="This should have been label"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -134,7 +134,7 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-l-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -164,7 +164,7 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -224,7 +224,7 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-s-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -254,7 +254,7 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -285,7 +285,7 @@ exports[`EuiBottomBar props position props are altered 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
>
<h2
Expand All @@ -311,7 +311,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--static emotion-euiBottomBar-static-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -337,7 +337,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down Expand Up @@ -368,7 +368,7 @@ exports[`EuiBottomBar props style is customized 1`] = `
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 12px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -394,7 +394,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down
4 changes: 3 additions & 1 deletion src/components/bottom_bar/bottom_bar.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
${euiTheme.animation.resistance};
}
`,
static: css``,
static: css``, // Default
fixed: css`
position: fixed;
z-index: ${Number(euiTheme.levels.header) - 2};
`,
sticky: css`
position: sticky;
z-index: ${Number(euiTheme.levels.header) - 2};
`,
// Padding
Expand Down
9 changes: 2 additions & 7 deletions src/components/bottom_bar/bottom_bar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,8 @@
import React from 'react';
import { render } from '../../test/rtl';
import { requiredProps } from '../../test';
import { keysOf } from '../common';

import {
EuiBottomBar,
paddingSizeToClassNameMap,
POSITIONS,
} from './bottom_bar';
import { EuiBottomBar, PADDING_SIZES, POSITIONS } from './bottom_bar';

describe('EuiBottomBar', () => {
test('is rendered', () => {
Expand All @@ -28,7 +23,7 @@ describe('EuiBottomBar', () => {

describe('props', () => {
describe('paddingSize', () => {
keysOf(paddingSizeToClassNameMap).forEach((paddingSize) => {
PADDING_SIZES.forEach((paddingSize) => {
test(`${paddingSize} is rendered`, () => {
const { baseElement } = render(
<EuiBottomBar paddingSize={paddingSize} />
Expand Down
32 changes: 11 additions & 21 deletions src/components/bottom_bar/bottom_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,22 @@ import React, {
useEffect,
useState,
} from 'react';
import { useCombinedRefs, useEuiTheme } from '../../services';

import {
useCombinedRefs,
useEuiMemoizedStyles,
EuiThemeProvider,
} from '../../services';
import { EuiScreenReaderOnly } from '../accessibility';
import { CommonProps, ExclusiveUnion } from '../common';
import { EuiI18n } from '../i18n';
import { useResizeObserver } from '../observer/resize_observer';
import { EuiPortal, EuiPortalProps } from '../portal';
import { euiBottomBarStyles } from './bottom_bar.styles';
import { EuiThemeProvider } from '../../services/theme/provider';

type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
import { euiBottomBarStyles } from './bottom_bar.styles';

// Exported for testing
export const paddingSizeToClassNameMap: {
JasonStoltz marked this conversation as resolved.
Show resolved Hide resolved
[value in BottomBarPaddingSize]: string | null;
} = {
none: null,
s: 'euiBottomBar--paddingSmall',
m: 'euiBottomBar--paddingMedium',
l: 'euiBottomBar--paddingLarge',
};
export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
type BottomBarPaddingSize = (typeof PADDING_SIZES)[number];

export const POSITIONS = ['static', 'fixed', 'sticky'] as const;
export type _BottomBarPosition = (typeof POSITIONS)[number];
Expand Down Expand Up @@ -123,8 +119,7 @@ const _EuiBottomBar = forwardRef<
},
ref
) => {
const euiTheme = useEuiTheme();
const styles = euiBottomBarStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiBottomBarStyles);

// Force some props if `fixed` position, but not if the user has supplied these
affordForDisplacement =
Expand Down Expand Up @@ -159,15 +154,13 @@ const _EuiBottomBar = forwardRef<
const classes = classNames(
'euiBottomBar',
`euiBottomBar--${position}`,
paddingSizeToClassNameMap[paddingSize],
className
);

const cssStyles = [
styles.euiBottomBar,
styles[position],
styles[paddingSize],
{ position },
];

const newStyle = {
Expand Down Expand Up @@ -240,10 +233,7 @@ export const EuiBottomBar = forwardRef<HTMLElement, EuiBottomBarProps>(
(props, ref) => {
const BottomBar = _EuiBottomBar;
return (
<EuiThemeProvider
colorMode={'dark'}
wrapperProps={{ cloneElement: true }}
>
<EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
<BottomBar ref={ref} {...props} />
</EuiThemeProvider>
);
Expand Down