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

@@ -18,7 +18,7 @@ import { Tooltip } from '../Tooltip/Tooltip';
 
 import { customWeight, customColor, customVariant } from './utils';
 
-export interface TextProps {
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, '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<HTMLElement, TextProps>(
-  ({ 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<HTMLElement, TextProps>(
     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,