[DO-NOT-MERGE][Button] Add pressed state

[solonaarmstrong-zz]

WHY are these changes introduced?

Resolves #877

Sometimes buttons are used like a radio button, usually in a group but potentially on their own (as a toggle).

WHAT is this pull request doing?

Adds a pressed prop with associated styling.

There's not much to test, since this is only adding a CSS class.

I added a second commit with pressed states for other buttons. I'm not sure these are needed, so it's easily reversible.

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, Button, Stack} from '../src';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Sales by product">
        <Stack vertical>
          <Stack>
            <Button pressed>Pressed</Button>
            <Button>Button</Button>
          </Stack>
          <Stack>
            <Button primary pressed>
              Primary pressed
            </Button>
            <Button primary>Primary</Button>
          </Stack>
          <Stack>
            <Button outline pressed>
              Outline pressed
            </Button>
            <Button outline>Outline</Button>
          </Stack>
        </Stack>
      </Page>
    );
  }
}

🎩 checklist

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

[dpersing]

@solonaarmstrong @dleroux Could this be tied to the existing ariaPressed prop? My concern with having a style-only prop is that it doesn't have that programmatic state, and consumers would need to add both.

[solonaarmstrong-zz]

@dpersing That would be my instinct, too, but from previous experience, it seems we don't allow one prop to have side-effects on another prop and leave it up to the consumer to implement the ariaPressed.

I was thinking this would be something we could include in the accessibility best practices.

It's in the example: https://github.com/Shopify/polaris-react/pull/984/files#diff-7e827730d5a6c8f3eb1be7bfb346d278R263

[dpersing]

I was thinking this would be something we could include in the accessibility best practices.

Sounds good! I can add that.

[ry5n]

Can we make ariaPressed and pressed do the same things, and deprecate ariaPressed? I don’t like having to apply both props either, it seems like a footgun to me. I’m pretty sure we have APIs in other places that change underlying HTML for accessibility reasons, but open to be wrong on this.

[dleroux]

I agree, pressed should be sufficient. I should have looked at rails before implementing the ariaPressed. Great opportunity to put in practice our deprecation guidelines :)

[solonaarmstrong-zz]

Deprecation it is. 🎉

[solonaarmstrong-zz]

@ry5n Between you and Ben, I feel as though I'm levelling up on my vernacular.

[ry5n]

Cool. I’ll work out some styles for this (probably will closely match what exists in Rails) and post back here today or tomorrow (Feb 12 or 13)

[ry5n]

Sorry these styles took so long. It ended up being best to design them in code, so I could get a feel for the transitions and so on. I pushed up a branch with what I came up with:

Design styles for toggle button (#1060)

Preview

[solonaarmstrong-zz]

I cherry-picked your commit, @ry5n. Seemed the most straightforward.

[ry5n]

I haven’t checked if these look good in Windows

[yourpalsonja]

Hey everyone, change of plans! I've talked to @ry5n @solonaarmstrong and @danrosenthal, and we're going to take the changes that have been made here, and use them to build a new ToggleButton component in polaris-next for the "Saved" button feature in BetterListFilters.

Some reasoning:

• Not every type of Button needs to support a pressed state
• The difference between pressed and :active can be somewhat confusing
• We need this change quickly, and creating a "test" component in polaris-next will let us try it out with low overhead.

Once I've created the ToggleButton, I'll link to the commit here!

In the meantime, here is a commit to a WIP polaris/react branch that contains a sample version of the ToggleButton: 5c3ca4c

Leaving this PR open with a DO NOT MERGE for now, we can close it if we decide to keep ToggleButton.

[ry5n]

@yourpalsonja @solonaarmstrong I happened to take a look at the new guidelines for deprecation; would be worth looking over if we go ahead with this PR: https://github.com/Shopify/polaris-react/blob/master/documentation/Deprecation%20guidelines.md

[solonaarmstrong-zz]

@ry5n Was there something in the deprecation guideline that I missed?

• Ship backwards compatible changes which include supporting both the old and new API (make sure the full upgrade path is available) n/a
• Support backwards compatibility for at least half of a major release cycle, but never more that 2 major release cycles n/a
  For example, before or part of 3.5, okay to remove in 4.0. After 3.5, remove in 5.0
  Large changes consider a full major release cycle. For example, a large change in 3.1 would be removed in 5.0. But a large change in 2.9 would never wait until 5.0 to remove n/a
• Use the @deprecated doc tag for props and components (for example, add above where the component is defined), state the reason, and upgrade path
  Add a console warning for any respective @deprecated doc tag, state the reason, and state the upgrade path https://github.com/Shopify/polaris-react/pull/984/files#diff-80ce11d837170156710fe9e24d078a78R61
• Add the console warning in the constructor for classes and in the render method for functional components Guidelines for writing good console messages https://github.com/Shopify/polaris-react/pull/984/files#diff-80ce11d837170156710fe9e24d078a78R183
• For significant deprecations, add a section to the component documentation with rationale. State the upgrade path and include a link to a new component if applicable n/a
• Call out deprecations in our changelog https://github.com/Shopify/polaris-react/pull/984/files#diff-1f9a24a2e063326eff13af43500f8b74R25

[ry5n]

The guidelines are new to me, and we would have a deprecation if we went forward with this PR, so I just thought I’d drop a reminder.

[yourpalsonja]

@ry5n @solonaarmstrong Speaking of deprecation, I didn't include the backwards-compatible prop ariaPressed on ToggleButton. Even though it resembles Button, and accepts most of the same props, it's a different component, and we're deprecating ariaPressed anyhow. Let me know if you have a different opinion!

[solonaarmstrong-zz]

It's a different component altogether, so that makes sense to me.

[yourpalsonja]

@ry5n @dpersing @danrosenthal @dleroux How does everyone feel about closing this for now, since ToggleButton has been merged in https://github.com/Shopify/web/pull/11029? We can always re-open if needed, but closing and adding something about deprecating aria-pressed for Button to the backlog seems like a better move.

[yourpalsonja]

See notes above.

[BPScott]

Heya folks. I need this for some work in polaris-icons. What will be the best way to bring it back to life?

[dleroux]

This PR specifically, or the ToggleButton in polaris-next?

[beefchimi]

I also need this ToggleButton and will be copying it from web into our project for now.

Any ETA and it joining the Polaris family?

[yourpalsonja]

@beefchimi We're planning on putting it in, but are waiting on feedback from a few folks that have grabbed it from web like you, so we make sure we build something that's useful and reusable. Let us know how you implemented it and it if needed any changes!