Select Multi Group - Form

[terezanovotna]

This is a component that was originally created for miq ui classic, and it would be great if we could contribute this pattern to PF as well.

Storybook link by @Hyperkid123

I've done my UX review, could we get PF review? Should we move it to react mono repo right here?

In terms of PF, I think it could go to the Forms area. Would that be a good area @mcarrano? If so, I will create overview and design proposal.

[terezanovotna]

chatted with @serenamarie125 and it looks like there is already an implementation that has just few differences with this one:

• different chip color
• alphabetical order

[terezanovotna]

@mcarrano I am not really sure what to do here. Do we want to add this design to PF (as it's really similar to labeling)? or we don't want to have it?

[serenamarie125]

@terezanovotna I think we need to understand the use cases of this component. Can you elaborate on those?

[mcarrano]

@terezanovotna Agree that it would be helpful to understand use cases. My first take is that this is pretty similar to the Auto-Complete/Type-Ahead control that we are already adding. Would that serve your needs or perhaps we can consider your use cases as part of that contribution? I don't really want to have two separate components that do almost the same thing.

[Hyperkid123]

@mcarrano it is basically just multi-select form component. And yes it is really similar to your implementation (maybe exactly the same). I've created this because we needed it in ManageIQ, but there wasn't any component available in patternfly-react at that time. Also the styling of Auto-Complete/Type-Ahead control doesn't match the current style of Cloudforms.

And the use cases. Forms that require select/multi-select control and/or searching.

[serenamarie125]

@Hyperkid123 I spoke with Ron ( that PR contributor ) and he said that you can override the visual representation of the chip, so I think you should be able to utilize what he's contributing.

From what i understand, the use case for ManageIQ is that they are selecting tags, which have a unique visualization, thus they want them displayed differently. To me, that's just a variation of what's been contributed.

[Hyperkid123]

@serenamarie125 yes i am ok with using your implementation, we just needed it a bit sooner and if we can customize the visuals, there should ne no problem using it when its finished.

But i was wrong about saying it may be exactly the same. After i've checked the code i think that the type ahead is a bit different from implementation stand point. Specifically the options data structure. We need array of objects, each having some value and label properties, not just array of strings or numbers.

I was wrong again, after checking https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Data.md it turns out, that it does meet our requirements. I would suggest adding some data structure reference to storybook or to the PR, because it is not clear what you can actually do with that component. Or at least add link for the actual component documentation.