UI: Empty state styles #5758
UI: Empty state styles #5758
Conversation
There was a problem hiding this comment.
Hey Joshua!
I only had a quick scan of this, I'm mainly commenting here for a question (but also to show a bit of ❤️ for owls 😄 ). Just on the wording change from Create to Add, we use a lot of Create wording in Consul, just wondering what the decision around this was as we could look to change all this in Consul also if that's preferred?
Little note, I've not approved, just because I haven't had a proper look really, I might come back later and give it a better look tho if nobody's got here before me.
👍
| text-decoration: none; | ||
| } | ||
|
|
||
| > * + * { |
There was a problem hiding this comment.
Yeeesss! Lobotomised owl! (with one ear!!) 🙌
There was a problem hiding this comment.
lol, I hadn't heard that one yet. That's fantastic. It is a handy selector though, especially in nav lists like this
There was a problem hiding this comment.
Yeah there was a great list apart article on it a few years back - https://alistapart.com/article/axiomatic-css-and-lobotomized-owls
|
Thanks @johncowen! Regarding the Add/Create language, I'm actually not sure. Add is more friendly and probably what they will be looking for, but we use Create in the docs so I don't want that mismatch. Mostly I want them to be consistent. I'll ping the product designers too to see what they think. |
| a, | ||
| .link, | ||
| a:not(.button):not(.file-delete-button):not(.tag) { | ||
| color: $blue; |
There was a problem hiding this comment.
Do we have these styles in a var or mixin somewhere? I feel like we use them in a few places.
There was a problem hiding this comment.
No we don't, but that's a good idea
| @@ -1,11 +0,0 @@ | |||
| <div class="box is-bottomless has-background-white-bis"> | |||
ui/app/templates/components/identity/item-alias/alias-metadata.hbs
Outdated
Show resolved
Hide resolved
ui/app/templates/components/identity/item-alias/alias-metadata.hbs
Outdated
Show resolved
Hide resolved
|
Talked to the Product Designers and it sounds like we'll stick with "Create" for now but make sure things are consistent and do some testing around this question. |
meirish
force-pushed
the
ui-empty-states
branch
from
f6858c7
to
f980519
Compare
meirish
force-pushed
the
ui-empty-states
branch
from
7eaed6c
to
1036b29
Compare
| ) | ||
| (concat | ||
| "No folders matching "" this.filter """ | ||
| ) |
There was a problem hiding this comment.
👌 I thought this would look much more confusing
There was a problem hiding this comment.
Heh yeah, still not great with concat and quoting various things, but not too bad!
| @@ -57,7 +57,7 @@ | |||
| <button type="button" {{action "toggleDisabled" item}} class="link"> | |||
| Enable | |||
| </button> | |||
| {{else}} | |||
| {{else if (eq identityType 'entity')}} | |||
There was a problem hiding this comment.
Nice catch! Totally missed that
| @@ -12,7 +12,7 @@ | |||
| {{/link-to}} | |||
| </p.levelRight> | |||
| </PageHeader> | |||
| <ListView @items={{model}} @itemNoun="namespace" as |list|> | |||
| <ListView @items={{model}} @itemNoun="namespace" @emptyActions="empty-action-namespaces" as |list|> | |||
Adds new styles for empty states to provide helpful information (where possible)
Switches remaining "Create" actions to use "Add" for consistencyEntities
Old:
New:
Namespaces
Uses the generic
<ListView>component, which makes it trickier to add actions but still has helpful text (unless anyone has an idea for that)Old:
New: