Skip to content

Commit

Permalink
[Emotion] Create hook utility for memoizing component styles per-theme (
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen authored Feb 15, 2024
1 parent a59dfd5 commit 47ab766
Show file tree
Hide file tree
Showing 14 changed files with 267 additions and 113 deletions.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7529.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Added a new memoization/performance optimization utility for CSS-in-JS styles
5 changes: 2 additions & 3 deletions src/components/beacon/beacon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { CommonProps } from '../common';
import classNames from 'classnames';

import { logicalStyles } from '../../global_styling';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';

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

Expand Down Expand Up @@ -48,9 +48,8 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
style,
...rest
}) => {
const euiTheme = useEuiTheme();
const styles = useEuiMemoizedStyles(euiBeaconStyles);
const classes = classNames('euiBeacon', className);
const styles = euiBeaconStyles(euiTheme);
const cssStyles = [styles.euiBeacon, styles[color]];

const beaconStyle = useMemo(
Expand Down
14 changes: 6 additions & 8 deletions src/components/code/code.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@
import { css } from '@emotion/react';
import { logicalShorthandCSS } from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
const { euiTheme } = euiThemeContext;

return {
Expand All @@ -25,12 +23,12 @@ export const euiCodeStyles = (
font-family: ${euiTheme.font.familyCode};
font-size: 0.9em; /* 1 */
${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
background: ${euiCodeSyntaxVariables.backgroundColor};
background: ${codeSyntaxVariables.backgroundColor};
border-radius: ${euiTheme.border.radius.small};
font-weight: ${euiTheme.font.weight.bold};
color: ${euiCodeSyntaxVariables.inlineCodeColor};
color: ${codeSyntaxVariables.inlineCodeColor};
${euiCodeSyntaxVariables.tokensCss}
${codeSyntaxVariables.tokensCss}
`,
transparentBackground: css`
background: transparent;
Expand Down
5 changes: 2 additions & 3 deletions src/components/code/code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
checkSupportedLanguage,
getHtmlContent,
} from './utils';
import { useEuiTheme } from '../../services';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { useEuiMemoizedStyles } from '../../services';
import { euiCodeStyles } from './code.styles';

export type EuiCodeProps = EuiCodeSharedProps;
Expand Down Expand Up @@ -47,7 +46,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({

const classes = classNames('euiCode', className);

const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
const styles = useEuiMemoizedStyles(euiCodeStyles);
const cssStyles = [
styles.euiCode,
transparentBackground && styles.transparentBackground,
Expand Down
19 changes: 7 additions & 12 deletions src/components/code/code_block.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,20 @@ import {
} from '../../global_styling';
import { UseEuiTheme } from '../../services';

import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeBlockStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
const { euiTheme } = euiThemeContext;

return {
euiCodeBlock: css`
max-inline-size: 100%;
display: block;
position: relative;
background: ${euiCodeSyntaxVariables.backgroundColor};
background: ${codeSyntaxVariables.backgroundColor};
${euiCodeSyntaxVariables.tokensCss}
${codeSyntaxVariables.tokensCss}
`,
// Font size
s: css`
Expand Down Expand Up @@ -134,17 +132,14 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
};
};

export const euiCodeBlockCodeStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;

return {
euiCodeBlock__code: css`
font-family: ${euiTheme.font.familyCode};
font-size: inherit;
color: ${euiCodeSyntaxVariables.color};
color: ${euiTheme.colors.text};
display: block;
`,
isVirtualized: css`
Expand Down
41 changes: 22 additions & 19 deletions src/components/code/code_block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@
import React, { FunctionComponent, useMemo } from 'react';
import { RefractorNode } from 'refractor';
import classNames from 'classnames';
import { useCombinedRefs, useEuiTheme } from '../../services';

import {
useCombinedRefs,
useEuiTheme,
useEuiMemoizedStyles,
} from '../../services';
import { ExclusiveUnion } from '../common';
import {
EuiCodeSharedProps,
Expand All @@ -32,7 +37,6 @@ import {
euiCodeBlockPreStyles,
euiCodeBlockCodeStyles,
} from './code_block.styles';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';

// Based on observed line height for non-virtualized code blocks
const fontSizeToRowHeightMap = {
Expand Down Expand Up @@ -123,7 +127,6 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
...rest
}) => {
const euiTheme = useEuiTheme();
const euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
const language = useMemo(
() => checkSupportedLanguage(_language),
[_language]
Expand Down Expand Up @@ -177,7 +180,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
const hasControls = !!(copyButton || fullScreenButton);
const hasBothControls = !!(copyButton && fullScreenButton);

const styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
const cssStyles = [
styles.euiCodeBlock,
styles[fontSize],
Expand All @@ -188,26 +191,26 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
: styles.hasControls[paddingSize]),
];

const preStyles = useEuiMemoizedStyles(euiCodeBlockPreStyles);
const [preProps, preFullscreenProps] = useMemo(() => {
const isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;

const styles = euiCodeBlockPreStyles(euiTheme);
const cssStyles = [
styles.euiCodeBlock__pre,
preStyles.euiCodeBlock__pre,
isWhiteSpacePre
? styles.whiteSpace.pre.pre
: styles.whiteSpace.preWrap.preWrap,
? preStyles.whiteSpace.pre.pre
: preStyles.whiteSpace.preWrap.preWrap,
];

const preProps = {
className: 'euiCodeBlock__pre',
css: [
...cssStyles,
styles.padding[paddingSize],
preStyles.padding[paddingSize],
hasControls &&
(isWhiteSpacePre
? styles.whiteSpace.pre.controlsOffset[paddingSize]
: styles.whiteSpace.preWrap.controlsOffset[paddingSize]),
? preStyles.whiteSpace.pre.controlsOffset[paddingSize]
: preStyles.whiteSpace.preWrap.controlsOffset[paddingSize]),
],
tabIndex: isVirtualized ? 0 : tabIndex,
};
Expand All @@ -216,19 +219,19 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
css: [
...cssStyles,
// Force fullscreen to use xl padding
styles.padding.xl,
preStyles.padding.xl,
hasControls &&
(isWhiteSpacePre
? styles.whiteSpace.pre.controlsOffset.xl
: styles.whiteSpace.preWrap.controlsOffset.xl),
? preStyles.whiteSpace.pre.controlsOffset.xl
: preStyles.whiteSpace.preWrap.controlsOffset.xl),
],
tabIndex: 0,
onKeyDown,
};

return [preProps, preFullscreenProps];
}, [
euiTheme,
preStyles,
whiteSpace,
isVirtualized,
hasControls,
Expand All @@ -237,11 +240,11 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
tabIndex,
]);

const codeStyles = useEuiMemoizedStyles(euiCodeBlockCodeStyles);
const codeProps = useMemo(() => {
const styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
const cssStyles = [
styles.euiCodeBlock__code,
isVirtualized && styles.isVirtualized,
codeStyles.euiCodeBlock__code,
isVirtualized && codeStyles.isVirtualized,
];

return {
Expand All @@ -250,7 +253,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
'data-code-language': language,
...rest,
};
}, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
}, [codeStyles, language, isVirtualized, rest]);

return (
<div
Expand Down
10 changes: 4 additions & 6 deletions src/components/code/code_block_controls.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,19 @@
import { css } from '@emotion/react';
import { euiPaddingSize } from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeSyntaxVariables } from './code_syntax.styles';

export const euiCodeBlockControlsStyles = (
euiThemeContext: UseEuiTheme,
euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
) => {
export const euiCodeBlockControlsStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);

return {
euiCodeBlock__controls: css`
position: absolute;
display: flex;
flex-direction: column;
gap: ${euiTheme.size.xs};
background: ${euiCodeSyntaxVariables.backgroundColor};
background: ${codeSyntaxVariables.backgroundColor};
`,
offset: {
none: css`
Expand Down
8 changes: 2 additions & 6 deletions src/components/code/code_block_controls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,15 @@
*/

import React, { FC, Fragment, ReactNode } from 'react';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import type { EuiCodeBlockPaddingSize } from './code_block';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeBlockControlsStyles } from './code_block_controls.styles';

export const EuiCodeBlockControls: FC<{
controls: ReactNode[];
paddingSize: EuiCodeBlockPaddingSize;
}> = ({ paddingSize, controls }) => {
const styles = euiCodeBlockControlsStyles(
useEuiTheme(),
useEuiCodeSyntaxVariables()
);
const styles = useEuiMemoizedStyles(euiCodeBlockControlsStyles);
const cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];

const hasControls = controls.some((control) => !!control);
Expand Down
5 changes: 2 additions & 3 deletions src/components/code/code_block_full_screen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,11 @@ import React, {
useMemo,
PropsWithChildren,
} from 'react';
import { keys, useEuiTheme } from '../../services';
import { keys, useEuiMemoizedStyles } from '../../services';
import { useEuiI18n } from '../i18n';
import { EuiButtonIcon } from '../button';
import { EuiFocusTrap } from '../focus_trap';
import { EuiOverlayMask } from '../overlay_mask';
import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
import { euiCodeBlockStyles } from './code_block.styles';

/**
Expand Down Expand Up @@ -92,7 +91,7 @@ export const useFullScreen = ({
export const EuiCodeBlockFullScreenWrapper: FunctionComponent<
PropsWithChildren
> = ({ children }) => {
const styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
const cssStyles = [
styles.euiCodeBlock,
styles.l, // Force fullscreen to use large font
Expand Down
Loading

0 comments on commit 47ab766

Please sign in to comment.