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 4cbf30cb6c8..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"