Skip to content

feat: width adjustments for popover based components, class changes, MultiInput changes #1016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 15, 2020
Merged

feat: width adjustments for popover based components, class changes, MultiInput changes #1016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7315dae
fix: width adjustments for popover based components
jacobdevera May 13, 2020
243629a
fix: multiinput x more options
jacobdevera May 14, 2020
39c6c3a
fix: truncated options test
jacobdevera May 14, 2020
191d68a
fix: snapshots, input group class
jacobdevera May 14, 2020
3f66266
fix: revert multiinput width
jacobdevera May 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/ComboboxInput/ComboboxInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const ComboboxInput = React.forwardRef(({
{validationState.text}
</FormMessage>
}
<List>
<List className='fd-list--dropdown'>
{options.map(option => (
<List.Item
key={option.key}
Expand Down Expand Up @@ -116,7 +116,7 @@ const ComboboxInput = React.forwardRef(({
onClickOutside={handleClickOutside}
show={isExpanded}
useArrowKeyNavigation
widthSizingType='matchTarget' />
widthSizingType='minTarget' />
);
});

Expand Down
3 changes: 2 additions & 1 deletion src/InputGroup/InputGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
27 changes: 18 additions & 9 deletions src/MultiInput/MultiInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,23 @@ class MultiInput extends Component {

// create tag elements to display below input box
createTags = () => {
return this.state.tags.map((tag, index) => (
<Token
key={index}
onClick={() => this.removeTag(tag)}>
{tag}
</Token>
));
return this.state.tags.map((tag, index) => {
if (index < 3) {
return (
<Token
key={index}
onClick={() => this.removeTag(tag)}>
{tag}
</Token>
);
} else if (index >= this.state.tags.length - 1) {
return (
<span className='fd-tokenizer__indicator'>{this.state.tags.length - 3} more</span>
);
} else {
return null;
}
});
};

// add/remove tag to tag collection
Expand Down Expand Up @@ -95,7 +105,6 @@ class MultiInput extends Component {

// remove/close tag
removeTag = (tag) => {

this.setState(
prevState => {
const tags = prevState.tags.filter(item => {
Expand Down Expand Up @@ -201,7 +210,7 @@ class MultiInput extends Component {
{this.state.tags.length > 0 && this.createTags()}
<FormInput
{...inputProps}
className='fd-tokenizer__input'
className='fd-input-group__input fd-tokenizer__input'
compact={compact}
disableStyles={disableStyles}
placeholder={placeholder} />
Expand Down
32 changes: 32 additions & 0 deletions src/MultiInput/MultiInput.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,38 @@ describe('<MultiInput />', () => {
);
});

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
Expand Down
32 changes: 16 additions & 16 deletions src/MultiInput/__stories__/__snapshots__/MultiInput.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ exports[`Storyshots Component API/MultiInput Compact 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer fd-tokenizer--compact"
className="fd-tokenizer fd-tokenizer--compact"
compact={true}
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-input--compact fd-tokenizer__input"
className="fd-input fd-input--compact fd-input-group__input fd-tokenizer__input"
placeholder="Placeholder"
type="text"
/>
Expand Down Expand Up @@ -80,15 +80,15 @@ exports[`Storyshots Component API/MultiInput Dev 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
compact={false}
disabled={false}
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Select a Fruit"
type="text"
/>
Expand Down Expand Up @@ -136,14 +136,14 @@ exports[`Storyshots Component API/MultiInput Disabled 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
disabled={true}
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Placeholder"
type="text"
/>
Expand Down Expand Up @@ -191,13 +191,13 @@ exports[`Storyshots Component API/MultiInput Primary 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Placeholder"
type="text"
/>
Expand Down Expand Up @@ -247,13 +247,13 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Error"
type="text"
/>
Expand Down Expand Up @@ -300,13 +300,13 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Warning"
type="text"
/>
Expand Down Expand Up @@ -353,13 +353,13 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Success"
type="text"
/>
Expand Down Expand Up @@ -406,13 +406,13 @@ exports[`Storyshots Component API/MultiInput Validation States 1`] = `
tabIndex={0}
>
<div
className="fd-input-group__input fd-tokenizer"
className="fd-tokenizer"
>
<div
className="fd-tokenizer__inner"
>
<input
className="fd-input fd-tokenizer__input"
className="fd-input fd-input-group__input fd-tokenizer__input"
placeholder="Information"
type="text"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/SearchInput/SearchInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ class SearchInput extends Component {
noArrow
onClickOutside={this.handleClickOutside}
show={this.state.isExpanded}
widthSizingType='matchTarget' />
widthSizingType='minTarget' />
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/Select/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const Select = React.forwardRef(({
placement='bottom-start'
popperProps={{ id }}
show={isExpanded}
widthSizingType='matchTarget' />
widthSizingType='minTarget' />
);
});

Expand Down