@patternfly/react-core 6.0.0-alpha.44 → 6.0.0-alpha.46

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.43","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.45","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.43","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.45","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.43","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.45","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.44",
+  "version": "6.0.0-alpha.46",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "3214a349e6c5cced83a174611ce316a2c93b6d57"
+  "gitHead": "c3f0ac633b7bca82d53f146a0844cdef0851096b"
 }

package/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 : undefined}
       >
-        {isLabelBeforeButton ? (
+        {labelPosition === 'start' ? (
           <>
             {labelRendered}
             {inputRendered}

package/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!;
 

package/src/components/DataList/examples/DataList.md

@@ -23,6 +23,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 ## Examples
 
@@ -86,7 +87,7 @@ Note: There is a new recommended drag and drop implementation with full keyboard
 
 Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
-```ts isBeta file="./DataListDraggable.tsx"
+```ts isDeprecated file="./DataListDraggable.tsx"
 
 ```
 

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -8,11 +8,9 @@ import {
   DataListControl,
   DataListDragButton,
   DataListItemCells,
-  DragDrop,
-  Draggable,
-  Droppable,
   getUniqueId
 } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 interface ItemType {
   id: string;

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -22,6 +22,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 ## Examples
 
@@ -103,7 +104,7 @@ This example only allows reordering the contents of the "chosen" pane with drag
 
 Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
-```ts file="DualListSelectorComposableDragDrop.tsx"
+```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"
 
 ```
 

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import {
-  DragDrop,
-  Droppable,
-  Draggable,
   DualListSelector,
   DualListSelectorPane,
   DualListSelectorList,
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-  DraggableItemPosition
+  DualListSelectorControl
 } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable, DraggableItemPosition } from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';

package/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 */
+  /** The id applied to the title div for accessibility */
   id: string;
 }
 
-export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {}
-
 export interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;

package/src/components/Form/FormGroup.tsx

@@ -13,8 +13,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, '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  */
-  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<FormGroupProps> = ({
   className = '',
   label,
   labelInfo,
-  labelIcon,
+  labelHelp,
   isRequired = false,
   isInline = false,
   hasNoPaddingTop = false,
@@ -51,7 +51,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
   const labelContent = (
-    <React.Fragment>
+    <>
       <LabelComponent className={css(styles.formLabel)} {...(!isGroupOrRadioGroup && { htmlFor: fieldId })}>
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
@@ -60,9 +60,10 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
             {ASTERISK}
           </span>
         )}
-      </LabelComponent>{' '}
-      {React.isValidElement(labelIcon) && labelIcon}
-    </React.Fragment>
+      </LabelComponent>
+      <>&nbsp;&nbsp;</>
+      {React.isValidElement(labelHelp) && <span className={styles.formGroupLabelHelp}>{labelHelp}</span>}
+    </>
   );
 
   return (

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button, ButtonProps } from '../Button';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+
+/** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
+ * to our Popover component.
+ */
+export interface FormGroupLabelHelpProps extends ButtonProps {
+  /** Adds an accessible name for the help button. */
+  'aria-label': string;
+  /** Additional classes added to the help button. */
+  className?: string;
+}
+
+export const FormGroupLabelHelp: React.FunctionComponent<FormGroupLabelHelpProps> = ({
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}) => (
+  <Button aria-label={ariaLabel} className={className} variant="plain" hasNoPadding {...props}>
+    <QuestionCircleIcon />
+  </Button>
+);
+FormGroupLabelHelp.displayName = 'FormGroupLabelHelp';

package/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
           </div>
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -55,7 +55,7 @@ exports[`FormGroup should render default form group variant 1`] = `
           label
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -88,7 +88,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
           </h1>
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -125,7 +125,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
            *
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -177,7 +177,7 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
             </h1>
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-label-info"
@@ -218,7 +218,7 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
             label
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -254,7 +254,7 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
             label
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control pf-m-stack"

package/src/components/Form/examples/Form.md

@@ -8,6 +8,7 @@ propComponents:
     'ActionGroup',
     'Form',
     'FormGroup',
+    'FormGroupLabelHelp',
     'FormSection',
     'FormHelperText',
     'FormFieldGroup',
@@ -21,22 +22,6 @@ propComponents:
   ]
 ---
 
-import {
-Button,
-Form,
-FormGroup,
-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';

package/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('');
@@ -36,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -64,15 +63,7 @@ export const FormBasic: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="simple-form-name-01"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/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 = () => {
       <FormGroup
         label="Full name"
         labelInfo="Additional label info"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -51,15 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="form-group-label-info"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/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 = () => {
     <Form isWidthLimited>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -64,15 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="simple-form-name-02"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/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';

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -72,7 +72,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -175,7 +175,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -219,7 +219,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -330,7 +330,7 @@ exports[`LoginForm should render Login form 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -374,7 +374,7 @@ exports[`LoginForm should render Login form 1`] = `
              *
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"

package/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 = () => {
         <Form id="modal-with-form-form">
           <FormGroup
             label="Name"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -75,15 +82,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <button
-                  type="button"
-                  aria-label="More info for name field"
-                  onClick={(e) => e.preventDefault()}
-                  aria-describedby="modal-with-form-form-name"
-                  className={formStyles.formGroupLabelHelp}
-                >
-                  <HelpIcon />
-                </button>
+                <FormGroupLabelHelp aria-label="More info for name field" />
               </Popover>
             }
             isRequired
@@ -100,7 +99,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
           </FormGroup>
           <FormGroup
             label="E-mail"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -124,15 +123,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <button
-                  type="button"
-                  aria-label="More info for e-mail field"
-                  onClick={(e) => e.preventDefault()}
-                  aria-describedby="modal-with-form-form-email"
-                  className={formStyles.formGroupLabelHelp}
-                >
-                  <HelpIcon />
-                </button>
+                <FormGroupLabelHelp aria-label="More info for e-mail field" />
               </Popover>
             }
             isRequired
@@ -149,7 +140,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
           </FormGroup>
           <FormGroup
             label="Address"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -172,15 +163,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <button
-                  type="button"
-                  aria-label="More info for address field"
-                  onClick={(e) => e.preventDefault()}
-                  aria-describedby="modal-with-form-form-address"
-                  className={formStyles.formGroupLabelHelp}
-                >
-                  <HelpIcon />
-                </button>
+                <FormGroupLabelHelp aria-label="More info for address field" />
               </Popover>
             }
             isRequired

package/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 : undefined}
       >
-        {isLabelBeforeButton ? (
+        {labelPosition === 'start' ? (
           <>
             {labelRendered}
             {inputRendered}

package/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!;