Single Add Select design review

[davidmenendez]

Design review

For Single Add Select

Standards

• [ ] All pattern updates/changes/iterations have been discussed with the component developer
• [ ] Patterns have been approved by either DSAG or another approving entity

Pattern and behavior

• [ ] The component behaves according to the guidelines set by the pattern maintainer
• [ ] The component’s UI matches the pattern specifications set by the pattern maintainer
• [ ] The component’s motion matches the specifications set by the pattern maintainer(s)
• [ ] The UI produced is responsive, cross-browser, and responds to the currently set Carbon theme.
• [ ] Colors, themes, sizes and additional props are true and correct, aligning with Carbon set tokens (unless otherwise specified by the pattern)
• [ ] Paddings/margins/spacings are true and correct, in both desktop and mobile views

Storybook

• [ ] A functioning component renders in Storybook
• [ ] The Storybook displays multiple scenarios that show how the component can be used
• [ ] Changing props in the Storybook updates the component

[OliverKauselmann]

Hi @davidmenendez, thanks for great implementation! Here are some smaller visual findings:

1. Please adjust the general layout and spacing. I added the specs with tokens on the right for comparison.
2. Please remove the search field label
3. Is it possible to implement the outline tags as designed?
4. Rows

• Please follow carbon data table rows extension states for hover (e.g. links + arrows if drillin is possible turn blue), selected, selected hover etc.
• Please adjust row height to 48px
• Please remove the tooltip "View children"

General: Can we add this sliding motion as the user is moving through the hierarchies?

[davidmenendez]

@OliverKauselmann i'm currently working on these changes.

1. i will have the layout spacing adjusted in a PR.
2. the label is required for the text input component.
3. the tag style in the design is using a v11 tag. we will be able to use it when we migrate to carbon v11, but for now we have to use something else while we are still using carbon v10.
4. the tooltip is required for the icon button component.

as for the motion- yes, i'm planning on working to add motion as part of an enhancement once the pattern is released.

[davidmenendez]

@OliverKauselmann please re-review my changes

[OliverKauselmann]

Hi @davidmenendez thanks a lot. Regarding your points above: 2. Can we use the search component instead the text input? Can we get rid of the label that way? 4. We think from user perspective there is not really a strong need for having this tooltip. The UI should provide the same functionality to drill, also when clicking on the name / label of the row.

For some points I cannot see any changes - for example the different row states besides a hover. Have you implemented them somewhere I can review them?

[davidmenendez]

@OliverKauselmann can you expand on this for me

4. We think from user perspective there is not really a strong need for having this tooltip. The UI should provide the same functionality to drill, also when clicking on the name / label of the row.

i'm very confused by this. the interaction of clicking a label is checking the checkbox or radio button. if the only way to drill down is by clicking on the > i don't think it makes sense from a semantic standpoint to use anything other than an icon button, which unfortunately requires a tooltip.