Skip to content
This repository has been archived by the owner. It is now read-only.

Wrong Button interaction states #172

Closed
yordanov opened this issue Jan 27, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@yordanov
Copy link
Contributor

commented Jan 27, 2017

All states must comply with the following guidelines:
https://github.com/telerik/kendo-ux/blob/master/components/buttons.psd

  • :disabled, .k-state-disabled
  • :normal, .k-state-default
  • :hover, .k-state-hover
  • :focus, .k-state-focused
  • :hover:focus, .k-state-...
  • :active, .k-state-active
@theOrlin

This comment has been minimized.

Copy link
Contributor

commented Feb 9, 2017

Those should be fixed now.
@yordanov

@yordanov

This comment has been minimized.

Copy link
Contributor Author

commented Feb 9, 2017

:active state is still wrong. It shoud have inner box-shadow only. The problem is that while in :active a :focus state is applied too, overriding the inner box-shadow of the :active state. We must apply the :active styles to the :active:focus state as well.

theOrlin added a commit that referenced this issue Feb 16, 2017

joneff added a commit that referenced this issue Feb 16, 2017

@theOrlin

This comment has been minimized.

Copy link
Contributor

commented Feb 16, 2017

Hopefully that does it.

@yordanov

@yordanov

This comment has been minimized.

Copy link
Contributor Author

commented Feb 16, 2017

  • :focus state of button in a buttongroup must get inner shadow

Other states feel fine now.

@theOrlin @joneff @gyoshev @inikolova @lkarakoleva - What do you think about adding state transitions? Something like transition: all .3s ease-in? Are there any concerns regarding performance or behavior issues?

@theOrlin

This comment has been minimized.

Copy link
Contributor

commented Feb 16, 2017

When a transition is added with the current button styles, on click there is a slight delay between the mouse button release and the appearance of the focus state's shadow. This makes the buttons feel a bit sluggish, slow to respond.

@joneff

This comment has been minimized.

Copy link
Member

commented Feb 19, 2017

Related to #174

@joneff

This comment has been minimized.

Copy link
Member

commented Feb 19, 2017

@yordanov let's simplify states. And here is why:

When using a pointing device and an element is pressed, it's :hover :focus and :active at the same time. Actually, most of the time when an element is focused trough mouse interaction, it means is hovered. Or put simply, we don't really need a :hover:focus state, unless it differs from applying the box shadow of the focus onto the hover.

Then comes :active -- an element is active as long as the mouse is pressed onto it. And it does not apply to all components.

For instance, when is a combobox "active"? To me it's when it's expanded. What about a numerictextbox? Well it's actually never active. I mean it's focused, but the component itself is never active, rather the spin buttons get activated when clicked or the up / down arrows are pressed.

So "active" doesn't really mean anything.

Let's go with meaningful states.

And while we are on this page, let's pick a homogeneous naming -- we either have "focus" and "hover" or "focused" and "hovered". Having "selected" and "disabled" states, I'd go with the passive voice.

@joneff joneff referenced this issue Feb 19, 2017

Closed

Wrong Inputs interaction states #140

5 of 5 tasks complete
@yordanov

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2017

@joneff which state you suggest we remove? A screenshot might help. All the rest is a matter of state importance and priority in the very context of a component and its actual usage. In some cases an e.g. :hover is more important than :focus in others it is not. We need to revise this together - component by component.

Don't get me wrong. I am all in for simplification. We can even go further and say :hover == :focus and get rid of all the box-shadows here and there.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.