swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.
https://design-system.post.ch
Apache License 2.0
106 stars 13 forks source link

Variant: Small floating label input #1604

Closed gfellerph closed 8 months ago

gfellerph commented 10 months ago

A new variant for the floating label input has been requested that has 48px height.

Prototype: https://p9t283.axshare.com/?id=ud8t60&p=einstellungen_-_artikel

### Tasks
- [x] Create a proposal in figma
wueestd commented 9 months ago

created a branch in figma: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/branch/MVANE2KzNGq2et3q6T15PC/Components-Post?type=design&node-id=7779%3A34916&mode=design&t=YGbyNphH4VM1cJ3U-1

following componants have now a smaler variant:

rouvenpost commented 9 months ago
Bildschirmfoto 2023-08-02 um 10 11 01

The Notifications look a bit strange... is it possible to Center The Text and the Icon so that it does not stick to the bottom?

wueestd commented 9 months ago

This is due to the posssibility to drag components along the height axis.

wueestd commented 9 months ago

@gfellerph could you look into this?

following componants have now a smaler variant:

created a branch in figma: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/branch/MVANE2KzNGq2et3q6T15PC/Components-Post?type=design&node-id=7779%3A34916&mode=design&t=YGbyNphH4VM1cJ3U-1

gfellerph commented 8 months ago

Looks great, I created tickets for implementation. In all cases, we need to remove size variants for "regular" and "medium" and I think it's good to do that because it will also be easier for devs to choose sizes.

https://github.com/swisspost/design-system/pull/1837

wueestd commented 8 months ago

Should I try to merge the figma branches? @rouvenpost @gfellerph

wueestd commented 8 months ago

Branches are merged, Component with commit message commited and teams post setup!