Closed gnapse closed 1 year ago
Update: this seems to be solved now. See below.
I hit an issue trying to use gap
to power the columns.
[^1]: Unless we find a fix that does what we expect while still using gap
Let's drop everything we're not using 👍
Let's drop everything we're not using 👍
@henningmu does this mean you're voting for option 2?
Just to be clear, when I said "we barely use fraction-sized columns", it means that we do use that feature a bit. We'd have to figure out the handful of cases in which we use it (2 or 3 in Todoist, if I recall correctly).
One alternative I can see us adopting is to drop all fractions except "1/2". Having the ability to create a half-and-half layout is something I would not like to lose, and this layout cannot possibly suffer from the described short-coming. I could see me voting for option 2 in that case.
Update: I may be on to something with this answer. Still not a 100% there, but looking good.
Another update: it seems to be working! (with a caveat, see below)
Will double-check running Todoist with this, and will switch to ready to review if all goes well on my side.
It breaks part of the behaviour of the Columns
's collapseBelow
:
On `main` | In this PR |
---|---|
![]() |
![]() |
We used to achieve this by having a fixed CSS width: 100%
on each column except the ones with width="content"
. However, to be honest, I think this was always broken in a way. Because on main right now, if you have a column with width="content"
, it does not auto-expand to the full width when columns collapse into a stack.
So I say that this is not a blocker. I already validated how to fix the only two places where we use <Columns collapseBelow />
in Todoist.
I guess the real test for this will be to update both
todoist-web
andtwist-web
with this version, and smoke test it.
@rfgamaral did you go through the test plan above? It includes a step about running Todoist locally with this version of the library linked locally as well.
I did it myself, but I would not want to merge this until someone else do that too.
Short description
Introduce support for the CSS
gap
property.References
gap
on MDNTest plan
Due to this being so far-reaching, let's do a bit more manual QA review here than usual. I personally worked over the entire test plan myself already[^1], but a second pair of eyes would not hurt.
[^1]: In fact, that's how I found out about the issue with the columns described below.
Test the library on its own
Run storybook locally
npm run storybook
while on this branch, and check the following:Inline
Stack
(similar steps toInline
, but with some more)Columns
Test the library along the app
Run Todoist locally but linked to Reactist locally rather than using the published Reactist package.
gap:
CSS applied via Reactist component styling.PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
package.json
andpackage-lock.json
(npm --no-git-tag-version version <major|minor|patch>
) refnpm run build-all
)Versioning
It looks like this should be a patch release.Not at all. This introduces a new prop in theBox
component, so this absolutely needs to be part of a new minor release.