components icon indicating copy to clipboard operation
components copied to clipboard

Inconsistencies in sl-select and sl-formfield in Figma

Open ftakuipers opened this issue 9 months ago โ€ข 1 comments

Provide a general summary of the issue here

I noticed the following inconsistencies in the SL-select and SL-formfield (variant text input):

  1. The corner radius of the input fields are different (2 for select, 4 for formfield)
  2. The space between Label and inputfield is different (lineheight is set to 20 for formfield and to 16 for select)
  3. In general, I think in the formfield a different Label component is used (also notice the naming of one of the layers: Frame 55)
  4. When resizing the component, the sl-select is set to fill (which is preferred) and the formfield is set to a fixed width

๐Ÿค” Expected Behavior?

Consistency between the two components, so that when used together in a form, it is coherent.

๐Ÿ˜ฏ Current Behavior

  1. Image
  2. Image
  3. ..
  4. Image

๐Ÿ’ Possible Solution

Choose one corner radius, one label component and one way of resizing (fill/hug/fixed width)

๐Ÿ–ฅ๏ธ Steps to Reproduce

  1. Open SL-Select file in Figma Magister Light Mode
  2. Open SL-Formfield file in Figma Magister Light Mode

What browsers are you seeing the problem on? (only for bugs in code)

Other

If other, please specify.

No response

What operating system are you using?

MacOS

๐Ÿ‘ค Your name

Floor Kuipers

๐Ÿงข Your product/team

Magister

๐ŸŽจ Your Theme(s)

Magister

ftakuipers avatar Mar 24 '25 07:03 ftakuipers

This was in limbo; status was "next up" but not assigned to a sprint so we didn't see it.

Diaan avatar Apr 29 '25 07:04 Diaan

(Re)applied correct tokens to make select and form field the same, fixed fill on form components

RoaldBoerema avatar Jun 25 '25 10:06 RoaldBoerema