bombshell-dev / clack

Effortlessly build beautiful command-line apps
https://clack.cc
5.53k stars 90 forks source link

feat: add select-key option #59

Closed natemoo-re closed 1 year ago

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: d74dd05cfc180fd8a0887b1f62ba20f0b2588fc2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages | Name | Type | | -------------- | ----- | | @clack/prompts | Minor | | @clack/core | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

songkeys commented 1 year ago

I just checked. LGTM!

image

One unimportant thing: do you think the gray letter boxes that are vertically attached may confuse users? Would it better and capable to split them with 1px gaps so that they are horizontally linked with the same-line text in visual.

ulken commented 1 year ago

I see your point, but AFAIK 1 px gaps are hard to achieve in a terminal. You have spaces and newlines to work with.

ulken commented 1 year ago

Would enclosing the hotkeys in brackets (may be some better Unicode ones) make them resemble a key more?

songkeys commented 1 year ago

Would enclosing the hotkeys in brackets (may be some better Unicode ones) more clearly resemble a key?

Yes i do think so. It'd be like:

- [y] yes
- [n] no
- [r] regenerate

But the gray boxed one are cute. I'm not sure. It


And I think I forgot one feature here: the default selection which should be displayed in one uppercased letter. e.g.

- [Y] yes
- [n] no
- [r] regenerate

when hitting enter, it selects yes by default.

ulken commented 1 year ago

But the gray boxed one are cute. I'm not sure.

I agree, but I was thinking both.

And I think I forgot one feature here: the default selection which should be displayed in one uppercased letter. e.g.

- [Y] yes

- [n] no

- [r] regenerate

when hitting enter, it selects yes by default.

I think I'd prefer a higher contrast color instead.

songkeys commented 1 year ago

bracked letter in a gray box + default one in a higher contrasted color box.

great idea!

MendyLanda commented 1 year ago

Hi, thanks for this PR.

I think I'd prefer a higher contrast color instead.

Here's what it could look like:

219868710-3a318f78-f92c-408f-a36a-f20542b93761

To my eyes, adding a default 'selected' highlight also makes it easier to differentiate from the other rows (regardless of the fact that in the example it's in the middle)

ulken commented 1 year ago

Just to put more options on the table, here are renderings of brackets in play:

Outer padding

Screenshot 2023-02-19 at 22 58 57

Inner padding

Screenshot 2023-02-19 at 22 57 30

No padding

Screenshot 2023-02-19 at 22 56 52

Thoughts?

ulken commented 1 year ago

Yet another option:

Screenshot 2023-02-19 at 23 13 34

I'm leaning towards this one. IMO, the brackets made it too clumsy, but I think the subtle hint adds value without ruining the aesthetics.

songkeys commented 1 year ago

I don't have any preference with the three options above as long as there are brackets inside the box. @ulken 's proposal doesn't solve the problem that the letter in the box doesn't look like a "shortcut key" to me at the first glance. But it might be just me cuz I used to see them in brackets.

How about a poll on twitter if you couldn't decide?

ulken commented 1 year ago

More subtle active style (with brackets back in place):

image
ulken commented 1 year ago

@natemoo-re all right, I think we're good to go here, no?

@Songkeys sorry, @natemoo-re seemed to prefer it without brackets (as do I).