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.

Sign up for GitHub

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

Jump to bottom

[Autocomplete] Update unstyled demo to not import Material UI #34060

Merged
merged 1 commit into from Aug 27, 2022
Merged

[Autocomplete] Update unstyled demo to not import Material UI #34060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 5 additions & 6 deletions docs/data/material/components/autocomplete/UseAutocomplete.js
View file
Open in desktop
@@ -1,16 +1,15 @@
import * as React from 'react';
import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
import { styled } from '@mui/material/styles';
import { autocompleteClasses } from '@mui/material/Autocomplete';
import { styled } from '@mui/system';

const Label = styled('label')({
display: 'block',
});

const Input = styled('input')(({ theme }) => ({
width: 200,
backgroundColor: theme.palette.background.paper,
color: theme.palette.getContrastText(theme.palette.background.paper),
backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
color: theme.palette.mode === 'light' ? '#000' : '#fff',
}));

const Listbox = styled('ul')(({ theme }) => ({
Expand All @@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
zIndex: 1,
position: 'absolute',
listStyle: 'none',
backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
overflow: 'auto',
maxHeight: 200,
border: '1px solid rgba(0,0,0,.25)',
[`& li.${autocompleteClasses.focused}`]: {
'& li.Mui-focused': {
backgroundColor: '#4a8df6',
color: 'white',
cursor: 'pointer',
Expand Down
11 changes: 5 additions & 6 deletions docs/data/material/components/autocomplete/UseAutocomplete.tsx
View file
Open in desktop
@@ -1,16 +1,15 @@
import * as React from 'react';
import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
import { styled } from '@mui/material/styles';
import { autocompleteClasses } from '@mui/material/Autocomplete';
import { styled } from '@mui/system';

const Label = styled('label')({
display: 'block',
});

const Input = styled('input')(({ theme }) => ({
width: 200,
backgroundColor: theme.palette.background.paper,
color: theme.palette.getContrastText(theme.palette.background.paper),
backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
color: theme.palette.mode === 'light' ? '#000' : '#fff',
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
}));

const Listbox = styled('ul')(({ theme }) => ({
Expand All @@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
zIndex: 1,
position: 'absolute',
listStyle: 'none',
backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
overflow: 'auto',
maxHeight: 200,
border: '1px solid rgba(0,0,0,.25)',
[`& li.${autocompleteClasses.focused}`]: {
'& li.Mui-focused': {
Copy link
Member Author

Choose a reason for hiding this comment

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

It's hardcoded anyway:

material-ui/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js

Line 353 in 64e5dc1

option.classList.add('Mui-focused');

Copy link
Member

Choose a reason for hiding this comment

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

useAutocomplete needs an overhaul to match the other hooks in Base. It uses different patterns now (like setting a class name, that doesn't happen anywhere else in other hooks).

Copy link
Member Author

Choose a reason for hiding this comment

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

(like setting a class name, that doesn't happen anywhere else in other hooks).

@michaldudak What would be the alternative in this case? For context: #26181

needs an overhaul to match the other hooks in Base.

I think that it would be great for you to review mui/mui-x#5504. I wanted to raise how the unstyled hook API of the date picker feels a bit different from our useAutocomplete (the useAutocomplete API is a lot inspired by https://www.downshift-js.com/use-combobox).

It uses different patterns now

I think that this would be a great opportunity to review the differences, so we can only keep the best changes.

Copy link
Member Author

Choose a reason for hiding this comment

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

@michaldudak Bump. I'm curious about two things:

  1. How is the pattern hook different now, e.g. developers seem to enjoy the current approach: https://twitter.com/shyam_lohar_/status/1571000213388791808 (which also makes the case for a headless first approach, anytime we create a new component, in Joy UI, Material UI, MUI X, we should likely start from the headless DX).
  2. How to align with MUI X on it, e.g. with @flaviendelangle [AutoComplete] dataSourceConfig not working #5504

backgroundColor: '#4a8df6',
color: 'white',
cursor: 'pointer',
Expand Down