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

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -12,6 +12,7 @@ import {
   WizardStep
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -35,7 +36,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/demos/AlertGroup.md

@@ -6,8 +6,6 @@ section: components
 import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from './examples/DashboardWrapper';
-import DashboardHeader from './examples/DashboardHeader';
 
 ## Demos
 

package/src/demos/BackToTop.md

@@ -3,8 +3,6 @@ id: Back to top
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 ## Demos
 
 ### Using name selector

package/src/demos/Banner.md

@@ -3,7 +3,8 @@ id: Banner
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 ## Demos
 
@@ -19,11 +20,13 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -35,15 +38,15 @@ class BannerDemo extends React.Component {
               justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
               flexWrap={{ default: 'nowrap' }}
             >
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>
                 This message is sticky to the top of the page.
               </div>
-              <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
             </Flex>
           </Banner>
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -83,11 +86,12 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -105,18 +109,18 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the top of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
-              <PageSection variant={PageSectionVariants.light}>
+              <PageSection>
                 <TextContent>
                   <Text component="h1">Main title</Text>
                   <Text component="p">
@@ -144,12 +148,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the bottom of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>