@patternfly/react-core 6.0.0-alpha.86 → 6.0.0-alpha.88

package/src/components/Content/examples/ContentDescriptionList.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentDescriptionList: React.FunctionComponent = () => (
-  <TextList component={TextListVariants.dl}>
-    <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>
-      The part of the Internet that contains websites and web pages
-    </TextListItem>
-    <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-    <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-  </TextList>
+  <Content component={ContentVariants.dl}>
+    <Content component={ContentVariants.dt}>Web</Content>
+    <Content component={ContentVariants.dd}>The part of the Internet that contains websites and web pages</Content>
+    <Content component={ContentVariants.dt}>HTML</Content>
+    <Content component={ContentVariants.dd}>A markup language for creating web pages</Content>
+    <Content component={ContentVariants.dt}>CSS</Content>
+    <Content component={ContentVariants.dd}>A technology to make HTML look better</Content>
+  </Content>
 );

package/src/components/Content/examples/ContentHeadings.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentHeadings: React.FunctionComponent = () => (
   <>
-    <Text component={TextVariants.h1}>Hello World</Text>
-    <Text component={TextVariants.h2}>Second level</Text>
-    <Text component={TextVariants.h3}>Third level</Text>
-    <Text component={TextVariants.h4}>Fourth level</Text>
-    <Text component={TextVariants.h5}>Fifth level</Text>
-    <Text component={TextVariants.h6}>Sixth level</Text>
+    <Content component={ContentVariants.h1}>Hello World</Content>
+    <Content component={ContentVariants.h2}>Second level</Content>
+    <Content component={ContentVariants.h3}>Third level</Content>
+    <Content component={ContentVariants.h4}>Fourth level</Content>
+    <Content component={ContentVariants.h5}>Fifth level</Content>
+    <Content component={ContentVariants.h6}>Sixth level</Content>
   </>
 );

package/src/components/Content/examples/ContentOrderedList.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentOrderedList: React.FunctionComponent = () => (
-  <TextList component={TextListVariants.ol}>
-    <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-    <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-    <TextListItem>Integer in volutpat libero.</TextListItem>
-    <TextListItem>Donec a diam tellus.</TextListItem>
-    <TextListItem>Aenean nec tortor orci.</TextListItem>
-    <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-    <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-  </TextList>
+  <Content component={ContentVariants.ol}>
+    <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content>
+    <Content component={ContentVariants.li}>Cras gravida arcu at diam gravida gravida.</Content>
+    <Content component={ContentVariants.li}>Integer in volutpat libero.</Content>
+    <Content component={ContentVariants.li}>Donec a diam tellus.</Content>
+    <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content>
+    <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>
+    <Content component={ContentVariants.li}>Vivamus maximus ultricies pulvinar.</Content>
+  </Content>
 );

package/src/components/Content/examples/ContentPlainList.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
-import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentPlainList: React.FunctionComponent = () => (
   <>
-    <Text component={TextVariants.h3}>Plain unordered list</Text>
-    <TextList isPlain>
-      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-      <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>
-      <TextListItem>Ut non enim metus.</TextListItem>
-    </TextList>
-    <Text component={TextVariants.h3}>Plain ordered list</Text>
-    <TextList component={TextListVariants.ol} isPlain>
-      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-      <TextListItem>Integer in volutpat libero.</TextListItem>
-      <TextListItem>Donec a diam tellus.</TextListItem>
-      <TextListItem>Aenean nec tortor orci.</TextListItem>
-      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-    </TextList>
+    <Content component={ContentVariants.h3}>Plain unordered list</Content>
+    <Content component={ContentVariants.ul} isPlainList>
+      <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+      <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+      <Content component={ContentVariants.li}>
+        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+      </Content>
+      <Content component={ContentVariants.li}>Ut non enim metus.</Content>
+    </Content>
+    <Content component={ContentVariants.h3}>Plain ordered list</Content>
+    <Content component={ContentVariants.ol} isPlainList>
+      <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content>
+      <Content component={ContentVariants.li}>
+        {' '}
+        component={ContentVariants.li}Cras gravida arcu at diam gravida gravida.
+      </Content>
+      <Content component={ContentVariants.li}>Integer in volutpat libero.</Content>
+      <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content>
+      <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>
+      <Content component={ContentVariants.li}>Vivamus maximus ultricies pulvinar.</Content>
+    </Content>
   </>
 );

package/src/components/Content/examples/ContentUnorderedList.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { TextList, TextListItem } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentUnorderedList: React.FunctionComponent = () => (
-  <TextList>
-    <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-    <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-    <TextListItem>
+  <Content component={ContentVariants.ul}>
+    <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+    <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+    <Content component={ContentVariants.li}>
       Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-      <TextList>
-        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-      </TextList>
-    </TextListItem>
-    <TextListItem>Ut non enim metus.</TextListItem>
-  </TextList>
+      <Content component={ContentVariants.ul}>
+        <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+        <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+      </Content>
+    </Content>
+    <Content component={ContentVariants.li}>Ut non enim metus.</Content>
+  </Content>
 );

package/src/components/Content/examples/ContentVisited.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentVisited: React.FunctionComponent = () => (
   <>
-    <TextContent>
-      <Text component={TextVariants.h3}>Link example</Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} isVisitedLink href="#">
+    <Content>
+      <Content component={ContentVariants.h3}>Link example</Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} isVisitedLink href="#">
           Click to visit link
-        </Text>
-      </Text>
-    </TextContent>
+        </Content>
+      </Content>
+    </Content>
     <br />
-    <TextContent isVisited>
-      <Text component={TextVariants.h3}>Link content example</Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+    <Content isVisitedLink>
+      <Content component={ContentVariants.h3}>Link content example</Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 1
-        </Text>
-      </Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+        </Content>
+      </Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 2
-        </Text>
-      </Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+        </Content>
+      </Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 3
-        </Text>
-      </Text>
-    </TextContent>
+        </Content>
+      </Content>
+    </Content>
   </>
 );

package/src/components/Content/examples/ContentWrapper.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentWrapper: React.FunctionComponent = () => (
-  <TextContent>
-    <Text component={TextVariants.p}>
-      Text with a component of type "p" still renders the same when wrapped with a TextContent.
-    </Text>
-    <p>If located within a wrapping TextContent, html elements are styled as well!</p>
-  </TextContent>
+  <Content>
+    <Content component={ContentVariants.p}>
+      Content with a component of type "p" still renders the same when wrapped with a Content.
+    </Content>
+    <p>If located within a wrapping Content, html elements are styled as well!</p>
+  </Content>
 );

package/src/components/Content/index.ts

@@ -1,4 +1 @@
 export * from './Content';
-export * from './TextContent';
-export * from './TextList';
-export * from './TextListItem';

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Content,
   DataList,
   DataListItem,
   DataListCell,
@@ -9,9 +10,6 @@ import {
   DataListContent,
   DataListItemCells,
   DataListItemRow,
-  Text,
-  TextVariants,
-  TextContent,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -44,9 +42,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
   return (
     <>
       <div key="example-1">
-        <TextContent>
-          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
-        </TextContent>
+        <Content>
+          <h4>Default fitting - example 1</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 1">
           <DataListItem aria-labelledby="width-ex1-item1">
             <DataListItemRow>
@@ -71,9 +69,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-2">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
-        </TextContent>
+        <Content>
+          <h4>Flex modifiers - example 2</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 2">
           <DataListItem aria-labelledby="width-ex2-item1">
             <DataListItemRow>
@@ -139,9 +137,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-3">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
-        </TextContent>
+        <Content>
+          <h4>Flex modifiers - example 3</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 3">
           <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
             <DataListItemRow>

package/src/components/Icon/examples/IconInline.tsx

@@ -1,26 +1,24 @@
 import React from 'react';
-import { Icon, Text, TextContent } from '@patternfly/react-core';
+import { Icon, Content } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const IconInline: React.FunctionComponent = () => (
   <React.Fragment>
-    <TextContent>
-      <Text component="h1">
+    <Content>
+      <h1>
         Heading
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
-      </Text>
-      <Text component="p">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
-      </Text>
-      <Text component="h2">
+      </h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.</p>
+      <h2>
         Second level
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
-      </Text>
-      <Text component="p">
+      </h2>
+      <p>
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
@@ -33,7 +31,7 @@ export const IconInline: React.FunctionComponent = () => (
         </strong>
         blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
         venenatis. Suspendisse potenti.
-      </Text>
+      </p>
       <small>
         Sometimes you need small text
         <Icon isInline>
@@ -57,6 +55,6 @@ export const IconInline: React.FunctionComponent = () => (
         <PlusCircleIcon />
       </Icon>
       extra large
-    </TextContent>
+    </Content>
   </React.Fragment>
 );

package/src/components/Modal/examples/ModalCustomHeader.tsx

@@ -8,7 +8,7 @@ import {
   ModalVariant,
   Title,
   TitleSizes,
-  TextContent,
+  Content,
   Flex
 } from '@patternfly/react-core';
 
@@ -34,12 +34,10 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
         aria-describedby="modal-custom-header-description"
       >
         <ModalHeader>
-          <TextContent>
-            <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
-              Custom header modal
-            </Title>
+          <Content>
+            <h1 id="modal-custom-header-label">Custom header modal</h1>
             <p>Add custom content to the header by not passing the titles prop the modal box header component.</p>
-          </TextContent>
+          </Content>
         </ModalHeader>
         <ModalBody>
           <span id="modal-custom-header-description">

package/src/components/Page/Page.tsx

@@ -94,6 +94,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
   breadcrumbProps?: PageBreadcrumbProps;
+  /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
+  isContentFilled?: boolean;
 }
 
 export interface PageState {
@@ -249,6 +251,7 @@ class Page extends React.Component<PageProps, PageState> {
       additionalGroupedContent,
       groupProps,
       breadcrumbProps,
+      isContentFilled,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -294,7 +297,7 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <div className={css(styles.pageMainContainer)}>
+      <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>
         <Component
           ref={this.mainRef}
           role={role}

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
+  isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -31,6 +33,7 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -52,6 +55,8 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,

package/src/components/Page/PageSection.tsx

@@ -27,7 +27,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
-  /** Enables the page section to fill the available vertical space */
+  /** Enables the page section to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Limits the width of the section */
   isWidthLimited?: boolean;

package/src/components/Page/__tests__/Page.test.tsx

@@ -13,6 +13,8 @@ import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
 import { Masthead } from '../../Masthead';
 
+import styles from '@patternfly/react-styles/css/components/Page/page';
+
 const props = {
   'aria-label': 'Page layout',
   id: 'PageId',
@@ -352,4 +354,23 @@ describe('Page', () => {
     expect(screen.getByTestId('page-test-id')).toHaveAttribute('id', props.id);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
+    render(<Page {...props} role="main"></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isContentFilled={true} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={true}></Page>);
+
+    expect(screen.getByRole('main').parentElement).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Does not render with ${styles.modifiers.noFill} if isContentFilled={false} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={false}></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 describe('page group', () => {
   test('Verify basic render', () => {
@@ -71,4 +72,23 @@ describe('page group', () => {
 
     expect(consoleWarning).toHaveBeenCalled();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+    render(<PageGroup>test</PageGroup>);
+
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+    render(<PageGroup isFilled={true}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+    render(<PageGroup isFilled={false}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -153,3 +153,30 @@ test('Does not render with PageBody wrapper when hasBodyWrapper is false', () =>
 
   expect(screen.getByText('test')).not.toHaveClass(styles.pageMainBody);
 });
+
+test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.fill);
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.noFill);
+});
+
+test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={true}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.fill);
+});
+
+test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={false}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.noFill);
+});

package/src/components/Page/examples/Page.md

@@ -62,9 +62,9 @@ When the `isManagedSidebar` property is true, it manages the sidebar open/close
 
 ### Filled page sections
 
-By default, the last page section is "filled", meaning it fills the available vertical space of a page.
+By default, page sections will not expand to fill in the available vertical space in a page.
 
-To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
+To change this default behavior, pass `isContentFilled` to the `<Page>` component and `isFilled={true}` to any child `<PageSection>` or `<PageGroup>` component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -60,13 +60,12 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page masthead={masthead} sidebar={sidebar}>
+    <Page isContentFilled masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true}>This section fills the available space.</PageSection>
-      <PageSection isFilled={false}>
-        This section is set to not fill the available space, since the last page section is set to fill the available
-        space by default.
+      <PageSection isFilled={true} variant="secondary">
+        This section fills the available space.
       </PageSection>
+      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/Slider/examples/SliderActions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, SliderOnChangeEvent, Button, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
@@ -64,7 +64,7 @@ export const SliderActions: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {value1}</Text>
+      <Content component="h3">Slider value is: {value1}</Content>
       <Slider
         value={value1}
         onChange={onChange1}

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
   const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
@@ -15,14 +15,14 @@ export const SliderContinuous: React.FunctionComponent = () => {
         onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
-      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Content component="h3">Slider Value is: {value}</Content>
       <Slider
         hasTooltipOverThumb={hasTooltipOverThumb}
         value={value}
         onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Content component="h3">Slider value is: {valueCustom}</Content>
       <Slider
         onChange={(_event: SliderOnChangeEvent, value: number) => setValueCustom(value)}
         value={valueCustom}

package/src/components/Slider/examples/SliderDisabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
@@ -22,7 +22,7 @@ export const SliderDisabled: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
+      <Content component="h3">Slider value is: {displayValue()}</Content>
       <Slider
         isDisabled
         value={value}