From 7315dae23074a4e275709facb23ec4e7ed30b4a7 Mon Sep 17 00:00:00 2001 From: Jacob Devera Date: Wed, 13 May 2020 16:09:28 -0700 Subject: [PATCH 1/5] fix: width adjustments for popover based components --- src/ComboboxInput/ComboboxInput.js | 4 ++-- src/MultiInput/MultiInput.js | 3 +-- src/SearchInput/SearchInput.js | 2 +- src/Select/Select.js | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/ComboboxInput/ComboboxInput.js b/src/ComboboxInput/ComboboxInput.js index 38964b506..96b03d69b 100644 --- a/src/ComboboxInput/ComboboxInput.js +++ b/src/ComboboxInput/ComboboxInput.js @@ -71,7 +71,7 @@ const ComboboxInput = React.forwardRef(({ {validationState.text} } - + {options.map(option => ( + widthSizingType='minTarget' /> ); }); diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js index d140303e3..35364b80f 100644 --- a/src/MultiInput/MultiInput.js +++ b/src/MultiInput/MultiInput.js @@ -219,8 +219,7 @@ class MultiInput extends Component { disabled={disabled} disableStyles={disableStyles} noArrow - onClickOutside={this.handleClickOutside} - widthSizingType='matchTarget' /> + onClickOutside={this.handleClickOutside} /> ); } } diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js index a3ae6f6b6..f6cf205ac 100644 --- a/src/SearchInput/SearchInput.js +++ b/src/SearchInput/SearchInput.js @@ -206,7 +206,7 @@ class SearchInput extends Component { noArrow onClickOutside={this.handleClickOutside} show={this.state.isExpanded} - widthSizingType='matchTarget' /> + widthSizingType='minTarget' /> ); } diff --git a/src/Select/Select.js b/src/Select/Select.js index f02a32500..edbedd4ab 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -125,7 +125,7 @@ const Select = React.forwardRef(({ placement='bottom-start' popperProps={{ id }} show={isExpanded} - widthSizingType='matchTarget' /> + widthSizingType='minTarget' /> ); }); From 243629ab02f0d306ed2aaeec042553532f48accd Mon Sep 17 00:00:00 2001 From: Jacob Devera Date: Thu, 14 May 2020 12:02:53 -0700 Subject: [PATCH 2/5] fix: multiinput x more options --- src/MultiInput/MultiInput.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js index 35364b80f..c7ae9a892 100644 --- a/src/MultiInput/MultiInput.js +++ b/src/MultiInput/MultiInput.js @@ -48,13 +48,23 @@ class MultiInput extends Component { // create tag elements to display below input box createTags = () => { - return this.state.tags.map((tag, index) => ( - this.removeTag(tag)}> - {tag} - - )); + return this.state.tags.map((tag, index) => { + if (index < 3) { + return ( + this.removeTag(tag)}> + {tag} + + ); + } else if (index >= this.state.tags.length - 1) { + return ( + {this.state.tags.length - 3} more + ); + } else { + return null; + } + }); }; // add/remove tag to tag collection @@ -95,7 +105,6 @@ class MultiInput extends Component { // remove/close tag removeTag = (tag) => { - this.setState( prevState => { const tags = prevState.tags.filter(item => { @@ -201,7 +210,7 @@ class MultiInput extends Component { {this.state.tags.length > 0 && this.createTags()} From 39c6c3a1ce6fbe7882efaa7b1707c0c2bbbdca30 Mon Sep 17 00:00:00 2001 From: Jacob Devera Date: Thu, 14 May 2020 12:09:46 -0700 Subject: [PATCH 3/5] fix: truncated options test --- src/MultiInput/MultiInput.test.js | 32 +++++++++++++++++++ .../MultiInput.stories.storyshot | 16 +++++----- 2 files changed, 40 insertions(+), 8 deletions(-) diff --git a/src/MultiInput/MultiInput.test.js b/src/MultiInput/MultiInput.test.js index ee9f0c784..d5093e8bb 100644 --- a/src/MultiInput/MultiInput.test.js +++ b/src/MultiInput/MultiInput.test.js @@ -136,6 +136,38 @@ describe('', () => { ); }); + test('tag list is truncated when more than 3 options are selected', () => { + wrapper = mount(multiInput); + wrapper + .find('button.fd-button--transparent') + .simulate('click'); + + // add 4 tags to list + wrapper + .find('.fd-checkbox').first() + .simulate('change', { target: { value: data[0] } }); + wrapper + .find('.fd-checkbox').at(1) + .simulate('change', { target: { value: data[0] } }); + wrapper + .find('.fd-checkbox').at(2) + .simulate('change', { target: { value: data[0] } }); + wrapper + .find('.fd-checkbox').at(3) + .simulate('change', { target: { value: data[0] } }); + + // check that tag list contains value + expect(wrapper.state(['tags'])).toHaveLength(4); + + // check to see that only 3 tags are created + expect(wrapper.find('span.fd-token[role="button"]')).toHaveLength(3); + + // check that truncated text is correct + expect(wrapper.find('span.fd-tokenizer__indicator').text()).toEqual( + '1 more' + ); + }); + test('remove tag from taglist by unchecking', () => { wrapper = mount(multiInput); wrapper diff --git a/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot b/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot index 8e9c32934..44003f539 100644 --- a/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot +++ b/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot @@ -33,7 +33,7 @@ exports[`Storyshots Component API/MultiInput Compact 1`] = ` className="fd-tokenizer__inner" > @@ -88,7 +88,7 @@ exports[`Storyshots Component API/MultiInput Dev 1`] = ` className="fd-tokenizer__inner" > @@ -143,7 +143,7 @@ exports[`Storyshots Component API/MultiInput Disabled 1`] = ` className="fd-tokenizer__inner" > @@ -197,7 +197,7 @@ exports[`Storyshots Component API/MultiInput Primary 1`] = ` className="fd-tokenizer__inner" > @@ -253,7 +253,7 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = ` className="fd-tokenizer__inner" > @@ -306,7 +306,7 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = ` className="fd-tokenizer__inner" > @@ -359,7 +359,7 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = ` className="fd-tokenizer__inner" > @@ -412,7 +412,7 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = ` className="fd-tokenizer__inner" > From 191d68a75637f912bb3d970ffee3aa71acb11fe0 Mon Sep 17 00:00:00 2001 From: Jacob Devera Date: Thu, 14 May 2020 12:25:07 -0700 Subject: [PATCH 4/5] fix: snapshots, input group class --- src/InputGroup/InputGroup.js | 3 ++- .../__snapshots__/MultiInput.stories.storyshot | 16 ++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js index 7f21e02dd..82a51da3a 100644 --- a/src/InputGroup/InputGroup.js +++ b/src/InputGroup/InputGroup.js @@ -40,7 +40,8 @@ class InputGroup extends Component { const getClassName = (child) => classnames( { - 'fd-input-group__input': child.type.displayName !== InputGroupAddon.displayName + 'fd-input-group__input': child.type.displayName !== InputGroupAddon.displayName && + !child.props.className?.includes('fd-tokenizer') }, child.props.className ); diff --git a/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot b/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot index 44003f539..14c5aef47 100644 --- a/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot +++ b/src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot @@ -26,7 +26,7 @@ exports[`Storyshots Component API/MultiInput Compact 1`] = ` tabIndex={0} >
@@ -136,7 +136,7 @@ exports[`Storyshots Component API/MultiInput Disabled 1`] = ` tabIndex={0} >
Date: Thu, 14 May 2020 13:14:33 -0700 Subject: [PATCH 5/5] fix: revert multiinput width --- src/MultiInput/MultiInput.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js index c7ae9a892..b2fa39095 100644 --- a/src/MultiInput/MultiInput.js +++ b/src/MultiInput/MultiInput.js @@ -228,7 +228,8 @@ class MultiInput extends Component { disabled={disabled} disableStyles={disableStyles} noArrow - onClickOutside={this.handleClickOutside} /> + onClickOutside={this.handleClickOutside} + widthSizingType='matchTarget' /> ); } }