@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.2

package/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with basic layout 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass"
+  >
+    <div
+      class="pf-v6-c-compass__header pf-m-expanded"
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+    >
+      <div>
+        Sidebar start
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__main"
+    >
+      <div>
+        Main content
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+    >
+      <div>
+        Sidebar end
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__footer pf-m-expanded"
+    >
+      <div>
+        Footer
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-compass"
+        >
+          <div
+            class="pf-v6-c-compass__header pf-m-expanded"
+          >
+            <div>
+              Header
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+          >
+            <div>
+              Sidebar start
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__main"
+          >
+            <div>
+              Main content
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+          >
+            <div>
+              Sidebar end
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__footer pf-m-expanded"
+          >
+            <div>
+              Footer
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-compass__content"
+        >
+          <div>
+            Test content
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__content"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassHeader.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__logo"
+  >
+    <div>
+      Logo
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__nav"
+  >
+    <div>
+      Nav
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__profile"
+  >
+    <div>
+      Profile
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
+    style="--pf-v6-c-compass__hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-compass__hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-compass__hero--gradient--stop-1--light: #ff0000; --pf-v6-c-compass__hero--gradient--stop-2--light: #00ff00; --pf-v6-c-compass__hero--gradient--stop-3--light: #0000ff; --pf-v6-c-compass__hero--gradient--stop-1--dark: #000000; --pf-v6-c-compass__hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-compass__hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-compass__hero-body"
+    >
+      <div>
+        Hero content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with both title and toolbar 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    <div
+      class="pf-v6-c-compass__panel"
+    >
+      <div
+        class="pf-v6-l-flex pf-m-align-items-center"
+      >
+        <div
+          class="pf-m-grow"
+        >
+          <div>
+            Title
+          </div>
+        </div>
+        <div
+          class=""
+        >
+          <div>
+            Toolbar
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    Custom children content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMessageBar.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__message-bar"
+  >
+    <div>
+      Message bar content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with all modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-v6-m-thinking pf-m-full-height pf-m-scrollable"
+  >
+    <div>
+      Panel with all modifiers
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with no modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel"
+  >
+    <div>
+      Basic panel
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/examples/Compass.md

@@ -0,0 +1,38 @@
+---
+id: Compass
+cssPrefix: pf-v6-c-compass
+section: components
+beta: true
+propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
+---
+
+import './compass.css';
+import { useRef, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+## Examples
+
+### Basic
+
+In a basic compass layout, content can be passed to the following props to populate areas of the page:
+
+- `header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
+- `sidebarStart`: content rendered in the left side or start side of the page
+- `main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components.
+- `sidebarEnd`: content rendered in the right side or end side of the page
+- `footer`: content rendered in the bottom of the page
+
+The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
+
+```ts file="CompassBasic.tsx"
+
+```
+
+### Demo
+
+```ts isFullscreen file="CompassDemo.tsx"
+
+```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -0,0 +1,33 @@
+import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+  const footerContent = <div>Footer</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+    />
+  );
+};

package/src/components/Compass/examples/CompassDemo.tsx

@@ -0,0 +1,151 @@
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMessageBar,
+  Tabs,
+  TabsComponent,
+  Tab,
+  TabContent,
+  TabTitleText,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const [activeTab, setActiveTab] = useState<number>(0);
+  const [activeSubtab, setActiveSubtab] = useState<number>(0);
+  const subTabsRef = useRef<HTMLDivElement>(null);
+
+  const navContent = (
+    <>
+      <CompassPanel isPill hasNoPadding>
+        <Tabs
+          activeKey={activeTab}
+          isNav
+          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+          component={TabsComponent.nav}
+          aria-label="Compass navigation tabs"
+          inset={{ default: 'insetXl' }}
+        >
+          <Tab
+            tabContentId="subtabs"
+            tabContentRef={subTabsRef}
+            eventKey={0}
+            title={<TabTitleText>Tab 1</TabTitleText>}
+            aria-label="Compass tab with subtabs"
+          />
+          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+        </Tabs>
+      </CompassPanel>
+      <CompassPanel isPill hasNoPadding>
+        <TabContent id="subtabs" ref={subTabsRef}>
+          <Tabs
+            activeKey={activeSubtab}
+            isSubtab
+            isNav
+            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+            aria-label="Compass navigation subtabs"
+            inset={{ default: 'insetXl' }}
+          >
+            <Tab
+              tabContentId="subtab-1"
+              eventKey={0}
+              title={
+                <TabTitleText>
+                  <div id="subtab-1">Subtab 1</div>
+                </TabTitleText>
+              }
+            />
+            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+          </Tabs>
+        </TabContent>
+      </CompassPanel>
+    </>
+  );
+
+  const sidebarContent = (
+    <CompassPanel isPill>
+      <ActionList isIconList className="pf-m-vertical" /* isVertical */>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Play">
+              <Button variant="plain" icon={<PlayIcon />} aria-label="Play" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Add">
+              <Button variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListItem>
+          <Tooltip content="Copy">
+            <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+          </Tooltip>
+        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Help">
+              <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Second copy">
+              <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
+    </CompassPanel>
+  );
+
+  const headerContent = <CompassHeader logo={<div>logo</div>} nav={navContent} profile={<div>Profile</div>} />;
+  const sidebarStartContent = sidebarContent;
+  const mainContent = (
+    <>
+      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <CompassPanel>Content</CompassPanel>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = sidebarContent;
+  const footerContent = (
+    <CompassMessageBar>
+      <CompassPanel isPill hasNoPadding>
+        Message bar
+      </CompassPanel>
+    </CompassMessageBar>
+  );
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};

package/src/components/Compass/examples/compass.css

@@ -0,0 +1,11 @@
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}

package/src/components/Compass/index.ts

@@ -0,0 +1,7 @@
+export * from './Compass';
+export * from './CompassContent';
+export * from './CompassHeader';
+export * from './CompassHero';
+export * from './CompassMainHeader';
+export * from './CompassMessageBar';
+export * from './CompassPanel';

package/src/components/Drawer/Drawer.tsx

@@ -17,6 +17,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isExpanded?: boolean;
   /** Indicates if the content element and panel element are displayed side by side. */
   isInline?: boolean;
+  /** @beta Indicates if the drawer will have pill styles */
+  isPill?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
   /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
@@ -50,6 +52,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   children,
   isExpanded = false,
   isInline = false,
+  isPill = false,
   isStatic = false,
   position = 'end',
   onExpand = () => {},
@@ -65,6 +68,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
           styles.drawer,
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
+          isPill && styles.modifiers.pill,
           isStatic && styles.modifiers.static,
           (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,

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

@@ -10,9 +10,10 @@ import {
   DrawerPanelContent,
   DrawerColorVariant
 } from '../';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
@@ -162,3 +163,27 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
 
   expect(consoleError).not.toHaveBeenCalled();
 });
+
+test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  render(
+    <Drawer data-testid="drawer" isExpanded={true} position="left" isPill>
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>Drawer content text</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
+});

package/src/components/Drawer/examples/Drawer.md

@@ -17,6 +17,7 @@ propComponents:
   ]
 section: components
 ---
+
 import { Fragment, useRef, useState } from 'react';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
@@ -143,3 +144,15 @@ To customize which element receives focus when the drawer panel expands, use the
 ```ts file="./DrawerFocusTrap.tsx"
 
 ```
+
+### Pill
+
+```ts file="./DrawerBasicPill.tsx"
+
+```
+
+### Pill inline
+
+```ts file="./DrawerPillInline.tsx"
+
+```

package/src/components/Drawer/examples/DrawerBasicPill.tsx

@@ -0,0 +1,57 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerBasicPill: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const drawerRef = useRef<HTMLDivElement>(undefined);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} isPill onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </Fragment>
+  );
+};