Merge pull request #1238 from IBM/fix-table-toolbarbuttons

feat(table): add tooltips to buttons and shrink icon size to 16 px, upgrade Carbon to v10.12.0

.storybook/__snapshots__/Welcome.story.storyshot

@@ -59,26 +59,26 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
           onAnimationEnd={[Function]}
         >
           <button
+            aria-controls="accordion-item-1"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
             onKeyDown={[Function]}
-            title="Expand/Collapse"
+            title="Exports table"
             type="button"
           >
             <svg
-              aria-label="Expand/Collapse"
+              aria-hidden={true}
               className="bx--accordion__arrow"
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              role="img"
               viewBox="0 0 16 16"
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <polygon
-                points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
+              <path
+                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
               />
             </svg>
             <div
@@ -89,6 +89,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
           </button>
           <div
             className="bx--accordion__content"
+            id="accordion-item-1"
           >
             <p>
               The following table shows a comparison of exports from carbon-components-react and this library. These are primarily used for snapshot purposes to track and ensure that as the exports change upstream in Carbon we continue to provide parity with their package.
@@ -591,9 +592,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                   </div>
                   <div
                     className="bx--structured-list-td"
-                  >
-                    TableToolbarSearch
-                  </div>
+                  />
                 </div>
                 <div
                   className="bx--structured-list-row"
@@ -757,6 +756,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                     Form
                   </div>
                 </div>
+                <div
+                  className="bx--structured-list-row"
+                >
+                  <div
+                    className="bx--structured-list-td"
+                  >
+                    FluidForm
+                  </div>
+                  <div
+                    className="bx--structured-list-td"
+                  />
+                </div>
                 <div
                   className="bx--structured-list-row"
                 >
@@ -1913,6 +1924,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                     NumberInputSkeleton
                   </div>
                 </div>
+                <div
+                  className="bx--structured-list-row"
+                >
+                  <div
+                    className="bx--structured-list-td"
+                  >
+                    PaginationSkeleton
+                  </div>
+                  <div
+                    className="bx--structured-list-td"
+                  />
+                </div>
                 <div
                   className="bx--structured-list-row"
                 >

package.json

@@ -85,8 +85,8 @@
     "@carbon/layout": "10.7.1",
     "@carbon/motion": "10.6.0",
     "@carbon/themes": "10.10.3",
-    "carbon-components": "10.10.3",
-    "carbon-components-react": "7.10.3",
+    "carbon-components": "10.12.0",
+    "carbon-components-react": "7.12.0",
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.5",
     "core-js": "3.6.5",

src/components/Accordion/__snapshots__/AccordionItemDefer.story.storyshot

@@ -28,26 +28,26 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Accor
           onAnimationEnd={[Function]}
         >
           <button
+            aria-controls="accordion-item-2"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
             onKeyDown={[Function]}
-            title="Expand/Collapse"
+            title="A section without deferred content rendering"
             type="button"
           >
             <svg
-              aria-label="Expand/Collapse"
+              aria-hidden={true}
               className="bx--accordion__arrow"
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              role="img"
               viewBox="0 0 16 16"
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <polygon
-                points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
+              <path
+                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
               />
             </svg>
             <div
@@ -58,6 +58,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Accor
           </button>
           <div
             className="bx--accordion__content"
+            id="accordion-item-2"
           >
             <p>
               This content is always rendered to the DOM, no matter if the accordion item has been open or closed.
@@ -71,26 +72,26 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Accor
           onAnimationEnd={[Function]}
         >
           <button
+            aria-controls="accordion-item-3"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
             onKeyDown={[Function]}
-            title="Expand/Collapse"
+            title="A section with deferred content rendering"
             type="button"
           >
             <svg
-              aria-label="Expand/Collapse"
+              aria-hidden={true}
               className="bx--accordion__arrow"
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              role="img"
               viewBox="0 0 16 16"
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <polygon
-                points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
+              <path
+                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
               />
             </svg>
             <div
@@ -101,6 +102,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Accor
           </button>
           <div
             className="bx--accordion__content"
+            id="accordion-item-3"
           />
         </li>
       </ul>

src/components/Card/Card.test.jsx

@@ -2,7 +2,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { Tooltip } from 'carbon-components-react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { Popup20 } from '@carbon/icons-react';
+import { Popup16 } from '@carbon/icons-react';
 
 import { CARD_SIZES, CARD_TITLE_HEIGHT, CARD_ACTIONS } from '../../constants/LayoutConstants';
 import { settings } from '../../constants/Settings';
@@ -74,7 +74,7 @@ describe('Card', () => {
 
     // should render CardRangePicker and Expand
     expect(wrapper.find(CardRangePicker)).toHaveLength(1);
-    expect(wrapper.find(Popup20)).toHaveLength(1);
+    expect(wrapper.find(Popup16)).toHaveLength(1);
 
     wrapper = mount(
       <Card {...cardProps} size={CARD_SIZES.SMALL} isEditable availableActions={{ range: true }} />

src/components/Card/CardRangePicker.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import EventSchedule from '@carbon/icons-react/es/event--schedule/20';
+import EventSchedule from '@carbon/icons-react/es/event--schedule/16';
 import { ToolbarItem, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import classNames from 'classnames';
 
@@ -67,13 +67,13 @@ const CardRangePicker = ({ i18n, timeRange: timeRangeProp, onCardAction, cardWid
         ) : null}
 
         <OverflowMenu
-          iconDescription={timeBoxLabels[timeRange]}
           className={classNames(
             `${iotPrefix}--card--toolbar-action`,
             `${iotPrefix}--card--toolbar-date-range-action`
           )}
           flipped
-          title={i18n.overflowMenuDescription}
+          title={timeBoxLabels[timeRange] || i18n.selectDateRangeLabel}
+          iconDescription={timeBoxLabels[timeRange] || i18n.selectDateRangeLabel}
           menuOptionsClass={`${iotPrefix}--card--overflow`}
           renderIcon={EventSchedule}
         >

src/components/Card/CardRangePicker.test.jsx

@@ -11,24 +11,24 @@ const { iotPrefix } = settings;
 
 describe('CardRangePicker', () => {
   const mockOnCardAction = jest.fn();
-  const overflowMenuDescription = 'Open and close list of options';
+  const selectDateRangeLabel = 'Select date range';
   const defaultLabel = 'Default';
   const last24HoursLabel = 'Last 24 Hours';
   const thisWeekLabel = 'This week';
 
   it('card editable actions', async () => {
-    const { getByTitle, getByText } = render(
+    const { getAllByTitle, getByText } = render(
       <CardRangePicker
         i18n={{
-          overflowMenuDescription,
+          selectDateRangeLabel,
           defaultLabel,
           last24HoursLabel,
           thisWeekLabel,
         }}
         onCardAction={mockOnCardAction}
       />
     );
-    fireEvent.click(getByTitle(overflowMenuDescription));
+    fireEvent.click(getAllByTitle(selectDateRangeLabel)[0]);
     // Click on the default
     const defaultRange = await waitFor(() => getByText(defaultLabel));
     fireEvent.click(defaultRange);
@@ -37,7 +37,7 @@ describe('CardRangePicker', () => {
     });
     mockOnCardAction.mockClear();
     // Reopen menu
-    fireEvent.click(getByTitle(overflowMenuDescription));
+    fireEvent.click(getAllByTitle(selectDateRangeLabel)[0]);
     const last24Hours = await waitFor(() => getByText(last24HoursLabel));
     fireEvent.click(last24Hours);
     expect(mockOnCardAction).toHaveBeenCalledWith(CARD_ACTIONS.CHANGE_TIME_RANGE, {
@@ -46,7 +46,7 @@ describe('CardRangePicker', () => {
     mockOnCardAction.mockClear();
 
     // Reopen menu
-    fireEvent.click(getByTitle(overflowMenuDescription));
+    fireEvent.click(getAllByTitle(last24HoursLabel)[0]);
     mockOnCardAction.mockClear();
     const thisWeek = await waitFor(() => getByText(thisWeekLabel));
     fireEvent.click(thisWeek);

src/components/Card/CardToolbar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
-import { Close20, Popup20 } from '@carbon/icons-react';
+import { Close16, Popup16 } from '@carbon/icons-react';
 import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import classNames from 'classnames';
 
@@ -103,16 +103,20 @@ const CardToolbar = ({
       {availableActions.expand ? (
         <>
           {isExpanded ? (
-            <ToolbarSVGWrapper onClick={() => onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)}>
-              <Close20 title={i18n.closeLabel} description={i18n.closeLabel} />
+            <ToolbarSVGWrapper
+              title={i18n.closeLabel}
+              onClick={() => onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)}
+            >
+              <Close16 title={i18n.closeLabel} description={i18n.closeLabel} />
             </ToolbarSVGWrapper>
           ) : (
             <ToolbarSVGWrapper
+              title={i18n.expandLabel}
               onClick={() => {
                 onCardAction(CARD_ACTIONS.OPEN_EXPANDED_CARD);
               }}
             >
-              <Popup20 title={i18n.expandLabel} description={i18n.expandLabel} />
+              <Popup16 title={i18n.expandLabel} description={i18n.expandLabel} />
             </ToolbarSVGWrapper>
           )}
         </>