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

fix: add support for changing the surface mode in the menu #4378

Merged
merged 2 commits into from
Jul 27, 2024

Conversation

lenzi-e
Copy link
Contributor

@lenzi-e lenzi-e commented Apr 20, 2024

Motivation

I prefer the "flat" design approach on my components, and would like to be able to use the Menu component in flat mode.

Related issue

You cannot currently change the mode on the Surface that is used in the Menu component.

Test plan

Pull up the menu example and pass mode="flat" to one of the menus to test.

@callstack-bot
Copy link

callstack-bot commented Apr 21, 2024

Hey @lenzi-erickson, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@seb-zabielski
Copy link
Contributor

Hey,
Modal component has an “elevation” property. If you set elevation={0} it should look like a flat component. Does your change have a better/different effect than the elevation prop?
https://callstack.github.io/react-native-paper/docs/components/Menu/#elevation

@lenzi-e
Copy link
Contributor Author

lenzi-e commented Jun 19, 2024

Hey, Modal component has an “elevation” property. If you set elevation={0} it should look like a flat component. Does your change have a better/different effect than the elevation prop? https://callstack.github.io/react-native-paper/docs/components/Menu/#elevation

elevation={0} does not do what I was wanting. In my opinion, it makes the menu look broken. If you run the example in this branch, you can see the differences.

Default
Screenshot 2024-06-19 at 2 23 44 PM

elevation={0}
Screenshot 2024-06-19 at 2 25 46 PM

mode="flat"
Screenshot 2024-06-19 at 2 27 07 PM

@gedu gedu added this to the 5.12.4 milestone Jun 20, 2024
@seb-zabielski
Copy link
Contributor

Now I see your point. Change looks good to me. Can you add a test to this case?

@lenzi-e
Copy link
Contributor Author

lenzi-e commented Jun 20, 2024

Now I see your point. Change looks good to me. Can you add a test to this case?

What are you wanting me to test, exactly? Since I'm just passing a prop through, and did not add any logic, I'm not sure what you are wanting me to test.

@lenzi-e
Copy link
Contributor Author

lenzi-e commented Jun 20, 2024

I attempted to add some tests. If it's not what you are hoping for, I need some help getting it here, please.

@seb-zabielski
Copy link
Contributor

This is exactly what I was expecting. Thanks!

@lenzi-e
Copy link
Contributor Author

lenzi-e commented Jul 8, 2024

@seb-zabielski What else do I need to do to get this merged? And any ETA on the next release? I would love to get this in. Thanks!

@lukewalczak lukewalczak merged commit eebc77f into callstack:main Jul 27, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants