Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CardActionArea] Add an Active Prop #44730

Closed
aress31 opened this issue Dec 11, 2024 · 9 comments · Fixed by #44789
Closed

[CardActionArea] Add an Active Prop #44730

aress31 opened this issue Dec 11, 2024 · 9 comments · Fixed by #44789
Assignees
@siriwatknp
Labels
component: card This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: question Community support but can be turned into an improvement

Comments

@aress31
Copy link

aress31 commented Dec 11, 2024 •
edited by github-actions bot
Loading

Summary

It would be great to introduce an active prop, similar to the Tabs component, for CardActionArea to support clickable Card components. Currently, my workaround looks like this:

      <CardActionArea
        onClick={() => onClick(resource)}
        sx={{
          backgroundColor: selected ? "action.selected" : "transparent",
          "&:hover": {
            backgroundColor: selected ? "action.selectedHover" : "action.hover",
          },
        }}
      >

However, adding an active prop would provide better consistency across components, especially since CardActionArea is often used for interactive cards and may need to visually indicate its active state.

Examples

See above.

Motivation

See above.

Search keywords: cardactionarea, active
@aress31 aress31 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 11, 2024
@zannager zannager added the component: card This is the name of the generic UI component, not the React module! label Dec 11, 2024
@siriwatknp
Copy link
Member

Thanks for the feedback but I think this should be done from the user side because the active styles are varied between projects. It could be just background, or border, or box-shadow.

What we could do is adding a demo to show how to properly style the active state. Based on your code, I'd recommend this instead:

<CardActionArea
    onClick={() => onClick(resource)}
    data-active={selected ? "" : undefined}
    sx={{
      '&[data-active]': {
        backgroundColor: 'action.selected',
        '&:hover': {
          backgroundColor: 'action.selectedHover',
        }
      }
    }}
  >

Do you want to open a PR?

@siriwatknp siriwatknp added docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 12, 2024
@aress31
Copy link
Author

aress31 commented Dec 12, 2024

@siriwatknp adding this use-case to the documentation would indeed help! Can you point me to the relevant file to change?

@mj12albert
Copy link
Member

mj12albert commented Dec 12, 2024 •
edited
Loading

@aress31 See this doc for steps to add a new demo: https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#how-to-add-a-new-demo-to-the-docs

@aress31
Copy link
Author

aress31 commented Dec 12, 2024

Alright it will be quicker and easier if you guys do the PR - so I will sit it out.

@DiegoAndai
Copy link
Member

@aress31 this probably won't be prioritized from our side, so I would encourage you to work on a PR. I would be happy to guide you.

@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Dec 12, 2024
@siddhantantil39
Copy link
Contributor

Hi @DiegoAndai I would wanna work on this, can you please guide me on how to work on this PR?

@siriwatknp
Copy link
Member

siriwatknp commented Dec 16, 2024 •
edited
Loading

Hi @DiegoAndai I would wanna work on this, can you please guide me on how to work on this PR?

Please follow the contributing guide.

You can add the new demo to /docs/data/material/components/cards/cards.md

@siddhantantil39
Copy link
Contributor

Hi @siriwatknp I have raised a PR for the issue: #44789.
Can anyone please review it also. Thanks

@siddhantantil39 siddhantantil39 mentioned this issue Dec 16, 2024
Merged
1 task
@github-actions GitHub Actions
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@aress31 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
component: card This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
6 participants
@mj12albert @aress31 @DiegoAndai @siriwatknp @siddhantantil39 @zannager