[docs] Improve Base component demos

[danilo-leal]

Mostly focused on the Select with a few light touches on the Input and Switch.
Closes #30806.

Deploy previews:

• https://deploy-preview-30884--material-ui.netlify.app/components/switches/#unstyled
• https://deploy-preview-30884--material-ui.netlify.app/components/selects/#unstyled
• https://deploy-preview-30884--material-ui.netlify.app/components/text-fields/#unstyled

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 132a538

[michaldudak]

Looks good! Thanks!

[mnajdova]

Can we improve the focus on the listbox? It looks cut of

[michaldudak]

I see I need to add focus-visible support for the listbox. Will do it in a separate PR.

[danilo-leal]

Can we improve the focus on the listbox? It looks cut of

I had &.${selectUnstyledClasses.focusVisible} going for the list box but as @michaldudak said, I guess it didn't support it. In the meanwhile, swapped to a plain &:focus so it works someway. Whenever we get to implement, we can switch back to that class.

[siriwatknp]

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

1. pull latest master from upstream to your branch
2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
   2.1 revert the change on those markdown files you did
   2.2 pull latest master from upstream (you should not see conflict)
   2.3 make the changes again at docs/data/material/*
3. run yarn docs:api
   • you might see the changes in docs/pages/material/api/* if your PR touches some of the components
   • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

[oliviertassinari]

@michaldudak Not sure where to leave this feedback. Unstyled select regressed on #8191.

@danilo-leal I don't think that we will ever need the outline here:

the active item already show where the keyboard focus is. I'm confused when I interact with this demo.

[michaldudak]

@michaldudak Not sure where to leave this feedback. Unstyled select regressed on #8191.

Yes, I'm aware of that. I haven't implemented this bit yet and I stated it in the description of #30113.

[danilo-leal]

FYI: By removing the &:focus from the list box, as suggested by @oliviertassinari, the focus remains as @mnajdova had reported. I guess we'll resolve this in a better way once focus-visible is supported.

[oliviertassinari]

outline: 0 will solve this problem.

[michaldudak]

It looks much better than before, thanks!