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

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/Menu/Menu.tsx

@@ -70,7 +70,6 @@ export interface MenuState {
   ouiaStateId: string;
   transitionMoveTarget: HTMLElement;
   flyoutRef: React.Ref<HTMLLIElement> | null;
-  disableHover: boolean;
   currentDrilldownMenuId: string;
 }
 
@@ -99,7 +98,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
     ouiaStateId: getDefaultOUIAId(Menu.displayName),
     transitionMoveTarget: null,
     flyoutRef: null,
-    disableHover: false,
     currentDrilldownMenuId: this.props.id
   };
 
@@ -117,9 +115,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
   }
 
   componentDidMount() {
-    if (this.context) {
-      this.setState({ disableHover: this.context.disableHover });
-    }
     if (canUseDOM && this.props.containsDrilldown && this.props.isRootMenu) {
       window.addEventListener('transitionend', this.handleDrilldownTransition);
     }
@@ -284,7 +279,7 @@ class MenuBase extends Component<MenuProps, MenuState> {
           onGetMenuHeight,
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
-          disableHover: this.state.disableHover,
+          disableHover: this.context?.disableHover ?? false,
           role
         }}
       >

package/src/components/MenuToggle/MenuToggle.tsx

@@ -45,6 +45,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
+  /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */
+  isCircle?: boolean;
   /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
@@ -84,6 +86,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     isFullWidth: false,
     isFullHeight: false,
     isPlaceholder: false,
+    isCircle: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
+      isCircle,
       isSettings,
       splitButtonItems,
       variant,
@@ -225,7 +229,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
 
     return (
       <button
-        className={css(commonStyles)}
+        className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
         type="button"
         aria-label={ariaLabel}
         aria-expanded={isExpanded}

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

@@ -55,6 +55,8 @@ describe('Old Snapshot tests - remove when refactoring', () => {
   });
 });
 
+const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead'];
+
 test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
   render(<MenuToggle size="sm">Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
@@ -110,6 +112,24 @@ test(`Renders with class ${styles.modifiers.settings} when isSettings is passed`
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.settings);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when variant="plain" and isCircle is true`, () => {
+  render(<MenuToggle isCircle variant="plain" aria-label="Toggle"></MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
+toggleVariants
+  .filter((variant) => variant !== 'plain')
+  .forEach((variant) => {
+    test(`Does not with class ${styles.modifiers.circle} when variant="${variant}" and isCircle is true`, () => {
+      render(
+        <MenuToggle isCircle variant={variant as 'default' | 'primary' | 'plainText' | 'secondary' | 'typeahead'}>
+          Toggle
+        </MenuToggle>
+      );
+      expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.circle);
+    });
+  });
+
 test('Does not render custom icon when icon prop and isSettings are passed', () => {
   render(
     <MenuToggle isSettings icon={<div>Custom icon</div>}>