Merge branch 'master' into new-switcher

carbon-design-system · Feb 14, 2020 · 0496074 · 0496074
2 parents 860ecad + 0e9c6d5
commit 0496074
Show file tree

Hide file tree

Showing 27 changed files with 758 additions and 377 deletions.
diff --git a/.yarn/offline-mirror/lodash.findlast-4.6.0.tgz b/.yarn/offline-mirror/lodash.findlast-4.6.0.tgz
diff --git a/.yarn/releases/yarn-1.21.1.js → .yarn/releases/yarn-1.22.0.js b/.yarn/releases/yarn-1.21.1.js → .yarn/releases/yarn-1.22.0.js
diff --git a/.yarnrc b/.yarnrc
@@ -5,4 +5,4 @@
 lastUpdateCheck 1576080308559
 yarn-offline-mirror "./.yarn/offline-mirror"
 yarn-offline-mirror-pruning true
-yarn-path ".yarn/releases/yarn-1.21.1.js"
+yarn-path ".yarn/releases/yarn-1.22.0.js"
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -14965,6 +14965,16 @@ Data table core styles
   }
 
   // Overflow Menu Overrides
+  .#{$prefix}--data-table td .#{$prefix}--overflow-menu {
+    margin: rem(-7px) 0 rem(-8px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--compact
+    td
+    .#{$prefix}--overflow-menu {
+    margin: 0;
+  }
+
   .#{$prefix}--data-table
     td.#{$prefix}--table-column-menu
     .#{$prefix}--overflow-menu[aria-expanded='false']:focus {

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -162,6 +162,16 @@
   }
 
   // Overflow Menu Overrides
+  .#{$prefix}--data-table td .#{$prefix}--overflow-menu {
+    margin: rem(-7px) 0 rem(-8px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--compact
+    td
+    .#{$prefix}--overflow-menu {
+    margin: 0;
+  }
+
   .#{$prefix}--data-table
     td.#{$prefix}--table-column-menu
     .#{$prefix}--overflow-menu[aria-expanded='false']:focus {

diff --git a/packages/icon-helpers/src/getAttributes.js b/packages/icon-helpers/src/getAttributes.js
@@ -12,9 +12,6 @@ export const defaultAttributes = {
   // `focusable` is a string attribute which is why we do not use a boolean here
   focusable: 'false',
   preserveAspectRatio: 'xMidYMid meet',
-  // Reference:
-  // https://github.com/ckeditor/ckeditor5/issues/668#issuecomment-344844027
-  style: 'will-change: transform;',
 };
 
 /**

diff --git a/packages/icons/examples/preview/index.js b/packages/icons/examples/preview/index.js
@@ -134,9 +134,7 @@ function App({ meta }) {
                       <td className="icon-name">
                         <a href={`#${id}`}>{name}</a>
                       </td>
-                      <td className="icon-size">{`${attrs.width}x${
-                        attrs.height
-                      }`}</td>
+                      <td className="icon-size">{`${attrs.width}x${attrs.height}`}</td>
                       <td className="icon-preview-container">
                         <div className="icon-preview">{svg}</div>
                       </td>
@@ -201,22 +199,24 @@ function js2svg(descriptor) {
     attributes = {
       ...iconAttributes,
       style: style
-        .split(';')
-        .map(declaration => {
-          const [property, value] = declaration
-            .split(':')
-            .map(string => string.trim());
-          return {
-            [property]: value,
-          };
-        })
-        .reduce(
-          (acc, declaration) => ({
-            ...acc,
-            ...declaration,
-          }),
-          {}
-        ),
+        ? style
+            .split(';')
+            .map(declaration => {
+              const [property, value] = declaration
+                .split(':')
+                .map(string => string.trim());
+              return {
+                [property]: value,
+              };
+            })
+            .reduce(
+              (acc, declaration) => ({
+                ...acc,
+                ...declaration,
+              }),
+              {}
+            )
+        : null,
     };
   }
 
@@ -232,16 +232,16 @@ function format(attrs) {
 }
 
 function getBugTemplate(info, source) {
-  const url = new URL('https://github.com/carbon-design-system/carbon/issues/new');
+  const url = new URL(
+    'https://github.com/carbon-design-system/carbon/issues/new'
+  );
   const params = new URLSearchParams();
   params.append('title', `🔍 Visual bug for the \`${info.filename}\` icon`);
   params.append(
     'body',
     `<!-- Feel free to remove sections that aren't relevant. -->
 
-There is an issue for the \`${
-      info.basename
-    }\` icon when viewing [the elements demo](https://carbon-elements.netlify.com/icons/examples/preview/).
+There is an issue for the \`${info.basename}\` icon when viewing [the elements demo](https://carbon-elements.netlify.com/icons/examples/preview/).
 
 The source for this icon is available [here](${source}).
 

diff --git a/packages/react/.storybook/Container.js b/packages/react/.storybook/Container.js
@@ -37,11 +37,6 @@ function Container({ story }) {
         }}>
         {story()}
       </div>
-      <input
-        aria-label="input-text-offleft"
-        type="text"
-        className={`${prefix}--visually-hidden`}
-      />
     </React.StrictMode>
   );
 }

diff --git a/packages/react/.storybook/addon-carbon-theme/register.js b/packages/react/.storybook/addon-carbon-theme/register.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import addons from '@storybook/addons';
+import { addons, types } from '@storybook/addons';
 import { CarbonThemesPanel, CarbonTypePanel } from './components/Panel';
 import {
   CARBON_THEMES_ADDON_ID,
@@ -15,20 +15,22 @@ import {
   CARBON_TYPE_PANEL_ID,
 } from './shared';
 
-addons.register(CARBON_THEMES_ADDON_ID, api => {
-  addons.addPanel(CARBON_THEME_PANEL_ID, {
-    title: 'Carbon theme',
-    render: ({ active, key }) => (
-      <CarbonThemesPanel api={api} key={key} active={active} />
-    ),
+if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
+  addons.register(CARBON_THEMES_ADDON_ID, api => {
+    addons.addPanel(CARBON_THEME_PANEL_ID, {
+      title: 'Carbon theme',
+      render: ({ active, key }) => (
+        <CarbonThemesPanel api={api} key={key} active={active} />
+      ),
+    });
   });
-});
 
-addons.register(CARBON_TYPE_ADDON_ID, api => {
-  addons.addPanel(CARBON_TYPE_PANEL_ID, {
-    title: 'Carbon type',
-    render: ({ active, key }) => (
-      <CarbonTypePanel api={api} key={key} active={active} />
-    ),
+  addons.register(CARBON_TYPE_ADDON_ID, api => {
+    addons.addPanel(CARBON_TYPE_PANEL_ID, {
+      title: 'Carbon type',
+      render: ({ active, key }) => (
+        <CarbonTypePanel api={api} key={key} active={active} />
+      ),
+    });
   });
-});
+}
diff --git a/packages/react/.storybook/addons.js b/packages/react/.storybook/addons.js
@@ -14,11 +14,8 @@ import '@storybook/addon-a11y/register';
 // Community addons
 import 'storybook-readme/register';
 
-if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
-  import('./addon-carbon-theme/register').catch(error => {
-    console.error(error);
-  });
-}
+// Custom addons
+import './addon-carbon-theme/register';
 
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -42,9 +42,9 @@
     "classnames": "2.2.6",
     "downshift": "^1.31.14",
     "flatpickr": "4.6.1",
-    "focus-trap-react": "^6.0.0",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
+    "lodash.findlast": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.omit": "^4.5.0",
     "react-is": "^16.8.6",

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 import { Close20 } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass';
 import requiredIfGivenPropExists from '../../prop-types/requiredIfGivenPropExists';
+import wrapFocus from '../../internal/wrapFocus';
 
 const { prefix } = settings;
 
@@ -27,6 +28,8 @@ export default class ComposedModal extends Component {
   outerModal = React.createRef();
   innerModal = React.createRef();
   button = React.createRef();
+  startSentinel = React.createRef();
+  endSentinel = React.createRef();
 
   static propTypes = {
     /**
@@ -78,19 +81,6 @@ export default class ComposedModal extends Component {
         };
   }
 
-  elementOrParentIsFloatingMenu = target => {
-    const {
-      selectorsFloatingMenus = [
-        `.${prefix}--overflow-menu-options`,
-        `.${prefix}--tooltip`,
-        '.flatpickr-calendar',
-      ],
-    } = this.props;
-    if (target && typeof target.closest === 'function') {
-      return selectorsFloatingMenus.some(selector => target.closest(selector));
-    }
-  };
-
   handleKeyDown = evt => {
     // Esc key
     if (evt.which === 27) {
@@ -109,22 +99,23 @@ export default class ComposedModal extends Component {
     }
   };
 
-  focusModal = () => {
-    if (this.outerModal.current) {
-      this.outerModal.current.focus();
-    }
-  };
-
-  handleBlur = evt => {
-    // Keyboard trap
-    if (
-      this.innerModal.current &&
-      this.props.open &&
-      evt.relatedTarget &&
-      !this.innerModal.current.contains(evt.relatedTarget) &&
-      !this.elementOrParentIsFloatingMenu(evt.relatedTarget)
-    ) {
-      this.focusModal();
+  handleBlur = ({
+    target: oldActiveNode,
+    relatedTarget: currentActiveNode,
+  }) => {
+    const { open, selectorsFloatingMenus } = this.props;
+    if (open && currentActiveNode && oldActiveNode) {
+      const { current: modalNode } = this.innerModal;
+      const { current: startSentinelNode } = this.startSentinel;
+      const { current: endSentinelNode } = this.endSentinel;
+      wrapFocus({
+        modalNode,
+        startSentinelNode,
+        endSentinelNode,
+        currentActiveNode,
+        oldActiveNode,
+        selectorsFloatingMenus,
+      });
     }
   };
 
@@ -240,11 +231,26 @@ export default class ComposedModal extends Component {
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         onTransitionEnd={open ? this.handleTransitionEnd : undefined}
-        className={modalClass}
-        tabIndex={-1}>
-        <div ref={this.innerModal} className={containerClass}>
+        className={modalClass}>
+        {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
+        <span
+          ref={this.startSentinel}
+          tabIndex="0"
+          role="link"
+          className={`${prefix}--visually-hidden`}>
+          Focus sentinel
+        </span>
+        <div ref={this.innerModal} className={containerClass} tabIndex={-1}>
           {childrenWithProps}
         </div>
+        {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
+        <span
+          ref={this.endSentinel}
+          tabIndex="0"
+          role="link"
+          className={`${prefix}--visually-hidden`}>
+          Focus sentinel
+        </span>
       </div>
     );
   }

diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
@@ -14,11 +14,25 @@ exports[`<ComposedModal /> renders 1`] = `
     onTransitionEnd={[Function]}
     open={true}
     role="presentation"
-    tabIndex={-1}
   >
+    <span
+      className="bx--visually-hidden"
+      role="link"
+      tabIndex="0"
+    >
+      Focus sentinel
+    </span>
     <div
       className="bx--modal-container"
+      tabIndex={-1}
     />
+    <span
+      className="bx--visually-hidden"
+      role="link"
+      tabIndex="0"
+    >
+      Focus sentinel
+    </span>
   </div>
 </ComposedModal>
 `;
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -399,3 +399,25 @@ describe('DatePickerSkeleton', () => {
     });
   });
 });
+
+describe('Opening up calendar dropdown', () => {
+  const wrapper = mount(
+    <DatePicker datePickerType="range" className="extra-class">
+      <DatePickerInput labelText="Date Picker label" id="input-from" />
+      <DatePickerInput labelText="Date Picker label" id="input-to" />
+    </DatePicker>
+  );
+
+  it('has the range date picker with min and max dates', () => {
+    const datePicker = wrapper.instance();
+    const input = wrapper.find('input').at(0);
+
+    jest.spyOn(datePicker.cal, 'open');
+
+    input
+      .getDOMNode()
+      .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'ArrowDown' }));
+
+    expect(datePicker.cal.open).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js b/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
@@ -36,6 +36,9 @@ export default config => fp => {
         // so user can move the keyboard cursor for editing dates
         // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
         event.stopPropagation();
+      } else if (match(event, keys.ArrowDown)) {
+        event.preventDefault();
+        fp.open();
       }
     }
   };

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -32,7 +32,6 @@ const props = () => ({
     'Enter key to submit (shouldSubmitOnEnter)',
     false
   ),
-  focusTrap: boolean('Trap focus (focusTrap)', false),
   hasScrollingContent: boolean(
     'Modal contains scrollable content (hasScrollingContent)',
     false

diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
@@ -15,7 +15,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 // The modal is the 0th child inside the wrapper on account of focus-trap-react
-const getModal = wrapper => wrapper.childAt(0);
+const getModal = wrapper => wrapper.find('.bx--modal');
 
 describe('Modal', () => {
   describe('Renders as expected', () => {