Merge branch 'master' into filterable-multiselect-onclose

packages/components/docs/sass.md

@@ -14710,8 +14710,8 @@ Checkbox styles
     position: relative;
     display: flex;
     min-height: rem(24px);
+    padding-top: rem(3px);
     padding-left: rem(20px);
-    line-height: 1.5rem;
     cursor: pointer;
     user-select: none;
   }

packages/components/src/components/checkbox/_checkbox.scss

@@ -53,8 +53,8 @@
     position: relative;
     display: flex;
     min-height: rem(24px);
+    padding-top: rem(3px);
     padding-left: rem(20px);
-    line-height: 1.5rem;
     cursor: pointer;
     user-select: none;
   }

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -93,6 +93,8 @@ Map {
     },
   },
   "Breadcrumb" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "displayName": "Breadcrumb",
     "propTypes": Object {
       "aria-label": Object {
         "type": "string",
@@ -107,8 +109,11 @@ Map {
         "type": "bool",
       },
     },
+    "render": [Function],
   },
   "BreadcrumbItem" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "displayName": "BreadcrumbItem",
     "propTypes": Object {
       "aria-current": Object {
         "args": Array [
@@ -136,6 +141,7 @@ Map {
         "type": "bool",
       },
     },
+    "render": [Function],
   },
   "Button" => Object {
     "$$typeof": Symbol(react.forward_ref),
@@ -5997,6 +6003,14 @@ Map {
       "onToggle": Object {
         "type": "func",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "toggled": Object {
         "type": "bool",
       },

packages/react/src/components/Breadcrumb/Breadcrumb.js

@@ -12,13 +12,16 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const Breadcrumb = ({
-  'aria-label': ariaLabel,
-  children,
-  className: customClassNameNav,
-  noTrailingSlash,
-  ...rest
-}) => {
+const Breadcrumb = React.forwardRef(function Breadcrumb(
+  {
+    'aria-label': ariaLabel,
+    children,
+    className: customClassNameNav,
+    noTrailingSlash,
+    ...rest
+  },
+  ref
+) {
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
     [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
@@ -28,12 +31,14 @@ const Breadcrumb = ({
     <nav
       className={customClassNameNav}
       aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}
+      ref={ref}
       {...rest}>
       <ol className={className}>{children}</ol>
     </nav>
   );
-};
+});
 
+Breadcrumb.displayName = 'Breadcrumb';
 Breadcrumb.propTypes = {
   /**
    * Specify the label for the breadcrumb container

packages/react/src/components/Breadcrumb/BreadcrumbItem.js

@@ -13,14 +13,17 @@ import Link from '../Link';
 
 const { prefix } = settings;
 
-const BreadcrumbItem = ({
-  'aria-current': ariaCurrent,
-  children,
-  className: customClassName,
-  href,
-  isCurrentPage,
-  ...rest
-}) => {
+const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
+  {
+    'aria-current': ariaCurrent,
+    children,
+    className: customClassName,
+    href,
+    isCurrentPage,
+    ...rest
+  },
+  ref
+) {
   const className = cx({
     [`${prefix}--breadcrumb-item`]: true,
     // We set the current class only if `isCurrentPage` is passed in and we do
@@ -32,7 +35,7 @@ const BreadcrumbItem = ({
 
   if (typeof children === 'string' && href) {
     return (
-      <li className={className} {...rest}>
+      <li className={className} ref={ref} {...rest}>
         <Link href={href} aria-current={ariaCurrent}>
           {children}
         </Link>
@@ -41,14 +44,16 @@ const BreadcrumbItem = ({
   }
 
   return (
-    <li className={className} {...rest}>
+    <li className={className} ref={ref} {...rest}>
       {React.cloneElement(children, {
         'aria-current': ariaCurrent,
         className: `${prefix}--link`,
       })}
     </li>
   );
-};
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
 
 BreadcrumbItem.propTypes = {
   'aria-current': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { cleanup, render } from '@testing-library/react';
 import React from 'react';
 import { mount } from 'enzyme';
 import { settings } from 'carbon-components';
@@ -95,4 +96,23 @@ describe('Breadcrumb', () => {
     );
     expect(aria).toMatchSnapshot();
   });
+
+  describe('Component API', () => {
+    afterEach(cleanup);
+
+    it('should accept a `ref` for the outermost node', () => {
+      const ref = jest.fn(() => React.createRef());
+      const { container } = render(
+        <Breadcrumb ref={ref}>
+          <BreadcrumbItem href="#a">A</BreadcrumbItem>
+          <BreadcrumbItem href="#b">B</BreadcrumbItem>
+          <BreadcrumbItem href="#c" aria-current="page">
+            C
+          </BreadcrumbItem>
+        </Breadcrumb>
+      );
+      expect(ref).toHaveBeenCalled();
+      expect(ref).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
 });

packages/react/src/components/Breadcrumb/__tests__/BreadcrumbItem-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { cleanup, render } from '@testing-library/react';
+import React from 'react';
+import { BreadcrumbItem } from '../../Breadcrumb';
+
+describe('BreadcrumbItem', () => {
+  afterEach(cleanup);
+
+  describe('Component API', () => {
+    it('should accept a `ref` for the outermost node', () => {
+      const ref = jest.fn(() => React.createRef());
+      const { container } = render(
+        <BreadcrumbItem href="/test" ref={ref}>
+          Test
+        </BreadcrumbItem>
+      );
+      expect(ref).toHaveBeenCalled();
+      expect(ref).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
+});

packages/react/src/components/DataTable/TableHeader.js

@@ -18,24 +18,27 @@ import { sortStates } from './state/sorting';
 const { prefix } = settings;
 
 const translationKeys = {
-  iconDescription: 'carbon.table.header.icon.description',
+  buttonDescription: 'carbon.table.header.icon.description',
 };
 
-const translateWithId = (key, { sortDirection, isSortHeader, sortStates }) => {
-  if (key === translationKeys.iconDescription) {
+const translateWithId = (
+  key,
+  { header, sortDirection, isSortHeader, sortStates }
+) => {
+  if (key === translationKeys.buttonDescription) {
     if (isSortHeader) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
       if (sortDirection === sortStates.NONE) {
-        return 'Sort rows by this header in ascending order';
+        return `Click to sort rows by ${header} header in ascending order`;
       }
       if (sortDirection === sortStates.ASC) {
-        return 'Sort rows by this header in descending order';
+        return `Click to sort rows by ${header} header in descending order`;
       }
 
-      return 'Unsort rows by this header';
+      return `Click to unsort rows by ${header} header`;
     }
-    return 'Sort rows by this header in ascending order';
+    return `Click to sort rows by ${header} header in ascending order`;
   }
 
   return '';
@@ -85,6 +88,13 @@ const TableHeader = React.forwardRef(function TableHeader(
       isSortHeader && sortDirection === sortStates.DESC,
   });
   const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
+  const uniqueId = Math.random();
+  const sortDescription = t('carbon.table.header.icon.description', {
+    header: children,
+    sortDirection,
+    isSortHeader,
+    sortStates,
+  });
 
   return (
     <th
@@ -93,27 +103,19 @@ const TableHeader = React.forwardRef(function TableHeader(
       colSpan={colSpan}
       ref={ref}
       scope={scope}>
-      <button type="button" className={className} onClick={onClick} {...rest}>
+      <div style={{ display: 'none' }} id={`usage-description-${uniqueId}`}>
+        {sortDescription}
+      </div>
+      <button
+        type="button"
+        aria-describedby={`usage-description-${uniqueId}`}
+        className={className}
+        onClick={onClick}
+        {...rest}>
         <span className={`${prefix}--table-sort__flex`}>
           <div className={`${prefix}--table-header-label`}>{children}</div>
-          <Arrow
-            className={`${prefix}--table-sort__icon`}
-            aria-label={t('carbon.table.header.icon.description', {
-              header: children,
-              sortDirection,
-              isSortHeader,
-              sortStates,
-            })}
-          />
-          <Arrows
-            className={`${prefix}--table-sort__icon-unsorted`}
-            aria-label={t('carbon.table.header.icon.description', {
-              header: children,
-              sortDirection,
-              isSortHeader,
-              sortStates,
-            })}
-          />
+          <Arrow className={`${prefix}--table-sort__icon`} />
+          <Arrows className={`${prefix}--table-sort__icon-unsorted`} />
         </span>
       </button>
     </th>

packages/react/src/components/Toggle/Toggle-story.js

@@ -7,9 +7,14 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
 import Toggle from '../Toggle';
 
+const sizes = {
+  'Default size': undefined,
+  'Small size (sm)': 'sm',
+};
+
 const toggleProps = () => ({
   labelText: text(
     'Label toggle input control (labelText)',
@@ -21,6 +26,7 @@ const toggleProps = () => ({
   disabled: boolean('Disabled (disabled)', false),
   onChange: action('onChange'),
   onToggle: action('onToggle'),
+  size: select('Field size (size)', sizes, undefined) || undefined,
 });
 
 export default {
@@ -33,7 +39,7 @@ export default {
   },
 };
 
-export const Toggled = () => (
+export const Default = () => (
   <Toggle
     defaultToggled
     {...toggleProps()}
@@ -42,9 +48,9 @@ export const Toggled = () => (
   />
 );
 
-Toggled.storyName = 'toggled';
+Default.storyName = 'Toggle';
 
-Toggled.parameters = {
+Default.parameters = {
   info: {
     text: `
         Toggles are controls that are used to quickly switch between two possible states. The example below shows
@@ -54,20 +60,3 @@ Toggled.parameters = {
       `,
   },
 };
-
-export const Untoggled = () => (
-  <Toggle {...toggleProps()} className="some-class" id="toggle-1" />
-);
-
-Untoggled.storyName = 'untoggled';
-
-Untoggled.parameters = {
-  info: {
-    text: `
-        Toggles are controls that are used to quickly switch between two possible states. The example below shows
-        an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property.
-        Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled
-        prop will only set the value initially. This example has defaultToggled set to false.
-      `,
-  },
-};

packages/react/src/components/Toggle/Toggle-test.js

@@ -109,4 +109,25 @@ describe('Toggle', () => {
       expect(call[2].target).toBe(inputElement);
     });
   });
+
+  describe('ToggleSmall', () => {
+    const wrapper = mount(<Toggle id="toggle-1" size="sm" />);
+
+    it('Sets the `ToggleSmall` className', () => {
+      const input = wrapper.find('input');
+      expect(input.hasClass(`${prefix}--toggle-input--small`)).toEqual(true);
+    });
+
+    it('Renders a checkmark SVG', () => {
+      const svg = wrapper.find(`.${prefix}--toggle__check`);
+      expect(svg.length).toBe(1);
+    });
+
+    it('Does not render toggle text', () => {
+      const offLabel = wrapper.find(`.${prefix}--toggle__text--off`);
+      const onLabel = wrapper.find(`.${prefix}--toggle__text--on`);
+      expect(offLabel.length).toBe(0);
+      expect(onLabel.length).toBe(0);
+    });
+  });
 });