feat(Checkbox/Radio): replace isLabelBeforeButton flag with labelPosition "start" / "end"

Author: adamviktora

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 <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
   isLabelWrapped?: boolean;
-  /** Flag to show if the checkbox label is shown before the checkbox input. */
-  isLabelBeforeButton?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -31,6 +29,8 @@ export interface CheckboxProps
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
+  /** Sets the position of the label. Defaults to 'end' (after the checkbox input). */
+  labelPosition?: 'start' | 'end';
   /** Id of the checkbox. */
   id: string;
   /** Aria-label of the checkbox. */
@@ -85,7 +85,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       inputClassName,
       onChange,
       isLabelWrapped,
-      isLabelBeforeButton,
+      labelPosition = 'end',
       isValid,
       isDisabled,
       isRequired,
@@ -156,7 +156,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         className={css(styles.check, !label && styles.modifiers.standalone, className)}
         htmlFor={wrapWithLabel && props.id}
       >
-        {isLabelBeforeButton ? (
+        {labelPosition === 'start' ? (
           <>
             {labelRendered}
             {inputRendered}

packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -263,8 +263,8 @@ test('Renders with span element around the inner label text if component is set
   expect(screen.getByText(labelText).tagName).toBe('SPAN');
 });
 
-test('Renders label before checkbox input if isLabelBeforeButton is provided', () => {
-  render(<Checkbox id="test-id" isLabelBeforeButton label={'test checkbox label'} />);
+test('Renders label before checkbox input if labelPosition is "start"', () => {
+  render(<Checkbox id="test-id" labelPosition="start" label={'test checkbox label'} />);
 
   const wrapper = screen.getByRole('checkbox').parentElement!;
 

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<RadioProps, { ouiaStateId: string }> {
       inputClassName,
       defaultChecked,
       isLabelWrapped,
-      isLabelBeforeButton,
+      labelPosition = 'end',
       isChecked,
       isDisabled,
       isValid,
@@ -132,7 +132,7 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
         className={css(styles.radio, !label && styles.modifiers.standalone, className)}
         htmlFor={wrapWithLabel && props.id}
       >
-        {isLabelBeforeButton ? (
+        {labelPosition === 'start' ? (
           <>
             {labelRendered}
             {inputRendered}

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(
-      <Radio id="check" isLabelBeforeButton label="Radio label" aria-label="check" name="check" />
+      <Radio id="check" labelPosition="start" label="Radio label" aria-label="check" name="check" />
     );
     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(<Radio id="test-id" name="check" isLabelBeforeButton label={'test radio label'} />);
+  test('Renders label before radio input if labelPosition is "start"', () => {
+    render(<Radio id="test-id" name="check" labelPosition="start" label={'test radio label'} />);
 
     const wrapper = screen.getByRole('radio').parentElement!;
 

packages/react-core/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap

@@ -42,31 +42,6 @@ exports[`Radio isDisabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio isLabelBeforeButton 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-radio"
-  >
-    <label
-      class="pf-v5-c-radio__label"
-      for="check"
-    >
-      Radio label
-    </label>
-    <input
-      aria-invalid="false"
-      class="pf-v5-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-4"
-      data-ouia-component-type="PF5/Radio"
-      data-ouia-safe="true"
-      id="check"
-      name="check"
-      type="radio"
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Radio isLabelWrapped 1`] = `
 <DocumentFragment>
   <label
@@ -174,6 +149,31 @@ exports[`Radio label is string 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Radio labelPosition is "start" 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-radio"
+  >
+    <label
+      class="pf-v5-c-radio__label"
+      for="check"
+    >
+      Radio label
+    </label>
+    <input
+      aria-invalid="false"
+      class="pf-v5-c-radio__input"
+      data-ouia-component-id="OUIA-Generated-Radio-4"
+      data-ouia-component-type="PF5/Radio"
+      data-ouia-safe="true"
+      id="check"
+      name="check"
+      type="radio"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Radio passing HTML attribute 1`] = `
 <DocumentFragment>
   <div

packages/react-core/src/components/Radio/examples/RadioReversed.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Radio } from '@patternfly/react-core';
 
 export const RadioReversed: React.FunctionComponent = () => (
-  <Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+  <Radio labelPosition="start" label="Reversed radio example" id="radio-reversed" name="radio-3" />
 );