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

package/src/components/Drawer/examples/DrawerPillInline.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 isInline onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </Fragment>
+  );
+};

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>}>

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -20,6 +20,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 A toggle is collapsed until it is selected by a user.
 
 ```ts file="MenuToggleCollapsed.tsx"
+
 ```
 
 ### Expanded toggle
@@ -27,6 +28,7 @@ A toggle is collapsed until it is selected by a user.
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts file ="MenuToggleExpanded.tsx"
+
 ```
 
 ### Small toggle
@@ -42,6 +44,7 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts file="MenuToggleDisabled.tsx"
+
 ```
 
 ### With a badge
@@ -49,6 +52,7 @@ To disable the selection and expansion of a toggle, use the `isDisabled` propert
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts file="MenuToggleBadge.tsx"
+
 ```
 
 ### Settings toggle
@@ -76,6 +80,7 @@ You can also pass images into the `icon` property. The following example passes
 This can be used alongside a text label that provides more context for the image.
 
 ```ts file="MenuToggleAvatarText.tsx"
+
 ```
 
 ### Variant styles
@@ -83,6 +88,7 @@ This can be used alongside a text label that provides more context for the image
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts file="MenuToggleVariantStyles.tsx"
+
 ```
 
 ### Plain toggle with icon
@@ -92,6 +98,15 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts file="MenuTogglePlainIcon.tsx"
+
+```
+
+### Plain circle toggle
+
+You can also pass the `isCircle` property to a plain, icon-only toggle to adjust the styling to a complete circular shape, rather than a rounded square.
+
+```ts file="MenuTogglePlainCircle.tsx"
+
 ```
 
 ### Plain toggle with text label
@@ -99,6 +114,7 @@ If the toggle does not have any visible text content, use the `aria-label` prope
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts file="MenuTogglePlainTextLabel.tsx"
+
 ```
 
 ### Split toggle with checkbox
@@ -150,6 +166,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts file="MenuToggleFullHeight.tsx"
+
 ```
 
 ### Full width toggle
@@ -159,6 +176,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts file="MenuToggleFullWidth.tsx"
+
 ```
 
 ### Typeahead toggle

package/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx

@@ -0,0 +1,11 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const MenuTogglePlainCircle: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" aria-label="plain circle kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain circle expanded kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain circle kebab" />
+  </Fragment>
+);

package/src/components/Tabs/Tabs.tsx

@@ -69,6 +69,8 @@ export interface TabsProps
   isFilled?: boolean;
   /** Enables subtab tab styling */
   isSubtab?: boolean;
+  /** @beta Enables horizontal nav tab styling */
+  isNav?: boolean;
   /** Enables box styling to the tab component */
   isBox?: boolean;
   /** Enables vertical tab styling */
@@ -196,6 +198,7 @@ class Tabs extends Component<TabsProps, TabsState> {
     onSelect: () => undefined as any,
     isFilled: false,
     isSubtab: false,
+    isNav: false,
     isVertical: false,
     isBox: false,
     hasNoBorderBottom: false,
@@ -475,6 +478,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       isAddButtonDisabled,
       isFilled,
       isSubtab,
+      isNav,
       isVertical,
       isBox,
       hasNoBorderBottom,
@@ -561,6 +565,7 @@ class Tabs extends Component<TabsProps, TabsState> {
             styles.modifiers.animateCurrent,
             isFilled && styles.modifiers.fill,
             isSubtab && styles.modifiers.subtab,
+            isNav && styles.modifiers.nav,
             isVertical && styles.modifiers.vertical,
             isVertical && expandable && formatBreakpointMods(expandable, styles),
             isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
+export * from './Compass';
 export * from './Content';
 export * from './DataList';
 export * from './DatePicker';