From b425afc3abbbdee5da991be32765a1e21ece622c Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 23 Jan 2024 16:01:03 -0500 Subject: [PATCH 1/3] feat(Label): penta updates --- .../react-core/src/components/Label/Label.tsx | 19 +- .../src/components/Label/LabelGroup.tsx | 1 + .../__snapshots__/Label.test.tsx.snap | 14 +- .../__snapshots__/LabelGroup.test.tsx.snap | 2 +- .../Label/examples/LabelCompact.tsx | 73 ++- .../components/Label/examples/LabelFilled.tsx | 443 ++++++++------ .../Label/examples/LabelGroupEditableAdd.tsx | 2 +- .../Label/examples/LabelOutline.tsx | 576 ++++++++++-------- 8 files changed, 631 insertions(+), 499 deletions(-) diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index 221cdf32e9e..7a563cfa085 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -15,7 +15,7 @@ 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'; /** Flag indicating the label is compact. */ @@ -60,6 +60,8 @@ export interface LabelProps extends React.HTMLProps { href?: string; /** Flag indicating if the label is an overflow label. */ isOverflowLabel?: boolean; + /** Flag indicating if the label is an add label. */ + isAddLabel?: 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 +83,7 @@ const colorStyles = { orange: styles.modifiers.orange, purple: styles.modifiers.purple, red: styles.modifiers.red, + orangered: styles.modifiers.orangered, gold: styles.modifiers.gold, grey: '' }; @@ -105,6 +108,7 @@ export const Label: React.FunctionComponent = ({ closeBtnProps, href, isOverflowLabel, + isAddLabel, render, ...props }: LabelProps) => { @@ -113,6 +117,8 @@ export const Label: React.FunctionComponent = ({ const editableButtonRef = React.useRef(); const editableInputRef = React.useRef(); + const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href; + React.useEffect(() => { document.addEventListener('mousedown', onDocMouseDown); document.addEventListener('keydown', onKeyDown); @@ -198,12 +204,13 @@ export const Label: React.FunctionComponent = ({ } }; - const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any; + const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any; const defaultButton = (