Adding a "pressed" prop for buttons

Polaris
1

Hello,

I’m trying to port my rich text field editor to the new Polaris components. The new tooltip and popover (I’ve found them while reading the minified code) are awesome, great work on that, I love how you guys embraced the new standards (including the interestFor) for that.

I found a missing feature though with the button component. I’d like to convey a “pressed” state where the button is active:

image
image634×216 2.61 KB

For instance here I’d like to give the bold button a pressed state similar to what Shopify is doing:

image
image582×132 20.6 KB

Is there any way to add that?

Thanks!

2

@Anthony_Frehner do you think this could be added? :slight_smile: For now the only workaround I’ve found is to use the secondary variant as an “active” state, but it’s not wonderful, visually speaking:

image
image1262×186 24.2 KB

3

Hey @bakura10, this can be achieved with the s-clickable if you change the background from base to strong.

There is a nice example in polarisblocks

polaris-blocks
polaris-blocks506×300 10.3 KB

I really like the editor you are building, are you using anything like Lexical behind the scene? Does it support markdown?

Anyway, a pressed state would be much easier to handle this kind of stuff.

I used this approach for tabs, however, I had to set a custom font-size at 0.8rem as the s-paragraph and s-text is bigger than the font-size is a s-button.

Here is the result.

s-clickable
s-clickable303×110 1.83 KB

Thank you!

4

Thanks! I thought of this but I would prefer to use a button (I feel it is better for accessibility as those are really buttons) but I’ll fallback to s-clickable.

For the text editor, it is just for managing rich text field metafields. It is a not a complete RTE editor. You can use it here: GitHub - maestrooo/rich-text-field: A Shopify Polaris components to manage rich text field metafields.

5

Clickable is a decent workaround for now, as we actually render it as a button element in the shadow dom anyway.

I believe we have plans on supporting this type of component in the future.

6

Thanks @bakura10! Nice work on the rich-text-field. Too bad is built directly in React and we can’t use it, but is a nice piece of inspiration.

7

@Anthony_Frehner I’ve tried to use s-clickable, and play with the strong background when active vs subdued when not, and using the info tone of the color. In overall this is not optimal, the idfference in background is too light, and the blue used in the “info” icon seems to not be used anywhere in Shopify admin, creating an odd layout:

image
image1312×418 28.9 KB

I think the color tones should be tweak to have more difference, but I think a dedicated “pressed” prop for the buttons would be really useful, as it would not require having to choose ourself the variation for the “applied button.

1 Like
8

Any update on this?

Seems the “pressed” property is still not available like it was in ButtonGroup from polaris react components. Now react components are deprecated, but s-button-group web component doesn’t have a way to show which button is pressed.

9

s-press-button is available now I believe! storybook - Storybook

10

Unable to access the storybook. It goes to an internal Shopify “Sign in with SAML” chromatic link. Can you please share the code example? We also need button pressed state, very important for button and button group components

11

That should be fixed - there was a Chromatic issue that made all storybooks private for a bit.

1 Like
12

Hey @Anthony_Frehner,

Are the App Bridge UI Types going to be updated with this any new components? I can’t see s-press-button on the docs under “Actions” either