Upgrade to PatternFly 6

PatternFly 6 React breaking changes

This resource organizes the PatternFly 5 to PatternFly 6 change log in a table that allows for searching, filtering, and sorting. Note that this table does not contain a completely comprehensive list of changes, as it does not include information about dependency bumps and documentation updates.

Comprehensive PatternFly 6 release notes can be found on GitHub, in @patternfly/patternfly and @patternfly/react-core.

A summary of the changes from PatternFly 6 can be found in our release highlights.

DescriptionPR link
Accordion contentReactThe `isHidden` prop has been removed from AccordionContent, as its visibility will now be set automatically based on the `isExpanded` prop on AccordionItem.#9876Yes

Codemods will make the following updates:

Example in

import { AccordionContent } from "@patternfly/react-core";

export const AccordionContentRemoveIsHiddenPropInput = () => (
  <AccordionContent isHidden />
);

Example out

import { AccordionContent } from "@patternfly/react-core";

export const AccordionContentRemoveIsHiddenPropInput = () => (
  <AccordionContent  />
);
Accordion itemReactThe markup for AccordionItem has been updated, and it now renders a `div` element as a wrapper.#9876No
Accordion toggleReactThe `isExpanded` prop for AccordionToggle has been moved to AccordionItem.#9876Yes

Codemods will make the following updates:

Example in

import { AccordionItem, AccordionToggle } from "@patternfly/react-core";

export const AccordionToggleMoveIsExpandedPropInput = () => (
  <AccordionItem>
    <AccordionToggle isExpanded />
  </AccordionItem>
);

Example out

import { AccordionItem, AccordionToggle } from "@patternfly/react-core";

export const AccordionToggleMoveIsExpandedPropInput = () => (
  <AccordionItem isExpanded>
    <AccordionToggle  />
  </AccordionItem>
);
AllReactCodemods will remove `data-codemods` attributes and comments, which were introduced by our codemods in order to work correctly.You should run this codemod only once, after you finish running the codemods.This codemod can only run using the `--only data-codemods-cleanup` option.
    Yes

    Codemods will make the following updates:

    Example in

    import {
      DualListSelector /* data-codemods */,
      LoginMainFooterLinksItem,
      MastheadLogo,
    } from "@patternfly/react-core";
    
    export const DataCodemodsCleanupInput = () => (
      <>
        <DualListSelector />
        <LoginMainFooterLinksItem data-codemods="true" />
        <MastheadLogo data-codemods />
      </>
    );

    Example out

    import {
      DualListSelector ,
      LoginMainFooterLinksItem,
      MastheadLogo,
    } from "@patternfly/react-core";
    
    export const DataCodemodsCleanupInput = () => (
      <>
        <DualListSelector />
        <LoginMainFooterLinksItem  />
        <MastheadLogo  />
      </>
    );
    AvatarReactThe `border` prop has been removed from Avatar since theming is not longer handled React-side. We recommend using the `isBordered` prop instead to add a border to Avatar.#9881Yes

    Codemods will make the following updates:

    Example in

    import { Avatar } from '@patternfly/react-core';
    
    export const AvatarReplaceBorderForIsBorderedInput = () => (
      <Avatar border={'dark'} />
    );

    Example out

    import { Avatar } from '@patternfly/react-core';
    
    export const AvatarReplaceBorderForIsBorderedInput = () => (
      <Avatar isBordered />
    );
    BannerReactThe `variant` property has been removed from Banner. We recommend using our new `color` or `status` properties, depending on the original intent of the `variant` property. Codemods will either replace the `variant` property with the `color` property, or remove the `variant` property entirely, but additional updates may need to be made.#9891Yes

    Codemods will make the following updates:

    Example in

    import { Banner } from "@patternfly/react-core";
    
    export const BannerReplaceVariantPropInput = () => (
      <>
        <Banner variant='default' />
        <Banner variant='red' />
      </>
    );

    Example out

    import { Banner } from "@patternfly/react-core";
    
    export const BannerReplaceVariantPropInput = () => (
      <>
        <Banner  />
        <Banner color='red' />
      </>
    );
    ButtonReactIcons must now be passed to the `icon` prop of Button instead of as children. Codemods will only update instances of a Button with `variant="plain"` passed in, but you must ensure you are only passing an icon in such instances before running the fix.#10663Yes

    Codemods will make the following updates:

    Example in

    import { Button, Icon } from "@patternfly/react-core";
    import { SomeIcon } from "@patternfly/react-icons";
    
    export const ButtonMoveIconsIconPropInput = () => (
      <>
        <Button variant="plain">
          <span>Icon</span>
        </Button>
        <Button>
          <Icon>
            <SomeIcon />
          </Icon>
        </Button>
        <Button>
          <SomeIcon />
        </Button>
      </>
    );

    Example out

    import { Button, Icon } from "@patternfly/react-core";
    import { SomeIcon } from "@patternfly/react-icons";
    
    export const ButtonMoveIconsIconPropInput = () => (
      <>
        <Button icon={<span>Icon</span>} variant="plain"></Button>
        <Button icon={<Icon>
            <SomeIcon />
          </Icon>}>
          
        </Button>
        <Button icon={<SomeIcon />}>
          
        </Button>
      </>
    );
    ButtonReactisActive prop for Button has been renamed to isClicked#9934Yes

    Codemods will make the following updates:

    Example in

    import { Button } from "@patternfly/react-core";
    
    export const ButtonRenameIsActiveInput = () => <Button isActive />;

    Example out

    import { Button } from "@patternfly/react-core";
    
    export const ButtonRenameIsActiveInput = () => <Button isClicked />;
    CardReactProps related to raised or clickable cards have been removed.#10056Yes

    The following props have been removed:

    • isSelectableRaised
    • isDisabledRaised
    • hasSelectableInput
    • selectableInputAriaLabel
    • onSelectableInputChange
    • isFlat
    • isRounded

    Codemods will make the following updates:

    Example in

    import { Card } from "@patternfly/react-core";
    
    export const CardRemoveVariousPropsInput = () => (
      <Card
        isSelectableRaised
        isDisabledRaised
        hasSelectableInput
        selectableInputAriaLabel="aria label"
        onSelectableInputChange={() => {}}
      />
    );

    Example out

    import { Card } from "@patternfly/react-core";
    
    export const CardRemoveVariousPropsInput = () => (
      <Card
      />
    );
    CardReactThe markup for clickable-only cards has been updated. Additionally, the `selectableActions.selectableActionId` and `selectableActions.name` props are no longer necessary to pass to CardHeader for clickable-only cards. Passing them in will not cause any errors, but running codemods will remove them.#10859Yes

    Codemods will make the following updates:

    Example in

    import { Card, CardHeader } from "@patternfly/react-core";
    
    export const CardUpdatedClickableMarkupInput = () => {
      const selectableActionsObj = { name: "Test2", selectableActionId: "Id2" };
      const selectableActionsObjMany = {
        to: "#",
        name: "Test2",
        selectableActionProps: {},
        selectableActionId: "Id2",
      };
    
      return (
        <>
          <Card isClickable>
            <CardHeader
              selectableActions={{
                to: "#",
                name: "Test",
                selectableActionId: () => {},
              }}
            />
          </Card>
          <Card isClickable>
            <CardHeader selectableActions={selectableActionsObj} />
          </Card>
          <Card isClickable>
            <CardHeader selectableActions={selectableActionsObjMany} />
          </Card>
        </>
      );
    };

    Example out

    import { Card, CardHeader } from "@patternfly/react-core";
    
    export const CardUpdatedClickableMarkupInput = () => {
      const selectableActionsObj = {};
      const selectableActionsObjMany = {to: "#", selectableActionProps: {}};
    
      return (
        <>
          <Card isClickable>
            <CardHeader
              selectableActions={{to: "#"}}
            />
          </Card>
          <Card isClickable>
            <CardHeader selectableActions={selectableActionsObj} />
          </Card>
          <Card isClickable>
            <CardHeader selectableActions={selectableActionsObjMany} />
          </Card>
        </>
      );
    };
    CheckboxReactThe `isLabelBeforeButton` prop in Checkbox and Radio has been replaced with `labelPosition="start"`#10016Yes

    Codemods will make the following updates:

    Example in

    import { Checkbox, Radio } from "@patternfly/react-core";
    
    export const CheckboxReplaceIsLabelBeforeButtonInput = () => (
      <Checkbox isLabelBeforeButton />
    );
    export const RadioReplaceIsLabelBeforeButtonInput = () => (
      <Radio isLabelBeforeButton />
    );

    Example out

    import { Checkbox, Radio } from "@patternfly/react-core";
    
    export const CheckboxReplaceIsLabelBeforeButtonInput = () => (
      <Checkbox labelPosition="start" />
    );
    export const RadioReplaceIsLabelBeforeButtonInput = () => (
      <Radio labelPosition="start" />
    );
    ChipReactChip has been deprecated. Running the fix flag will update your imports to our deprecated package, but we suggest using Label instead.#10049Yes

    Codemods will make the following updates:

    Example in

    import { Chip } from '@patternfly/react-core';

    Example out

    import { Chip } from '@patternfly/react-core/deprecated';
    ChipReactChip has been deprecated. Running the fix flag will replace Chip and ChipGroup components with Label and LabelGroup components respectively.#10049Yes

    Codemods will make the following updates:

    Example in

    import { Chip } from '@patternfly/react-core/deprecated';
    
    export const ChipReplaceWithLabelInput = () => (
      <Chip onClick={handleClick} badge={badge}>
        This is a chip
      </Chip>
    );

    Example out

    import { Label } from '@patternfly/react-core';
    
    export const ChipReplaceWithLabelInput = () => (
      <Label variant="outline" onClose={handleClick}>
        This is a chip
        {badge}
      </Label>
    );
    Color propsReactThe `color` prop on Banner and Label has been updated to replace "cyan" with "teal" and "gold" with "yellow".#10661Yes

    Codemods will make the following updates:

    Example in

    import { Banner, Label } from "@patternfly/react-core";
    
    export const ColorPropsReplacedColorsInput = () => (
      <>
        <Banner color='gold' />
        <Banner color='cyan' />
        <Label color='gold' />
        <Label color='cyan' />
      </>
    );

    Example out

    import { Banner, Label } from "@patternfly/react-core";
    
    export const ColorPropsReplacedColorsInput = () => (
      <>
        <Banner color="yellow" />
        <Banner color="teal" />
        <Label color="yellow" />
        <Label color="teal" />
      </>
    );
    Content headerReact-component-groupsIn react-component-groups, we've renamed ContentHeader component to PageHeader#313Yes

    Codemods will make the following updates:

    Example in

    import { ContentHeader } from "@patternfly/react-component-groups";
    export const ComponentGroupsContentHeaderRenameToPageHeaderInput = () => (
      <ContentHeader />
    );

    Example out

    import { PageHeader } from "@patternfly/react-component-groups";
    export const ComponentGroupsContentHeaderRenameToPageHeaderInput = () => (
      <PageHeader data-codemods />
    );
    Data list actionReactThe `isPlainButtonAction` prop has been removed from DataListAction as a wrapper is no longer needed.#10939Yes

    Codemods will make the following updates:

    Example in

    import { DataListAction } from "@patternfly/react-core";
    export const DataListActionRemoveIsPlainButtonActionPropInput = () => (
      <DataListAction isPlainButtonAction/>
    );

    Example out

    import { DataListAction } from "@patternfly/react-core";
    export const DataListActionRemoveIsPlainButtonActionPropInput = () => (
      <DataListAction />
    );
    Deprecated componentsReactSome deprecated components have been removed from PatternFly#10345No

    The following components have been removed and must be deprecated accordingly:

    • Application Launcher: we recommmend using ourcustom menu application launcher example
    • Context Selector: we recommmend using ourcustom menu context selector example
    • Dropdown: we recommend using either our current composable Dropdown or our Dropdown template implementation
    • Options Menu: we recommend using either our current composable Select or our Select template implementation
    • Page Header: we recommend using our Masthead and Toolbar components to build a page header
    • Select: we recommend using either our current composable Select or our Select template implementation.
    Drag dropReactDragDrop has been deprecated. Running the fix flag will update your imports to our deprecated package, but we suggest using our new drag and drop implementation (DragDropSort component), that lives in '@patternfly/react-drag-drop' package.#10181Yes

    Codemods will make the following updates:

    Example in

    import { DragDrop, Droppable, Draggable } from '@patternfly/react-core';
    
    export const DragDropDeprecatedInput = () => (
      <DragDrop onDrop={onDrop}>
        <Droppable>
          <Draggable key={1}>Item 1</Draggable>
          <Draggable key={2}>Item 2</Draggable>
        </Droppable>
      </DragDrop>
    );

    Example out

    import {
      DragDrop,
      Droppable,
      Draggable,
    } from '@patternfly/react-core/deprecated';
    
    export const DragDropDeprecatedInput = () => (
      <DragDrop onDrop={onDrop}>
        <Droppable>
          <Draggable key={1}>Item 1</Draggable>
          <Draggable key={2}>Item 2</Draggable>
        </Droppable>
      </DragDrop>
    );
    DrawerReactThe `hasNoPadding` prop has been removed from DrawerHead.#10036Yes

    Codemods will make the following updates:

    Example in

    import { DrawerHead } from "@patternfly/react-core";
    
    export const DrawerRemovePropsInput = () => <DrawerHead hasNoPadding />;

    Example out

    import { DrawerHead } from "@patternfly/react-core";
    
    export const DrawerRemovePropsInput = () => <DrawerHead  />;
    DrawerReactThe "light-200" value for the `colorVariant` prop has been replaced with the "secondary" value for DrawerContent, DrawerPanelContent, and DrawerSection components.Additionally, the `light200` property for the DrawerColorVariant enum has been replaced with the `secondary` property.#10017Yes

    Codemods will make the following updates:

    Example in

    import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core";
    
    export const DrawerReplaceColorVariantLight200Input = () => (
      <>
        <DrawerContent colorVariant='light-200' />
        <DrawerContent colorVariant={DrawerColorVariant.light200} />
      </>
    );

    Example out

    import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core";
    
    export const DrawerReplaceColorVariantLight200Input = () => (
      <>
        <DrawerContent colorVariant="secondary" />
        <DrawerContent colorVariant={DrawerColorVariant.secondary} />
      </>
    );
    Drawer contentReactThe "no-background" value of the `colorVariant` prop on DrawerContent has been removed, and a new "primary" value has been added.Additionally, a new DrawerContentColorVariant enum has been added and should be used instead of the DrawerColorVariant enum. The fix when the DrawerColorVariant enum is being used will replace the `colorVariant` prop value with a string.#10211Yes

    Codemods will make the following updates:

    Example in

    import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core";
    
    export const DrawerContentReplaceNoBackgroundColorVariantInput = () => {
      const stringColor = "no-background";
      const enumColor = DrawerColorVariant.default;
    
      return (
        <>
          <DrawerContent colorVariant='no-background' />
          <DrawerContent colorVariant={DrawerColorVariant.default} />
          <DrawerContent colorVariant={stringColor} />
          <DrawerContent colorVariant={enumColor} />
        </>
      );
    };

    Example out

    import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core";
    
    export const DrawerContentReplaceNoBackgroundColorVariantInput = () => {
      const stringColor = "no-background";
      const enumColor = DrawerColorVariant.default;
    
      return (
        <>
          <DrawerContent  />
          <DrawerContent colorVariant="default" />
          <DrawerContent  />
          <DrawerContent colorVariant="default" />
        </>
      );
    };
    Drawer headReactDrawerPanelBody is no longer rendered internally to DrawerHead. We recommend using these components independent of one another and to not pass DrawerPanelBody to DrawerHead.#10036No
    Dual list selectorReactOur previous implementation of DualListSelector has been deprecated. Codemods will update import paths to our deprecated directory, but we recommend using our newly promoted implementation.#10359Yes

    Codemods will make the following updates:

    Example in

    import { DualListSelector } from "@patternfly/react-core";

    Example out

    import {
    	DualListSelector
    } from '@patternfly/react-core/deprecated';
    Dual list selector nextReactOur Next implementation of DualListSelector has been promoted as our recommended implementation. Codemods will update import paths.#10359Yes

    Codemods will make the following updates:

    Example in

    import { DualListSelector } from "@patternfly/react-core/next";

    Example out

    import {
    	DualListSelector /* data-codemods */
    } from '@patternfly/react-core';
    Duplicate importsReactDuplicate import specifiers should be removed. This is a cleanup codemod which runs after other codemods.
      Yes

      Codemods will make the following updates:

      Example in

      import { Button, Button } from "@patternfly/react-core";
      
      export const NoDuplicateImportSpecifiersInput = () => (
        <Button>Sample button</Button>
      );

      Example out

      import { Button } from "@patternfly/react-core";
      
      export const NoDuplicateImportSpecifiersInput = () => (
        <Button>Sample button</Button>
      );
      Empty stateReactEmptyStateHeader and EmptyStateIcon are no longer exported by PatternFly. Codemods will apply fixes for exports of these components.#10364Yes

      Codemods will make the following updates:

      Example in

      import { EmptyStateHeader, EmptyStateIcon } from "@patternfly/react-core";
      
      export { EmptyStateHeader, EmptyStateIcon };
      export {
        EmptyStateHeader as CustomESHeader,
        EmptyStateIcon as CustomESIcon,
      } from "@patternfly/react-core";

      Example out

      import { EmptyStateHeader, EmptyStateIcon } from "@patternfly/react-core";
      Empty state headerReactEmptyStateHeader and EmptyStateIcon are now rendered internally within EmptyState and should only be customized using props. Content passed to the `icon` prop on EmptyState will also be wrapped by EmptyStateIcon automatically.#9947Yes

      Codemods will make the following updates:

      Example in

      import {
        EmptyState,
        EmptyStateBody,
        EmptyStateHeader,
        EmptyStateIcon,
        CubesIcon,
        Title,
      } from "@patternfly/react-core";
      
      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
        <EmptyState>
          <EmptyStateHeader
            titleText="Empty state"
            headingLevel="h4"
            icon={<EmptyStateIcon icon={CubesIcon} />}
          />
        </EmptyState>
      );
      
      export const EmptyStateWithoutHeaderMoveIntoEmptyStateInput = () => (
        <EmptyState>
          <Title headingLevel="h4" size="lg">
            Foo
          </Title>
          <EmptyStateIcon icon={CubesIcon} />
          <EmptyStateBody>Body</EmptyStateBody>
        </EmptyState>
      
      );
      
      export const EmptyStateHeaderWithoutTitleTextMoveIntoEmptyStateInput = () => (
        <EmptyState>
          <EmptyStateHeader
            className="some-class"
            icon={<EmptyStateIcon icon={CubesIcon} />}
          />
        </EmptyState>
      );
      
      export const EmptyStateWithoutHeaderAndTitleTextMoveIntoEmptyStateInput =
        () => (
          <EmptyState>
            <EmptyStateIcon icon={CubesIcon} />
            <EmptyStateBody>Body</EmptyStateBody>
          </EmptyState>
        );
      

      Example out

      import {
        EmptyState,
        EmptyStateBody,
        EmptyStateHeader,
        EmptyStateIcon,
        CubesIcon,
        Title,
      } from "@patternfly/react-core";
      
      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
        <EmptyState  headingLevel="h4" icon={CubesIcon}  titleText="Empty state">
          </EmptyState>
      );
      
      export const EmptyStateWithoutHeaderMoveIntoEmptyStateInput = () => (
        <EmptyState titleText={<Title headingLevel="h4" size="lg">
            Foo
          </Title>} icon={CubesIcon}>
          <EmptyStateBody>Body</EmptyStateBody>
        </EmptyState>
      );
      
      export const EmptyStateHeaderWithoutTitleTextMoveIntoEmptyStateInput = () => (
        <EmptyState headerClassName="some-class"  icon={CubesIcon}  >
          </EmptyState>
      );
      
      export const EmptyStateWithoutHeaderAndTitleTextMoveIntoEmptyStateInput =
        () => (
          <EmptyState icon={CubesIcon}>
            <EmptyStateBody>Body</EmptyStateBody>
          </EmptyState>
        );
      
      Error stateReact-component-groupsIn react-component-groups, we've renamed some ErrorState props to comply with its base component, EmptyState.#145Yes

      Codemods will make the following updates:

      Example in

      import { ErrorState } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsErrorStateRenamePropsInput = () => (
        <ErrorState
          errorTitle="Sample error title"
          errorDescription="Sample error description"
          defaultErrorDescription="Sample default error description"
        />
      );

      Example out

      import { ErrorState } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsErrorStateRenamePropsInput = () => (
        <ErrorState
          titleText="Sample error title"
          bodyText="Sample error description"
          defaultBodyText="Sample default error description"
        />
      );
      Form filed group header title text objectReactThere was a typo in FormFiledGroupHeaderTitleTextObject interface. It was renamed to the intended FormFieldGroupHeaderTitleTextObject.#10016Yes

      Codemods will make the following updates:

      Example in

      import { FormFiledGroupHeaderTitleTextObject } from "@patternfly/react-core";
      export { FormFiledGroupHeaderTitleTextObject as HeaderTitleObject } from "@patternfly/react-core";
      
      interface MyExtension extends FormFiledGroupHeaderTitleTextObject {}
      
      const titleTextObject: FormFiledGroupHeaderTitleTextObject = {
        text: "Some title",
        id: "form-field-group-header-title-text",
      };

      Example out

      import { FormFieldGroupHeaderTitleTextObject } from "@patternfly/react-core";
      export { FormFieldGroupHeaderTitleTextObject as HeaderTitleObject } from "@patternfly/react-core";
      
      interface MyExtension extends FormFieldGroupHeaderTitleTextObject {}
      
      const titleTextObject: FormFieldGroupHeaderTitleTextObject = {
        text: "Some title",
        id: "form-field-group-header-title-text",
      };
      Form groupReactThe `labelIcon` prop for FormGroup has been renamed to `labelHelp`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in `<span className="pf-v6-c-form__group-label-help">`, so there is no need to add `className="pf-v6-c-form__group-label-help"` to the labelHelp element.#10016Yes

      Codemods will make the following updates:

      Example in

      import { FormGroup } from "@patternfly/react-core";
      
      export const FormGroupRenameLabelIconInput = () => (
        <FormGroup labelIcon={<>Help icon</>} />
      );

      Example out

      import { FormGroup } from "@patternfly/react-core";
      
      export const FormGroupRenameLabelIconInput = () => (
        <FormGroup labelHelp={<>Help icon</>} />
      );
      Helper text itemReactThe `hasIcon` and `isDynamic` props have been removed from HelperTextItem. An icon will now render automatically when the `variant` prop has a value other than "default" or when the `icon` prop is passed in.#10029Yes

      Codemods will make the following updates:

      Example in

      import { HelperTextItem } from "@patternfly/react-core";
      
      export const HelperTextItemRemovePropsInput = () => (
        <HelperTextItem hasIcon isDynamic />
      );

      Example out

      import { HelperTextItem } from "@patternfly/react-core";
      
      export const HelperTextItemRemovePropsInput = () => (
        <HelperTextItem   />
      );
      Helper text itemReactThe `screenReaderText` prop on HelperTextItem has been updated, and will now render only when the `variant` prop has a value other than "default". Previously the prop was rendered only when the `isDynamic` prop was true.#10029No
      Invalid objectReact-component-groupsIn react-component-groups, we've renamed InvalidObject's props `invalidObjectTitleText` to `titleText` and `invalidObjectBodyText` to `bodyText`.#145Yes

      Codemods will make the following updates:

      Example in

      import { InvalidObject } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsInvalidObjectRenamePropsInput = () => (
        <InvalidObject
          invalidObjectTitleText="Sample title"
          invalidObjectBodyText="Sample description"
        />
      );

      Example out

      import { InvalidObject } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsInvalidObjectRenamePropsInput = () => (
        <InvalidObject
          titleText="Sample title"
          bodyText="Sample description"
        />
      );
      Jump links itemReactThe `href` prop on JumpLinksItem is now required.#10027No
      Jump links itemReactThe markup for JumpLinksItem has changed, as it now uses our Button component internally. Additionally, the `onClick` prop type has been updated to just `React.MouseEvent` (previously `React.MouseEvent<HTMLAnchorElement>`).#10027No
      Kebab toggleReactKebabToggle has been removed from PatternFly. We recommend using our MenuToggle component instead. Codemods will replace most KebabToggle usage with a MenuToggle. Depending on the use-case, however, additional manual updates may be necessary, such as upgrading from our deprecated Dropdown implementation to our current one.#10345Yes

      Codemods will make the following updates:

      Example in

      import { KebabToggle } from "@patternfly/react-core/deprecated";
      
      export const KebabToggleRemovedInput = () => (
        <>
          <KebabToggle onToggle={() => {}} />
          <Dropdown toggle={<KebabToggle onToggle={() => {}} />} />
        </>
      );

      Example out

      import { MenuToggle } from "@patternfly/react-core";
      import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
      
      export const KebabToggleRemovedInput = () => (
        <>
          <MenuToggle variant="plain" icon={<EllipsisVIcon aria-hidden="true" />} onClick={() => {}} />
          <Dropdown toggle={<MenuToggle variant="plain" icon={<EllipsisVIcon aria-hidden="true" />} onClick={() => {}} />} />
        </>
      );
      LabelReactThe `isOverflowLabel` prop for Label has been replaced with `variant="overflow"`. Codemods will replace an existing `variant` prop (which had no effect if `isOverflowLabel` was used).#10037Yes

      Codemods will make the following updates:

      Example in

      import { Label } from "@patternfly/react-core";
      
      export const LabelRemoveIsOverflowLabelInput = () => <Label isOverflowLabel />;
      export const LabelRemoveIsOverflowLabelInput2 = () => (
        <Label isOverflowLabel variant="outline" />
      );

      Example out

      import { Label } from "@patternfly/react-core";
      
      export const LabelRemoveIsOverflowLabelInput = () => (
        <Label variant="overflow" />
      );
      export const LabelRemoveIsOverflowLabelInput2 = () => (
        <Label variant="overflow" />
      );
      Log snippetReact-component-groupsIn react-component-groups, we've renamed LogSnippet's prop leftBorderVariant to variant and replaced LogSnippetBorderVariant enum with PatternFly's AlertVariant enum.#145Yes

      Codemods will make the following updates:

      Example in

      import {
        LogSnippet,
        LogSnippetBorderVariant,
      } from "@patternfly/react-component-groups";
      
      export const LogSnippetRenameLeftBorderVariantInput = () => (
        <LogSnippet
          message="Failure - check logs for details"
          logSnippet="code"
          leftBorderVariant={LogSnippetBorderVariant.success}
        />
      );

      Example out

      import { LogSnippet } from "@patternfly/react-component-groups";
      
      export const LogSnippetRenameLeftBorderVariantInput = () => (
        <LogSnippet
          message="Failure - check logs for details"
          logSnippet="code"
          variant={"success"}
        />
      );
      Log viewerReactThe stylesheet for LogViewer has been moved out of the PatternFly package and into LogViewer itself. You may need to update stylesheet imports or import the stylesheet manually.#70No
      Login main footer links itemReactLoginMainFooterLinksItem structure has changed. Instead of passing it many properties, everything is now passed in a children component directly.#10107Yes

      Codemods will make the following updates:

      Example in

      import { LoginMainFooterLinksItem } from "@patternfly/react-core";
      
      export const LoginMainFooterLinksItemStructureUpdatedInput = () => (
        <LoginMainFooterLinksItem
          href="https://github.com/login"
          linkComponentProps={{ "aria-label": "Login with Github" }}
        >
          <i>GitHub icon</i>
        </LoginMainFooterLinksItem>
      );

      Example out

      import { LoginMainFooterLinksItem, Button } from "@patternfly/react-core";
      
      export const LoginMainFooterLinksItemStructureUpdatedInput = () => (
        <LoginMainFooterLinksItem data-codemods="true">
          <Button
            variant="link"
            component="a"
            href="https://github.com/login"
            {...{ "aria-label": "Login with Github" }}
          >
            <i>GitHub icon</i>
          </Button>
        </LoginMainFooterLinksItem>
      );
      Login main headerReactThe markup for LoginMainHeader which is used internally within LoginPage has been updated, now using a `div` wrapper instead of a `header` element wrapper.#10880No
      MastheadReactOur old implementation of `MastheadBrand` has been renamed to `MastheadLogo`, which must be wrapped by our new implementation of `MastheadBrand`. Codemods will handle the renaming and required restructuring.#10809Yes

      Codemods will make the following updates:

      Example in

      import { MastheadBrand } from "@patternfly/react-core";
      
      export const MastheadNameChanges = () => <MastheadBrand>Logo</MastheadBrand>;

      Example out

      import { MastheadLogo } from "@patternfly/react-core";
      
      export const MastheadNameChanges = () => <MastheadLogo data-codemods>Logo</MastheadLogo>;
      MastheadReactWe've removed the `backgroundColor` prop from Masthead as theming is no longer handled React-side.#9774Yes

      Codemods will make the following updates:

      Example in

      import { Masthead } from "@patternfly/react-core";
      
      export const MastheadRemoveBackgroundColorInput = () => <Masthead backgroundColor />

      Example out

      import { Masthead } from "@patternfly/react-core";
      
      export const MastheadRemoveBackgroundColorInput = () => <Masthead  />
      MastheadReactThe structure of Masthead has been updated, MastheadToggle and MastheadBrand should now be wrapped in MastheadMain.#10809Yes

      Codemods will make the following updates:

      Example in

      import {
        Masthead,
        MastheadBrand,
        MastheadMain,
        MastheadToggle,
        MastheadLogo
      } from "@patternfly/react-core";
      
      export const MastheadStructureChangesInputPreNameChange = () => (
        <Masthead>
          <MastheadToggle>Foo</MastheadToggle>
          <MastheadMain>
            <MastheadBrand>Bar</MastheadBrand>
          </MastheadMain>
        </Masthead>
      );
      
      export const MastheadStructureChangesInputPostNameChange = () => (
        <Masthead>
          <MastheadToggle>Foo</MastheadToggle>
          <MastheadMain>
            <MastheadLogo>Bar</MastheadLogo>
          </MastheadMain>
        </Masthead>
      );

      Example out

      import {
        Masthead,
        MastheadBrand,
        MastheadMain,
        MastheadToggle,
        MastheadLogo,
      } from "@patternfly/react-core";
      
      export const MastheadStructureChangesInputPreNameChange = () => (
        <Masthead>
          <MastheadMain>
            <MastheadToggle>Foo</MastheadToggle>
            <MastheadBrand data-codemods>
              <MastheadBrand>Bar</MastheadBrand>
            </MastheadBrand>
          </MastheadMain>
        </Masthead>
      );
      
      export const MastheadStructureChangesInputPostNameChange = () => (
        <Masthead>
          <MastheadMain>
            <MastheadToggle>Foo</MastheadToggle>
            <MastheadBrand data-codemods>
              <MastheadLogo>Bar</MastheadLogo>
            </MastheadBrand>
          </MastheadMain>
        </Masthead>
      );
      Menu item actionReactThe markup for MenuItemAction has been updated. It now uses our Button component internally, has a wrapper around the action button, and no longer renders an icon wrapper inside the action button.#10089No
      Menu toggleReactWe now recommend passing any icon to the `icon` prop instead of passing it as children, such as for plain, icon only toggles. Passing an icon as children will result in incorrect styling.#10097Yes

      Codemods will make the following updates:

      Example in

      import { MenuToggle } from "@patternfly/react-core";
      import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
      
      export const MenuToggleWarnIconOnlyToggleInput = () => (
        <MenuToggle aria-label='A descriptive aria-label' variant='plain'>
          <EllipsisVIcon />
        </MenuToggle>
      );

      Example out

      import { MenuToggle } from "@patternfly/react-core";
      import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
      
      export const MenuToggleWarnIconOnlyToggleInput = () => (
        <MenuToggle
          icon={EllipsisVIcon}
          aria-label='A descriptive aria-label'
          variant='plain'
        />
      );
      Missing pageReactIn react-component-groups, we've renamed InvalidObject component to MissingPage#313Yes

      Codemods will make the following updates:

      Example in

      import { InvalidObject } from "@patternfly/react-component-groups";
      export const ComponentGroupsInvalidObjectRenameToMissingPageInput =
        () => <InvalidObject />;

      Example out

      import { MissingPage } from "@patternfly/react-component-groups";
      export const ComponentGroupsInvalidObjectRenameToMissingPageInput =
        () => <MissingPage data-codemods />;
      ModalReactOur previous implementation of Modal has been deprecated. Codemods will update import paths to our deprecated directory, but we recommend using our newly promoted implementation.#10358Yes

      Codemods will make the following updates:

      Example in

      import { Modal } from "@patternfly/react-core";

      Example out

      import {
      	Modal
      } from '@patternfly/react-core/deprecated';
      Modal nextReactOur Next implementation of Modal has been promoted as our recommended implementation. Codemods will update import paths.#10358Yes

      Codemods will make the following updates:

      Example in

      import { Modal } from "@patternfly/react-core/next";

      Example out

      import {
      	Modal /* data-codemods */
      } from '@patternfly/react-core';
      Multi content cardReact-component-groupsThe `leftBorderVariant` and `withHeaderBorder` props have been removed from MultiContentCard.#145Yes

      Codemods will make the following updates:

      Example in

      import { MultiContentCard } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsMultiContentCardRemovePropsInput = () => <MultiContentCard leftBorderVariant="danger" withHeaderBorder />

      Example out

      import { MultiContentCard } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsMultiContentCardRemovePropsInput = () => <MultiContentCard   />
      NavReactThe "tertiary" Nav variant is no longer supported. Use `variant="horizontal-subnav"` instead.#9948Yes

      Codemods will make the following updates:

      Example in

      import { Nav } from "@patternfly/react-core";
      
      export const NavRemoveTertiaryVariantInput = () => <Nav variant="tertiary" />;
      export const NavRemoveTertiaryVariantInput2 = () => (
        <Nav variant={"tertiary"} />
      );

      Example out

      import { Nav } from "@patternfly/react-core";
      
      export const NavRemoveTertiaryVariantInput = () => (
        <Nav variant="horizontal-subnav" />
      );
      export const NavRemoveTertiaryVariantInput2 = () => (
        <Nav variant={"horizontal-subnav"} />
      );
      NavReactThe `theme` prop is no longer supported in Nav. Use light/dark mode theming instead.#9948Yes

      Codemods will make the following updates:

      Example in

      import { Nav } from "@patternfly/react-core";
      
      export const NavRemoveThemePropInput = () => <Nav theme="dark" />;
      export const NavRemoveThemePropInput2 = () => <Nav theme="light" />;

      Example out

      import { Nav } from "@patternfly/react-core";
      
      export const NavRemoveThemePropInput = () => <Nav />;
      export const NavRemoveThemePropInput2 = () => <Nav />;
      Nav itemReactThe `hasNavLinkWrapper` prop has been removed from NavItem. Additionally, any icons for a NavItem should be passed to its new `icon` prop.#10687Yes

      Codemods will make the following updates:

      Example in

      import { NavItem } from "@patternfly/react-core";
      
      export const NavItemRemoveHasNavLinkWrapperPropInput = () => <NavItem hasNavLinkWrapper />

      Example out

      import { NavItem } from "@patternfly/react-core";
      
      export const NavItemRemoveHasNavLinkWrapperPropInput = () => <NavItem  />
      Not authorizedReact-component-groupsIn react-component-groups, we've renamed NotAuthorized's props `description` to `bodyText` and `title` to `titleText`.#145Yes

      Codemods will make the following updates:

      Example in

      import { NotAuthorized } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsNotAuthorizedRenamePropsInput = () => (
        <NotAuthorized description="Description text" title="Title text" />
      );

      Example out

      import { NotAuthorized } from "@patternfly/react-component-groups";
      
      export const ComponentGroupsNotAuthorizedRenamePropsInput = () => (
        <NotAuthorized bodyText="Description text" titleText="Title text" />
      );
      Notification badgeReactThe markup for NotificationBadge has changed, as it now uses stateful button internally.#10020No
      Notification drawer headerReactNotificationDrawerHeader no longer uses our Text component internally, and instead renders a native `h1` element.#10378No
      PageReactWe've renamed the `header` prop for Page to `masthead`.#10454Yes

      Codemods will make the following updates:

      Example in

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameHeaderInput = () => <Page header={<Masthead />} />;

      Example out

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameHeaderInput = () => <Page masthead={<Masthead />} />;
      PageReactWe've renamed the `isTertiaryNavGrouped` prop to `isHorizontalSubnavGrouped`.#9948Yes

      Codemods will make the following updates:

      Example in

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameIsTertiaryNavGroupedInput = () => (
        <Page isTertiaryNavGrouped />
      );

      Example out

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameIsTertiaryNavGroupedInput = () => (
        <Page isHorizontalSubnavGrouped />
      );
      PageReactWe've renamed the `isTertiaryNavWidthLimited` prop to `isHorizontalSubnavWidthLimited`.#9948Yes

      Codemods will make the following updates:

      Example in

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameIsTertiaryNavWidthLimitedInput = () => (
        <Page isTertiaryNavWidthLimited />
      );

      Example out

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameIsTertiaryNavWidthLimitedInput = () => (
        <Page isHorizontalSubnavWidthLimited />
      );
      PageReactWe've renamed the `tertiaryNav` prop to `horizontalSubnav`.#9948Yes

      Codemods will make the following updates:

      Example in

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameTertiaryNavInput = () => <Page tertiaryNav />;

      Example out

      import { Page } from '@patternfly/react-core';
      
      export const PageRenameTertiaryNavInput = () => <Page horizontalSubnav />;
      PageReactThe markup for Page has changed. When either the `horizontalSubnav` or `breadcrumb` props are passed, a PageBody component will always wrap the contents.#10650No
      Page breadcrumb and sectionReactThe `isWidthLimited` prop on PageBreadcrumb and PageSection will no longer determine whether the children of either component are wrapped in a PageBody. Instead the new `hasBodyWrapper` prop must be used. By default this new prop is set to true. Codemods will apply `hasBodyWrapper` with the same value as the `isWidthLimited` prop or false if `isWidthLimited` is not passed.#10650Yes

      Codemods will make the following updates:

      Example in

      import { PageBreadcrumb, PageSection } from "@patternfly/react-core";
      
      export const PageBreadcrumbAndSectionWarnUpdatedWrapperLogicInput = () => (
        <>
          <PageBreadcrumb isWidthLimited />
          <PageBreadcrumb isWidthLimited={someVar} />
          <PageBreadcrumb isWidthLimited={() => someCallback()} />
          <PageSection isWidthLimited />
          <PageSection isWidthLimited={someVar} />
          <PageSection isWidthLimited={() => someCallback()} />
        </>
      );

      Example out

      import { PageBreadcrumb, PageSection } from "@patternfly/react-core";
      
      export const PageBreadcrumbAndSectionWarnUpdatedWrapperLogicInput = () => (
        <>
          <PageBreadcrumb hasBodyWrapper isWidthLimited />
          <PageBreadcrumb hasBodyWrapper={someVar} isWidthLimited={someVar} />
          <PageBreadcrumb hasBodyWrapper={() => someCallback()} isWidthLimited={() => someCallback()} />
          <PageSection hasBodyWrapper isWidthLimited />
          <PageSection hasBodyWrapper={someVar} isWidthLimited={someVar} />
          <PageSection hasBodyWrapper={() => someCallback()} isWidthLimited={() => someCallback()} />
        </>
      );
      Page header tools itemReactThe `isSelected` prop has been removed from PageHeaderToolsItem.#9774Yes

      Codemods will make the following updates:

      Example in

      import { PageHeaderToolsItem } from "@patternfly/react-core/deprecated";
      
      export const PageHeaderToolsItemRemoveIsSelectedPropInput = () => (
        <PageHeaderToolsItem isSelected />
      );

      Example out

      import { PageHeaderToolsItem } from "@patternfly/react-core/deprecated";
      
      export const PageHeaderToolsItemRemoveIsSelectedPropInput = () => (
        <PageHeaderToolsItem  />
      );
      Page navigationReactThe PageNavigation component has been removed from PatternFly.#10650Yes

      Codemods will make the following updates:

      Example in

      import { PageNavigation } from "@patternfly/react-core";
      
      export const PageNavigationRemoveComponentInput = () => (
        <div>
          <PageNavigation />
          <div>Some adjacent content</div>
          <PageNavigation>
            <div>Some internal content</div>
          </PageNavigation>
        </div>
      );
      
      export { PageNavigation } from "@patternfly/react-core";
      export { PageNavigation as CustomNav };
      export default PageNavigation;

      Example out

      import { PageNavigation } from "@patternfly/react-core";
      
      export const PageNavigationRemoveComponentInput = () => (
        <div>
          
          <div>Some adjacent content</div>
          
            <div>Some internal content</div>
          
        </div>
      );
      Page sectionReactThe "nav" type for PageSection has been removed.#10650Yes

      Codemods will make the following updates:

      Example in

      import { PageSection, PageSectionTypes } from "@patternfly/react-core";
      
      const chosenType = PageSectionTypes.nav;
      
      export const PageSectionRemoveNavTypeInput = () => (
        <>
          <PageSection type='nav' />
          <PageSection type={PageSectionTypes.nav} />
          <PageSection type={chosenType} />
        </>
      );

      Example out

      import { PageSection, PageSectionTypes } from "@patternfly/react-core";
      
      const chosenType = PageSectionTypes.nav;
      
      export const PageSectionRemoveNavTypeInput = () => (
        <>
          <PageSection  />
          <PageSection  />
          <PageSection  />
        </>
      );
      Page sectionReactThe `variant` prop for PageSection now only accepts a value of "default" or "secondary". Codemods will remove the prop so it uses the default value of "default".#9774Yes

      Codemods will make the following updates:

      Example in

      import { PageSection, PageSectionVariants } from "@patternfly/react-core";
      
      export const PageSectionUpdateVariantValuesInput = () => (
        <>
          <PageSection variant='dark' />
          <PageSection variant={PageSectionVariants.dark} />
        </>
      );

      Example out

      import { PageSection, PageSectionVariants } from "@patternfly/react-core";
      
      export const PageSectionUpdateVariantValuesInput = () => (
        <>
          <PageSection  />
          <PageSection  />
        </>
      );
      Page sectionReactClasses from the `variant` prop will now only be applied to PageSection when the `type` prop has a value of "default".#9848No
      Page sidebarReactThe `theme` prop has been removed from PageSidebar as theming is no longer handled React-side.#9774Yes

      Codemods will make the following updates:

      Example in

      import { PageSidebar } from "@patternfly/react-core";
      
      export const PageSidebarRemoveThemePropInput = () => (
        <PageSidebar theme='dark' />
      );

      Example out

      import { PageSidebar } from "@patternfly/react-core";
      
      export const PageSidebarRemoveThemePropInput = () => (
        <PageSidebar  />
      );
      PaginationReactThe markup for Pagination has changed. There is now a wrapper element rendered around the PaginationOptionsMenu toggle.#10662No
      PopperReactThe default value of appendTo on Dropdown, Select, and Popper has been updated to `document.body`.#10675No
      Simple file uploadReactThe `aria-describedby` attribute was removed from the TextInput within the SimpleFileUpload, and the `id` attribute was removed from the "browse" button. Instead use the new `browseButtonAriaDescribedby` prop to provide a description to the browse button.#10026No

      Additionally, we recommend using our FileUploadHelperText component as a child to the FileUpload, instead of using our FormHelperText (the previous recommendation).

      Slider stepReactThe `--pf-v6-c-slider__step--Left` CSS variable applied as an inline style has been updated to the `--pf-v6-c-slider__step--InsetInlineStart` CSS variable.#10378No
      SwitchReactThe `labelOff` prop has been removed from Switch. The label for a Switch should not dynamically update based on the on/off state.#10646Yes

      Codemods will make the following updates:

      Example in

      import { Switch } from "@patternfly/react-core";
      
      export const SwitchRemoveLabelOffInput = () => <Switch labelOff='Some label' />;

      Example out

      import { Switch } from "@patternfly/react-core";
      
      export const SwitchRemoveLabelOffInput = () => <Switch  />
      TabsReactThe `isSecondary` prop for Tabs has been renamed to `isSubtab`.#10044Yes

      Codemods will make the following updates:

      Example in

      import { Tabs } from "@patternfly/react-core";
      
      export const TabsRenamedIsSecondaryPropInput = () => <Tabs isSecondary />;

      Example out

      import { Tabs } from "@patternfly/react-core";
      
      export const TabsRenamedIsSecondaryPropInput = () => <Tabs isSubtab />;
      TabsReactThe "light300" value for the `variant` prop on Tabs has been replaced with the "secondary" value.#9930Yes

      Codemods will make the following updates:

      Example in

      import { Tabs } from "@patternfly/react-core";
      
      export const TabsReplaceVariantLight300Input = () => (
        <Tabs variant='light300' />
      );

      Example out

      import { Tabs } from "@patternfly/react-core";
      
      export const TabsReplaceVariantLight300Input = () => (
        <Tabs variant="secondary" />
      );
      TabsReactThe markup for the Tabs scroll buttons have been updated#10044No

      The markup for the Tabs scroll buttons have been updated in the following ways:

      • Replaced the native `button` HTML element internally with our Button components
      • Added a wrapper `div` around them- Removed styling when the `isSubtab` (previously `isSecondary`) prop is true
      TextReactWe have replaced Text, TextContent, TextList and TextListItem with one Content component. Running this fix will change all of those components names to Content and add a "component" prop where necessary.#10643Yes

      Codemods will make the following updates:

      Example in

      import {
        Text,
        TextContent,
        TextList,
        TextListVariants,
        TextListItem,
        TextListItemVariants,
        TextProps,
        TextVariants,
      } from "@patternfly/react-core";
      
      export const TextReplaceWithContentInput = () => {
        interface Foo extends TextProps {}
        const foo = TextVariants.h1;
        const bar = TextListVariants.ul;
        const baz = TextListItemVariants.li;
      
        return (
          <>
            <Text component="h3">Abc</Text>
            <Text>Abc</Text>
            <TextContent>Abc</TextContent>
            <TextContent>
              <Text>Some text</Text>
            </TextContent>
            <TextContent isVisited>Abc</TextContent>
            <TextList>Abc</TextList>
            <TextList isPlain>Abc</TextList>
            <TextList component="ol">Abc</TextList>
            <TextListItem>Abc</TextListItem>
            <TextListItem component="dt">Abc</TextListItem>
            <TextListItem component={TextVariants.dt}>Abc</TextListItem>
            <TextList>
              <TextListItem>A</TextListItem>
              <TextListItem>B</TextListItem>
              <TextListItem>C</TextListItem>
            </TextList>
          </>
        );
      };

      Example out

      import {
        Content,
        Content,
        Content,
        ContentVariants,
        Content,
        ContentVariants,
        ContentProps,
        ContentVariants,
      } from "@patternfly/react-core";
      
      export const TextReplaceWithContentInput = () => {
        interface Foo extends ContentProps {}
        const foo = ContentVariants.h1;
        const bar = ContentVariants.ul;
        const baz = ContentVariants.li;
      
        return (
          <>
            <Content component="h3">Abc</Content>
            <Content component="p">Abc</Content>
            <Content>Abc</Content>
            <Content>
              <Content component="p">Some text</Content>
            </Content>
            <Content isVisitedLink>Abc</Content>
            <Content component="ul">Abc</Content>
            <Content component="ul" isPlainList>Abc</Content>
            <Content component="ol">Abc</Content>
            <Content component="li">Abc</Content>
            <Content component="dt">Abc</Content>
            <Content component={ContentVariants.dt}>Abc</Content>
            <Content component="ul">
              <Content component="li">A</Content>
              <Content component="li">B</Content>
              <Content component="li">C</Content>
            </Content>
          </>
        );
      };
      ThReactThe `--pf-v6-c-table__sticky-cell--Left` and `--pf-v6-c-table__sticky-cell--Right` CSS variables applied as inline styles when `isStickyColumn` is true have been updated to `--pf-v6-c-table__sticky-cell--InsetInlineStart` and `--pf-v6-c-table__sticky-cell--InsetInlineEnd`, respectively.#10378No
      TileReactTile has been deprecated. Running the fix flag will update your imports to our deprecated package, but we suggest using Card instead. There is a new Card example on our documentation showcasing how to set up a Card as a Tile.#10821Yes

      Codemods will make the following updates:

      Example in

      import { Tile } from "@patternfly/react-core";

      Example out

      import { Tile } from "@patternfly/react-core/deprecated";
      TokensReactReact tokens, whose value is a Patternfly token variable (with prefix --pf-t), are now prefixed with t_#11002Yes

      Codemods will make the following updates:

      Example in

      import color_green_10 from "@patternfly/react-tokens/dist/esm/color_green_10";
      color_green_10;

      Example out

      import t_color_green_10 from "@patternfly/react-tokens/dist/esm/t_color_green_10";
      t_color_green_10;
      TokensReactWe have updated our CSS tokens. About half of our tokens have been replaced with newer ones. - this rule provides an autofix for global non color tokens - global color tokens will be replaced with a temporary hot pink color token **that must be manually replaced** (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` CSS variable) - other non-global (component or chart) tokens need to be replaced manually To find a suitable replacement token, check our [v6 token documentation](/tokens/all-patternfly-tokens).
        Yes

        Codemods will make the following updates:

        Example in

        // replacements (fixable with --fix)
        import global_BorderWidth_lg from "@patternfly/react-tokens/dist/esm/global_BorderWidth_lg";
        import { global_FontWeight_normal } from "@patternfly/react-tokens";
        global_BorderWidth_lg;
        global_FontWeight_normal;
        document.documentElement.style.setProperty("--pf-v5-global--ZIndex--lg", "3");
        <div
          style={{
            borderWidth: "var(--pf-v5-global--BorderWidth--lg)",
            boxShadow: "var(--pf-v5-global--BoxShadow--sm)",
            marginTop: "var(--pf-v5-global--spacer--3xl)",
          }}
        ></div>;
          
        // warnings (not fixable)
        import c_badge_PaddingLeft from "@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft";
        import { c_alert__FontSize } from "@patternfly/react-tokens";
        c_badge_PaddingLeft;
        c_alert__FontSize;
        <>
          <div
            style={{
              fontSize: "var(--pf-v5-c-alert__FontSize)",
              width: "var(--pf-v5-global--arrow--width)",
            }}
          ></div>;
        
        // Colors
        import global_Color_100 from "@patternfly/react-tokens/dist/esm/global_Color_100";
        import { global_Color_200 } from "@patternfly/react-tokens/dist/esm/global_Color_200";
        import { global_Color_300 as color300 } from "@patternfly/react-tokens/dist/esm/global_Color_300";
        import { global_BorderColor_100 } from "@patternfly/react-tokens";
        
        global_Color_100;
        global_Color_200;
        color300;
        global_BorderColor_100;
        
        <div
          style={{
            color: "var(--pf-v5-global--Color--100)",
            backgroundColor: "var(--pf-v5-global--Color--200)",
          }}
        ></div>;

        Example out

        // replacements (fixable with --fix)
        import global_border_width_extra_strong from "@patternfly/react-tokens/dist/esm/global_border_width_extra_strong";
        import { global_font_weight_body_default } from "@patternfly/react-tokens";
        
        global_border_width_extra_strong;
        global_font_weight_body_default;
        
        document.documentElement.style.setProperty("--pf-t--global--z-index--lg", "3");
        <div
          style={{
            borderWidth: "var(--pf-t--global--border--width--extra-strong)",
            boxShadow: "var(--pf-t--global--box-shadow--sm)",
            marginTop: "var(--pf-t--global--spacer--3xl)",
          }}
        ></div>;
          
        // warnings (not fixable)
        import c_badge_PaddingLeft from "@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft";
        import { c_alert__FontSize } from "@patternfly/react-tokens";
        
        c_badge_PaddingLeft;
        c_alert__FontSize;
        
        <div
          style={{
            fontSize: "var(--pf-v5-c-alert__FontSize)",
            width: "var(--pf-v5-global--arrow--width)",
          }}
        ></div>;
          
        // Colors
        import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";
        import { t_temp_dev_tbd as global_Color_200 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";
        import { t_temp_dev_tbd as color300 /* CODEMODS: you should update this color token, original v5 token was global_Color_300 */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";
        import { t_temp_dev_tbd as global_BorderColor_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";
        
        global_Color_100;
        global_Color_200;
        color300;
        global_BorderColor_100;
        
        <div
          style={{
            color: "var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--Color--100 */,
            backgroundColor: "var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--Color--200 */,
          }}
        ></div>;
        ToolbarReactA number of props have been removed from Toolbar components#10674Yes

        The following props have been removed from Toolbar components:

        • Toolbar: usePageInsets
        • ToolbarContent: alignSelf
        • ToolbarItem: widths
        • ToolbarToggleGroup: alignment

        Codemods will make the following updates:

        Example in

        import {
          Toolbar,
          ToolbarContent,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarRemovePropsInput = () => (
          <>
            <Toolbar usePageInsets />
            <ToolbarContent alignSelf={{}} />
            <ToolbarItem widths={{}} />
            <ToolbarToggleGroup alignment={{}} />
          </>
        );

        Example out

        import {
          Toolbar,
          ToolbarContent,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarRemovePropsInput = () => (
          <>
            <Toolbar  />
            <ToolbarContent  />
            <ToolbarItem  />
            <ToolbarToggleGroup  />
          </>
        );
        ToolbarReactSeveral Chip-based props have been renamed on our Toolbar components#10649Yes

        The following Chip-based props have been renamed on our Toolbar components:

        • <Toolbar>: The `customChipGroupContent` prop has been renamed to `customLabelGroupContent`
        • <ToolbarExpandableContent>: The `chipContainerRef` prop has been renamed to `labelContainerRef`
        • <ToolbarFilter>: The `chips` prop has been renamed to `labels`
        • <ToolbarFilter>: The `deleteChipGroup` prop has been renamed to `deleteLabelGroup`
        • <ToolbarFilter>: The `deleteChip` prop has been renamed to `deleteLabel`
        • <ToolbarFilter>: The `chipGroupExpandedText` prop has been renamed to `labelGroupExpandedText`
        • <ToolbarFilter>: The `chipGroupCollapsedText` prop has been renamed to `labelGroupCollapsedText`
        • <ToolbarFilter>: The `expandableChipContainerRef` prop has been renamed to `expandableLabelContainerRef`
        • <ToolbarChipGroupContent>: The `chipGroupContentRef` prop has been renamed to `labelGroupContentRef`
        • <ToolbarChipGroupContent>: The `customChipGroupContent` prop has been renamed to `customLabelGroupContent`
        • <ToolbarToggleGroup>: The `chipContainerRef` prop has been renamed to `labelContainerRef`

        Codemods will make the following updates:

        Example in

        import {
          Toolbar,
          ToolbarExpandableContent,
          ToolbarFilter,
          ToolbarChipGroupContent,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarReplaceChipInstancesInput = () => (
          <>
            <Toolbar customChipGroupContent />
            <ToolbarExpandableContent chipContainerRef />
            <ToolbarFilter
              chips
              deleteChipGroup
              deleteChip
              chipGroupExpandedText
              chipGroupCollapsedText
              expandableChipContainerRef
            />
            <ToolbarChipGroupContent chipGroupContentRef customChipGroupContent />
            <ToolbarToggleGroup chipContainerRef />
          </>
        );

        Example out

        import {
          Toolbar,
          ToolbarExpandableContent,
          ToolbarFilter,
          ToolbarChipGroupContent,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarReplaceChipInstancesInput = () => (
          <>
            <Toolbar customLabelGroupContent />
            <ToolbarExpandableContent labelContainerRef />
            <ToolbarFilter
              labels
              deleteLabelGroup
              deleteLabel
              labelGroupExpandedText
              labelGroupCollapsedText
              expandableLabelContainerRef
            />
            <ToolbarChipGroupContent labelGroupContentRef customLabelGroupContent />
            <ToolbarToggleGroup labelContainerRef />
          </>
        );
        ToolbarReactSome Toolbar interfaces / components have been renamed#10649Yes

        The following Toolbar interfaces have been renamed

        • ToolbarChipGroupContentProps --> ToolbarLabelGroupContentProps
        • ToolbarChipGroup --> ToolbarLabelGroup
        • ToolbarChip --> ToolbarLabel

        Codemods will make the following updates:

        Example in

        import {
          ToolbarChipGroup,
          ToolbarChipGroupContentProps as CustomGroupContent,
          ToolbarChip,
        } from "@patternfly/react-core";
        
        interface MyInterface extends ToolbarChip {}
        let typedThing: ToolbarChipGroup;
        
        export {
          ToolbarChipGroup as CustomGroup,
          CustomGroupContent,
          ToolbarChip as CustomThing,
        };

        Example out

        import {
          ToolbarLabelGroup,
          ToolbarLabelGroupContentProps as CustomGroupContent,
          ToolbarLabel,
        } from "@patternfly/react-core";
        
        interface MyInterface extends ToolbarLabel {}
        let typedThing: ToolbarLabelGroup;
        
        export {
          ToolbarLabelGroup as CustomGroup,
          CustomGroupContent,
          ToolbarLabel as CustomThing,
        };
        ToolbarReactThe `spacer` property has been removed from ToolbarGroup, ToolbarItem, and ToolbarToggleGroup. We recommend instead using our new `gap`, `columnGap`, or `rowGap` properties.Additionally, the `spaceItems` property has been removed from ToolbarGroup and ToolbarToggleGroup.#10418Yes

        Codemods will make the following updates:

        Example in

        import {
          ToolbarGroup,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarReplacedSpacerSpaceItemsInput = () => (
          <>
            <ToolbarGroup
              spacer={{ default: "spacerNone", md: "spacerSm", lg: "spacerMd" }}
              spaceItems={{
                default: "spaceItemsNone",
                md: "spaceItemsSm",
                lg: "spaceItemsMd",
              }}
            />
            <ToolbarItem
              spacer={{ default: "spacerNone", md: "spacerSm", lg: "spacerMd" }}
            />
            <ToolbarToggleGroup
              spacer={{ default: "spacerNone", md: "spacerSm", lg: "spacerMd" }}
              spaceItems={{
                default: "spaceItemsNone",
                md: "spaceItemsSm",
                lg: "spaceItemsMd",
              }}
            />
          </>
        );

        Example out

        import {
          ToolbarGroup,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarReplacedSpacerSpaceItemsInput = () => (
          <>
            <ToolbarGroup
              gap={{ default: "gapNone", md: "gapSm", lg: "gapMd" }}
        
            />
            <ToolbarItem
              gap={{ default: "gapNone", md: "gapSm", lg: "gapMd" }}
            />
            <ToolbarToggleGroup
              gap={{ default: "gapNone", md: "gapSm", lg: "gapMd" }}
        
            />
          </>
        );
        ToolbarReactThe values for the `align` property on ToolbarGroup and ToolbarItem, and the `alignment` property on ToolbarToggleGroup, have been updated from "alignLeft" and "alignRight" to "alignStart" and "alignEnd", respectively.#10366Yes

        Codemods will make the following updates:

        Example in

        import {
          ToolbarGroup,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarUpdateAlignValuesInput = () => (
          <>
            <ToolbarGroup
              align={{
                default: "alignLeft",
                md: "alignRight",
                lg: "alignLeft",
                xl: "alignRight",
                "2xl": "alignLeft",
              }}
            />
            <ToolbarItem
              align={{
                default: "alignLeft",
                md: "alignRight",
                lg: "alignLeft",
                xl: "alignRight",
                "2xl": "alignLeft",
              }}
            />
            <ToolbarToggleGroup
              alignment={{
                default: "alignLeft",
                md: "alignRight",
                lg: "alignLeft",
                xl: "alignRight",
                "2xl": "alignLeft",
              }}
            />
          </>
        );

        Example out

        import {
          ToolbarGroup,
          ToolbarItem,
          ToolbarToggleGroup,
        } from "@patternfly/react-core";
        
        export const ToolbarUpdateAlignValuesInput = () => (
          <>
            <ToolbarGroup
              align={{
                default: "alignStart",
                md: "alignEnd",
                lg: "alignStart",
                xl: "alignEnd",
                "2xl": "alignStart",
              }}
            />
            <ToolbarItem
              align={{
                default: "alignStart",
                md: "alignEnd",
                lg: "alignStart",
                xl: "alignEnd",
                "2xl": "alignStart",
              }}
            />
            <ToolbarToggleGroup
              alignment={{
                default: "alignStart",
                md: "alignEnd",
                lg: "alignStart",
                xl: "alignEnd",
                "2xl": "alignStart",
              }}
            />
          </>
        );
        Toolbar chip group contentReactThe ToolbarChipGroupContent component has been renamed to ToolbarLabelGroupContent.#10649Yes

        Codemods will make the following updates:

        Example in

        import { ToolbarChipGroupContent } from "@patternfly/react-core";
        
        const Component = ToolbarChipGroupContent;
        export const ToolbarChipGroupContentRenameComponentInput = () => (
          <>
            <ToolbarChipGroupContent></ToolbarChipGroupContent>
            <ToolbarChipGroupContent />
            <Component />
          </>
        );
        
        export { ToolbarChipGroupContent as CustomThing };

        Example out

        import { ToolbarLabelGroupContent } from "@patternfly/react-core";
        
        const Component = ToolbarLabelGroupContent;
        export const ToolbarChipGroupContentRenameComponentInput = () => (
          <>
            <ToolbarLabelGroupContent></ToolbarLabelGroupContent>
            <ToolbarLabelGroupContent />
            <Component />
          </>
        );
        
        export { ToolbarLabelGroupContent as CustomThing };
        Toolbar groupReactThe `variant` prop of ToolbarGroup and ToolbarToggleGroup had some options renamed.#10674Yes

        The `variant` prop of ToolbarGroup and ToolbarToggleGroup had these options renamed:

        • button-group --> action-group
        • icon-button-group --> action-group-plain

        Codemods will make the following updates:

        Example in

        import {
          ToolbarGroup,
          ToolbarToggleGroup,
          ToolbarGroupVariant,
        } from "@patternfly/react-core";
        
        export const ToolbarGroupUpdatedVariantInput = () => (
          <>
            <ToolbarGroup variant='button-group' />
            <ToolbarGroup variant={ToolbarGroupVariant["icon-button-group"]} />
            <ToolbarToggleGroup variant='icon-button-group' />
            <ToolbarToggleGroup variant={ToolbarGroupVariant["button-group"]} />
          </>
        );

        Example out

        import {
          ToolbarGroup,
          ToolbarToggleGroup,
          ToolbarGroupVariant,
        } from "@patternfly/react-core";
        
        export const ToolbarGroupUpdatedVariantInput = () => (
          <>
            <ToolbarGroup variant="action-group" />
            <ToolbarGroup variant={ToolbarGroupVariant["action-group-plain"]} />
            <ToolbarToggleGroup variant="action-group-plain" />
            <ToolbarToggleGroup variant={ToolbarGroupVariant["action-group"]} />
          </>
        );
        Toolbar itemReactThe variant prop for ToolbarItem has been updated: "bulk-select", "overflow-menu" and "search-filter" were removed and "chip-group" was renamed to "label-group".#10649Yes

        Codemods will make the following updates:

        Example in

        import { ToolbarItem } from "@patternfly/react-core";
        
        export const ToolbarItemVariantPropUpdatesInput = () => (
          <>
            <ToolbarItem variant="chip-group" />
            <ToolbarItem variant="bulk-select" />
            <ToolbarItem variant="overflow-menu" />
            <ToolbarItem variant="search-filter" />
          </>
        );

        Example out

        import { ToolbarItem } from "@patternfly/react-core";
        
        export const ToolbarItemVariantPropUpdatesInput = () => (
          <>
            <ToolbarItem variant="label-group" />
            <ToolbarItem  />
            <ToolbarItem  />
            <ToolbarItem  />
          </>
        );
        Toolbar label group contentReactThe markup for ToolbarLabelGruopContent (formerly ToolbarChipGroupContent) has changed when the `numberOfFilters` value is greater than 0, when the `showClearFiltersButton` prop is true, or when the `customLabelGroupContent` prop is passed.#10674No
        Tree viewReactSelectable styling attribute (`pf-m-selectable`) has been removed on the list items of the TreeView component. You should update selectors, tests and snapshot tests which are relying on the `pf-m-selectable` class.#10101No
        Unauthorized accessReactIn react-component-groups, we've renamed NotAuthorized component to UnauthorizedAccess#313Yes

        Codemods will make the following updates:

        Example in

        import { NotAuthorized } from "@patternfly/react-component-groups";
        export const ComponentGroupsNotAuthorizedRenameToUnauthorizedAccessInput =
          () => <NotAuthorized />;

        Example out

        import { UnauthorizedAccess } from "@patternfly/react-component-groups";
        export const ComponentGroupsNotAuthorizedRenameToUnauthorizedAccessInput =
          () => <UnauthorizedAccess data-codemods />;
        Unavailable contentReact-component-groupsIn react-component-groups, we have replaced UnavailableContent's props `unavailableBodyPreStatusLinkText` and `unavailableBodyPostStatusLinkText` with one `bodyText` prop.Also status page link button has changed to a primary button. Consider capitalizing the `statusPageLinkText` prop.#244Yes

        Codemods will make the following updates:

        Example in

        import { UnavailableContent } from "@patternfly/react-component-groups";
        
        export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => (
          <>
            <UnavailableContent
              unavailableBodyPreStatusLinkText="Visit our"
              unavailableBodyPostStatusLinkText="for more info."
              statusPageLinkText="custom status page"
            />
            <UnavailableContent unavailableBodyPreStatusLinkText="Visit our" />
            <UnavailableContent unavailableBodyPostStatusLinkText="for more info." />
          </>
        );

        Example out

        import { UnavailableContent } from "@patternfly/react-component-groups";
        
        export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => (
          <>
            <UnavailableContent
              bodyText="Visit our custom status page for more info."
              statusPageLinkText="Custom status page"
            />
            <UnavailableContent bodyText="Visit our status page for known outages." />
            <UnavailableContent bodyText="Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for more info." />
          </>
        );
        Unavailable contentReact-component-groupsThe UnavailableContent component of React Component Groups has had the `unavailableTitleText` prop renamed to `titleText`.#145Yes

        Codemods will make the following updates:

        Example in

        import { UnavailableContent } from "@patternfly/react-component-groups";
        
        export const ComponentGroupsUnavailableContentRenamePropsInput = () => (
          <UnavailableContent unavailableTitleText="foo" />
        );

        Example out

        import { UnavailableContent } from "@patternfly/react-component-groups";
        
        export const ComponentGroupsUnavailableContentRenamePropsInput = () => (
          <UnavailableContent titleText="foo" />
        );
        Unused importsReactPatternFly imports that are unused imports should be removed.
          Yes

          Codemods will make the following updates:

          Example in

          import { Foo, Bar } from "@patternfly/react-core";
          
          export const NoUnusedImportsInput = () => <Bar />;

          Example out

          import { Bar } from "@patternfly/react-core";
          
          export const NoUnusedImportsInput = () => <Bar />;
          Wizard footerReactThe default WizardFooter now uses an ActionList wrapped around our Button components, rather than just our Button components.#10378No
          Wizard nav itemReactThere is now a wrapper element with class `pf-v6-c-wizard__nav-link-main` rendered around the nav item content. Additionally, when the nav item has a status of "error" the icon will be rendered before the item content, and the WizardToggle will also now render an error icon.#10378No
          Wizard stepReactThe `body` prop on WizardStep no longer accepts a value of "null".#10637Yes

          Codemods will make the following updates:

          Example in

          import { WizardStep } from "@patternfly/react-core";
          
          export const WizardStepUpdatedBodyTypingInput = () => (
            <WizardStep body={null} />
          );

          Example out

          import { WizardStep } from "@patternfly/react-core";
          
          export const WizardStepUpdatedBodyTypingInput = () => (
            <WizardStep  />
          );