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