Add Support for disabled state tabs

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

@@ -1,5 +1,9 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { OUIAProps } from '../../helpers';
+import { TabButton } from './TabButton';
+import { TabsContext } from './TabsContext';
+import { css } from '@patternfly/react-styles';
 
 export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
   /** content rendered inside the Tab content area. */
@@ -18,8 +22,81 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   tabContentRef?: React.RefObject<any>;
   /** whether to render the tab or not */
   isHidden?: boolean;
+  /** Adds disabled styling and disables the button using the disabled html attribute */
+  isDisabled?: boolean;
+  /** Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute */
+  isAriaDisabled?: boolean;
+  /** Events to prevent when the button is in an aria-disabled state */
+  inoperableEvents?: string[];
+  /** Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-/** The parent <Tabs> component accecesses this component's propeties directly in order to present each Tab */
-export const Tab: React.FunctionComponent<TabProps> = (_props: TabProps) => null;
+const TabBase: React.FunctionComponent<TabProps> = ({
+  title,
+  eventKey,
+  tabContentRef,
+  id: childId,
+  tabContentId,
+  className: childClassName = '',
+  ouiaId: childOuiaId,
+  isDisabled,
+  isAriaDisabled,
+  inoperableEvents = ['onClick', 'onKeyPress'],
+  href,
+  innerRef,
+  ...props
+}: TabProps) => {
+  const preventedEvents = inoperableEvents.reduce(
+    (handlers, eventToPrevent) => ({
+      ...handlers,
+      [eventToPrevent]: (event: React.SyntheticEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+      }
+    }),
+    {}
+  );
+  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick } = React.useContext(TabsContext);
+  let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
+  if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
+    ariaControls = undefined;
+  }
+  const isButtonElement = Boolean(!href);
+  const getDefaultTabIdx = () => {
+    if (isDisabled) {
+      return isButtonElement ? null : -1;
+    } else if (isAriaDisabled) {
+      return null;
+    }
+  };
+  return (
+    <li
+      className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}
+      ref={innerRef}
+    >
+      <TabButton
+        className={css(
+          styles.tabsLink,
+          isDisabled && href && styles.modifiers.disabled,
+          isAriaDisabled && styles.modifiers.ariaDisabled
+        )}
+        disabled={isButtonElement ? isDisabled : null}
+        aria-disabled={isDisabled || isAriaDisabled}
+        tabIndex={getDefaultTabIdx()}
+        onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
+        {...(isAriaDisabled ? preventedEvents : null)}
+        id={`pf-tab-${eventKey}-${childId || uniqueId}`}
+        aria-controls={ariaControls}
+        tabContentRef={tabContentRef}
+        ouiaId={childOuiaId}
+        href={href}
+        {...props}
+      >
+        {title}
+      </TabButton>
+    </li>
+  );
+};
+
+export const Tab = React.forwardRef((props: TabProps, ref: React.Ref<any>) => <TabBase innerRef={ref} {...props} />);
 Tab.displayName = 'Tab';

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

@@ -6,7 +6,6 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helpers/util';
-import { TabButton } from './TabButton';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
@@ -113,9 +112,10 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
   handleTabClick(
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
-    tabContentRef: React.RefObject<any>,
-    mountOnEnter: boolean
+    tabContentRef: React.RefObject<any>
   ) {
+    // When tab is an achor tag with href, cancel navigation event
+    event.preventDefault();
     const { shownKeys } = this.state;
     const { onSelect, defaultActiveKey } = this.props;
     // if defaultActiveKey Tabs are uncontrolled, set new active key internally
@@ -138,7 +138,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         tabContentRef.current.hidden = false;
       }
     }
-    if (mountOnEnter) {
+    if (this.props.mountOnEnter) {
       this.setState({
         shownKeys: shownKeys.concat(eventKey)
       });
@@ -274,7 +274,16 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     return (
-      <TabsContextProvider value={{ variant }}>
+      <TabsContextProvider
+        value={{
+          variant,
+          mountOnEnter,
+          unmountOnExit,
+          localActiveKey,
+          uniqueId,
+          handleTabClick: (...args) => this.handleTabClick(...args)
+        }}
+      >
         <Component
           aria-label={ariaLabel}
           className={css(
@@ -303,46 +312,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             <AngleLeftIcon />
           </button>
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons}>
-            {filteredChildren.map((child, index) => {
-              const {
-                title,
-                eventKey,
-                tabContentRef,
-                id: childId,
-                tabContentId,
-                className: childClassName = '',
-                ouiaId: childOuiaId,
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                isHidden,
-                ...rest
-              } = child.props;
-              let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
-              if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
-                ariaControls = undefined;
-              }
-              return (
-                <li
-                  key={index}
-                  className={css(
-                    styles.tabsItem,
-                    eventKey === localActiveKey && styles.modifiers.current,
-                    childClassName
-                  )}
-                >
-                  <TabButton
-                    className={css(styles.tabsLink)}
-                    onClick={(event: any) => this.handleTabClick(event, eventKey, tabContentRef, mountOnEnter)}
-                    id={`pf-tab-${eventKey}-${childId || uniqueId}`}
-                    aria-controls={ariaControls}
-                    tabContentRef={tabContentRef}
-                    ouiaId={childOuiaId}
-                    {...rest}
-                  >
-                    {title}
-                  </TabButton>
-                </li>
-              );
-            })}
+            {filteredChildren}
           </ul>
           <button
             className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}

packages/react-core/src/components/Tabs/TabsContext.ts

@@ -2,10 +2,24 @@ import * as React from 'react';
 
 export interface TabsContextProps {
   variant: 'default' | 'light300';
+  mountOnEnter: boolean;
+  unmountOnExit: boolean;
+  localActiveKey: string | number;
+  uniqueId: string;
+  handleTabClick: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    eventKey: number | string,
+    tabContentRef: React.RefObject<any>
+  ) => void;
 }
 
-const TabsContext = React.createContext<TabsContextProps>({
-  variant: 'default'
+export const TabsContext = React.createContext<TabsContextProps>({
+  variant: 'default',
+  mountOnEnter: false,
+  unmountOnExit: false,
+  localActiveKey: '',
+  uniqueId: '',
+  handleTabClick: () => null
 });
 
 export const TabsContextProvider = TabsContext.Provider;

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

@@ -4,6 +4,11 @@ exports[`Tabs should match snapshot (auto-generated) 1`] = `
 <ContextProvider
   value={
     Object {
+      "handleTabClick": [Function],
+      "localActiveKey": 0,
+      "mountOnEnter": false,
+      "uniqueId": "string",
+      "unmountOnExit": false,
       "variant": "div",
     }
   }
@@ -34,17 +39,11 @@ exports[`Tabs should match snapshot (auto-generated) 1`] = `
       className="pf-c-tabs__list"
       onScroll={[Function]}
     >
-      <li
-        className="pf-c-tabs__item"
-        key="0"
+      <div
+        key=".0"
       >
-        <TabButton
-          aria-controls="pf-tab-section-undefined-string"
-          className="pf-c-tabs__link"
-          id="pf-tab-undefined-string"
-          onClick={[Function]}
-        />
-      </li>
+        ReactNode
+      </div>
     </ul>
     <button
       aria-hidden={false}

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

@@ -8,5 +8,43 @@ exports[`should not render anything 1`] = `
       "Tab item 1"
     </TabTitleText>
   }
-/>
+>
+  <TabBase
+    eventKey={0}
+    innerRef={null}
+    title={
+      <TabTitleText>
+        "Tab item 1"
+      </TabTitleText>
+    }
+  >
+    <li
+      className="pf-c-tabs__item"
+    >
+      <TabButton
+        aria-controls="pf-tab-section-0-"
+        className="pf-c-tabs__link"
+        id="pf-tab-0-"
+        onClick={[Function]}
+      >
+        <button
+          aria-controls="pf-tab-section-0-"
+          className="pf-c-tabs__link"
+          data-ouia-component-type="PF4/TabButton"
+          data-ouia-safe={true}
+          id="pf-tab-0-"
+          onClick={[Function]}
+        >
+          <TabTitleText>
+            <span
+              className="pf-c-tabs__item-text"
+            >
+              "Tab item 1"
+            </span>
+          </TabTitleText>
+        </button>
+      </TabButton>
+    </li>
+  </TabBase>
+</Tab>
 `;