remove-tag-button-transition

[johanstromqvist]

WHY are these changes introduced?

Tag button hover state should be immediate.

WHAT is this pull request doing?

Removes excessive hover state transition on tag button.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test here */}
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[danrosenthal]

Hey @johanstromqvist, would you mind providing a bit of rationale for this change, and pinging a couple reviewers?

cc: @ry5n

[ry5n]

I’d want to understand the rationale as well.

[danrosenthal]

@johanstromqvist one more bump for context on this change

[johanstromqvist]

Sorry about the delay guys – just got back from vacation today. Expect rationale within the next unknown amount of days, or let me know if it's urgent and blocking you. I'll also provide more rationale in future PRs.

Edit: 🤷‍♂️

[johanstromqvist]

Sorry about the delay.

The short story is that the touch target is behaving inconsistently and instead of fixing it I simply removed the behaviour. I asked around in the Polaris team but we couldn't find any rationale for the transition, and I couldn't see any myself. We could see tho that the component hadn't been updated in a long time.

Why do I think transition is excessive
The transition doesn't solve any problems or improve UX in my opinion, and I can see how adding transitions to hover states can add a sluggish delay which distances users from direct control.

Why do I suggest hover to be immediate
As a rule of thumb, I'd suggest that hover feedback should default to immediate, unless the hover triggers state change that would benefit from clarification. Before suggesting that as a general guideline, I'd like to try out on a couple of scenarios and run it by you guys. It's my current opinion tho.

The inconsistency
The current tag button has a 100-200ms transition on the background of the touch target and 0ms transition on the x icon in the centre, causing it to feel wonky and uncrafted.

[tmlayton]

Suggested change

	- Removed transition on tag button hover state [#1337](https://github.com/Shopify/polaris-react/pull/1337)
	- Removed transition on tag button hover state ([#1337](https://github.com/Shopify/polaris-react/pull/1337))

[tmlayton]

I support this change, the transition seems unnecessary.

[danrosenthal]

Thanks for the context @johanstromqvist!

[ghost]

🎉 Thanks for your contribution to Polaris React!