Add Arrange component with tests.

[ry5n]

Add component for arranging and aligning rows of items. Provides a declarative, rapid way to achieve some common patterns (such as input add-ons) without knowing (and accounting for) implementation details.

Status: Opened for visibility Reviewers: @kpeatt @jeffkamo @scalvert

Changes

• Add Arrange component.
• Add tests.

  Notes

• Contains an integration test (with utils-dimension) that will fail until utils-dimension is merged in and becomes available.

[kpeatt]

What's the goal of this utility?

[ry5n]

Basically it’s a convenience component for common flex-box use cases without writing any CSS:

e.g. Create a row of equal-width elements that stretch to fill the container height:

<ul class="c-arrange">
    <li class="c-arrange__item">…</li>
    <li class="c-arrange__item">…</li>
    <li class="c-arrange__item">…</li>
</ul>

e.g. Align an auto-sized button next to an input with the input taking up the remaining space:

<div class="c-arrange" role="search" aria-label="Search site">
    <div class="c-arrange__item"><input class="u-width-full" type="search"></div>
    <div class="c-arrange__item c--shrink"><button class="c-button" type="submit">Search</button></div>
</div>

Of course flexbox makes it pretty easy to re-write equivalent styles for each of these, but one of the great ideas to come out of SUIT (and OOCSS in general) is to work more with HTML than CSS, reusing common style patterns by creating appropriate abstractions. I’d argue that as long as we find this useful, the other advantage is testability; if there are gotchas we can build fixes right into the component.

[ry5n]

I should mention this is based on https://github.com/suitcss/components-arrange/blob/master/arrange.css, although of course the implementation is different since we have flexbox. Alignment modifiers could be easily be added for vertical alignment of items.

[jeffkamo]

This is an extremely common use case for us, and something we re-write in our CSS a lot (or at least I do...) so I can see this being useful. Would probably reduce bloat a bit by making our template styles smaller.

[kpeatt]

Do you think it makes sense to add ordering to this utility as well? That's what I was envisioning when I saw the name arrange.

[jeffkamo]

I see where you're coming from, but we can't even use ordering in the first place due to lack of support in older Android/iOS.

[kpeatt]

You totally can. box-ordinal-group works pretty much the same way.

[jeffkamo]

oh geez, I totally forgot about box-ordinal-group. Check.

In that case, what would you propose for an order class (assuming it's worth including)? Something like...

.c-arrange__order-1 { ... }
.c-arrange__order-2 { ... }
.c-arrange__order-3 { ... }

[ry5n]

In principle the order idea is good. The issue is that you can do any positive or negative integer for order. We have to decide where to cap the classes (this might be no worse than what Grid already does). But what do we do for negative numbers?

[kpeatt]

You shouldn't really need to negative number grouping if you're using sane numbers in the first place. Might require you to move some classes around but I think that's the case with all these utilities classes.

[ry5n]

If you only want to move one item to the beginning and leave the others in source-order, -1 on that item seems like the most sensible approach.

If we do add these, I think (tentatively) they should probably be modifiers on arrange items, since they won’t have any effect elsewhere.

<div class="c-arrange">
    <div class="c-arrange__item c--order-2">…</div>
    <div class="c-arrange__item c--order-1">…</div>
    <div class="c-arrange__item c--order-3">…</div>
</div>

[jeffkamo]

+1 to making them a modifier.

[jeffkamo]

would it make sense to create a language like c--order-start?

.c--order-start {
    order: -1;
}

Hmm, I'm looking at the box-ordinal-group property on MDN and it doesn't support negative values.

Zero appears to be invalid too.

[ry5n]

That’s actually a pretty good argument for using classes then: they map to positive integers only and help avoid legacy issues. +1 on .c--order-1 through… I guess .c--order-6?

[kpeatt]

Yeah, I'm down.

[ry5n]

I’ll add these when I have some time.

[kpeatt]

Old flexbox syntax does not have an equivalent property for align-self. Should we remove these classes or leave them in with the caveat that they won't work in those browsers?

[kpeatt]

This depends on #7. That will need to be merged before this one.

[ry5n]

Let’s scrap alignment modifiers for items (the ones that depend on align-self). I think anything in these components should have full-spectrum support.

[kpeatt]

Okay this is :+1: from me once we merge #7 across.