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

GrafanaUI: Pass rest of Text props through to element (#75948)

Browse Source 
* spread rest of html props to text element

* prevent style prop from overriding styles
This commit is contained in:
Josh Hunt 2023-10-04 13:49:49 +00:00 committed by GitHub
parent c64e73540d
commit 3b51acf44d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Text/Text.tsx
View File

@ -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,