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 - +   
- +   
- +   
- +   
- +   
- +   
- +   
{ const [name, setName] = React.useState(''); @@ -36,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
@@ -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..3d728b8508c 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(''); @@ -23,7 +22,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => { @@ -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..b5dc906b3f5 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(''); @@ -36,7 +35,7 @@ export const FormLimitWidth: React.FunctionComponent = () => { @@ -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'; diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap index c5cae3fa4db..98fdef1d281 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap +++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap @@ -28,7 +28,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = ` * - +   
- +   
- +   
- +   
- +   
- +   
{ 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/components/Radio/Radio.tsx b/packages/react-core/src/components/Radio/Radio.tsx index e2414707b8d..001a55ca063 100644 --- a/packages/react-core/src/components/Radio/Radio.tsx +++ b/packages/react-core/src/components/Radio/Radio.tsx @@ -17,8 +17,6 @@ export interface RadioProps id: string; /** Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified. */ isLabelWrapped?: boolean; - /** Flag to show if the radio label is shown before the radio input. */ - isLabelBeforeButton?: boolean; /** Flag to show if the radio is checked. */ checked?: boolean; /** Flag to show if the radio is checked. */ @@ -29,6 +27,8 @@ export interface RadioProps isValid?: boolean; /** Label text of the radio. */ label?: React.ReactNode; + /** Sets the position of the label. Defaults to 'end' (after the radio input). */ + labelPosition?: 'start' | 'end'; /** Name for group of radios */ name: string; /** A callback for when the radio selection changes. */ @@ -79,7 +79,7 @@ class Radio extends React.Component { inputClassName, defaultChecked, isLabelWrapped, - isLabelBeforeButton, + labelPosition = 'end', isChecked, isDisabled, isValid, @@ -132,7 +132,7 @@ class Radio extends React.Component { className={css(styles.radio, !label && styles.modifiers.standalone, className)} htmlFor={wrapWithLabel ? props.id : undefined} > - {isLabelBeforeButton ? ( + {labelPosition === 'start' ? ( <> {labelRendered} {inputRendered} diff --git a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx index 63928ece1cf..df31b91493e 100644 --- a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx +++ b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx @@ -25,9 +25,9 @@ describe('Radio', () => { expect(asFragment()).toMatchSnapshot(); }); - test('isLabelBeforeButton', () => { + test('labelPosition is "start"', () => { const { asFragment } = render( - + ); expect(asFragment()).toMatchSnapshot(); }); @@ -133,8 +133,8 @@ describe('Radio', () => { expect(screen.getByText(labelText).tagName).toBe('SPAN'); }); - test('Renders label before radio input if isLabelBeforeButton is provided', () => { - render(); + test('Renders label before radio input if labelPosition is "start"', () => { + render(); const wrapper = screen.getByRole('radio').parentElement!; diff --git a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap index a2680f1fa7d..15b809d3c31 100644 --- a/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap +++ b/packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap @@ -42,31 +42,6 @@ exports[`Radio isDisabled 1`] = ` `; -exports[`Radio isLabelBeforeButton 1`] = ` - -
- - -
-
-`; - exports[`Radio isLabelWrapped 1`] = `