flex tag input #2086
flex tag input #2086
Conversation
- actually three-column layout, with tags (and children) in center container - aligning the rightElement is basically impossible to generalize :sad:
flex tag inputPreview: documentation | landing | table |
| // essentially a min-width, cuz flex allows it to grow or shrink: | ||
| width: $pt-grid-size * 10; | ||
| line-height: $tag-height; |
There was a problem hiding this comment.
we hit a small regression here:
line-height: $pt-grid-size * 2 fixes it -- 20px because there's 5px margin at the top and at the bottom
There was a problem hiding this comment.
ok sure makes sense 👍
what's the goal here? to center it vertically? IMO it's nbd if it requires custom CSS for oddly-shaped |
|
yeah it's gonna require custom CSS for oddly-shaped elements. i'm going to ensure that buttons are perfectly centered (a la input group) and that's it. |
|
cool sounds good. for tag input and input groups, can you make sure the right button is flex-start as opposed to centered? |
|
input groups can only be one line, so gonna keep it centered. tag inputs, for sure. |
|
i'm actually not touching input group at all, and they don't even use flex. they use padding and position because the |
pt-button-height-{size}() mixins, TagInput support spinnersPreview: documentation | landing | table |
|
ready for review |
|
can we do anything about this? use |
|
@adidahiya that's an actual |
Fixes #1425 (last remaining TODO)
rightElementsupports buttons and spinners out of the box, but other elements will likely need custom CSSThoughts
rightElementis basically impossible to generalize 😢 . any thoughts about how to handle this?and they change when large
rightElement?: React.ReactNodewe know nothing about!in the docs example it’s a small button but it could be anything, from a large button to an entire app-in-a-box
align-items: flex-startfucks it all up cuz i don’t know what kind of margins to apply to “center” the element in the one-line case