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

[system] decomposeColor() has null value when string has whitespace #44504

Open
rdougan opened this issue Nov 21, 2024 · 3 comments · May be fixed by #44538
Open

[system] decomposeColor() has null value when string has whitespace #44504

rdougan opened this issue Nov 21, 2024 · 3 comments · May be fixed by #44538
Labels
dx Related to developers' experience package: system Specific to @mui/system status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it

Comments

@rdougan
Copy link

rdougan commented Nov 21, 2024 •
edited by oliviertassinari
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/blissful-fog-kc3xy8
decomposeColor('#aa0099 ');
// {"type":"rgba","values":[170,0,153,null]}

darken('#aa0099 ', 0.5);
// rgba(85, 0, 76, NaN)

Current behavior

Alpha value returned by decomposeColor is null when the color string passed has whitespace before/after value. Due to this, darken (and probably other functions) return NaN when calculating proper values.

Expected behavior

Trim whitespace, or give a warning in the console.

Context

No response

Your environment

npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: decomposeColor darken NaN
@rdougan rdougan added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 21, 2024
@siriwatknp
Copy link
Member

'#aa0099 ' is considered invalid color. You should trim the string first:

decomposeColor('#aa0099 '.trim())

@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

@rdougan 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.

@github-actions github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 22, 2024
@siriwatknp siriwatknp added package: system Specific to @mui/system status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it labels Nov 22, 2024
@oliviertassinari oliviertassinari changed the title decomposeColor has null value when string has whitespace [system] decomposeColor has null value when string has whitespace Nov 24, 2024
@oliviertassinari
Copy link
Member

I was curious to test how #43289 behaves on this. It's wrong too https://codesandbox.io/p/sandbox/divine-forest-k9wrgw?file=%2Fsrc%2FDemo.tsx%3A4%2C1, in its own way 😄.

It looks like we can improve the DX here by having a new error in dev mode only that warns when the input is not correct.

@oliviertassinari oliviertassinari added the dx Related to developers' experience label Nov 24, 2024
@siriwatknp siriwatknp linked a pull request Nov 25, 2024 that will close this issue
Open
1 task
@oliviertassinari oliviertassinari changed the title [system] decomposeColor has null value when string has whitespace [system] decomposeColor() has null value when string has whitespace Nov 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
dx Related to developers' experience package: system Specific to @mui/system status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[system] Warns if the hex color contains trailing space siriwatknp/material-ui
3 participants
@rdougan @oliviertassinari @siriwatknp