Skip to content

chore(Form): convert examples to TypeScript/functional components #7521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 4 commits into from
Jun 23, 2022
Merged

chore(Form): convert examples to TypeScript/functional components #7521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea61a19
chore(Form): completed conversion of form examples to ts
andyyvo Jun 7, 2022
a89f083
chore(Form): added fieldId back to roles to define id and aria-labell…
andyyvo Jun 18, 2022
709aa34
chore(Form): renamed form functions, updated fieldId desc, and added …
andyyvo Jun 23, 2022
ff5558a
chore(Form): cleaned FormGroup logic and added fieldId to label info …
andyyvo Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 40 additions & 29 deletions packages/react-core/src/components/Form/FormGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
import { ASTERISK } from '../../helpers/htmlConstants';
import { css } from '@patternfly/react-styles';
import { ValidatedOptions } from '../../helpers/constants';
import { GenerateId } from '../../helpers/GenerateId/GenerateId';

export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
/** Anything that can be rendered as FormGroup content. */
Expand Down Expand Up @@ -39,8 +40,10 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
helperTextIcon?: React.ReactNode;
/** Icon displayed to the left of the helper text when the field is invalid. */
helperTextInvalidIcon?: React.ReactNode;
/** ID of the included field. It has to be the same for proper working. */
fieldId: string;
/** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
* If only one field is included, its ID attribute and this prop must be the same.
*/
fieldId?: string;
/** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
* radio inputs, or pass in "group" when the form group contains multiple of any other input type.
*/
Expand Down Expand Up @@ -120,38 +123,46 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
);

return (
<div
className={css(styles.formGroup, className)}
{...(role && { role })}
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
{...props}
>
{label && (
<GenerateId>
{randomId => (
<div
className={css(
styles.formGroupLabel,
labelInfo && styles.modifiers.info,
hasNoPaddingTop && styles.modifiers.noPaddingTop
)}
{...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
className={css(styles.formGroup, className)}
{...(role && { role })}
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
{...props}
>
{labelInfo && (
<React.Fragment>
<div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
<div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
</React.Fragment>
{label && (
<div
className={css(
styles.formGroupLabel,
labelInfo && styles.modifiers.info,
hasNoPaddingTop && styles.modifiers.noPaddingTop
)}
{...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
>
{labelInfo && (
<React.Fragment>
<div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
<div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
</React.Fragment>
)}
{!labelInfo && labelContent}
</div>
)}
{!labelInfo && labelContent}
<div
className={css(
styles.formGroupControl,
isInline && styles.modifiers.inline,
isStack && styles.modifiers.stack
)}
>
{isHelperTextBeforeField && helperTextToDisplay}
{children}
{!isHelperTextBeforeField && helperTextToDisplay}
</div>
</div>
)}
<div
className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
>
{isHelperTextBeforeField && helperTextToDisplay}
{children}
{!isHelperTextBeforeField && helperTextToDisplay}
</div>
</div>
</GenerateId>
);
};
FormGroup.displayName = 'FormGroup';
Loading