Skip to content

[Select] Open popup below button#26200

Merged
siriwatknp merged 3 commits intomui:nextfrom
oliviertassinari:select-deploy-below
May 31, 2021
Merged

[Select] Open popup below button#26200
siriwatknp merged 3 commits intomui:nextfrom
oliviertassinari:select-deploy-below

Conversation

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented May 8, 2021

Closes #18493
Address point 1. of #18136

Screenshot 2021-05-09 at 00 31 55

@oliviertassinari oliviertassinari added design: material This is about Material Design, please involve a visual or UX designer in the process scope: select Changes related to the select. labels May 8, 2021
@mui-pr-bot
Copy link

mui-pr-bot commented May 8, 2021

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 30ffba2

@oliviertassinari
Copy link
Member Author

oliviertassinari commented May 11, 2021

@mnajdova I'm facing a dilemma on this one. In order for the UI to look good, we need to add a gap between the textbox and the listbox, as done in https://next--material-ui.netlify.app/components/menus/#customized-menu, but what's the best way to do it? The options:

  1. Bump the specificity as in the above example
  2. Export MenuPaper, restyle it, and use the PaperProps.component prop.
  3. Add a components prop, and use 2.

@siriwatknp
Copy link
Member

@oliviertassinari Let's not add the gap due to material design spec and may be just add demo how to add the gap should be enough in my opinion. https://material.io/components/menus#exposed-dropdown-menu

@oliviertassinari
Copy link
Member Author

@siriwatknp Ok, fair enough; I'm removing the margin from the Autocomplete per #18136.

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much much better 👌

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
@siriwatknp siriwatknp merged commit d914701 into mui:next May 31, 2021
@oliviertassinari oliviertassinari deleted the select-deploy-below branch May 31, 2021 11:18
@oliviertassinari
Copy link
Member Author

Note that the border radius is wrong for the filled input variant https://material.io/components/menus#exposed-dropdown-menu

Capture d’écran 2021-05-31 à 13 19 07

onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why "center"? It makes our <Select /> looks like this:

image

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

Labels

design: material This is about Material Design, please involve a visual or UX designer in the process scope: select Changes related to the select.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Select] Follow material design guidelines

5 participants