@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -31,7 +31,6 @@ import {
   NotificationDrawerListItemHeader,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -541,7 +540,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -550,7 +549,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
             </Text>
           </TextContent>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>Panel section content</PageSection>
+        <PageSection>Panel section content</PageSection>
       </Page>
     </React.Fragment>
   );

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -33,7 +33,6 @@ import {
   NotificationDrawerListItemHeader,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -780,7 +779,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -789,7 +788,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
             </Text>
           </TextContent>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>Panel section content</PageSection>
+        <PageSection>Panel section content</PageSection>
       </Page>
     </React.Fragment>
   );

package/src/demos/PasswordStrength.md

@@ -7,6 +7,7 @@ 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';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Demos
 

package/src/demos/PrimaryDetail.md

@@ -23,8 +23,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 ## Demos
 
@@ -67,7 +66,6 @@ import {
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Progress,
   TextContent,
@@ -77,7 +75,6 @@ import {
   ToolbarItem,
   ToolbarContent
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import pfIcon from './assets/pf-logo-small.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
@@ -90,7 +87,8 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -598,7 +596,7 @@ class PrimaryDetailCardView extends React.Component {
 
     return (
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
@@ -617,7 +615,7 @@ class PrimaryDetailCardView extends React.Component {
             </DrawerContent>
           </Drawer>
         </PageSection>
-        <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
+        <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }}>
           <Pagination
             itemCount={filtered.length}
             page={this.state.page}
@@ -652,7 +650,6 @@ import {
   Flex,
   FlexItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   SimpleList,
   SimpleListGroup,
@@ -662,7 +659,7 @@ import {
   TextInput,
   Title
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class PrimaryDetailSimpleListInCard extends React.Component {
   constructor(props) {
@@ -763,7 +760,7 @@ class PrimaryDetailSimpleListInCard extends React.Component {
 
     return (
       <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -818,13 +815,12 @@ import {
   FlexItem,
   MenuToggle,
   PageSection,
-  PageSectionVariants,
   Progress,
   Text,
   TextContent,
   Title
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class PrimaryDetailDataListInCard extends React.Component {
   constructor(props) {
@@ -1001,7 +997,7 @@ class PrimaryDetailDataListInCard extends React.Component {
 
     return (
       <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">

package/src/demos/ProgressDemo.md

@@ -14,7 +14,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
   };
 
@@ -52,7 +52,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {
       setCurrentValue(nextValue);
     }

package/src/demos/Tabs.md

@@ -3,7 +3,6 @@ id: Tabs
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -12,6 +11,7 @@ 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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Demos
 
@@ -21,7 +21,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -40,9 +39,11 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
 
 TabsOpenDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -67,7 +68,7 @@ TabsOpenDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>
@@ -155,7 +156,7 @@ TabsOpenDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -174,7 +175,7 @@ TabsOpenDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection type="tabs" isWidthLimited>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -183,7 +184,7 @@ TabsOpenDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>
@@ -211,7 +212,6 @@ TabsOpenDemo = () => {
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -230,9 +230,10 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -263,7 +264,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>
@@ -351,7 +352,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -370,7 +371,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection type="tabs" isWidthLimited>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -379,7 +380,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }}>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>
             <Tabs