Giters

square / maker

Maker Design System by Square

Home Page:https://square.github.io/maker/styleguide/latest-stable/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

make PinInput responsive to container size

ashjtan opened this issue · comments

commented

Feature request

The PinInput currently has fixed sizes and spacing. However, It would be nice to have the option to make it flexible / fit to its container.

Why?

The PinInput can appear off-center, get cut off, or ignore padding (e.g. in a Dialog).

Untitled.mov

Alternatives

  • change the style to only adjust spacing between inputs, not input sizing (i.e. justify)
    • this would keep the look of inputs themselves consistent, but does not help much in a "too many inputs" situation
  • nothing
    • since you can always access inputs even if they are overflowing off the screen via the autofocus, there is no issue functionally

Additional context

No response

commented

This was my first piece of feedback in the original PinInput PR:

  1. the PinInput never wraps or resizes, even if the container it's in is too narrow to fit all of it. currently it just overflows its container but a lot of containers have overflow: hidden on them and in those cases the PinInput becomes truncated and inaccessible. if you're aware of this drawback and are okay with it that's fine i just wanted to double-check that you were aware

To which @Ryguy11 responded with:

  1. Yup aware - given that our use-case for pins larger than 6 is none, I felt that it was fine to leave as is for now. If a use-case arises where its essential to have wrapping blocks we can add that later.

I think the reason you're seeing an issue where Ryan did not see an issue is it looks like you have the styleguide resolution zoomed in ~150% where Ryan probably keeps his styleguide resolution at its original size 100%. At 100% size Chrome doesn't allow narrowing the viewport to a size where the PinInput inside a Dialog getting truncated becomes an issue.

Anyway, if either you or Ryan (or anyone I guess) wanna make a PR for this I'm happy to review and approve it.