@patternfly/react-core 5.0.0-alpha.126 → 5.0.0-alpha.128

package/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>
-    );
-  }
-}
 ```