Skip to content

[Select] Open popup below button#26200

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

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

Conversation

@oliviertassinari

@oliviertassinari oliviertassinari commented May 8, 2021

Copy link
Copy Markdown
Member

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

mui-pr-bot commented May 8, 2021

Copy link
Copy Markdown

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 30ffba2

@oliviertassinari

oliviertassinari commented May 11, 2021

Copy link
Copy Markdown
Member Author

@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
Copy Markdown
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
Copy Markdown
Member Author

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

Comment thread packages/material-ui/src/Autocomplete/Autocomplete.js Outdated

@siriwatknp siriwatknp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Nice!

@mnajdova mnajdova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Much much better 👌

@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
Copy Markdown
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
Copy Markdown
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