From 237fa24293db28089930455acde48e9ed5140e43 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Wed, 24 May 2023 15:53:07 -0400
Subject: [PATCH 1/2] chore(PrimaryDetail): Update demos with deprecated Select
 to use latest Select

---
 .../react-core/src/demos/PrimaryDetail.md     | 1400 +----------------
 .../PrimaryDetailContentPadding.tsx           |  444 ++++++
 .../PrimaryDetail/PrimaryDetailFullPage.tsx   |  444 ++++++
 .../PrimaryDetailInlineModifier.tsx           |  444 ++++++
 4 files changed, 1339 insertions(+), 1393 deletions(-)
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
 create mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index cbb98f188bc..32be47f1363 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -3,8 +3,6 @@ id: Primary-detail
 section: patterns
 ---
 
-import { Select as SelectDeprecated, SelectOption as SelectOptionDeprecated, SelectVariant } from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -26,943 +24,20 @@ import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
 import restIcon from './Card/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/CardData.jsx';
+import DashboardWrapper from './examples/DashboardWrapper';
 
 ## Demos
 
 ### Primary-detail full page
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  InputGroupItem,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class PrimaryDetailFullPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (_event, newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <InputGroupItem isFill>
-              <TextInput
-                name="full-page-data-toolbar-input1"
-                id="full-page-data-toolbar-input1"
-                type="search"
-                aria-label="search input example"
-                onChange={this.onInputChange}
-                value={inputValue}
-              />
-            </InputGroupItem>
-            <InputGroupItem>
-              <Button variant={ButtonVariant.control} aria-label="search button for search input">
-                <SearchIcon />
-              </Button>
-            </InputGroupItem>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseDrawerClick} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="full-page-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="full-page-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="full-page-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
-
-    return (
-      <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of it’s relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <Divider component="div" />
-        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded}>
-            <DrawerContent panelContent={panelContent}>
-              <DrawerContentBody>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
-```
-
-### Primary-detail content padding
-
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  InputGroupItem,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
-class PrimaryDetailContentPadding extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (_event, newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <InputGroupItem isFill>
-              <TextInput
-                name="content-padding-data-toolbar-input1"
-                id="content-padding-data-toolbar-input1"
-                type="search"
-                aria-label="search input example"
-                onChange={this.onInputChange}
-                value={inputValue}
-              />
-            </InputGroupItem>
-            <InputGroupItem>
-              <Button variant={ButtonVariant.control} aria-label="search button for search input">
-                <SearchIcon />
-              </Button>
-            </InputGroupItem>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
+```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
 
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseDrawerClick} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
+```
 
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="content-padding-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="content-padding-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="content-padding-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
+### Primary-detail content padding
+
+```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
 
-    return (
-      <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of it’s relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <Divider component="div" />
-        <PageSection padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded}>
-            <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
-              <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
 
 ### Primary-detail card view
@@ -1975,467 +1050,6 @@ class PrimaryDetailDataListInCard extends React.Component {
 
 ### Primary-detail inline modifier
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  InputGroupItem,
-  PageSection,
-  PageSectionVariants,
-  Progress,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-  TextInput,
-  Title
-} from '@patternfly/react-core';
-import {
-  Select as SelectDeprecated,
-  SelectOption as SelectOptionDeprecated,
-  SelectVariant
-} from '@patternfly/react-core/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
-class PrimaryDetailInlineModifier extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDrawerExpanded: false,
-      drawerPanelBodyContent: '',
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      inputValue: '',
-      statusIsExpanded: false,
-      statusSelected: null,
-      riskIsExpanded: false,
-      riskSelected: null,
-      selectedDataListItemId: ''
-    };
-
-    this.statusOptions = [
-      { value: 'Status', disabled: false, isPlaceholder: true },
-      { value: 'New', disabled: false },
-      { value: 'Pending', disabled: false },
-      { value: 'Running', disabled: false },
-      { value: 'Cancelled', disabled: false }
-    ];
-
-    this.riskOptions = [
-      { value: 'Risk', disabled: false, isPlaceholder: true },
-      { value: 'Low', disabled: false },
-      { value: 'Medium', disabled: false },
-      { value: 'High', disabled: false }
-    ];
-
-    this.onInputChange = (_event, newValue) => {
-      this.setState({ inputValue: newValue });
-    };
-
-    this.onStatusToggle = (_event, isExpanded) => {
-      this.setState({
-        statusIsExpanded: isExpanded
-      });
-    };
-
-    this.onStatusSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearStatusSelection();
-      this.setState({
-        statusSelected: selection,
-        statusIsExpanded: false
-      });
-    };
-
-    this.clearStatusSelection = () => {
-      this.setState({
-        statusSelected: null,
-        statusIsExpanded: false
-      });
-    };
-
-    this.onRiskToggle = (_event, isExpanded) => {
-      this.setState({
-        riskIsExpanded: isExpanded
-      });
-    };
-
-    this.onRiskSelect = (event, selection, isPlaceholder) => {
-      if (isPlaceholder) this.clearRiskSelection();
-      this.setState({
-        riskSelected: selection,
-        riskIsExpanded: false
-      });
-    };
-
-    this.clearRiskSelection = () => {
-      this.setState({
-        riskSelected: null,
-        riskIsExpanded: false
-      });
-    };
-
-    this.onSelectDataListItem = (_event, id) => {
-      this.setState({
-        selectedDataListItemId: id,
-        isDrawerExpanded: true,
-        drawerPanelBodyContent: id.charAt(id.length - 1)
-      });
-    };
-
-    this.onCloseDrawerClick = () => {
-      this.setState({
-        isDrawerExpanded: false,
-        selectedDataListItemId: ''
-      });
-    };
-  }
-
-  render() {
-    const {
-      isDrawerExpanded,
-      drawerPanelBodyContent,
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      inputValue,
-      statusIsExpanded,
-      statusSelected,
-      riskIsExpanded,
-      riskSelected,
-      selectedDataListItemId
-    } = this.state;
-
-    const toggleGroupItems = (
-      <React.Fragment>
-        <ToolbarItem>
-          <InputGroup>
-            <InputGroupItem isFill>
-              <TextInput
-                name="inline-modifier-input"
-                id="inline-modifier-input"
-                type="search"
-                aria-label="search input example"
-                onChange={this.onInputChange}
-                value={inputValue}
-              />
-            </InputGroupItem>
-            <InputGroupItem>
-              <Button variant={ButtonVariant.control} aria-label="search button for search input">
-                <SearchIcon />
-              </Button>
-            </InputGroupItem>
-          </InputGroup>
-        </ToolbarItem>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onStatusToggle}
-              onSelect={this.onStatusSelect}
-              selections={statusSelected}
-              isExpanded={statusIsExpanded}
-            >
-              {this.statusOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-          <ToolbarItem>
-            <SelectDeprecated
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              onToggle={this.onRiskToggle}
-              onSelect={this.onRiskSelect}
-              selections={riskSelected}
-              isExpanded={riskIsExpanded}
-            >
-              {this.riskOptions.map((option, index) => (
-                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
-              ))}
-            </SelectDeprecated>
-          </ToolbarItem>
-        </ToolbarGroup>
-      </React.Fragment>
-    );
-
-    const ToolbarItems = (
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-        {toggleGroupItems}
-      </ToolbarToggleGroup>
-    );
-
-    const panelContent = (
-      <DrawerPanelContent>
-        <DrawerHead>
-          <Title headingLevel="h2" size="xl">
-            node-{drawerPanelBodyContent}
-          </Title>
-          <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseDrawerClick} />
-          </DrawerActions>
-        </DrawerHead>
-        <DrawerPanelBody>
-          <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
-            <FlexItem>
-              <p>
-                The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
-                labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here,
-                and can also make the drawer scrollable.
-              </p>
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 10} title="Title" />
-            </FlexItem>
-            <FlexItem>
-              <Progress value={drawerPanelBodyContent * 5} title="Title" />
-            </FlexItem>
-          </Flex>
-        </DrawerPanelBody>
-      </DrawerPanelContent>
-    );
-    const drawerContent = (
-      <React.Fragment>
-        <Toolbar id="inline-modifier-data-toolbar" usePageInsets>
-          <ToolbarContent>{ToolbarItems}</ToolbarContent>
-        </Toolbar>
-        <DataList
-          aria-label="data list"
-          selectedDataListItemId={selectedDataListItemId}
-          onSelectDataListItem={this.onSelectDataListItem}
-        >
-          <DataListItem id="inline-modifier-item1">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item2">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item3">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly</p>
-                        <small>
-                          Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a>
-                        </small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-          <DataListItem id="inline-modifier-item4">
-            <DataListItemRow>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key="primary content">
-                    <Flex direction={{ default: 'column' }}>
-                      <FlexItem>
-                        <p>patternfly-elements</p>
-                        <small>PatternFly elements</small>
-                      </FlexItem>
-                      <Flex>
-                        <FlexItem>
-                          <CodeBranchIcon /> 10
-                        </FlexItem>
-                        <FlexItem>
-                          <CodeIcon /> 4
-                        </FlexItem>
-                        <FlexItem>
-                          <CubeIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <CheckCircleIcon /> 7
-                        </FlexItem>
-                        <FlexItem>
-                          <ExclamationTriangleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>
-                          <TimesCircleIcon /> 5
-                        </FlexItem>
-                        <FlexItem>Updated 2 days ago</FlexItem>
-                      </Flex>
-                    </Flex>
-                  </DataListCell>,
-                  <DataListAction alignRight>
-                    <Stack>
-                      <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                      </StackItem>
-                      <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
-                      </StackItem>
-                    </Stack>
-                  </DataListAction>
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
+```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
 
-    return (
-      <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of it’s relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <Divider component="div" />
-        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Drawer isExpanded={isDrawerExpanded} isInline>
-            <DrawerContent panelContent={panelContent}>
-              <DrawerContentBody>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
new file mode 100644
index 00000000000..4583a84b433
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -0,0 +1,444 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  InputGroup,
+  InputGroupItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextInput,
+  Title,
+  Select,
+  SelectOption,
+  SelectOptionProps,
+  MenuToggle
+} from '@patternfly/react-core';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
+interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
+  value: string;
+  label: string;
+}
+
+const statusOptions: SelectOptionType[] = [
+  { value: 'New', label: 'New' },
+  { value: 'Pending', label: 'Pending' },
+  { value: 'Running', label: 'Running' },
+  { value: 'Cancelled', label: 'Cancelled' }
+];
+
+const riskOptions: SelectOptionType[] = [
+  { value: 'Low', label: 'Low' },
+  { value: 'Medium', label: 'Medium' },
+  { value: 'High', label: 'High' }
+];
+
+export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
+  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setStatusSelected(itemId);
+    setStatusIsOpen(false);
+  };
+
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setRiskSelected(itemId);
+    setRiskIsOpen(false);
+  };
+
+  const onSelectDataListItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+    id: string
+  ) => {
+    setSelectedDataListItemId(id);
+    setIsDrawerExpanded(true);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+  };
+
+  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {
+    setIsDrawerExpanded(false);
+    setSelectedDataListItemId('');
+  };
+
+  const toggleGroupItems = (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      <ToolbarItem>
+        <InputGroup>
+          <InputGroupItem isFill>
+            <TextInput
+              name="content-padding-data-toolbar-input1"
+              id="content-padding-data-toolbar-input1"
+              type="search"
+              aria-label="search input example"
+              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}
+              value={inputValue}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input">
+              <SearchIcon />
+            </Button>
+          </InputGroupItem>
+        </InputGroup>
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            aria-label="Status select"
+            selected={statusSelected}
+            isOpen={statusIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={statusIsOpen}
+              >
+                {statusSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}
+            onSelect={onStatusSelect}
+          >
+            {statusOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Select
+            aria-label="Risk select"
+            selected={riskSelected}
+            isOpen={riskIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={riskIsOpen}
+              >
+                {riskSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}
+            onSelect={onRiskSelect}
+          >
+            {riskOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </Flex>
+  );
+
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
+    </ToolbarToggleGroup>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          node-{drawerPanelBodyContent}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseDrawerClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="content-padding-data-toolbar" usePageInsets>
+        <ToolbarContent>{ToolbarItems}</ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="data list"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem id="content-padding-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="content-padding-item1 content-padding-action1"
+                  id="content-padding-action1"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="content-padding-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="content-padding-item2 content-padding-action2"
+                  id="content-padding-action2"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="content-padding-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="content-padding-item3 content-padding-action3"
+                  id="content-padding-action3"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="content-padding-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="content-padding-item4 content-padding-action4"
+                  id="content-padding-action4"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it's relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Drawer isExpanded={isDrawerExpanded}>
+          <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
+            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
new file mode 100644
index 00000000000..77705714bae
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -0,0 +1,444 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  InputGroup,
+  InputGroupItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextInput,
+  Title,
+  Select,
+  SelectOption,
+  SelectOptionProps,
+  MenuToggle
+} from '@patternfly/react-core';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
+interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
+  value: string;
+  label: string;
+}
+
+const statusOptions: SelectOptionType[] = [
+  { value: 'New', label: 'New' },
+  { value: 'Pending', label: 'Pending' },
+  { value: 'Running', label: 'Running' },
+  { value: 'Cancelled', label: 'Cancelled' }
+];
+
+const riskOptions: SelectOptionType[] = [
+  { value: 'Low', label: 'Low' },
+  { value: 'Medium', label: 'Medium' },
+  { value: 'High', label: 'High' }
+];
+
+export const PrimaryDetailFullPage: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
+  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setStatusSelected(itemId);
+    setStatusIsOpen(false);
+  };
+
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setRiskSelected(itemId);
+    setRiskIsOpen(false);
+  };
+
+  const onSelectDataListItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+    id: string
+  ) => {
+    setSelectedDataListItemId(id);
+    setIsDrawerExpanded(true);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+  };
+
+  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {
+    setIsDrawerExpanded(false);
+    setSelectedDataListItemId('');
+  };
+
+  const toggleGroupItems = (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      <ToolbarItem>
+        <InputGroup>
+          <InputGroupItem isFill>
+            <TextInput
+              name="full-page-data-toolbar-input1"
+              id="full-page-data-toolbar-input1"
+              type="search"
+              aria-label="search input example"
+              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}
+              value={inputValue}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input">
+              <SearchIcon />
+            </Button>
+          </InputGroupItem>
+        </InputGroup>
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            aria-label="Status select"
+            selected={statusSelected}
+            isOpen={statusIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={statusIsOpen}
+              >
+                {statusSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}
+            onSelect={onStatusSelect}
+          >
+            {statusOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Select
+            aria-label="Risk select"
+            selected={riskSelected}
+            isOpen={riskIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={riskIsOpen}
+              >
+                {riskSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}
+            onSelect={onRiskSelect}
+          >
+            {riskOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </Flex>
+  );
+
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
+    </ToolbarToggleGroup>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          node-{drawerPanelBodyContent}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseDrawerClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="full-page-data-toolbar" usePageInsets>
+        <ToolbarContent>{ToolbarItems}</ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="data list"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem id="full-page-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="full-page-item1 full-page-action1"
+                  id="full-page-action1"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="full-page-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="full-page-item2 full-page-action2"
+                  id="full-page-action2"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="full-page-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="full-page-item3 full-page-action3"
+                  id="full-page-action3"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="full-page-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="full-page-item4 full-page-action4"
+                  id="full-page-action4"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it's relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <Drawer isExpanded={isDrawerExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
new file mode 100644
index 00000000000..2f024394899
--- /dev/null
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -0,0 +1,444 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  InputGroup,
+  InputGroupItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextInput,
+  Title,
+  Select,
+  SelectOption,
+  SelectOptionProps,
+  MenuToggle
+} from '@patternfly/react-core';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/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';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
+interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
+  value: string;
+  label: string;
+}
+
+const statusOptions: SelectOptionType[] = [
+  { value: 'New', label: 'New' },
+  { value: 'Pending', label: 'Pending' },
+  { value: 'Running', label: 'Running' },
+  { value: 'Cancelled', label: 'Cancelled' }
+];
+
+const riskOptions: SelectOptionType[] = [
+  { value: 'Low', label: 'Low' },
+  { value: 'Medium', label: 'Medium' },
+  { value: 'High', label: 'High' }
+];
+
+export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
+  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setStatusSelected(itemId);
+    setStatusIsOpen(false);
+  };
+
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
+    setRiskSelected(itemId);
+    setRiskIsOpen(false);
+  };
+
+  const onSelectDataListItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+    id: string
+  ) => {
+    setSelectedDataListItemId(id);
+    setIsDrawerExpanded(true);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+  };
+
+  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {
+    setIsDrawerExpanded(false);
+    setSelectedDataListItemId('');
+  };
+
+  const toggleGroupItems = (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      <ToolbarItem>
+        <InputGroup>
+          <InputGroupItem isFill>
+            <TextInput
+              name="inline-modifier-data-toolbar-input1"
+              id="inline-modifier-data-toolbar-input1"
+              type="search"
+              aria-label="search input example"
+              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}
+              value={inputValue}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input">
+              <SearchIcon />
+            </Button>
+          </InputGroupItem>
+        </InputGroup>
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            aria-label="Status select"
+            selected={statusSelected}
+            isOpen={statusIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={statusIsOpen}
+              >
+                {statusSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}
+            onSelect={onStatusSelect}
+          >
+            {statusOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Select
+            aria-label="Risk select"
+            selected={riskSelected}
+            isOpen={riskIsOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}
+                isExpanded={riskIsOpen}
+              >
+                {riskSelected}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}
+            onSelect={onRiskSelect}
+          >
+            {riskOptions.map(({ label, value }) => (
+              <SelectOption key={value} itemId={value}>
+                {label}
+              </SelectOption>
+            ))}
+          </Select>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </Flex>
+  );
+
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
+    </ToolbarToggleGroup>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          node-{drawerPanelBodyContent}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseDrawerClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={parseInt(drawerPanelBodyContent) * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="inline-modifier-data-toolbar" usePageInsets>
+        <ToolbarContent>{ToolbarItems}</ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="data list"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem id="inline-modifier-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item1 inline-modifier-action1"
+                  id="inline-modifier-action1"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item2 inline-modifier-action2"
+                  id="inline-modifier-action2"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item3 inline-modifier-action3"
+                  id="inline-modifier-action3"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                    <FlexItem>
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
+                    </FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <CodeBranchIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <CodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <CheckCircleIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <ExclamationTriangleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
+                  </Flex>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item4 inline-modifier-action4"
+                  id="inline-modifier-action4"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it's relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <Drawer isExpanded={isDrawerExpanded} isInline>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

From 936aa99e9c195f93f53b20aec268f374808554b4 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Thu, 25 May 2023 17:03:46 -0400
Subject: [PATCH 2/2] update demos with Select itemId -> value prop name change

---
 .../PrimaryDetail/PrimaryDetailContentPadding.tsx | 15 +++++++--------
 .../PrimaryDetail/PrimaryDetailFullPage.tsx       | 15 +++++++--------
 .../PrimaryDetail/PrimaryDetailInlineModifier.tsx | 15 +++++++--------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index 4583a84b433..2c958292df8 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -50,8 +50,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
-interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
-  value: string;
+interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
 
@@ -78,13 +77,13 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setStatusSelected(itemId);
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setStatusSelected(value);
     setStatusIsOpen(false);
   };
 
-  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setRiskSelected(itemId);
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setRiskSelected(value);
     setRiskIsOpen(false);
   };
 
@@ -142,7 +141,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
             onSelect={onStatusSelect}
           >
             {statusOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}
@@ -166,7 +165,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
             onSelect={onRiskSelect}
           >
             {riskOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
index 77705714bae..0a441fb8ea6 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -50,8 +50,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
-interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
-  value: string;
+interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
 
@@ -78,13 +77,13 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
   const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setStatusSelected(itemId);
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setStatusSelected(value);
     setStatusIsOpen(false);
   };
 
-  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setRiskSelected(itemId);
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setRiskSelected(value);
     setRiskIsOpen(false);
   };
 
@@ -142,7 +141,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
             onSelect={onStatusSelect}
           >
             {statusOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}
@@ -166,7 +165,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
             onSelect={onRiskSelect}
           >
             {riskOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
index 2f024394899..485172283c0 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -50,8 +50,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
-interface SelectOptionType extends Omit<SelectOptionProps, 'children' | 'itemId'> {
-  value: string;
+interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
 
@@ -78,13 +77,13 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setStatusSelected(itemId);
+  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setStatusSelected(value);
     setStatusIsOpen(false);
   };
 
-  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, itemId: string | number | undefined) => {
-    setRiskSelected(itemId);
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setRiskSelected(value);
     setRiskIsOpen(false);
   };
 
@@ -142,7 +141,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             onSelect={onStatusSelect}
           >
             {statusOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}
@@ -166,7 +165,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             onSelect={onRiskSelect}
           >
             {riskOptions.map(({ label, value }) => (
-              <SelectOption key={value} itemId={value}>
+              <SelectOption key={label} value={value}>
                 {label}
               </SelectOption>
             ))}