search

cloudfour / drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.
https://cloudfour.com/thinks/introducing-drizzle/
MIT License
666 stars 32 forks source link

Surprise! Tyler still has issues with `order` #66

Closed tylersticka closed 6 years ago

tylersticka commented 8 years ago

I know, I know, I've already talked a ton about this in cloudfour/drizzle-builder#31. But it's still not working the way I'd like it to, and I thought I'd document that (even if it has to wait for a future version to be resolved).

The Problem

Here's a hypothetical collection of patterns:

- disabled.hbs
- group.hbs
- overview.hbs
- style-variations.hbs

By default, these will show up in the same order as above... whatever the file system determines "alphabetical" means for these files.

Let's say I want "Overview" to be the first pattern. Currently, that's really easy. I just add the property to my Frontmatter:


---
order: 1

---
{{! etc. }}

And the order changes:

1 overview.hbs
- disabled.hbs
- group.hbs
- style-variations.hbs

Simple.

But what if I want a pattern to sort to the end?

For example, maybe the group pattern should go after all of the patterns pertaining to individual instances.

Currently, that would require that I specify an order for every file:

1 overview.hbs
2 disabled.hbs
3 style-variations.hbs
4 group.hbs

Alternatively you could give everything after overview the same order value. But you'd still have to specify for every single pattern, as any pattern lacking an order property will show up after everything else.

My Recommendation

This use-case is why I recommended (and prototyped) that we mimic the CSS order property in structure. Specifically its initial value of 0.

Having an initial value means negative numbers show up earlier than the default, positive numbers show up later.

This means you'd only need to specify the order property for the patterns you wanted to move, regardless of which direction they moved...

-1 overview.hbs
 - disabled.hbs
 - style-variations.hbs
 1 group.hbs

It also seems intuitive given our target audience to make our order property behave in a manner similar to an order property they're familiar with.

erikjung commented 8 years ago

@tylersticka I'm fine with using negative values, but I'd like to consider a few things:

Because we now have helpers that can sort by any property, we might want to focus on creating a common sorting function that possesses the logic to infer default values (e.g. 0) and that isn't limited to just properties named "order".

erikjung commented 8 years ago

Also, here's the library used by the helpers: https://github.com/bubkoo/natsort