Aligning form input styles

Polaris
1

image
image1268×824 53 KB

Is there any intention on aligning the form input styles between the old React and the new web components?

I’m trying to adopt the new components where and when we can but because of the style differences, if we use an old React one we have to use them for everything because of the style differences.

For example, the differences in the above picture:

  1. Text field
    1. Label - Font size (13px vs 12px)
    2. Label - Line height (20px vs 16px)
    3. Help text - Font size (13px vs 12px)
    4. Help text - Line height (20px vs 16px)
    5. Help text - Colour (rgb(48, 48, 48) vs rgb(97, 97, 97))
  2. Checkbox
    1. Labels are the same between old and new
    2. Help text - Same differences as above

If these were aligned then even if we have to use an old component (like for the label action) it would mean we could still use the new one everywhere else

2

Hey @Alan_G, sorry to tag you!

Just wondered if there is any official response on this?

3

Hey @DanGamble :waving_hand: - no worries, happy to take a look. It does seem like the style mismatch between the two versions is happening there. I’m not sure if this is intentional. I’ll reach out to some folks internally to see if I can share any more info and flag this - appreciate you reaching out!

1 Like
5

The issue also exists for the “s-choice-list” label, which uses a different font size for the label that the s-text-field

6

Thanks @Alan_G. Our adoption would massively increase if they were the same style :crossed_fingers:

7

Thanks folks, and thanks @bakura10 for the note on s-choice-list. Still waiting for further updates on this, but I’ve passed along the additional info to the team, I’ll loop back here with you once I have more info for you all.

1 Like
8

Hey folks, just looping back here with some info. At the moment, there is an intentional difference, and the web components represent the new design language vs the old style for Polaris. There will be other possible scenarios where web components will differ from the React version as well, as I’m sure you folks have encountered, but I did just want to mention this as a possibility.

That said, if you folks were open to sharing if you’re encountering any feature gaps related to the style differences, I’m happy to look into this further with you and see if we can look at this internally on your behalf.

9

Thanks for the update Alan.

With the components seemingly picking up speed over the last few weeks or so I’ll see if I can give solely PVC form components another go!

10

Sounds good @DanGamble - I’ll keep this thread as “unresolved” for the time being, so just ping me here if I can help out with anything else on our end :slight_smile:

1 Like
11

Hey @DanGamble , following up here to see if I can help out any further/if we’re okay to mark this thread as solved - just let me know!

12

Happy to mark this as solved for now!

13

Awesome @DanGamble! Ping me here if I can help with anything else though, just let me know.

1 Like