-
Notifications
You must be signed in to change notification settings - Fork 355
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add "slack" width constraint modes #865
Add "slack" width constraint modes #865
Conversation
tests/dummy/app/pods/docs/guides/header/size-constraints/template.md
Outdated
Show resolved
Hide resolved
4a38a16
to
9496542
Compare
877dcd4
to
d4f7500
Compare
…/expand-table-beyond-max-width
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noted a few things. LGTM otherwise! 🎉
11d530f
to
5272398
Compare
Refactored to get rid of |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code has changed since my last review. Noted a few things ✍️
This reverts commit b5b52de.
Adds two width constraint modes:
eq-container-slack
,gte-container-slack
. These build on their non-"slack" counterparts by allocating excess container whitespace into an additional column that vanishes when it is no longer needed. This resembles behavior in applications like Excel and Google sheets.BONUS ADDITION:
initialFillMode
parameter that is used exclusively in slack modes to perform the initial column layout. Values and default are the same asfillMode
. Ineq-container-slack
mode,fillMode
andinitialFillMode
can be set to different values. The former is used for enforcing the width constraint, while the latter is used only for initial sizing. See docs & tests for examples.Which constraint modes use which fill modes:
![](https://user-images.githubusercontent.com/2594635/107288070-dd609180-6a30-11eb-9d7b-67c82566879f.png)
Advantages:
Notes:
lte-container
ornone
fillMode
has no effect ingte-container-slack
mode, but does still apply when enlarging columns beyond the container size ineq-container-slack
moderesizeMode
can befluid
, butstandard
(shown below) provides a more consistent UXinitialFillMode
should be used with slack modes if a "responsive" initial layout is desiredeq-container-slack
gte-container-slack