diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index 221cdf32e9e..80c9079ffec 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -15,9 +15,9 @@ export interface LabelProps extends React.HTMLProps { /** Additional classes added to the label. */ className?: string; /** Color of the label. */ - color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold'; + color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold'; /** Variant of the label. */ - variant?: 'outline' | 'filled'; + variant?: 'outline' | 'filled' | 'overflow' | 'add'; /** Flag indicating the label is compact. */ isCompact?: boolean; /** @beta Flag indicating the label is editable. */ @@ -58,8 +58,6 @@ export interface LabelProps extends React.HTMLProps { closeBtnProps?: any; /** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */ href?: string; - /** Flag indicating if the label is an overflow label. */ - isOverflowLabel?: boolean; /** Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. */ onClick?: (event: React.MouseEvent) => void; /** Forwards the label content and className to rendered function. Use this prop for react router support.*/ @@ -81,6 +79,7 @@ const colorStyles = { orange: styles.modifiers.orange, purple: styles.modifiers.purple, red: styles.modifiers.red, + orangered: styles.modifiers.orangered, gold: styles.modifiers.gold, grey: '' }; @@ -104,7 +103,6 @@ export const Label: React.FunctionComponent = ({ closeBtnAriaLabel, closeBtnProps, href, - isOverflowLabel, render, ...props }: LabelProps) => { @@ -113,6 +111,10 @@ export const Label: React.FunctionComponent = ({ const editableButtonRef = React.useRef(); const editableInputRef = React.useRef(); + const isOverflowLabel = variant === 'overflow'; + const isAddLabel = variant === 'add'; + const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href; + React.useEffect(() => { document.addEventListener('mousedown', onDocMouseDown); document.addEventListener('keydown', onKeyDown); @@ -198,12 +200,13 @@ export const Label: React.FunctionComponent = ({ } }; - const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any; + const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any; const defaultButton = (