@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/components/Panel/Panel.tsx

@@ -8,7 +8,7 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Class to add to outer div */
   className?: string;
   /** Adds panel variant styles */
-  variant?: 'raised' | 'bordered';
+  variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
   /** @hide Forwarded ref */
@@ -26,8 +26,7 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   <div
     className={css(
       styles.panel,
-      variant === 'raised' && styles.modifiers.raised,
-      variant === 'bordered' && styles.modifiers.bordered,
+      variant && styles.modifiers[variant],
       isScrollable && styles.modifiers.scrollable,
       className
     )}

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

@@ -46,6 +46,11 @@ test(`Renders with class name ${styles.modifiers.bordered} when variant is borde
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
+test(`Renders with class name ${styles.modifiers.secondary} when variant is secondary`, () => {
+  render(<Panel variant="secondary">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.secondary);
+});
+
 test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);

package/src/components/Panel/examples/Panel.md

@@ -116,6 +116,21 @@ const BorderedPanel = () => (
 );
 ```
 
+### Secondary variant
+
+```js
+import React from 'react';
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
 ### Scrollable
 
 ```js

package/src/components/Popover/Popover.tsx

@@ -334,10 +334,10 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   };
   const onDocumentClick = (event: MouseEvent, triggerElement: HTMLElement, popperElement: HTMLElement) => {
     if (hideOnOutsideClick && visible) {
-      // check if we clicked within the popper, if so don't do anything
-      const isChild = popperElement && popperElement.contains(event.target as Node);
-      if (isChild) {
-        // clicked within the popper
+      const isFromChild = popperElement && popperElement.contains(event.target as Node);
+      const isFromTrigger = triggerElement && triggerElement.contains(event.target as Node);
+      if (isFromChild || isFromTrigger) {
+        // if clicked within the popper or on the trigger, ignore this event
         return;
       }
       if (triggerManually) {
@@ -415,7 +415,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       ref={popoverRef}
       active={focusTrapActive}
       focusTrapOptions={{
-        returnFocusOnDeactivate: true,
+        returnFocusOnDeactivate: propWithFocusTrap !== false,
         clickOutsideDeactivates: true,
         // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
         // We want to prevent this in case false is ever passed in.

package/src/components/Radio/Radio.tsx

@@ -7,17 +7,17 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
     OUIAProps {
-  /** Additional classes added to the radio wrapper.  This will be a div element if
-   * isLabelWrapped is true, otherwise this will be a label element.
+  /** Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the radio input. */
   inputClassName?: string;
   /** Id of the radio. */
   id: string;
-  /** Flag to show if the radio label is wrapped on small screen. */
+  /** Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified. */
   isLabelWrapped?: boolean;
-  /** Flag to show if the radio label is shown before the radio button. */
+  /** Flag to show if the radio label is shown before the radio input. */
   isLabelBeforeButton?: boolean;
   /** Flag to show if the radio is checked. */
   checked?: boolean;
@@ -39,6 +39,8 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
+  /** Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
+  component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -88,6 +90,7 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
       body,
       ouiaId,
       ouiaSafe = true,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -110,41 +113,39 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
       />
     );
 
-    let labelRendered: React.ReactNode = null;
-    if (label && isLabelWrapped) {
-      labelRendered = <span className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}>{label}</span>;
-    } else if (label) {
-      labelRendered = (
-        <label className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-          {label}
-        </label>
-      );
-    }
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const descRender = description ? <span className={css(styles.radioDescription)}>{description}</span> : null;
-    const bodyRender = body ? <span className={css(styles.radioBody)}>{body}</span> : null;
-    const childrenRendered = isLabelBeforeButton ? (
-      <>
-        {labelRendered}
-        {inputRendered}
-        {descRender}
-        {bodyRender}
-      </>
-    ) : (
-      <>
-        {inputRendered}
-        {labelRendered}
-        {descRender}
-        {bodyRender}
-      </>
-    );
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel && props.id}
+      >
+        {label}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    return isLabelWrapped ? (
-      <label className={css(styles.radio, className)} htmlFor={props.id}>
-        {childrenRendered}
-      </label>
-    ) : (
-      <div className={css(styles.radio, !label && styles.modifiers.standalone, className)}>{childrenRendered}</div>
+    return (
+      <Component
+        className={css(styles.radio, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel && props.id}
+      >
+        {isLabelBeforeButton ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
+        )}
+        {description && <span className={css(styles.radioDescription)}>{description}</span>}
+        {body && <span className={css(styles.radioBody)}>{body}</span>}
+      </Component>
     );
   }
 }

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

@@ -100,4 +100,45 @@ describe('Radio', () => {
 
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('Renders with the label wrapper if isLabelWrapped is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelWrapped />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('LABEL');
+  });
+
+  test('Renders with span element around the inner label text if isLabelWrapped is provided', () => {
+    const labelText = 'test radio label';
+    render(<Radio id="test-id" name="check" isLabelWrapped label={labelText} />);
+
+    expect(screen.getByText(labelText).tagName).toBe('SPAN');
+  });
+
+  test('Renders with the provided component although isLabelWrapped is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelWrapped component="h3" />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('H3');
+  });
+
+  test('Renders with the label wrapper if component is set to label', () => {
+    render(<Radio id="test-id" name="check" component="label" />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('LABEL');
+  });
+
+  test('Renders with span element around the inner label text if component is set to label', () => {
+    const labelText = 'test radio label';
+    render(<Radio id="test-id" name="check" component="label" label={labelText} />);
+
+    expect(screen.getByText(labelText).tagName).toBe('SPAN');
+  });
+
+  test('Renders label before radio input if isLabelBeforeButton is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelBeforeButton label={'test radio label'} />);
+
+    const wrapper = screen.getByRole('radio').parentElement!;
+
+    expect(wrapper.children[0].tagName).toBe('LABEL');
+    expect(wrapper.children[1].tagName).toBe('INPUT');
+  });
 });

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

@@ -13,72 +13,112 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
-`Select` builds off of the Menu component suite to wrap commonly used properties and functions for a select menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Select` to further customize the select menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
-### Single
+### Single select
+To let users select a single item from a list, use a single select menu.
+
+You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
+
+To disable the select menu toggle, use the `isDisabled` property. In the following example, select the checkbox to observe this behavior.
 
 ```ts file="./SelectBasic.tsx"
 
 ```
 
-### Option variations
+### Select option variants
+
+The following example showcases different option variants and customizations that are commonly used in a select menu. 
+
+To create these variants, you can pass different properties into a `<SelectOption>` component. 
 
-Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the [Menu documentation](/components/menus/menu).
+This example provides examples of: 
+
+- An option with a description, which is created by using the `description` property.
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon. 
+- An option with an icon, which is created by using the `icon` property. 
+- An option that is disabled by using the `isDisabled` property. 
 
 ```ts file="./SelectOptionVariations.tsx"
 
 ```
 
-### Grouped single
+### With grouped items
+To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
 
 ```ts file="./SelectGrouped.tsx"
 
 ```
 
-### Checkbox
+### Checkbox select
+To let users select multiple list options via checkbox input, use a checkbox select. 
+
+To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
+
+By default, the menu toggle will display a badge to indicate the number of items that a user has selected.
 
 ```ts file="./SelectCheckbox.tsx"
 
 ```
 
 ### Typeahead
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 ```ts file="./SelectTypeahead.tsx"
 
 ```
 
 ### Typeahead with create option
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
+
+To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
+
+The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
 ```ts file="./SelectTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with chips
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
 ```ts file="./SelectMultiTypeahead.tsx"
 
 ```
 
 ### Multiple typeahead with create option
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with checkboxes
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```
 
-### View more
+### With view more 
+
+To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
+
+The following example shows 3 items before the "View more" link, but you can adjust the number of visible items for your use case.
 
 ```ts file="./SelectViewMore.tsx"
 
 ```
 
-### Footer
+### With a footer
+
+You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
+
 
 ```ts file="./SelectFooter.tsx"
 
-```
+```

package/src/components/Sidebar/Sidebar.tsx

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 
+export enum SidebarBackgroundVariant {
+  default = 'default',
+  secondary = 'secondary'
+}
+
 export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above. */

package/src/components/Sidebar/SidebarContent.tsx

@@ -8,6 +8,8 @@ export interface SidebarContentProps extends React.HTMLProps<HTMLDivElement> {
   hasNoBackground?: boolean;
   /** Adds padding to the content. */
   hasPadding?: boolean;
+  /** Variant of the sidebar content background. */
+  backgroundVariant?: 'default' | 'secondary';
 }
 
 export const SidebarContent: React.FunctionComponent<SidebarContentProps> = ({
@@ -15,6 +17,7 @@ export const SidebarContent: React.FunctionComponent<SidebarContentProps> = ({
   children,
   hasNoBackground,
   hasPadding,
+  backgroundVariant = 'default',
   ...props
 }: SidebarContentProps) => (
   <div
@@ -22,6 +25,7 @@ export const SidebarContent: React.FunctionComponent<SidebarContentProps> = ({
       styles.sidebarContent,
       hasNoBackground && styles.modifiers.noBackground,
       hasPadding && styles.modifiers.padding,
+      backgroundVariant !== 'default' && styles.modifiers[backgroundVariant],
       className
     )}
     {...props}

package/src/components/Sidebar/SidebarPanel.tsx

@@ -30,6 +30,8 @@ export interface SidebarPanelProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
     '2xl'?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
+  /** Variant of the sidebar panel background. */
+  backgroundVariant?: 'default' | 'secondary';
 }
 
 export const SidebarPanel: React.FunctionComponent<SidebarPanelProps> = ({
@@ -39,6 +41,7 @@ export const SidebarPanel: React.FunctionComponent<SidebarPanelProps> = ({
   hasNoBackground,
   hasPadding,
   width,
+  backgroundVariant = 'default',
   ...props
 }: SidebarPanelProps) => (
   <div
@@ -48,6 +51,7 @@ export const SidebarPanel: React.FunctionComponent<SidebarPanelProps> = ({
       hasNoBackground && styles.modifiers.noBackground,
       hasPadding && styles.modifiers.padding,
       formatBreakpointMods(width, styles),
+      backgroundVariant !== 'default' && styles.modifiers[backgroundVariant],
       className
     )}
     {...props}

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -18,6 +18,11 @@ test(`Renders with class name ${styles.sidebarContent}`, () => {
   expect(screen.getByText('Test')).toHaveClass(styles.sidebarContent);
 });
 
+test(`Renders with class name ${styles.modifiers.secondary} when backgroundVariant="secondary" is passed`, () => {
+  render(<SidebarContent backgroundVariant="secondary">Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.secondary);
+});
+
 test('Renders with custom class name when className prop is provided', () => {
   render(<SidebarContent className="custom-class">Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -18,6 +18,11 @@ test(`Renders with with class name ${styles.sidebarPanel}`, () => {
   expect(screen.getByText('Test')).toHaveClass(styles.sidebarPanel);
 });
 
+test(`Renders with class name ${styles.modifiers.secondary} when backgroundVariant="secondary" is passed`, () => {
+  render(<SidebarPanel backgroundVariant="secondary">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.secondary);
+});
+
 test('Renders with custom class name when className prop is provided', () => {
   render(<SidebarPanel className="custom-class">Test</SidebarPanel>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/SimpleList/SimpleListItem.tsx

@@ -77,6 +77,7 @@ class SimpleListItem extends React.Component<SimpleListItemProps> {
                 className={css(
                   styles.simpleListItemLink,
                   isCurrentItem && styles.modifiers.current,
+                  !isButton && styles.modifiers.link,
                   componentClassName
                 )}
                 onClick={(evt: React.MouseEvent) => {

package/src/components/SimpleList/examples/SimpleList.md

@@ -10,15 +10,23 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ### Simple list
 
 ```ts file="SimpleListBasic.tsx"
+
+```
+
+### Simple list with links
+
+```ts file="SimpleListLinks.tsx"
+
 ```
 
 ### Grouped list
 
 ```ts file="SimpleListGrouped.tsx"
+
 ```
 
 ### Uncontrolled simple list
 
 ```ts file="SimpleListUncontrolled.tsx"
-```
 
+```

package/src/components/SimpleList/examples/SimpleListBasic.tsx

@@ -6,9 +6,7 @@ export const SimpleListBasic: React.FunctionComponent = () => {
     <SimpleListItem key="item1" isActive>
       List item 1
     </SimpleListItem>,
-    <SimpleListItem key="item2" component="a" href="#">
-      List item 2
-    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
     <SimpleListItem key="item3">List item 3</SimpleListItem>
   ];
 

package/src/components/SimpleList/examples/SimpleListLinks.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListLinks: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" component="a" href="#" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" component="a" href="#">
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Links Example">{items}</SimpleList>;
+};

package/src/components/Tabs/TabContent.tsx

@@ -29,7 +29,7 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
 
 const variantStyle = {
   default: '',
-  light300: styles.modifiers.light_300
+  secondary: styles.modifiers.secondary
 };
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
@@ -56,26 +56,30 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
 
     return (
       <TabsContextConsumer>
-        {({ variant }: TabsContextProps) => (
-          <section
-            ref={innerRef}
-            hidden={children ? null : child.props.eventKey !== activeKey}
-            className={
-              children
-                ? css(styles.tabContent, className, variantStyle[variant])
-                : css(styles.tabContent, child.props.className, variantStyle[variant])
-            }
-            id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
-            aria-label={ariaLabel}
-            aria-labelledby={labelledBy}
-            role="tabpanel"
-            tabIndex={0}
-            {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
-            {...props}
-          >
-            {children || child.props.children}
-          </section>
-        )}
+        {({ variant }: TabsContextProps) => {
+          const variantClass = variantStyle[variant];
+
+          return (
+            <section
+              ref={innerRef}
+              hidden={children ? null : child.props.eventKey !== activeKey}
+              className={
+                children
+                  ? css(styles.tabContent, className, variantClass)
+                  : css(styles.tabContent, child.props.className, variantClass)
+              }
+              id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledBy}
+              role="tabpanel"
+              tabIndex={0}
+              {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
+              {...props}
+            >
+              {children || child.props.children}
+            </section>
+          );
+        }}
       </TabsContextConsumer>
     );
   }

package/src/components/Tabs/TabTitleIcon.tsx

@@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent<TabTitleIconProps> = ({
   className = '',
   ...props
 }: TabTitleIconProps) => (
-  <span className={css(styles.tabsItemIcon, className)} {...props}>
+  <span className={css(`${styles.tabs}__item-icon`, className)} {...props}>
     {children}
   </span>
 );