Dual List component is almost ready on Patternfly

Development
#1

PR link: https://github.com/patternfly/patternfly-react/pull/395
Design: https://www.patternfly.org/pattern-library/forms-and-controls/dual-list-selector/#design
Storybook: https://rawgit.com/Laviro/patternfly-react/storybook/feature/dual-list-selector/index.html !

I’d like us to think together what else would we like to add as follow-up PRs,
what would we like to improve in the current situation ?

Demo:

Dec%206%2C%202018%2011_54%20AM
Dec 6, 2018 11_54 AM.gif1920×1080 1.08 MB

3 Likes
Foreman UX newsletter - January 2019
#2

Nice :+1: Can’t wait to see it in foreman

1 Like
#3

Yass!

1 Like
#4

We need to make sure that the values sent by this component when the form is submitted are the same as those sent by the current implementation we use.
There are a couple of more complicated use cases we have right now in Foreman:

  1. The ability to disable certain items so they can’t be moved from side to side. This is used for example when an Organization has hosts connected to other resources, e.g. domains, preventing these resources that are in use from being removed from the Organization. When this occurs a tool tip also displays explaining why these items are disabled.
  2. The ability to send extra values without displaying them to the user. This is used for example when a user has limited permissions and can’t see all values connected to an object, to prevent that user from removing the values that they don’t know about when the form is submitted.

Other than that this component looks very nice!

1 Like
#5

Just merged on Patternfly :tada:

#6

Does it include the two use cases I mentioned above? otherwise it would be difficult to implement it in foreman.

#7

The PR got too big,
so I want to add those as follow up PRs now.

Just a question about the 2 use cases:

The ability to disable certain items so they can’t be moved from side to side.

In a UX perspective, would it be better to add only items that can be move? or is it important to show the disabled items?

The ability to send extra values without displaying them to the user.

I think this should be implement on the form we use and not on the PF component, right ?

#8

No, it’s important to show the items - you want to know a certain item is assigned or available even if you can’t remove or assign it.

If the component is serialized into a form input when submitting the form, where would we add this? It should be passed as values for the same field, just like those that are displayed.

1 Like
#9

Thanks :grinning:

#10

Adding Disability PR is waiting for review on patternfly: https://github.com/patternfly/patternfly-react/pull/1071

#11

Added hidden input PR to patternfly: https://github.com/patternfly/patternfly-react/pull/1095