[Paper] shadows are always on top of siblings
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
https://codesandbox.io/s/relaxed-wu-8l5md?file=/src/index.js
Expected behavior 🤔
https://jsfiddle.net/nhxg29v6/69/
Steps to reproduce 🕹
I've provided sandboxes showing the issue. Made the red shadow to make it more obvious. The JSFiddle doesn't contain any Material UI react code but shows the problem with box-shadow and how it could be solved at least.
Context 🔦
Right now you have shadows on top of siblings. It would be good if it was possible to apply the shadow below the element. Like the JSFiddle I provided. I think both "effects" are valid depending on context. Sometimes you might want it on top and some times you don't want that behaviour.
Maybe this is possible by current implementation but I didn't find anything about it. Adding a property like siblingShadowDisabled would be nice..
Your environment 🌎
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and the Paper component entry point, then compare its sibling-shadow behavior with the linked JSFiddle. Done means a supported way exists to place the shadow below siblings when requested, while preserving the current behavior where appropriate.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100