fix(tooltip): merge conflict

src/components/DataTable/README.md

@@ -418,11 +418,9 @@ In practice, the combination of these components looks like the following:
               </TableExpandRow>
               {/* toggle based off of if the row is expanded. If it is, render TableExpandedRow */}
               {row.isExpanded && (
-                <TableExpandedRow>
-                  <TableCell colSpan={headers.length + 1}>
-                    <h1>Expandable row content</h1>
-                    <p>Description here</p>
-                  </TableCell>
+                <TableExpandedRow colSpan={headers.length + 1}>
+                  <h1>Expandable row content</h1>
+                  <p>Description here</p>
                 </TableExpandedRow>
               )}
             </React.Fragment>
@@ -440,7 +438,8 @@ Some things to note:
 - `TableExpandRow` is what you use instead of `TableRow` for the content of your row. We make sure to add `getRowProps` so that it has the right props
 - `row.isExpanded` is the field available on `row` to know if the `row` is expanded or not
 - `TableExpandedRow` is used as a wrapper for any content you want to appear in the expanded row
-  - Tip: the `colSpan` attribute on the `TableCell` should be `headers.length + 1` in order to span the whole table
+  - Tip: the `colSpan` attribute on the `TableExpandedRow` should be `headers.length + 1` in order to span the whole table
+  - `TableExpandedRow` should not have a `TableCell` child
 
 #### Programmatic expansion
 

src/components/Pagination/Pagination.js

@@ -301,6 +301,7 @@ export default class Pagination extends Component {
             className={`${prefix}--select__item-count`}
             labelText=""
             hideLabel
+            noLabel
             inline
             onChange={this.handleSizeChange}
             value={statePageSize}>

src/components/Select/Select.js

@@ -26,6 +26,7 @@ const Select = React.forwardRef(
       labelText,
       disabled,
       children,
+      noLabel, // reserved for use with <Pagination> component
       iconDescription,
       hideLabel,
       invalid,
@@ -99,9 +100,11 @@ const Select = React.forwardRef(
     return (
       <div className={`${prefix}--form-item`}>
         <div className={selectClasses}>
-          <label htmlFor={id} className={labelClasses}>
-            {labelText}
-          </label>
+          {!noLabel && (
+            <label htmlFor={id} className={labelClasses}>
+              {labelText}
+            </label>
+          )}
           {!inline && helper}
           {componentsX && inline && (
             <>
@@ -204,6 +207,12 @@ Select.propTypes = {
    * Specify whether you want the light version of this control
    */
   light: PropTypes.bool,
+
+  /**
+   * Reserved for use with <Pagination> component. Will not render a label for the
+   * select since Pagination renders one for us.
+   */
+  noLabel: PropTypes.bool,
 };
 
 Select.defaultProps = {

src/components/Switch/Switch-test.js

@@ -42,6 +42,14 @@ describe('Switch', () => {
       }
     });
 
+    it('label should have the expected class', () => {
+      if (componentsX) {
+        const className = 'bx--content-switcher__label';
+        expect(buttonWrapper.find('span').hasClass(className)).toEqual(true);
+        expect(linkWrapper.find('span').hasClass(className)).toEqual(true);
+      }
+    });
+
     it('icon should have the expected class', () => {
       if (!componentsX) {
         const cls = 'bx--content-switcher__icon';

src/components/Tab/Tab.js

@@ -37,6 +37,11 @@ export default class Tab extends React.Component {
      */
     handleTabKeyDown: PropTypes.func,
 
+    /**
+     * Whether your Tab is disabled.
+     */
+    disabled: PropTypes.bool,
+
     /**
      * Provide a string that represents the `href` of the Tab
      */
@@ -114,6 +119,7 @@ export default class Tab extends React.Component {
       handleTabClick,
       handleTabAnchorFocus, // eslint-disable-line
       handleTabKeyDown,
+      disabled,
       href,
       index,
       label,
@@ -125,11 +131,10 @@ export default class Tab extends React.Component {
       ...other
     } = this.props;
 
-    const classes = classNames(
-      `${prefix}--tabs__nav-item`,
-      { [`${prefix}--tabs__nav-item--selected`]: selected },
-      className
-    );
+    const classes = classNames(className, `${prefix}--tabs__nav-item`, {
+      [`${prefix}--tabs__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs__nav-item--selected`]: selected,
+    });
 
     const anchorProps = {
       className: `${prefix}--tabs__nav-link`,

src/components/Tabs/Tabs-story.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, number, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
@@ -36,6 +36,7 @@ const props = {
     ),
   }),
   tab: () => ({
+    disabled: boolean('Disabled (disabled in <Tab>)', false),
     href: text('The href for tab (href in <Tab>)', '#'),
     role: text('ARIA role (role in <Tab>)', 'presentation'),
     tabIndex: number('Tab index (tabIndex in <Tab>)', 0),

src/components/Tooltip/Tooltip-story.js

@@ -76,7 +76,7 @@ const props = {
       true
     ),
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    triggerText: null,
+    iconDescription: 'Helpful Information',
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
     renderIcon: OverflowMenuVertical16,
   }),

src/components/Tooltip/Tooltip.js

@@ -25,6 +25,7 @@ import ClickListener from '../../internal/ClickListener';
 import { breakingChangesX, componentsX } from '../../internal/FeatureFlags';
 import mergeRefs from '../../tools/mergeRefs';
 import { keys, keyCodes, matches as keyDownMatch } from '../../tools/key';
+import isRequiredOneOf from '../../prop-types/isRequiredOneOf';
 
 const { prefix } = settings;
 
@@ -173,11 +174,6 @@ class Tooltip extends Component {
       PropTypes.func,
     ]),
 
-    /**
-     * The content to put into the trigger UI, except the (default) tooltip icon.
-     */
-    triggerText: PropTypes.node,
-
     /**
      * The callback function to optionally render the icon element.
      * It should be a component with React.forwardRef().
@@ -213,15 +209,16 @@ class Tooltip extends Component {
      */
     iconName: PropTypes.string,
 
-    /**
-     * The description of the default tooltip icon, to be put in its SVG 'aria-label' and 'alt' .
-     */
-    iconDescription: PropTypes.string,
-
-    /**
-     * The title of the default tooltip icon, to be put in its SVG `<title>` element.
-     */
-    iconTitle: PropTypes.string,
+    ...isRequiredOneOf({
+      /**
+       * The content to put into the trigger UI, except the (default) tooltip icon.
+       */
+      triggerText: PropTypes.node,
+      /**
+       * The description of the default tooltip icon, to be put in its SVG 'aria-label' and 'alt' .
+       */
+      iconDescription: PropTypes.string,
+    }),
 
     /**
      * `true` if opening tooltip should be triggered by clicking the trigger button.
@@ -239,9 +236,7 @@ class Tooltip extends Component {
     direction: DIRECTION_BOTTOM,
     renderIcon: !componentsX ? undefined : Information,
     showIcon: true,
-    iconDescription: 'tooltip',
-    iconTitle: '',
-    triggerText: 'Provide triggerText',
+    triggerText: null,
     menuOffset: getMenuOffset,
     clickToOpen: breakingChangesX,
   };
@@ -266,13 +261,17 @@ class Tooltip extends Component {
     requestAnimationFrame(() => {
       this.getTriggerPosition();
     });
+
+    document.addEventListener('keydown', this.handleEscKeyPress, false);
   }
 
   componentWillUnmount() {
     if (this._debouncedHandleHover) {
       this._debouncedHandleHover.cancel();
       this._debouncedHandleHover = null;
     }
+
+    document.removeEventListener('keydown', this.handleEscKeyPress, false);
   }
 
   static getDerivedStateFromProps({ open }, state) {
@@ -391,6 +390,13 @@ class Tooltip extends Component {
     }
   };
 
+  handleEscKeyPress = event => {
+    const { open } = this.state;
+    if (open && keyDownMatch(event, [keys.ESC, keyCodes.ESC, keyCodes.IEESC])) {
+      return this.setState({ open: false });
+    }
+  };
+
   render() {
     const {
       triggerId = (this.triggerId =
@@ -411,7 +417,6 @@ class Tooltip extends Component {
       showIcon,
       icon,
       iconName,
-      iconTitle,
       iconDescription,
       renderIcon: IconCustomElement,
       menuOffset,
@@ -453,75 +458,60 @@ class Tooltip extends Component {
       triggerClassName
     );
 
-    const ariaDescribedbyProps = !open
-      ? {}
-      : {
-          'aria-describedby': tooltipId,
-        };
-    const finalIcon = IconCustomElement ? (
-      <IconCustomElement
-        name={iconName}
-        aria-labelledby={triggerId}
-        aria-label={iconDescription}
-        ref={mergeRefs(ref, node => {
-          this.triggerEl = node;
-        })}
-      />
-    ) : (
-      <Icon
-        icon={!icon && !iconName ? iconInfoGlyph : icon}
-        name={iconName}
-        description={iconDescription}
-        iconTitle={iconTitle}
-        iconRef={mergeRefs(ref, node => {
-          this.triggerEl = node;
-        })}
-      />
-    );
+    const refProp = mergeRefs(ref, node => {
+      this.triggerEl = node;
+    });
+
+    const iconProperties = { name: iconName, role: null, description: null };
+
+    const properties = {
+      role: 'button',
+      tabIndex: tabIndex,
+      onClick: this.handleMouse,
+      onKeyDown: this.handleKeyPress,
+      onMouseOver: this.handleMouse,
+      onMouseOut: this.handleMouse,
+      onFocus: this.handleMouse,
+      onBlur: this.handleMouse,
+      'aria-haspopup': 'true',
+      'aria-expanded': open,
+      // if the user provides property `triggerText`,
+      // then the button should use aria-describedby to point to its id,
+      // if the user doesn't provide property `triggerText`,
+      // then an aria-label will be provided via the `iconDescription` property.
+      ...(triggerText
+        ? {
+            'aria-describedby': triggerId,
+          }
+        : {
+            'aria-label': iconDescription,
+          }),
+    };
 
     return (
       <>
         <ClickListener onClickOutside={this.handleClickOutside}>
           {showIcon ? (
-            <div className={triggerClasses}>
+            <div id={triggerId} className={triggerClasses}>
               {triggerText}
-              <div
-                role="button"
-                id={triggerId}
-                className={`${prefix}--tooltip__trigger`}
-                tabIndex={tabIndex}
-                title={iconTitle}
-                onClick={this.handleMouse}
-                onKeyDown={this.handleKeyPress}
-                onMouseOver={this.handleMouse}
-                onMouseOut={this.handleMouse}
-                onFocus={this.handleMouse}
-                onBlur={this.handleMouse}
-                aria-haspopup="true"
-                aria-label={iconDescription}
-                aria-expanded={open}
-                {...ariaDescribedbyProps}>
-                {finalIcon}
+              <div className={`${prefix}--tooltip__trigger`} {...properties}>
+                {IconCustomElement ? (
+                  <IconCustomElement ref={refProp} {...iconProperties} />
+                ) : (
+                  <Icon
+                    icon={!icon && !iconName ? iconInfoGlyph : icon}
+                    iconRef={refProp}
+                    {...iconProperties}
+                  />
+                )}
               </div>
             </div>
           ) : (
             <div
-              role="button"
-              tabIndex={tabIndex}
               id={triggerId}
               className={triggerClasses}
-              ref={mergeRefs(ref, node => {
-                this.triggerEl = node;
-              })}
-              onClick={this.handleMouse}
-              onKeyDown={this.handleKeyPress}
-              onMouseOver={this.handleMouse}
-              onMouseOut={this.handleMouse}
-              onFocus={this.handleMouse}
-              onBlur={this.handleMouse}
-              aria-haspopup="true"
-              aria-expanded={open}
-              {...ariaDescribedbyProps}>
+              ref={refProp}
+              {...properties}>
               {triggerText}
             </div>
           )}