Merge branch 'master' of github.com:carbon-design-system/carbon into …

…feat/add-react-hooks-package

packages/components/package.json

@@ -151,9 +151,9 @@
     "postcss-loader": "^2.1.0",
     "promise": "^8.0.1",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
+    "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.6",
     "react-ga": "^2.4.0",
     "rollup": "^1.0.0",
     "rollup-plugin-babel": "^4.0.0",

packages/components/src/components/notification/notification.config.js

@@ -53,7 +53,7 @@ module.exports = {
       },
     },
     {
-      name: 'low-contrast',
+      name: 'inline-low-contrast',
       label: 'Inline Notification (Low contrast)',
       context: {
         variant: 'inline',
@@ -75,7 +75,7 @@ module.exports = {
       },
     },
     {
-      name: 'low-contrast',
+      name: 'toast-low-contrast',
       label: 'Toast Notification (Low contrast)',
       notes: `
         Toast notifications are typically passive, meaning they won't affect the user's workflow if not addressed.

packages/components/src/globals/scss/_tooltip.scss

@@ -96,7 +96,7 @@
     padding: if(
       $tooltip-type == 'definition',
       rem(8px) rem(16px),
-      rem(2px) rem(16px)
+      rem(3px) rem(16px)
     );
     border-radius: rem(2px);
     color: $inverse-01;

packages/react/package.json

@@ -63,14 +63,14 @@
     "@babel/plugin-transform-object-assign": "^7.2.0",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-a11y": "^5.1.3",
-    "@storybook/addon-actions": "^5.1.3",
-    "@storybook/addon-info": "^5.1.3",
-    "@storybook/addon-knobs": "^5.1.3",
-    "@storybook/addon-links": "^5.1.3",
-    "@storybook/addon-storysource": "^5.1.3",
-    "@storybook/addons": "^5.1.3",
-    "@storybook/react": "^5.1.3",
+    "@storybook/addon-a11y": "^5.1.11",
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addon-knobs": "^5.1.11",
+    "@storybook/addon-links": "^5.1.11",
+    "@storybook/addon-storysource": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
+    "@storybook/react": "^5.1.11",
     "all-contributors-cli": "^5.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
@@ -110,7 +110,7 @@
     "rollup-plugin-terser": "^4.0.0",
     "rtlcss": "^2.4.0",
     "sass-loader": "^7.1.0",
-    "storybook-readme": "^5.0.3",
+    "storybook-readme": "^5.0.8",
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^1.1.0",
     "webpack": "^4.25.1",

packages/react/src/components/TooltipIcon/TooltipIcon.js

@@ -9,34 +9,30 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
-const getInstanceId = setupGetInstanceId();
 const TooltipIcon = ({
-  id,
   className,
   children,
   direction,
   align,
   tooltipText,
   ...rest
 }) => {
-  const tooltipId = id || `definition-tooltip-${getInstanceId()}`;
-  const tooltipClassName = cx(`${prefix}--tooltip--icon`, className);
-  const tooltipTriggerClasses = cx(`${prefix}--tooltip__trigger`, {
-    [`${prefix}--tooltip--${direction}`]: direction,
-    [`${prefix}--tooltip--align-${align}`]: align,
-  });
+  const tooltipTriggerClasses = cx(
+    `${prefix}--tooltip__trigger`,
+    `${prefix}--tooltip--a11y`,
+    {
+      [`${prefix}--tooltip--${direction}`]: direction,
+      [`${prefix}--tooltip--align-${align}`]: align,
+      className,
+    }
+  );
   return (
-    <div {...rest} className={tooltipClassName}>
-      <button
-        className={tooltipTriggerClasses}
-        aria-describedby={tooltipId}
-        aria-label={tooltipText}>
-        {children}
-      </button>
-    </div>
+    <button {...rest} className={tooltipTriggerClasses}>
+      <span className={`${prefix}--assistive-text`}>{tooltipText}</span>
+      {children}
+    </button>
   );
 };
 

packages/react/src/components/TooltipIcon/__snapshots__/TooltipIcon-test.js.snap

@@ -7,17 +7,16 @@ exports[`TooltipIcon should allow the user to specify the direction 1`] = `
   direction="top"
   tooltipText="tooltip text"
 >
-  <div
-    className="bx--tooltip--icon custom-class"
+  <button
+    className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center className"
   >
-    <button
-      aria-describedby="definition-tooltip-2"
-      aria-label="tooltip text"
-      className="bx--tooltip__trigger bx--tooltip--top bx--tooltip--align-center"
+    <span
+      className="bx--assistive-text"
     >
-      <svg />
-    </button>
-  </div>
+      tooltip text
+    </span>
+    <svg />
+  </button>
 </TooltipIcon>
 `;
 
@@ -28,16 +27,15 @@ exports[`TooltipIcon should render 1`] = `
   direction="bottom"
   tooltipText="tooltip text"
 >
-  <div
-    className="bx--tooltip--icon custom-class"
+  <button
+    className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center className"
   >
-    <button
-      aria-describedby="definition-tooltip-1"
-      aria-label="tooltip text"
-      className="bx--tooltip__trigger bx--tooltip--bottom bx--tooltip--align-center"
+    <span
+      className="bx--assistive-text"
     >
-      <svg />
-    </button>
-  </div>
+      tooltip text
+    </span>
+    <svg />
+  </button>
 </TooltipIcon>
 `;