feat: add `pressed` prop to Button

[jaulz]

This PR adds a pressed prop that forces a button into pressed state.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/BSZBYLEk4i6QTwKQnLLS5JGQzG2w
✅ Preview: https://naive-ui-git-fork-jaulz-feat-button-pressed-prop-tusimple.vercel.app

[codecov[bot]]

Codecov Report

Merging #2275 (324d2d9) into main (a684528) will decrease coverage by 0.00%. The diff coverage is 33.33%.

@@            Coverage Diff             @@
##             main    #2275      +/-   ##
==========================================
- Coverage   64.55%   64.54%   -0.01%     
==========================================
  Files         912      912              
  Lines       18371    18379       +8     
  Branches     4457     4462       +5     
==========================================
+ Hits        11859    11863       +4     
- Misses       5652     5657       +5     
+ Partials      860      859       -1     

Impacted Files	Coverage Δ
src/button/src/Button.tsx	63.13% <33.33%> (-0.56%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a684528...324d2d9. Read the comment docs.

[XieZongChen]

What is the application scenario of this feature? 🤔

[jaulz]

@amadeus711 it's kind of a ToggleButton which indicates if the action that the button triggers was already triggered before. In my case, I have a button to like a blog post and I would like to indicate that the user has liked the blog post before. Of course it would be feasible to pass themeOverrides but that would things more complicated because it would need to have overrides for each button type.

[07akioni]

@amadeus711 it's kind of a ToggleButton which indicates if the action that the button triggers was already triggered before. In my case, I have a button to like a blog post and I would like to indicate that the user has liked the blog post before. Of course it would be feasible to pass themeOverrides but that would things more complicated because it would need to have overrides for each button type.

I think this is more like focus.

[jaulz]

Yeah, the naming is debatable but I chose pressed because it reuses the pressed style. Focused is in my opinion something different and rather means that the focus of the browser is on that button.

[07akioni]

Yeah, the naming is debatable but I chose pressed because it reuses the pressed style. Focused is in my opinion something different and rather means that the focus of the browser is on that button.

But in generally case the button you pressed before is indicated by focus state. I think providing a different disobeys common situation.

[jaulz]

@07akioni okay, shall I rename the property to focused then?

[07akioni]

@07akioni okay, shall I rename the property to focused then?

So why don't just call focus method? You want to keep the state if other thing is focused?

[jaulz]

Yep, just imagine the Like button which can be toggled/active/focused/pressed because you already liked the item or it looks normal.

[07akioni]

Yep, just imagine the Like button which can be toggled/active/focused/pressed because you already liked the item or it looks normal.

I don't think focus status match the scene. In most case active & inactive is achieved by primary button & secondary button.

Active

Inactive

[jaulz]

That unfortunately solves it only for that one specific combination of button types but doesn't work for tertiary buttons. So it would be great if there would be a more generic solution 😊

[07akioni]

That unfortunately solves it only for that one specific combination of button types but doesn't work for tertiary buttons. So it would be great if there would be a more generic solution 😊

In my view, button's state should represent thier actual status. If a button is not focused but shown as pressed that would not be good.

For twitter they use a black button for following & another state for disfollow button.

[jaulz]

Eventually I came up by wrapping the button in a custom component and just pass the class n-button--pressed to the button if the prop is set.

I think in terms of existing components of the library it is a single RadioButton where checked equals to the suggested pressed. So maybe it makes sense to enhance the Button component, add a checked prop there and then reuse this in RadioButton? That way we could also have RadioButton groups with secondary, tertiary, etc. styles.

[07akioni]

Eventually I came up by wrapping the button in a custom component and just pass the class n-button--pressed to the button if the prop is set.

I think in terms of existing components of the library it is a single RadioButton where checked equals to the suggested pressed. So maybe it makes sense to enhance the Button component, add a checked prop there and then reuse this in RadioButton? That way we could also have RadioButton groups with secondary, tertiary, etc. styles.

Radio button has more states than button so it's not reasonable to combine it with button. In fact I'm not satisfied with the current implementation of radio button.

The checked state is actually more relevant to tag or chip.

I'll consider exposing the state, since it is useful when combined with popover.