Add size variations for inputs

[aagonzales]

Inputs are receiving sm and xl size variations that need to be added to the kit.
Is there a way to adjust the height of the input field without creating a new symbol set?

---

Dropdown/Combobox/Multi-select: (in code) @laurenmrice DONE 🤩

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

---

Date picker: (in code) @aagonzales DONE!

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

Note: Time picker doesn't have size variant in code so it was not included.

---

Text input: (in code) @aagonzales DONE!

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

---

Select: (in code) @aagonzales DONE!

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

---

Number input: (in code) @laurenmrice DONE!

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

Note: also adding helper text and no label versions.

---

File uploader: (in code) @laurenmrice

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme

[laurenmrice]

I sent sketch a support question if this is possible. I only have gotten it to work for inputs without labels.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[mariuszmickiewicz]

There is a way to adjust the height of a text field symbol without creating a new one, even with a label. I don't know why my GIFs are so slow :)

This will however put the responsibility to resize to the correct height on designers. Changing input itself from 40 to 32 or 48 is easy, but when label (or more elements like error, info — I would need to check if Sketch can handle that) is present, now some calculations are required and this will lead to guess work, mistakes in designs etc.

Technically it is possible to have one symbol in Sketch for input field in all its states (hover, disabled, placeholder, focus), but I think the power of Carbon kit lies exactly in having all of the separate states with simple symbol switch, rather than tweaking sub-symbols and overrides. That's why I would suggest to create separate groups for other sizes. I can help with that.

[laurenmrice]

Did your approach work for the error state? That is what ended up blocking me from this in the end.

You make good points, I think it would be safer to just have separate sizes.

[mariuszmickiewicz]

If a label, helper text and error don't need to be multi-line (no smart layout involved) then one symbol for all sizes approach seems to be working. It doesn't even needs that much of a cognitive load, just remember the sizes, add/remove 8px.

Still, predefined sizes approach for me sounds better, even if it requires a lot of maintenance, but I leave the decision to you.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[laurenmrice]

Symbol structure

Lets go with this base naming structure for components that need a size selection.

---

Pieces

We can keep a top level section for pieces that don't need options for sizes. But for components that do have pieces that have different sizes, we can add a nested pieces section.

Ex:

---

Size naming

Lets go with this for now. Once we audit our sizes for components we can easily adjust the naming for these.

[laurenmrice]

Added! Will be in next kit update 🎉