From e4da81b65e72d3f4ec5f809f615a8667a2a332b9 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 17 Jan 2024 14:37:49 +0100 Subject: [PATCH 1/8] feat(FormGroup): add FormGroupLabelHelp and update examples to use it --- .../react-core/src/components/Form/FormGroup.tsx | 9 +++++---- .../src/components/Form/FormGroupLabelHelp.tsx | 10 ++++++++++ .../src/components/Form/examples/Form.md | 1 + .../src/components/Form/examples/FormBasic.tsx | 15 +++------------ .../Form/examples/FormGroupLabelInfo.tsx | 15 +++------------ .../components/Form/examples/FormLimitWidth.tsx | 15 +++------------ packages/react-core/src/components/Form/index.ts | 1 + 7 files changed, 26 insertions(+), 40 deletions(-) create mode 100644 packages/react-core/src/components/Form/FormGroupLabelHelp.tsx diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx index ddd9a3e5723..35a10879b26 100644 --- a/packages/react-core/src/components/Form/FormGroup.tsx +++ b/packages/react-core/src/components/Form/FormGroup.tsx @@ -51,7 +51,7 @@ export const FormGroup: React.FunctionComponent = ({ const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label'; const labelContent = ( - + <> {label} {isRequired && ( @@ -60,9 +60,10 @@ export const FormGroup: React.FunctionComponent = ({ {ASTERISK} )} - {' '} - {React.isValidElement(labelIcon) && labelIcon} - + + <>   + {React.isValidElement(labelIcon) && {labelIcon}} + ); return ( diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx new file mode 100644 index 00000000000..59b7bd86dc1 --- /dev/null +++ b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Button, ButtonProps } from '../Button'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; + +export const FormGroupLabelHelp: React.FunctionComponent = (props: ButtonProps) => ( + +); +FormGroupLabelHelp.displayName = 'FormGroupLabelHelp'; diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md index bd13aed7123..c5897419d44 100644 --- a/packages/react-core/src/components/Form/examples/Form.md +++ b/packages/react-core/src/components/Form/examples/Form.md @@ -25,6 +25,7 @@ import { Button, Form, FormGroup, +FormGroupLabelHelp, Popover, TextInput, TextArea, diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx index 3e03aa39f78..f72847ff071 100644 --- a/packages/react-core/src/components/Form/examples/FormBasic.tsx +++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx @@ -10,10 +10,9 @@ import { Radio, HelperText, HelperTextItem, - FormHelperText + FormHelperText, + FormGroupLabelHelp } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import styles from '@patternfly/react-styles/css/components/Form/form'; export const FormBasic: React.FunctionComponent = () => { const [name, setName] = React.useState(''); @@ -64,15 +63,7 @@ export const FormBasic: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx index be5df5fce6d..6eaafc0c414 100644 --- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx +++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx @@ -6,10 +6,9 @@ import { Popover, HelperText, HelperTextItem, - FormHelperText + FormHelperText, + FormGroupLabelHelp } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import styles from '@patternfly/react-styles/css/components/Form/form'; export const FormGroupLabelInfo: React.FunctionComponent = () => { const [name, setName] = React.useState(''); @@ -51,15 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx index 8be09a9d2d7..5b4b79535d0 100644 --- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx +++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx @@ -10,10 +10,9 @@ import { Radio, HelperText, HelperTextItem, - FormHelperText + FormHelperText, + FormGroupLabelHelp } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import styles from '@patternfly/react-styles/css/components/Form/form'; export const FormLimitWidth: React.FunctionComponent = () => { const [name, setName] = React.useState(''); @@ -64,15 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/components/Form/index.ts b/packages/react-core/src/components/Form/index.ts index 49a53c8df3f..2fe315c9d65 100644 --- a/packages/react-core/src/components/Form/index.ts +++ b/packages/react-core/src/components/Form/index.ts @@ -5,6 +5,7 @@ export * from './FormFieldGroup'; export * from './FormFieldGroupExpandable'; export * from './FormFieldGroupHeader'; export * from './FormGroup'; +export * from './FormGroupLabelHelp'; export * from './FormHelperText'; export * from './FormSection'; export * from './FormContext'; From 9faa8ea5c3e93ac07ae0981c5248b08878626c54 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 17 Jan 2024 14:46:31 +0100 Subject: [PATCH 2/8] docs(FormGroup): recommend using FormGroupLabelHelp --- packages/react-core/src/components/Form/FormGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx index 35a10879b26..bea844866cc 100644 --- a/packages/react-core/src/components/Form/FormGroup.tsx +++ b/packages/react-core/src/components/Form/FormGroup.tsx @@ -13,7 +13,7 @@ export interface FormGroupProps extends Omit, 'l label?: React.ReactNode; /** Additional label information displayed after the label. */ labelInfo?: React.ReactNode; - /** Sets an icon for the label. For providing additional context. Host element for Popover */ + /** Sets an icon for the label. We recommend using FormGroupLabelHelp element as a help icon button. For providing additional context, host element for Popover */ labelIcon?: React.ReactElement; /** Sets the FormGroup required. */ isRequired?: boolean; From 5a8470b902e68e8df9219372ffaba9c52d9cfae5 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 17 Jan 2024 15:37:37 +0100 Subject: [PATCH 3/8] test(FormGroup): update spaces in snapshots --- .../__snapshots__/FormGroup.test.tsx.snap | 14 +++++++------- .../__snapshots__/LoginForm.test.tsx.snap | 12 ++++++------ .../__snapshots__/SearchInput.test.tsx.snap | 6 +++--- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap index 441f82d52af..d928dd27011 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap @@ -20,7 +20,7 @@ exports[`FormGroup should render correctly when label is not a string with Child - +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
- +   
Date: Thu, 8 Feb 2024 11:14:37 -0500 Subject: [PATCH 4/8] Updated labelIcon prop name --- .../components/Form/FormFieldGroupHeader.tsx | 5 +- .../src/components/Form/FormGroup.tsx | 8 +-- .../components/Form/FormGroupLabelHelp.tsx | 18 ++++++- .../src/components/Form/examples/Form.md | 18 +------ .../components/Form/examples/FormBasic.tsx | 4 +- .../Form/examples/FormGroupLabelInfo.tsx | 2 +- .../Form/examples/FormLimitWidth.tsx | 4 +- .../Modal/examples/ModalWithForm.tsx | 49 ++++++------------- .../PasswordStrength/PasswordStrengthDemo.tsx | 14 ++---- .../Modal/examples/ModalWithForm.tsx | 40 +++------------ .../components/demos/FormDemo/FormDemo.tsx | 15 ++---- 11 files changed, 56 insertions(+), 121 deletions(-) diff --git a/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx b/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx index 84b0f180cf5..b9c97a6fdb8 100644 --- a/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx +++ b/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx @@ -2,16 +2,13 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Form/form'; import { css } from '@patternfly/react-styles'; -// typo - rename to FormFieldGroupHeaderTitleTextObject during breaking change release -export interface FormFiledGroupHeaderTitleTextObject { +export interface FormFieldGroupHeaderTitleTextObject { /** Title text. */ text: React.ReactNode; /** The applied to the title div for accessibility */ id: string; } -export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {} - export interface FormFieldGroupHeaderProps extends React.HTMLProps { /** Additional classes added to the section */ className?: string; diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx index bea844866cc..150fe849454 100644 --- a/packages/react-core/src/components/Form/FormGroup.tsx +++ b/packages/react-core/src/components/Form/FormGroup.tsx @@ -13,8 +13,8 @@ export interface FormGroupProps extends Omit, 'l label?: React.ReactNode; /** Additional label information displayed after the label. */ labelInfo?: React.ReactNode; - /** Sets an icon for the label. We recommend using FormGroupLabelHelp element as a help icon button. For providing additional context, host element for Popover */ - labelIcon?: React.ReactElement; + /** A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component. */ + labelHelp?: React.ReactElement; /** Sets the FormGroup required. */ isRequired?: boolean; /** Sets the FormGroup isInline. */ @@ -38,7 +38,7 @@ export const FormGroup: React.FunctionComponent = ({ className = '', label, labelInfo, - labelIcon, + labelHelp, isRequired = false, isInline = false, hasNoPaddingTop = false, @@ -62,7 +62,7 @@ export const FormGroup: React.FunctionComponent = ({ )} <>   - {React.isValidElement(labelIcon) && {labelIcon}} + {React.isValidElement(labelHelp) && {labelHelp}} ); diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx index 59b7bd86dc1..05fb26c62b2 100644 --- a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx +++ b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx @@ -2,8 +2,22 @@ import React from 'react'; import { Button, ButtonProps } from '../Button'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -export const FormGroupLabelHelp: React.FunctionComponent = (props: ButtonProps) => ( - ); diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md index c5897419d44..4abdf0b83ec 100644 --- a/packages/react-core/src/components/Form/examples/Form.md +++ b/packages/react-core/src/components/Form/examples/Form.md @@ -8,6 +8,7 @@ propComponents: 'ActionGroup', 'Form', 'FormGroup', + 'FormGroupLabelHelp', 'FormSection', 'FormHelperText', 'FormFieldGroup', @@ -21,23 +22,6 @@ propComponents: ] --- -import { -Button, -Form, -FormGroup, -FormGroupLabelHelp, -Popover, -TextInput, -TextArea, -FormSelect, -FormHelperText, -FormFieldGroup, -FormFieldGroupHeader, -FormFieldGroupExpandable, -Checkbox, -ActionGroup, -Radio -} from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx index f72847ff071..4c71a1fdb61 100644 --- a/packages/react-core/src/components/Form/examples/FormBasic.tsx +++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx @@ -35,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
@@ -63,7 +63,7 @@ export const FormBasic: React.FunctionComponent = () => {
} > - + } isRequired diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx index 6eaafc0c414..3aaa7a13380 100644 --- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx +++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx @@ -50,7 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx index 5b4b79535d0..b5dc906b3f5 100644 --- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx +++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx @@ -35,7 +35,7 @@ export const FormLimitWidth: React.FunctionComponent = () => { @@ -63,7 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx index 912f8332d61..7bbd967b56c 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx @@ -1,7 +1,14 @@ import React from 'react'; -import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import formStyles from '@patternfly/react-styles/css/components/Form/form'; +import { + Modal, + ModalVariant, + Button, + Form, + FormGroup, + FormGroupLabelHelp, + Popover, + TextInput +} from '@patternfly/react-core'; export const ModalWithForm: React.FunctionComponent = () => { const [isModalOpen, setModalOpen] = React.useState(false); @@ -47,7 +54,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -75,15 +82,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired @@ -100,7 +99,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -124,15 +123,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired @@ -149,7 +140,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -172,15 +163,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx index 5ede96d3d75..de1d61ccb0d 100644 --- a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx +++ b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { Form, FormGroup, + FormGroupLabelHelp, FormHelperText, HelperText, Popover, HelperTextItem, TextInput } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; @@ -91,15 +91,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => { const iconPopover = ( Password Requirements} bodyContent={
Password rules
}> - + ); @@ -115,7 +107,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => { { const [isModalOpen, setModalOpen] = React.useState(false); @@ -47,7 +45,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -75,15 +73,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired @@ -100,7 +90,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -124,15 +114,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired @@ -149,7 +131,7 @@ export const ModalWithForm: React.FunctionComponent = () => { @@ -172,15 +154,7 @@ export const ModalWithForm: React.FunctionComponent = () => { } > - + } isRequired diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx index 13fa05ad4f7..6b2ec6c20d1 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx @@ -3,6 +3,7 @@ import { Divider, Form, FormGroup, + FormGroupLabelHelp, FormProps, FormSection, TextInput, @@ -15,8 +16,6 @@ import { } from '@patternfly/react-core'; import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import styles from '@patternfly/react-styles/css/components/Form/form'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; export interface FormState { @@ -113,7 +112,7 @@ export class FormDemo extends Component { id="form-group-age" label="Age" labelInfo="Age info" - labelIcon={ + labelHelp={ The age of a person} bodyContent={ @@ -123,15 +122,7 @@ export class FormDemo extends Component { } > - + } type="number" From a41794663a5832804cbddcef4d8219a69c25c31c Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 Feb 2024 11:30:22 -0500 Subject: [PATCH 5/8] Update prop in example --- .../src/components/Form/examples/FormGroupLabelInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx index 3aaa7a13380..3d728b8508c 100644 --- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx +++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx @@ -22,7 +22,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => { From 8963d67cb6a4b6eba987b7d4b6c0adbf8fcd4ed8 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 21 Feb 2024 14:32:09 +0100 Subject: [PATCH 6/8] feat(Checkbox/Radio): replace isLabelBeforeButton flag with labelPosition "start" / "end" --- .../src/components/Checkbox/Checkbox.tsx | 8 +-- .../Checkbox/__tests__/Checkbox.test.tsx | 4 +- .../react-core/src/components/Radio/Radio.tsx | 8 +-- .../components/Radio/__tests__/Radio.test.tsx | 8 +-- .../__snapshots__/Radio.test.tsx.snap | 50 +++++++++---------- .../Radio/examples/RadioReversed.tsx | 2 +- 6 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx index dab227caceb..79f31b80fb0 100644 --- a/packages/react-core/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-core/src/components/Checkbox/Checkbox.tsx @@ -16,8 +16,6 @@ export interface CheckboxProps inputClassName?: string; /** Flag to indicate whether the checkbox wrapper element is a