From 3b51acf44df3160ea64d84c914a8b5d4ffbc7c9f Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Wed, 4 Oct 2023 13:49:49 +0000 Subject: [PATCH] GrafanaUI: Pass rest of Text props through to element (#75948) * spread rest of html props to text element * prevent style prop from overriding styles --- packages/grafana-ui/src/components/Text/Text.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/Text/Text.tsx b/packages/grafana-ui/src/components/Text/Text.tsx index dda343c2222..7b687808e0e 100644 --- a/packages/grafana-ui/src/components/Text/Text.tsx +++ b/packages/grafana-ui/src/components/Text/Text.tsx @@ -18,7 +18,7 @@ import { Tooltip } from '../Tooltip/Tooltip'; import { customWeight, customColor, customVariant } from './utils'; -export interface TextProps { +export interface TextProps extends Omit, 'className' | 'style'> { /** Defines what HTML element is defined underneath. "span" by default */ element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p'; /** What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed */ @@ -37,7 +37,7 @@ export interface TextProps { } export const Text = React.forwardRef( - ({ element = 'span', variant, weight, color, truncate, italic, textAlignment, children }, ref) => { + ({ element = 'span', variant, weight, color, truncate, italic, textAlignment, children, ...restProps }, ref) => { const styles = useStyles2( useCallback( (theme) => getTextStyles(theme, element, variant, color, weight, truncate, italic, textAlignment), @@ -53,6 +53,8 @@ export const Text = React.forwardRef( const childElement = createElement( element, { + ...restProps, + style: undefined, // remove style prop to avoid overriding the styles className: styles, // when overflowing, the internalRef is passed to the tooltip which forwards it on to the child element ref: isOverflowing ? undefined : internalRef,