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

Issue 7561/emotion memoize all generated styles eui tool tip+euicon tip #8240

Closed
wants to merge 10 commits into from
Closed

Issue 7561/emotion memoize all generated styles eui tool tip+euicon tip #8240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
42e03fa
[EuiToolTip] implement memoization for styles in tool_tip_popover.tsx
amarantaVC Dec 9, 2024
94ebcf8
[EuiToolTip] implement memoization for styles in tool_tip_popover.tsx
amarantaVC Dec 9, 2024
07645ee
[EuiToolTip] Memoized tool_tip_arrow component
rebeca1012 Dec 9, 2024
2842e3a
Merge pull request #1 from USB-CI3715/issue-7561/emotion-memoize-tool…
amarantaVC Dec 9, 2024
05192a9
[EuiToolTip] implement memoization for styles in popover component files
amarantaVC Dec 9, 2024
f527695
Merge branch 'issue-7561/emotion-memoize-all-generated-styles-EuiToo…
amarantaVC Dec 9, 2024
008cfaf
FIX: Delete snapshots to match unit tests
Cedgo1997 Dec 9, 2024
527e61e
Create change.md
SamuelSanchez01 Dec 13, 2024
8ccc7d1
Update and rename change.md to 2.md
SamuelSanchez01 Dec 13, 2024
2c37398
rename changelog for issue #7561
SamuelSanchez01 Dec 13, 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
7 changes: 7 additions & 0 deletions packages/eui/changelogs/upcoming/3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
This PR provides:

- Memoization of generated styles with useEuiMemoizedStyles from src/services

This PR doesn't contain:

- Changes in UI
5 changes: 2 additions & 3 deletions packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import React, { HTMLAttributes, FunctionComponent } from 'react';
import { CommonProps } from '../../common';
import { euiPopoverArrowStyles } from './_popover_arrow.styles';
import { useEuiTheme } from '../../../services';
import { useEuiMemoizedStyles } from '../../../services';

export const POSITIONS = ['top', 'left', 'right', 'bottom'] as const;
export type EuiPopoverArrowPositions = (typeof POSITIONS)[number];
Expand All @@ -24,8 +24,7 @@ export const EuiPopoverArrow: FunctionComponent<EuiPopoverArrowProps> = ({
position,
...rest
}) => {
const euiTheme = useEuiTheme();
const styles = euiPopoverArrowStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiPopoverArrowStyles);
const cssStyles = [styles.euiPopoverArrow, styles[position]];

return (
Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/popover/popover_footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import React, { HTMLAttributes, FunctionComponent, useContext } from 'react';
import classNames from 'classnames';
import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import { CommonProps } from '../common';
import { euiPopoverFooterStyles } from './popover_footer.styles';
import { EuiPopoverPanelContext } from './popover_panel/_popover_panel';
Expand All @@ -32,8 +32,7 @@ export const EuiPopoverFooter: EuiPopoverFooterProps = ({
...rest
}) => {
const { paddingSize: panelPadding } = useContext(EuiPopoverPanelContext);
const euiTheme = useEuiTheme();
const styles = euiPopoverFooterStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiPopoverFooterStyles);
const paddingStyles = useEuiPaddingCSS();
const cssStyles = [
styles.euiPopoverFooter,
Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/popover/popover_title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import React, { HTMLAttributes, FunctionComponent, useContext } from 'react';
import classNames from 'classnames';
import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import { CommonProps } from '../common';
import { euiPopoverTitleStyles } from './popover_title.styles';
import { EuiPopoverPanelContext } from './popover_panel/_popover_panel';
Expand All @@ -32,8 +32,7 @@ export const EuiPopoverTitle: EuiPopoverTitleProps = ({
...rest
}) => {
const { paddingSize: panelPadding } = useContext(EuiPopoverPanelContext);
const euiTheme = useEuiTheme();
const styles = euiPopoverTitleStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiPopoverTitleStyles);
const paddingStyles = useEuiPaddingCSS();
const cssStyles = [
styles.euiPopoverTitle,
Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/tool_tip/tool_tip_arrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@
*/

import React, { HTMLAttributes, FunctionComponent } from 'react';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import { ToolTipPositions } from './tool_tip_popover';
import { euiToolTipStyles } from './tool_tip.styles';

export const EuiToolTipArrow: FunctionComponent<
{ position: ToolTipPositions } & HTMLAttributes<HTMLDivElement>
> = ({ position, ...props }) => {
const euiTheme = useEuiTheme();
const styles = euiToolTipStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiToolTipStyles);
const cssStyles = [styles.euiToolTip__arrow, styles.arrowPositions[position]];

return <div css={cssStyles} {...props} />;
Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/tool_tip/tool_tip_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
import { CommonProps } from '../common';
import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import { euiToolTipStyles } from './tool_tip.styles';

export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
Expand All @@ -41,8 +41,7 @@ export const EuiToolTipPopover: FunctionComponent<Props> = ({
}) => {
const popover = useRef<HTMLDivElement>();

const euiTheme = useEuiTheme();
const styles = euiToolTipStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiToolTipStyles);
const cssStyles = [
styles.euiToolTip,
calculatedPosition && styles[calculatedPosition],
Expand Down
Loading