From 33985c3e1baa39ff334d015fc3825acd135cd11a Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 31 Mar 2020 15:37:51 -0500 Subject: [PATCH 1/7] fix(time-picker): reset select margins (#5746) --- packages/components/src/components/time-picker/_time-picker.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss index b858c5720e42..d6f2979e68be 100644 --- a/packages/components/src/components/time-picker/_time-picker.scss +++ b/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); From 9b267caeaeebb0d978d0c3d0ff4999686f9c80eb Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Tue, 31 Mar 2020 20:48:05 +0000 Subject: [PATCH 2/7] chore(project): sync generated files --- packages/components/docs/sass.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 7a3dc60d523e..8e0e1e803e0a 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -23462,6 +23462,7 @@ Time picker styles } .#{$prefix}--time-picker .#{$prefix}--select-input { + margin: 0; min-width: auto; width: auto; padding-right: rem(48px); From a8386e6dd8028b47badbb5b7a22a417a75c5b0c2 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 10:18:23 -0500 Subject: [PATCH 3/7] fix(icon-build-helpers): generate valid pictogram modules (#5725) Co-authored-by: TJ Egan Co-authored-by: Akira Sudoh Co-authored-by: Josh Black --- packages/icon-build-helpers/src/builders/vanilla/builder.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/icon-build-helpers/src/builders/vanilla/builder.js b/packages/icon-build-helpers/src/builders/vanilla/builder.js index 031da09df533..daec84067495 100644 --- a/packages/icon-build-helpers/src/builders/vanilla/builder.js +++ b/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])) { From 2e14d83d94f6c060e2293b6d8f611a8f17379acf Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Wed, 1 Apr 2020 13:44:33 -0500 Subject: [PATCH 4/7] fix(data-table): remove max width line from core styles (#5747) * fix(data0table): remove max width line from core styles * chore(data-table): add sticky haeder mixin with max-width Co-authored-by: TJ Egan --- packages/components/docs/sass.md | 2 +- .../components/src/components/data-table/_data-table-core.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 8e0e1e803e0a..53efcfc28834 100644 --- a/packages/components/docs/sass.md +++ b/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%); } ``` diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss index a7f56a8cd3bd..b7dea48ef2a2 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/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') { From a7ae576a8bc472ce328084564d22dea537db58db Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 16:45:20 -0500 Subject: [PATCH 5/7] docs(drop-container): reduce mock upload calls when `multiple` is false (#5731) --- .../drag-and-drop-file-uploader/src/index.js | 13 ++++++++----- .../FileUploader/stories/drop-container.js | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/react/examples/drag-and-drop-file-uploader/src/index.js b/packages/react/examples/drag-and-drop-file-uploader/src/index.js index 9d1eae7470f3..5185fabdbabe 100644 --- a/packages/react/examples/drag-and-drop-file-uploader/src/index.js +++ b/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] ); diff --git a/packages/react/src/components/FileUploader/stories/drop-container.js b/packages/react/src/components/FileUploader/stories/drop-container.js index d4c6b03f906f..a6532b089023 100644 --- a/packages/react/src/components/FileUploader/stories/drop-container.js +++ b/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] ); From e83aabfb2b67310e14266c02e04711626f0d26d8 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 2 Apr 2020 07:11:09 +0900 Subject: [PATCH 6/7] fix(data-table): ensure cleaning-up events (#5743) This change ensure Carbon handle management API is used for attaching events in vanilla data table, to avoid orphaned events. Fixes #5742. --- .../src/components/data-table/data-table.js | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/components/src/components/data-table/data-table.js b/packages/components/src/components/data-table/data-table.js index 67bdce3027b8..7366b3f22936 100644 --- a/packages/components/src/components/data-table/data-table.js +++ b/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) => { From f51b06ba1dbc2166e10c3ca497b33ed71571b3e7 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 17:23:36 -0500 Subject: [PATCH 7/7] fix(Modal): edit close icon alt text to match content guidelines (#5700) --- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 2 +- packages/react/src/components/Modal/Modal-story.js | 10 ++-------- packages/react/src/components/Modal/Modal-test.js | 2 +- packages/react/src/components/Modal/Modal.js | 2 +- .../__snapshots__/ModalWrapper-test.js.snap | 12 ++++++------ 5 files changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1e9014600bea..8b422ea023a7 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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], diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js index ef34780ed8a5..56a2fa4c75e1 100644 --- a/packages/react/src/components/Modal/Modal-story.js +++ b/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'), diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js index 4afcb7a8ffad..9adf8afa4910 100644 --- a/packages/react/src/components/Modal/Modal-test.js +++ b/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', () => { diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index 607711043ffc..dd7a1a2e501e 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/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]', diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap index 97cc0dfa7e80..7f7921682be2 100644 --- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap +++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap @@ -44,7 +44,7 @@ exports[`ModalWrapper should render 1`] = `