@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.60

package/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState({
+    ruleLength: 'indeterminate',
+    ruleCharacterTypes: 'indeterminate'
+  });
+  const { ruleLength, ruleCharacterTypes } = inputValidation;
+
+  React.useEffect(() => {
+    let lengthVariant = ruleLength;
+    let typeVariant = ruleCharacterTypes;
+
+    if (value === '') {
+      setInputValidation({
+        ruleLength: 'indeterminate',
+        ruleCharacterTypes: 'indeterminate'
+      });
+      return;
+    }
+
+    if (!/\d/g.test(value)) {
+      typeVariant = 'error';
+    } else {
+      typeVariant = 'success';
+    }
+
+    if (value.length < 5) {
+      lengthVariant = 'error';
+    } else {
+      lengthVariant = 'success';
+    }
+
+    setInputValidation({ ruleLength: lengthVariant, ruleCharacterTypes: typeVariant });
+  }, [value, ruleLength, ruleCharacterTypes]);
+
+  const handleInputChange = (_event, inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text3">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text3"
+          name="login-input-helper-text3"
+          onChange={handleInputChange}
+          aria-describedby={filterValidations().join(' ')}
+          aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
+          value={value}
+        />
+        <FormHelperText>
+          <HelperText component="ul">
+            <HelperTextItem component="li" id="ruleLength" variant={ruleLength as any}>
+              Must be at least 5 characters in length
+            </HelperTextItem>
+            <HelperTextItem component="li" id="ruleCharacterTypes" variant={ruleCharacterTypes as any}>
+              Must include at least 1 number
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -16,11 +16,33 @@ import {
   SidebarContent,
   SidebarPanel,
   TextContent,
-  getResizeObserver
+  getResizeObserver,
+  DrawerContext
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
+const JumpLinksWrapper = ({ offsetHeight, headings }) => {
+  const { drawerContentRef } = React.useContext(DrawerContext);
+
+  return (
+    <JumpLinks
+      isVertical={true}
+      label="Jump to section"
+      scrollableRef={drawerContentRef}
+      offset={offsetHeight}
+      expandable={{ default: 'expandable', md: 'nonExpandable' }}
+    >
+      {headings.map((heading) => (
+        <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+          {`${heading} section`}
+          <JumpLinksList></JumpLinksList>
+        </JumpLinksItem>
+      ))}
+    </JumpLinks>
+  );
+};
+
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
@@ -65,25 +87,12 @@ export const JumpLinksWithDrawer = () => {
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <Drawer isExpanded={isExpanded}>
-        <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
+        <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
                 <PageSection>
-                  <JumpLinks
-                    isVertical={true}
-                    label="Jump to section"
-                    scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
-                    offset={offsetHeight}
-                    expandable={{ default: 'expandable', md: 'nonExpandable' }}
-                  >
-                    {headings.map((heading) => (
-                      <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
-                        {`${heading} section`}
-                        <JumpLinksList></JumpLinksList>
-                      </JumpLinksItem>
-                    ))}
-                  </JumpLinks>
+                  <JumpLinksWrapper offsetHeight={offsetHeight} headings={headings} />
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -57,7 +57,7 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -382,8 +382,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
@@ -527,9 +527,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
-      isTertiaryNavWidthLimited
+      isHorizontalSubnavWidthLimited
       isBreadcrumbWidthLimited
-      isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection>

package/src/demos/examples/Nav/NavDefault.tsx

@@ -15,7 +15,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavDefault: React.FunctionComponent = () => {

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -16,7 +16,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavExpandableDemo: React.FunctionComponent = () => {

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -40,7 +40,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 export const NavFlyout: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -129,8 +129,8 @@ export const NavFlyout: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -37,7 +37,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const NavHorizontal: React.FunctionComponent = () => {
@@ -108,8 +108,8 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -41,7 +41,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
@@ -157,8 +157,8 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />

package/src/demos/examples/Nav/NavManual.tsx

@@ -42,7 +42,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 export const NavManual: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -124,8 +124,8 @@ export const NavManual: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -16,7 +16,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavWithSubnav: React.FunctionComponent = () => {

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -45,7 +45,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -120,8 +120,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -45,7 +45,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -120,8 +120,8 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -47,7 +47,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -112,8 +112,8 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import {
   Form,
   FormGroup,
+  FormGroupLabelHelp,
   FormHelperText,
   HelperText,
   Popover,
   HelperTextItem,
   TextInput
 } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -89,17 +89,15 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
+  const labelHelpRef = React.useRef(null);
+
   const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <button
-        type="button"
-        aria-label="More info for name field"
-        onClick={(e) => e.preventDefault()}
-        aria-describedby="password-field"
-        className="pf-v5-c-form__group-label-help"
-      >
-        <HelpIcon />
-      </button>
+    <Popover
+      triggerRef={labelHelpRef}
+      headerContent={<div>Password Requirements</div>}
+      bodyContent={<div>Password rules</div>}
+    >
+      <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
     </Popover>
   );
 
@@ -115,7 +113,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelIcon={iconPopover}
+        labelHelp={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&
@@ -136,13 +134,13 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
         />
         <FormHelperText>
           <HelperText component="ul" aria-live="polite" id="password-field-helper">
-            <HelperTextItem isDynamic variant={ruleLength} component="li">
+            <HelperTextItem variant={ruleLength} component="li">
               Must be at least 14 characters
             </HelperTextItem>
-            <HelperTextItem isDynamic variant={ruleContent} component="li">
+            <HelperTextItem variant={ruleContent} component="li">
               Cannot contain the word "redhat"
             </HelperTextItem>
-            <HelperTextItem isDynamic variant={ruleCharacters} component="li">
+            <HelperTextItem variant={ruleCharacters} component="li">
               Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
             </HelperTextItem>
           </HelperText>

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -479,7 +479,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
         </Dropdown>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>
@@ -574,7 +574,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
               </FlexItem>
               <FlexItem>
                 <TextContent>
-                  <Text component="small" className="pf-v5-u-color-200 pf-v5-u-font-family-text">
+                  <Text component="small" className="pf-v6-u-color-200 pf-v6-u-font-family-text">
                     Provided by Red Hat
                   </Text>
                 </TextContent>

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
   TextContent,

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -16,7 +16,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -17,7 +17,7 @@ import {
   TitleSizes,
   CardTitle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(1);
@@ -70,20 +70,20 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
                 </TextContent>
               </GridItem>
               <Grid md={6} xl2={3} hasGutter>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Check system requirements</CardTitle>
                   <CardBody>
                     Your physical or virtual machine should meet the <a href="#">system requirement</a>.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Download an installation ISO image</CardTitle>
                   <CardBody>
                     {' '}
                     <a href="#">Download</a> the binary DVD ISO.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Create a bootable installation media</CardTitle>
                   <CardBody>
                     {' '}

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -55,7 +55,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -186,12 +185,10 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle variant="plain" aria-label="Sort columns">
-            <SortAmountDownIcon aria-hidden="true" />
-          </MenuToggle>
+          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
+          <OverflowMenuContent>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>
@@ -211,9 +208,8 @@ export const TablesAndTabs = () => {
                   variant="plain"
                   onClick={() => {}}
                   isExpanded={false}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={false}
             >
@@ -229,7 +225,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -9,9 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -224,13 +224,13 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
           onFocus={() => setMenuIsOpen(true)}
           onKeyDown={handleTextInputKeyDown}
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -9,9 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -218,13 +218,13 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
           placeholder="search"
           aria-label="Search input"
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>