IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana/ui: Wrap Box in forwardRef (#76555)

Browse Source 
* Grafana/ui: Wrap Box in forwardRef

* Destructure props
This commit is contained in:
Alex Khomenko
2023-10-13 16:40:25 +02:00
committed by GitHub
parent 40b79de0cd
commit 8bf0143908
1 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/Layout/Box/Box.tsx
View File

@@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { ElementType } from 'react'; import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data'; import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
@@ -68,7 +68,8 @@ interface BoxProps {
element?: ElementType; element?: ElementType;
} }
export const Box = ({ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
const {
children, children,
margin, margin,
marginX, marginX,
@@ -95,7 +96,7 @@ export const Box = ({
alignItems, alignItems,
boxShadow, boxShadow,
element, element,
}: React.PropsWithChildren<BoxProps>) => { } = props;
const styles = useStyles2( const styles = useStyles2(
getStyles, getStyles,
margin, margin,
@@ -125,8 +126,12 @@ export const Box = ({
); );
const Element = element ?? 'div'; const Element = element ?? 'div';
return <Element className={styles.root}>{children}</Element>; return (
}; <Element ref={ref} className={styles.root}>
{children}
</Element>
);
});
Box.displayName = 'Box'; Box.displayName = 'Box';