Merge branch 'master' into 5683-time-picker-validation-message

packages/components/docs/sass.md

@@ -15799,7 +15799,7 @@ Data table core styles
     }
   }
 
-  @include sticky-header($max-width: rem(900px));
+  @include sticky-header($max-width: 100%);
 }
 ```
 
@@ -23462,6 +23462,7 @@ Time picker styles
   }
 
   .#{$prefix}--time-picker .#{$prefix}--select-input {
+    margin: 0;
     min-width: auto;
     width: auto;
     padding-right: rem(48px);

packages/components/src/components/data-table/_data-table-core.scss

@@ -549,7 +549,7 @@
     }
   }
 
-  @include sticky-header($max-width: rem(900px));
+  @include sticky-header($max-width: 100%);
 }
 
 @include exports('data-table-v2-core') {

packages/components/src/components/data-table/data-table.js

@@ -10,14 +10,17 @@ import mixin from '../../globals/js/misc/mixin';
 import createComponent from '../../globals/js/mixins/create-component';
 import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
 import eventedState from '../../globals/js/mixins/evented-state';
+import handles from '../../globals/js/mixins/handles';
 import eventMatches from '../../globals/js/misc/event-matches';
+import on from '../../globals/js/misc/on';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
 class DataTable extends mixin(
   createComponent,
   initComponentBySearch,
-  eventedState
+  eventedState,
+  handles
 ) {
   /**
    * Data Table
@@ -54,30 +57,27 @@ class DataTable extends mixin(
 
     this.refreshRows();
 
-    this.element.addEventListener('mouseover', evt => {
-      const eventElement = eventMatches(evt, this.options.selectorChildRow);
+    this.manage(on(this.element, 'mouseover', this._expandableHoverToggle));
+    this.manage(on(this.element, 'mouseout', this._expandableHoverToggle));
 
-      if (eventElement) {
-        this._expandableHoverToggle(eventElement, true);
-      }
-    });
-
-    this.element.addEventListener('click', evt => {
-      const eventElement = eventMatches(evt, this.options.eventTrigger);
-      const searchContainer = this.element.querySelector(
-        this.options.selectorToolbarSearchContainer
-      );
+    this.manage(
+      on(this.element, 'click', evt => {
+        const eventElement = eventMatches(evt, this.options.eventTrigger);
+        const searchContainer = this.element.querySelector(
+          this.options.selectorToolbarSearchContainer
+        );
 
-      if (eventElement) {
-        this._toggleState(eventElement, evt);
-      }
+        if (eventElement) {
+          this._toggleState(eventElement, evt);
+        }
 
-      if (searchContainer) {
-        this._handleDocumentClick(evt);
-      }
-    });
+        if (searchContainer) {
+          this._handleDocumentClick(evt);
+        }
+      })
+    );
 
-    this.element.addEventListener('keydown', this._keydownHandler);
+    this.manage(on(this.element, 'keydown', this._keydownHandler));
 
     this.state = {
       checkboxCount: 0,
@@ -225,8 +225,11 @@ class DataTable extends mixin(
   };
 
   _actionBarToggle = toggleOn => {
+    let handleTransitionEnd;
     const transition = evt => {
-      this.batchActionEl.removeEventListener('transitionend', transition);
+      if (handleTransitionEnd) {
+        handleTransitionEnd = this.unmanage(handleTransitionEnd).release();
+      }
 
       if (evt.target.matches(this.options.selectorActions)) {
         if (this.batchActionEl.dataset.active === 'false') {
@@ -245,7 +248,9 @@ class DataTable extends mixin(
       this.batchActionEl.classList.remove(this.options.classActionBarActive);
     }
     if (this.batchActionEl) {
-      this.batchActionEl.addEventListener('transitionend', transition);
+      handleTransitionEnd = this.manage(
+        on(this.batchActionEl, 'transitionend', transition)
+      );
     }
   };
 
@@ -288,19 +293,14 @@ class DataTable extends mixin(
     });
   };
 
-  _expandableHoverToggle = element => {
-    element.previousElementSibling.classList.add(
-      this.options.classExpandableRowHover
-    );
-
-    const mouseout = () => {
-      element.previousElementSibling.classList.remove(
-        this.options.classExpandableRowHover
+  _expandableHoverToggle = evt => {
+    const element = eventMatches(evt, this.options.selectorChildRow);
+    if (element) {
+      element.previousElementSibling.classList.toggle(
+        this.options.classExpandableRowHover,
+        evt.type === 'mouseover'
       );
-      element.removeEventListener('mouseout', mouseout);
-    };
-
-    element.addEventListener('mouseout', mouseout);
+    }
   };
 
   _toggleState = (element, evt) => {

packages/components/src/components/time-picker/_time-picker.scss

@@ -42,6 +42,7 @@
   }
 
   .#{$prefix}--time-picker .#{$prefix}--select-input {
+    margin: 0;
     min-width: auto;
     width: auto;
     padding-right: rem(48px);

packages/icon-build-helpers/src/builders/vanilla/builder.js

@@ -232,7 +232,10 @@ function getModuleName(name, size, prefixParts, descriptor) {
     if (isGlyph) {
       return pascalCase(name) + 'Glyph';
     }
-    return pascalCase(name);
+    if (isNaN(name[0])) {
+      return pascalCase(name);
+    }
+    return '_' + pascalCase(name);
   }
 
   if (isNaN(name[0])) {

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

@@ -2948,7 +2948,7 @@ Map {
   "Modal" => Object {
     "defaultProps": Object {
       "hasScrollingContent": false,
-      "iconDescription": "close the modal",
+      "iconDescription": "Close",
       "modalHeading": "",
       "modalLabel": "",
       "onKeyDown": [Function],

packages/react/examples/drag-and-drop-file-uploader/src/index.js

@@ -26,7 +26,7 @@ function ExampleDropContainerApp(props) {
   const [files, setFiles] = useState([]);
   const uploadFile = async fileToUpload => {
     // file size validation
-    if (fileToUpload.size > 512000) {
+    if (fileToUpload.filesize > 512000) {
       const updatedFile = {
         ...fileToUpload,
         status: 'edit',
@@ -101,10 +101,13 @@ function ExampleDropContainerApp(props) {
         status: 'uploading',
         iconDescription: 'Uploading',
       }));
-      props.multiple
-        ? setFiles([...files, ...newFiles])
-        : setFiles([...files, newFiles[0]]);
-      newFiles.forEach(uploadFile);
+      if (props.multiple) {
+        setFiles([...files, ...newFiles]);
+        newFiles.forEach(uploadFile);
+      } else {
+        setFiles([newFiles[0]]);
+        uploadFile(newFiles[0]);
+      }
     },
     [files, props.multiple]
   );

packages/react/src/components/FileUploader/stories/drop-container.js

@@ -18,7 +18,7 @@ function ExampleDropContainerApp(props) {
   const [files, setFiles] = useState([]);
   const uploadFile = async fileToUpload => {
     // file size validation
-    if (fileToUpload.size > 512000) {
+    if (fileToUpload.filesize > 512000) {
       const updatedFile = {
         ...fileToUpload,
         status: 'edit',
@@ -74,10 +74,13 @@ function ExampleDropContainerApp(props) {
         status: 'uploading',
         iconDescription: 'Uploading',
       }));
-      props.multiple
-        ? setFiles([...files, ...newFiles])
-        : setFiles([newFiles[0]]);
-      newFiles.forEach(uploadFile);
+      if (props.multiple) {
+        setFiles([...files, ...newFiles]);
+        newFiles.forEach(uploadFile);
+      } else {
+        setFiles([newFiles[0]]);
+        uploadFile(newFiles[0]);
+      }
     },
     [files, props.multiple]
   );

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

@@ -55,10 +55,7 @@ const props = () => ({
     '[data-modal-primary-focus]'
   ),
   size: select('Size (size)', sizes),
-  iconDescription: text(
-    'Close icon description (iconDescription)',
-    'Close the modal'
-  ),
+  iconDescription: text('Close icon description (iconDescription)', 'Close'),
   onBlur: action('onBlur'),
   onClick: action('onClick'),
   onFocus: action('onFocus'),
@@ -93,10 +90,7 @@ const titleOnlyProps = () => {
       'Secondary Button'
     ),
     size: select('Size (size)', sizes, 'sm'),
-    iconDescription: text(
-      'Close icon description (iconDescription)',
-      'Close the modal'
-    ),
+    iconDescription: text('Close icon description (iconDescription)', 'Close'),
     onBlur: action('onBlur'),
     onClick: action('onClick'),
     onFocus: action('onFocus'),

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

@@ -49,7 +49,7 @@ describe('Modal', () => {
     });
 
     it('has the expected default iconDescription', () => {
-      expect(mounted.props().iconDescription).toEqual('close the modal');
+      expect(mounted.props().iconDescription).toEqual('Close');
     });
 
     it('adds new iconDescription when passed via props', () => {

packages/react/src/components/Modal/Modal.js

@@ -169,7 +169,7 @@ export default class Modal extends Component {
     primaryButtonDisabled: false,
     onKeyDown: () => {},
     passiveModal: false,
-    iconDescription: 'close the modal',
+    iconDescription: 'Close',
     modalHeading: '',
     modalLabel: '',
     selectorPrimaryFocus: '[data-modal-primary-focus]',

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

@@ -44,7 +44,7 @@ exports[`ModalWrapper should render 1`] = `
     <Modal
       aria-label="test modal"
       hasScrollingContent={false}
-      iconDescription="close the modal"
+      iconDescription="Close"
       id="modal"
       modalHeading="Transactional Modal"
       modalLabel="Test Modal Label"
@@ -97,18 +97,18 @@ exports[`ModalWrapper should render 1`] = `
               Transactional Modal
             </h3>
             <button
-              aria-label="close the modal"
+              aria-label="Close"
               className="bx--modal-close"
               onClick={[Function]}
-              title="close the modal"
+              title="Close"
               type="button"
             >
               <ForwardRef(Close20)
-                aria-label="close the modal"
+                aria-label="Close"
                 className="bx--modal-close__icon"
               >
                 <Icon
-                  aria-label="close the modal"
+                  aria-label="Close"
                   className="bx--modal-close__icon"
                   height={20}
                   preserveAspectRatio="xMidYMid meet"
@@ -117,7 +117,7 @@ exports[`ModalWrapper should render 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <svg
-                    aria-label="close the modal"
+                    aria-label="Close"
                     className="bx--modal-close__icon"
                     focusable="false"
                     height={20}