@patternfly/react-core 4.262.0 → 4.264.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.262.0",
+  "version": "4.264.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.10",
-    "@patternfly/react-styles": "^4.91.10",
-    "@patternfly/react-tokens": "^4.93.10",
+    "@patternfly/react-icons": "^4.93.0",
+    "@patternfly/react-styles": "^4.92.0",
+    "@patternfly/react-tokens": "^4.94.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.219.2",
+    "@patternfly/patternfly": "4.221.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "441c5d2ff327a5c9b97eaa299c1c8b9b929f38e1"
+  "gitHead": "e1f95ce96852165dd4d102cd87c6b49288f01eff"
 }

package/src/components/Button/Button.tsx

@@ -172,6 +172,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         <span className={css(styles.buttonProgress)}>
           <Spinner
             size={spinnerSize.md}
+            isInline={isInline}
             aria-valuetext={spinnerAriaValueText}
             aria-label={spinnerAriaLabel}
             aria-labelledby={spinnerAriaLabelledBy}

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

@@ -257,7 +257,7 @@ exports[`Button isLoading inline link 1`] = `
       <span
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-md"
+        class="pf-c-spinner pf-m-inline"
         role="progressbar"
       >
         <span

package/src/components/NumberInput/NumberInput.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
-  value?: number | null;
+  value?: number | '';
   /** Additional classes added to the number input */
   className?: string;
   /** Sets the width of the number input to a number of characters */
@@ -89,7 +89,6 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   plusBtnProps,
   ...props
 }: NumberInputProps) => {
-  value = value || 0;
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });

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

@@ -195,22 +195,22 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('47.01');
   });
 
-  test('renders 0 if no value passed', () => {
+  test('renders 0 (default value) if no value passed', () => {
     render(<NumberInput />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders 0 if undefined value passed', () => {
+  test('renders 0 (default value) if undefined value passed', () => {
     render(<NumberInput value={undefined} />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders 0 if null value passed', () => {
+  test('renders nothing if null value passed', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
-    expect(input).toHaveDisplayValue('0');
+    expect(input).toHaveDisplayValue('');
   });
 
   test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {

package/src/components/NumberInput/examples/NumberInput.md

@@ -19,6 +19,8 @@ propComponents: ['NumberInput']
 
 ### With unit and thresholds
 
+To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.
+
 ```ts file="./NumberInputUnitThreshold.tsx"
 ```
 

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStep: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
   const step = 3;
 
   const stepper = (stepValue: number) => {
-    setValue(value + stepValue);
+    setValue((value || 0) + stepValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   return (

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
   const minValue = 90;
   const maxValue = 100;
   const step = 3;
@@ -19,13 +19,12 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =>
   };
 
   const stepper = (stepValue: number) => {
-    setValue(value + stepValue);
+    setValue((value || 0) + stepValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
-    setValue(newValue);
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onBlur = (event: React.FormEvent<HTMLInputElement>) => {

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -2,20 +2,20 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDefault: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
 
   const onMinus = () => {
-    const newValue = value - 1;
+    const newValue = (value || 0) - 1;
     setValue(newValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onPlus = () => {
-    const newValue = value + 1;
+    const newValue = (value || 0) + 1;
     setValue(newValue);
   };
 

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -2,22 +2,22 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(100);
+  const [value, setValue] = React.useState<number | ''>(100);
   const minValue = 0;
   const maxValue = 100;
 
   const onMinus = () => {
-    const newValue = value - 1;
+    const newValue = (value || 0) - 1;
     setValue(newValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onPlus = () => {
-    const newValue = value + 1;
+    const newValue = (value || 0) + 1;
     setValue(newValue);
   };
 

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -2,26 +2,26 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnit: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState(90);
-  const [value2, setValue2] = React.useState(Number((1.0).toFixed(2)));
+  const [value1, setValue1] = React.useState<number | ''>(90);
+  const [value2, setValue2] = React.useState<number | ''>(Number((1.0).toFixed(2)));
 
-  const onMinus1 = () => setValue1(value1 - 1);
+  const onMinus1 = () => setValue1((value1 || 0) - 1);
   const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue1(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue1(value === '' ? value : +value);
   };
-  const onPlus1 = () => setValue1(value1 + 1);
+  const onPlus1 = () => setValue1((value1 || 0) + 1);
 
   const onMinus2 = () => {
-    const newValue = Number((value2 - 0.01).toFixed(2));
+    const newValue = Number(((value2 || 0) - 0.01).toFixed(2));
     setValue2(newValue);
   };
   const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue2(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue2(value === '' ? value : +value);
   };
   const onPlus2 = () => {
-    const newValue = Number((value2 + 0.01).toFixed(2));
+    const newValue = Number(((value2 || 0) + 0.01).toFixed(2));
     setValue2(newValue);
   };
 

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnitThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState<number | ''>(0);
   const minValue = 0;
   const maxValue = 10;
 
@@ -18,18 +18,27 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
   };
 
   const onMinus = () => {
-    const newValue = normalizeBetween(value - 1, minValue, maxValue);
+    const newValue = normalizeBetween((value as number) - 1, minValue, maxValue);
     setValue(newValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
-    setValue(newValue);
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
+  };
+
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const blurVal = +event.target.value;
+
+    if (blurVal < minValue) {
+      setValue(minValue);
+    } else if (blurVal > maxValue) {
+      setValue(maxValue);
+    }
   };
 
   const onPlus = () => {
-    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    const newValue = normalizeBetween((value as number) + 1, minValue, maxValue);
     setValue(newValue);
   };
 
@@ -43,6 +52,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
         max={maxValue}
         onMinus={onMinus}
         onChange={onChange}
+        onBlur={onBlur}
         onPlus={onPlus}
         inputName="input"
         inputAriaLabel="number input"

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -2,25 +2,25 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputVaryingSizes: React.FunctionComponent = () => {
-  const [input1Value, setInput1Value] = React.useState(1);
-  const [input2Value, setInput2Value] = React.useState(1234567890);
-  const [input3Value, setInput3Value] = React.useState(5);
-  const [input4Value, setInput4Value] = React.useState(12345);
+  const [input1Value, setInput1Value] = React.useState<number | ''>(1);
+  const [input2Value, setInput2Value] = React.useState<number | ''>(1234567890);
+  const [input3Value, setInput3Value] = React.useState<number | ''>(5);
+  const [input4Value, setInput4Value] = React.useState<number | ''>(12345);
 
   const onChange = (
     event: React.FormEvent<HTMLInputElement>,
-    updateFunction: React.Dispatch<React.SetStateAction<number>>
+    updateFunction: React.Dispatch<React.SetStateAction<number | ''>>
   ) => {
-    const target = event.target as HTMLInputElement;
-    updateFunction(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    updateFunction(value === '' ? value : +value);
   };
 
-  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
-    updateFunction(value - 1);
+  const onMinus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {
+    updateFunction((value || 0) - 1);
   };
 
-  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
-    updateFunction(value + 1);
+  const onPlus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {
+    updateFunction((value || 0) + 1);
   };
 
   return (

package/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -9,22 +9,21 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
   const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
 
   const onPlus = () => {
-    const newVal = value + 1;
+    const newVal = (value || 0) + 1;
     setValue(newVal);
     validate(newVal);
   };
 
   const onMinus = () => {
-    const newVal = value - 1;
+    const newVal = (value || 0) - 1;
     setValue(newVal);
     validate(newVal);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
-    setValue(newVal);
-    validate(newVal);
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
+    validate(value);
   };
 
   const validate = newVal => {

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

@@ -36,7 +36,9 @@ exports[`popover renders close-button, header and body 1`] = `
 
 exports[`popover renders in strict mode 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    style="display: contents;"
+  >
     <div>
       Toggle Popover
     </div>

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

@@ -441,7 +441,9 @@ exports[`SearchInput renders search input in strict mode 1`] = `
   <div
     class=""
   >
-    <div>
+    <div
+      style="display: contents;"
+    >
       <div
         class="pf-c-input-group"
       >

package/src/components/Spinner/Spinner.tsx

@@ -20,6 +20,8 @@ export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'si
   isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
+  /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
+  isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
   /** Id of element which describes what is being loaded */
@@ -33,6 +35,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   isSVG = false,
   diameter,
+  isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
@@ -41,7 +44,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
 
   return (
     <Component
-      className={css(styles.spinner, styles.modifiers[size], className)}
+      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
       role="progressbar"
       aria-valuetext={ariaValueText}
       {...(isSVG && { viewBox: '0 0 100 100' })}

package/src/components/Spinner/examples/Spinner.md

@@ -17,3 +17,7 @@ propComponents: ['Spinner']
 ### Custom size
 ```ts file="./SpinnerCustomSize.tsx"
 ```
+
+### Inline size
+```ts file="./SpinnerInline.tsx" isBeta
+```

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Spinner, Text, TextContent } from '@patternfly/react-core';
+
+export const SpinnerInline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <TextContent>
+      <Text component="h1">
+        Heading
+        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+      </Text>
+      <Text component="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
+      </Text>
+      <Text component="h2">
+        Second level
+        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+      </Text>
+      <Text component="p">
+        Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
+        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
+        urna vel cursus venenatis. Suspendisse potenti.
+      </Text>
+      <small>
+        Sometimes you need small text
+        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+      </small>
+    </TextContent>
+  </React.Fragment>
+);

package/src/components/Tabs/Tab.tsx

@@ -5,10 +5,12 @@ import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
-import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { TabAction } from './TabAction';
 
-export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
+export interface TabProps
+  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>,
+    OUIAProps {
   /** content rendered inside the Tab content area. */
   children?: React.ReactNode;
   /** additional classes added to the Tab */
@@ -39,6 +41,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   closeButtonAriaLabel?: string;
   /** @beta Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
+  /** @beta Actions rendered beside the tab content */
+  actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;
 }
@@ -59,6 +63,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   tooltip,
   closeButtonAriaLabel,
   isCloseDisabled = false,
+  actions,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -117,26 +122,22 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       className={css(
         styles.tabsItem,
         eventKey === localActiveKey && styles.modifiers.current,
-        handleTabClose && styles.modifiers.action,
-        handleTabClose && (isDisabled || isAriaDisabled) && styles.modifiers.disabled,
+        (handleTabClose || actions) && styles.modifiers.action,
+        (isDisabled || isAriaDisabled) && styles.modifiers.disabled,
         childClassName
       )}
       role="presentation"
     >
       {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
+      {actions && actions}
       {handleTabClose !== undefined && (
-        <span className={css(styles.tabsItemClose)}>
-          <Button
-            variant="plain"
-            aria-label={closeButtonAriaLabel || 'Close tab'}
-            onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
-            isDisabled={isCloseDisabled}
-          >
-            <span className={css(styles.tabsItemCloseIcon)}>
-              <TimesIcon />
-            </span>
-          </Button>
-        </span>
+        <TabAction
+          aria-label={closeButtonAriaLabel || 'Close tab'}
+          onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
+          isDisabled={isCloseDisabled}
+        >
+          <TimesIcon />
+        </TabAction>
       )}
     </li>
   );

package/src/components/Tabs/TabAction.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
+import { Button } from '../Button';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+
+export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type'>, OUIAProps {
+  /** Content rendered in the tab action */
+  children?: React.ReactNode;
+  /** Additional classes added to the tab action span */
+  className?: string;
+  /** Click callback for tab action button */
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /** Flag indicating if the tab action is a help action */
+  isHelpAction?: boolean;
+  /** Flag indicating if the tab action is disabled */
+  isDisabled?: boolean;
+  /** Accessible label for the tab action */
+  'aria-label'?: string;
+  /** @hide Callback for the section ref */
+  innerRef?: React.Ref<any>;
+}
+
+const TabActionBase: React.FunctionComponent<TabActionProps> = ({
+  children,
+  className,
+  onClick,
+  isHelpAction,
+  isDisabled,
+  'aria-label': ariaLabel = 'Tab action',
+  innerRef,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ouiaId,
+  ouiaSafe,
+  ...props
+}: TabActionProps) => (
+  <span className={css(styles.tabsItemAction, isHelpAction && styles.modifiers.help, className)}>
+    <Button
+      ref={innerRef}
+      type="button"
+      variant="plain"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      isDisabled={isDisabled}
+      {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)}
+      {...props}
+    >
+      <span className={css(styles.tabsItemActionIcon)}>{children}</span>
+    </Button>
+  </span>
+);
+
+export const TabAction = React.forwardRef((props: TabActionProps, ref: React.Ref<HTMLElement>) => (
+  <TabActionBase {...props} innerRef={ref} />
+));
+
+TabAction.displayName = 'TabAction';

package/src/components/Tabs/Tabs.tsx

@@ -42,7 +42,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback to handle tab closing */
+  /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
   /** @beta Callback for the add button. Passing this property inserts the add button */
   onAdd?: () => void;

package/src/components/Tabs/__tests__/Tab.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Tab } from '../Tab';
+import { TabAction } from '../TabAction';
 import { TabTitleText } from '../TabTitleText';
 
 test('should not render anything', () => {
@@ -11,3 +12,12 @@ test('should not render anything', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('renders tab action', () => {
+  const { asFragment } = render(
+    <Tab eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>} actions={<TabAction>test</TabAction>}>
+      Tab 2 section
+    </Tab>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});