search

carbon-design-system / carbon-contribution

Documentation on how to contribute back to Carbon
https://www.carbondesignsystem.com/contributing/designers
7 stars 4 forks source link

Contribution: Dynamic list #10

Closed werdnanoslen closed 5 years ago

werdnanoslen commented 5 years ago

I'd call this a dynamic list. The goal was to allow a user to quickly build a list of items. I'm personally using this pattern in a couple of places to allow a user to type a list of emails and make a binary admin/not-admin selection for each one. This would not have been possible as a csv list in a text area, and the table component is far too heavy visually for such a simple list.

Here's what that looks like in one case (without the admin selection): image

Cyrus Furtado (@cfurtado on Slack & IBM Github) on my team built it, and I designed it.

A simple demo I made from Cyrus' work: https://codesandbox.io/s/523355y4l Sketch file of a few examples: https://ibm.box.com/s/sdjh2luqirg005ghnvocb0ugsbezrnet

werdnanoslen commented 5 years ago

@shixiedesign

werdnanoslen commented 5 years ago

Here's a v10 version: image

shixiedesign commented 5 years ago

Hi @werdnanoslen i finally got to take a closer look. I understand the functionality now. A few thoughts:

  1. there's no visual indicator that it's different from simple text inputs. How about adding a button that says add at the end of the inputs?
  2. The "x" clear looks a little big. It should be a 16x16 icon, is it? Checkmark looks good to me, but just FYI this is the checkmark in the icon repo (sorry it's not in sketch yet!) you can grab the checkmark svg here
  3. Feels like checkmark showing the moment user types anything is a little redundant. I'd not bother with adding a checkmark, and just have an add button instead.

Here's my quick proposal. Welcome feedbacks! @laurenmrice @aagonzales

image

shixiedesign commented 5 years ago

Another proposal: image

werdnanoslen commented 5 years ago

To points 1 & 3: Fair, although my blue checkmark is that add button, just inline with the field. Your second proposal makes sense, too.

To point 2: The X is more of a "delete" button than clear, it removes that item from the list. And in my latest iterations I changed it to the 16 icon

Here's a quick gif of just the interaction design, not including some visual changes I've I made: May-03-2019 16-40-06

laurenmrice commented 5 years ago

I think in this situation that the plus reads better as an actual button. Typically we use that check icon in a form field as a success indicator only, not that it has an action to click on.

werdnanoslen commented 5 years ago

agreed, totally down for that

shixiedesign commented 5 years ago

Continue to track in carbon repo issue for the next step: https://github.com/carbon-design-system/carbon/issues/2679