diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index 221cdf32e9e..8c827374510 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -20,6 +20,8 @@ export interface LabelProps extends React.HTMLProps { variant?: 'outline' | 'filled'; /** Flag indicating the label is compact. */ isCompact?: boolean; + /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */ + isDisabled?: boolean; /** @beta Flag indicating the label is editable. */ isEditable?: boolean; /** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */ @@ -91,6 +93,7 @@ export const Label: React.FunctionComponent = ({ color = 'grey', variant = 'filled', isCompact = false, + isDisabled = false, isEditable = false, editableProps, textMaxWidth, @@ -198,21 +201,22 @@ export const Label: React.FunctionComponent = ({ } }; - const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any; + const isClickableDisabled = (href || onLabelClick) && isDisabled; - const defaultButton = ( + const defaultCloseButton = ( ); - const button = {closeBtn || defaultButton}; + const closeButton = {closeBtn || defaultCloseButton}; const textRef = React.createRef(); // ref to apply tooltip when rendered is used const componentRef = React.useRef(); @@ -268,6 +272,8 @@ export const Label: React.FunctionComponent = ({ className: css(styles.labelContent), ...(isTooltipVisible && { tabIndex: 0 }), ...(href && { href }), + // Need to prevent onClick since aria-disabled won't prevent AT from triggering the link + ...(href && isDisabled && { onClick: (event: MouseEvent) => event.preventDefault() }), ...(isButton && clickableLabelProps), ...(isEditable && { ref: editableButtonRef, @@ -276,7 +282,9 @@ export const Label: React.FunctionComponent = ({ e.stopPropagation(); }, ...editableProps - }) + }), + ...(isClickableDisabled && isButton && { disabled: true }), + ...(isClickableDisabled && href && { tabindex: -1, 'aria-disabled': true }) }; let labelComponentChild = ( @@ -302,11 +310,14 @@ export const Label: React.FunctionComponent = ({ ); } + const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any; + return ( = ({ onClick={isOverflowLabel ? onLabelClick : undefined} > {!isEditableActive && labelComponentChild} - {!isEditableActive && onClose && button} + {!isEditableActive && onClose && closeButton} {isEditableActive && ( ( {' '} + {' '} + {' '} + {' '} {' '} + {' '} + ); diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx index ac8ad75ec91..9ef9e240037 100644 --- a/packages/react-core/src/components/Label/examples/LabelFilled.tsx +++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx @@ -17,13 +17,19 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -42,15 +48,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -69,15 +87,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -96,15 +126,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -123,15 +165,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -150,15 +204,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -177,15 +243,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -204,15 +282,27 @@ export const LabelFilled: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx index cfcb960d551..4c094980960 100644 --- a/packages/react-core/src/components/Label/examples/LabelOutline.tsx +++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx @@ -24,15 +24,27 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -53,13 +65,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -88,13 +120,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -123,13 +175,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -158,13 +230,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -193,13 +285,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -228,13 +340,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} +

@@ -263,13 +395,13 @@ export const LabelOutline: React.FunctionComponent = () => { {' '} + {' '} {' '} + {' '} {' '} + {' '} + );