From 3fcb92f12e700a9628180fc19651747a0e71764f Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 20 Nov 2023 13:30:34 +0100 Subject: [PATCH 1/8] feat(Checkbox): add support for isLabelWrapped and isLabelBeforeButton --- .../src/components/Checkbox/Checkbox.tsx | 79 ++++++++++++------- 1 file changed, 51 insertions(+), 28 deletions(-) diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx index 699bbe3d3ff..86ff21ca673 100644 --- a/packages/react-core/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-core/src/components/Checkbox/Checkbox.tsx @@ -10,8 +10,12 @@ export interface CheckboxProps OUIAProps { /** Additional classes added to the checkbox. */ className?: string; - /** Additional classed added to the radio input */ + /** Additional classed added to the checkbox input. */ inputClassName?: string; + /** Flag to show if the checkbox label is wrapped on small screen. Will only apply if component prop is not specified. */ + isLabelWrapped?: boolean; + /** Flag to show if the checkbox label is shown before the checkbox button. */ + isLabelBeforeButton?: boolean; /** Flag to show if the checkbox selection is valid or invalid. */ isValid?: boolean; /** Flag to show if the checkbox is disabled. */ @@ -52,13 +56,13 @@ class Checkbox extends React.Component { static displayName = 'Checkbox'; static defaultProps: PickOptional = { className: '', + isLabelWrapped: false, isValid: true, isDisabled: false, isRequired: false, isChecked: false, onChange: defaultOnChange, - ouiaSafe: true, - component: 'div' + ouiaSafe: true }; constructor(props: any) { @@ -78,6 +82,8 @@ class Checkbox extends React.Component { className, inputClassName, onChange, + isLabelWrapped, + isLabelBeforeButton, isValid, isDisabled, isRequired, @@ -89,7 +95,7 @@ class Checkbox extends React.Component { body, ouiaId, ouiaSafe, - component: Component, + component, ...props } = this.props; if (!props.id) { @@ -107,32 +113,49 @@ class Checkbox extends React.Component { checkedProps.defaultChecked = defaultChecked; } + const inputRendered = ( + elem && (elem.indeterminate = isChecked === null)} + {...checkedProps} + {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)} + /> + ); + + const wrapWithLabel = isLabelWrapped && !component; + + const Label = wrapWithLabel ? 'span' : 'label'; + const labelRendered = label ? ( + + ) : null; + + const Component = component ?? (wrapWithLabel ? 'label' : 'div'); + checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked; return ( - - elem && (elem.indeterminate = isChecked === null)} - {...checkedProps} - {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)} - /> - {label && ( - - )} + + {isLabelBeforeButton ? labelRendered : inputRendered} + {isLabelBeforeButton ? inputRendered : labelRendered} {description && {description}} {body && {body}} From 4b30981ed6b2da60fdf2a0f1df4796209a7c2847 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 20 Nov 2023 13:31:26 +0100 Subject: [PATCH 2/8] feat(Radio): add support for component --- .../react-core/src/components/Radio/Radio.tsx | 66 ++++++++----------- 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/packages/react-core/src/components/Radio/Radio.tsx b/packages/react-core/src/components/Radio/Radio.tsx index c0fb12479c2..511a3bdffac 100644 --- a/packages/react-core/src/components/Radio/Radio.tsx +++ b/packages/react-core/src/components/Radio/Radio.tsx @@ -7,15 +7,15 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; export interface RadioProps extends Omit, 'disabled' | 'label' | 'onChange' | 'type'>, OUIAProps { - /** Additional classes added to the radio wrapper. This will be a div element if - * isLabelWrapped is true, otherwise this will be a label element. + /** Additional classes added to the radio wrapper. This will be a label element if + * isLabelWrapped is true, otherwise this will be a div element. */ className?: string; - /** Additional classed added to the radio input */ + /** Additional classed added to the radio input. */ inputClassName?: string; /** Id of the radio. */ id: string; - /** Flag to show if the radio label is wrapped on small screen. */ + /** Flag to show if the radio label is wrapped on small screen. Will only apply if component prop is not specified. */ isLabelWrapped?: boolean; /** Flag to show if the radio label is shown before the radio button. */ isLabelBeforeButton?: boolean; @@ -39,6 +39,8 @@ export interface RadioProps description?: React.ReactNode; /** Body of the radio. */ body?: React.ReactNode; + /** Sets the input wrapper component to render. Defaults to
*/ + component?: React.ElementType; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ @@ -88,6 +90,7 @@ class Radio extends React.Component { body, ouiaId, ouiaSafe = true, + component, ...props } = this.props; if (!props.id) { @@ -110,41 +113,30 @@ class Radio extends React.Component { /> ); - let labelRendered: React.ReactNode = null; - if (label && isLabelWrapped) { - labelRendered = {label}; - } else if (label) { - labelRendered = ( - - ); - } + const wrapWithLabel = isLabelWrapped && !component; - const descRender = description ? {description} : null; - const bodyRender = body ? {body} : null; - const childrenRendered = isLabelBeforeButton ? ( - <> - {labelRendered} - {inputRendered} - {descRender} - {bodyRender} - - ) : ( - <> - {inputRendered} - {labelRendered} - {descRender} - {bodyRender} - - ); + const Label = wrapWithLabel ? 'span' : 'label'; + const labelRendered = label ? ( + + ) : null; + + const Component = component ?? (wrapWithLabel ? 'label' : 'div'); - return isLabelWrapped ? ( - - ) : ( -
{childrenRendered}
+ return ( + + {isLabelBeforeButton ? labelRendered : inputRendered} + {isLabelBeforeButton ? inputRendered : labelRendered} + {description && {description}} + {body && {body}} + ); } } From c8fc07d7168a7496a7a4c284665aea9b21e986e7 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 9 Jan 2024 09:39:38 +0100 Subject: [PATCH 3/8] refactor(Radio/Checkbox): check isLabelBeforeButton only once --- .../react-core/src/components/Checkbox/Checkbox.tsx | 13 +++++++++++-- packages/react-core/src/components/Radio/Radio.tsx | 13 +++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx index 86ff21ca673..ebd80c67723 100644 --- a/packages/react-core/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-core/src/components/Checkbox/Checkbox.tsx @@ -154,8 +154,17 @@ class Checkbox extends React.Component { className={css(styles.check, !label && styles.modifiers.standalone, className)} htmlFor={wrapWithLabel && props.id} > - {isLabelBeforeButton ? labelRendered : inputRendered} - {isLabelBeforeButton ? inputRendered : labelRendered} + {isLabelBeforeButton ? ( + <> + {labelRendered} + {inputRendered} + + ) : ( + <> + {inputRendered} + {labelRendered} + + )} {description && {description}} {body && {body}} diff --git a/packages/react-core/src/components/Radio/Radio.tsx b/packages/react-core/src/components/Radio/Radio.tsx index 511a3bdffac..b5c0ee88392 100644 --- a/packages/react-core/src/components/Radio/Radio.tsx +++ b/packages/react-core/src/components/Radio/Radio.tsx @@ -132,8 +132,17 @@ class Radio extends React.Component { className={css(styles.radio, !label && styles.modifiers.standalone, className)} htmlFor={wrapWithLabel && props.id} > - {isLabelBeforeButton ? labelRendered : inputRendered} - {isLabelBeforeButton ? inputRendered : labelRendered} + {isLabelBeforeButton ? ( + <> + {labelRendered} + {inputRendered} + + ) : ( + <> + {inputRendered} + {labelRendered} + + )} {description && {description}} {body && {body}} From 6e0cc87ef7bbb25f7f4279f26c9b2e0a61cff8f7 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 9 Jan 2024 10:39:05 +0100 Subject: [PATCH 4/8] feat(Radio/Checkbox): add support for component === "label" behaving the same as isLabelWrapped --- packages/react-core/src/components/Checkbox/Checkbox.tsx | 6 +++--- packages/react-core/src/components/Radio/Radio.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx index ebd80c67723..f6f574aa9a2 100644 --- a/packages/react-core/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-core/src/components/Checkbox/Checkbox.tsx @@ -12,7 +12,7 @@ export interface CheckboxProps className?: string; /** Additional classed added to the checkbox input. */ inputClassName?: string; - /** Flag to show if the checkbox label is wrapped on small screen. Will only apply if component prop is not specified. */ + /** Flag to indicate whether the checkbox wrapper element is a