feat(Tabs): add the option to disable the Add button (#11872)

* feat(Tabs): add the option to disable the Add button

The button in the Tabs component for adding new tabs can now get disabled if the isAddButtonDisabeled prop is set.

* fix(Tabs): fix switched descriptions of addButtonAriaLabel and isAddButtonDisabled

Author: ksiekl

packages/react-core/src/components/Tabs/Tabs.tsx

@@ -63,6 +63,8 @@ export interface TabsProps
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;
+  /** Flag indicating that the add button is disabled when onAdd is passed in */
+  isAddButtonDisabled?: boolean;
   /** Enables the filled tab list layout */
   isFilled?: boolean;
   /** Enables subtab tab styling */
@@ -464,6 +466,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       activeKey,
       defaultActiveKey,
       id,
+      isAddButtonDisabled,
       isFilled,
       isSubtab,
       isVertical,
@@ -631,6 +634,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                 aria-label={addButtonAriaLabel || 'Add tab'}
                 onClick={onAdd}
                 icon={<PlusIcon />}
+                isDisabled={isAddButtonDisabled}
               />
             </span>
           )}

packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -492,3 +492,25 @@ test('should not render scroll buttons when isVertical is true', () => {
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
 });
+
+test('should render a disabled add button', () => {
+  render(
+    <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label" isAddButtonDisabled={true}>
+      <div>Tab content</div>
+    </Tabs>
+  );
+
+  const addButton = screen.getByLabelText('add-label');
+  expect(addButton).toBeDisabled();
+});
+
+test('should render an enabled add button', () => {
+  render(
+    <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label" isAddButtonDisabled={false}>
+      <div>Tab content</div>
+    </Tabs>
+  );
+
+  const addButton = screen.getByLabelText('add-label');
+  expect(addButton).not.toBeDisabled();
+});