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.

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

TableRow: Hover Background - Value Provided is Out of Range #29084

Open
2 tasks done
MutableLoss opened this issue Oct 15, 2021 · 1 comment · May be fixed by #45069
Open
2 tasks done

TableRow: Hover Background - Value Provided is Out of Range #29084

MutableLoss opened this issue Oct 15, 2021 · 1 comment · May be fixed by #45069
Labels
component: table This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process new feature New feature or request

Comments

@MutableLoss
Copy link

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using less transparent selected/hover opacities within a custom theme, the TableRow component causes an out of range error when it attempts to create the hover background-color alpha:

MUI: The value provided 1.4 is out of range [0, 1]. 
    in MuiTableRowRoot (created by TableRow)

Here's the line throwing the error:
https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/TableRow/TableRow.js#L43

Expected Behavior 🤔

First instinct is to simply not get an error, similar to the other components that create alphas based on the theme's opacities.

If the case is that opacities need to be 0.5 or below, I would expect a range warning. I've been using these thick action opacities as long as I have been using custom themes.

Steps to Reproduce 🕹

Steps:

  1. Set the selectedOpacity and hoverOpacity to values over 0.5
  2. Create a table and sprinkle in some TableRow components
  3. Check the console for out of range errors

Here'e my CodeSandbox reproducing this exact error:
https://codesandbox.io/s/blue-glade-329so?file=/src/theme.js

Your Environment 🌎

Same as the Codesandbox.
@mui/material 5.0.2

@MutableLoss MutableLoss added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 15, 2021
@mnajdova mnajdova added component: table This is the name of the generic UI component, not the React module! new feature New feature or request design: material This is about Material Design, please involve a visual or UX designer in the process and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 26, 2021
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Jan 24, 2025

@MutableLoss Your CodeSandbox is set to private. You need to make it public for us to view it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: table This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process new feature New feature or request
Projects
None yet
3 participants