@patternfly/react-core 5.0.0-alpha.125 → 5.0.0-alpha.127

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -0,0 +1,443 @@
+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'> {
+  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, value: string | number | undefined) => {
+    setStatusSelected(value);
+    setStatusIsOpen(false);
+  };
+
+  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
+    setRiskSelected(value);
+    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={label} value={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={label} value={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>
+  );
+};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -2,7 +2,7 @@
 id: Application launcher
 section: components
 subsection: menus
-cssPrefix: pf-c-app-launcher
+cssPrefix: pf-v5-c-app-launcher
 propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationLauncherContent']
 ouia: true
 ---

package/src/deprecated/components/ContextSelector/ContextSelector.tsx

@@ -135,8 +135,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     } = this.props;
 
     const uniqueId = id || getUniqueId();
-    const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
-    const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+    const toggleId = `pf-v5-context-selector-toggle-id-${uniqueId}`;
+    const screenReaderLabelId = `pf-v5-context-selector-label-id-${uniqueId}`;
     const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
 
     const menuContainer = (

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -10,9 +10,9 @@ exports[`ContextSelector Renders ContextSelector 1`] = `
   >
     <button
       aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -48,9 +48,9 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render-open pf-context-selector-toggle-id-render-open"
+      aria-labelledby="pf-v5-context-selector-label-id-render-open pf-v5-context-selector-toggle-id-render-open"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render-open"
+      id="pf-v5-context-selector-toggle-id-render-open"
       type="button"
     >
       <span
@@ -219,9 +219,9 @@ exports[`ContextSelector Renders in strict mode 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span

package/src/deprecated/components/Dropdown/examples/Dropdown.md

@@ -2,7 +2,7 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-c-dropdown
+cssPrefix: pf-v5-c-dropdown
 propComponents:
   [
     'Dropdown',

package/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md

@@ -2,7 +2,7 @@
 id: Options menu
 section: components
 subsection: menus
-cssPrefix: pf-c-options-menu
+cssPrefix: pf-v5-c-options-menu
 propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
 ouia: true
 ---

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
 ---
 

package/src/deprecated/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-c-select
+cssPrefix: pf-v5-c-select
 propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectOptionObject', 'SelectViewMoreObject']
 ouia: true
 ---

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-c-wizard
+cssPrefix: pf-v5-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ouia: true

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,6 @@
 ---
 id: Bullseye
-cssPrefix: pf-l-bullseye
+cssPrefix: pf-v5-l-bullseye
 section: layouts
 propComponents: ['Bullseye']
 ---

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-l-bullseye,
-.ws-react-l-bullseye .pf-l-bullseye > div {
+.ws-react-l-bullseye .pf-v5-l-bullseye,
+.ws-react-l-bullseye .pf-v5-l-bullseye > div {
   padding: 1rem;
   border-width: 2px;
   border-style: dashed;

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -134,7 +134,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })

package/src/layouts/Flex/examples/Flex.md

@@ -1,6 +1,6 @@
 ---
 id: Flex
-cssPrefix: pf-l-flex
+cssPrefix: pf-v5-l-flex
 section: layouts
 propComponents: ['Flex', 'FlexItem']
 ---

package/src/layouts/Flex/examples/flex.css

@@ -1,8 +1,8 @@
-.ws-react-l-flex .pf-l-flex {
+.ws-react-l-flex .pf-v5-l-flex {
   padding: 1rem;
 }
 
-.ws-react-l-flex .pf-l-flex > div,
+.ws-react-l-flex .pf-v5-l-flex > div,
 .ws-react-l-flex .example-border {
   border-style: dashed;
   border-width: 2px;

package/src/layouts/Gallery/examples/Gallery.md

@@ -1,6 +1,6 @@
 ---
 id: Gallery
-cssPrefix: pf-l-gallery
+cssPrefix: pf-v5-l-gallery
 section: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---

package/src/layouts/Gallery/examples/gallery.css

@@ -1,8 +1,8 @@
-.ws-react-l-gallery .pf-l-gallery {
+.ws-react-l-gallery .pf-v5-l-gallery {
     padding: 1rem;
   }
 
-.ws-react-l-gallery .pf-l-gallery > div {
+.ws-react-l-gallery .pf-v5-l-gallery > div {
   padding: 1rem;
   border-width: 2px;
   border-style: dashed;

package/src/layouts/Grid/examples/Grid.md

@@ -1,6 +1,6 @@
 ---
 id: Grid
-cssPrefix: pf-l-grid
+cssPrefix: pf-v5-l-grid
 section: layouts
 propComponents: ['Grid', 'GridItem']
 ---

package/src/layouts/Grid/examples/grid.css

@@ -1,5 +1,5 @@
-.ws-react-l-grid > .pf-l-grid,
-.ws-react-l-grid > .pf-l-grid > .pf-l-grid__item {
+.ws-react-l-grid > .pf-v5-l-grid,
+.ws-react-l-grid > .pf-v5-l-grid > .pf-v5-l-grid__item {
   min-height: 75px;
   padding: 1rem;
   border-width: 2px;

package/src/layouts/Level/examples/Level.md

@@ -1,6 +1,6 @@
 ---
 id: Level
-cssPrefix: pf-l-level
+cssPrefix: pf-v5-l-level
 section: layouts
 propComponents: ['Level', 'LevelItem']
 ---

package/src/layouts/Level/examples/level.css

@@ -2,12 +2,12 @@
   padding: 9px;
 }
 
-.ws-react-l-level .pf-l-level {
+.ws-react-l-level .pf-v5-l-level {
   min-height: 160px;
 }
 
-.ws-react-l-level .pf-l-level,
-.ws-react-l-level .pf-l-level > div {
+.ws-react-l-level .pf-v5-l-level,
+.ws-react-l-level .pf-v5-l-level > div {
   padding: 9px;
   border-width: 2px;
   border-style: dashed;

package/src/layouts/Split/examples/Split.md

@@ -1,6 +1,6 @@
 ---
 id: Split
-cssPrefix: pf-l-split
+cssPrefix: pf-v5-l-split
 section: layouts
 propComponents: ['Split', 'SplitItem']
 ---