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

[Joy] Miscellaneous fixes #33796

Merged
merged 8 commits into from Aug 4, 2022
Merged

[Joy] Miscellaneous fixes #33796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
33e6003
change to logical size + background
siriwatknp Aug 4, 2022
31fb970
rename internal ownerState
siriwatknp Aug 4, 2022
4c6c9f9
context variable
siriwatknp Aug 4, 2022
f863e01
add orientation to ListItemButton
siriwatknp Aug 4, 2022
e25a1f3
fix demos
siriwatknp Aug 4, 2022
adfb044
rename to List-decorator-size
siriwatknp Aug 4, 2022
c8d7621
fix nested link inside typography
siriwatknp Aug 4, 2022
fca3456
run proptypes
siriwatknp Aug 4, 2022
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
3 changes: 1 addition & 2 deletions docs/data/joy/components/link/LinkAndTypography.js
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ import Typography from '@mui/joy/Typography';
import CallMade from '@mui/icons-material/CallMade';
import LinkIcon from '@mui/icons-material/Link';

export default function Links() {
export default function LinkAndTypography() {
return (
<Box sx={{ maxWidth: 360 }}>
<Typography
Expand All @@ -18,7 +18,6 @@ export default function Links() {
aria-labelledby="heading-demo"
href="#heading-demo"
fontSize="md"
ml={0.5}
borderRadius="sm"
>
<LinkIcon />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/DecoratedList.js
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@ export default function DecoratedList() {
</Typography>
<List
aria-labelledby="decorated-list-demo"
sx={{ '--List-decorator-width': '32px' }}
sx={{ '--List-decorator-size': '32px' }}
>
<ListItem>
<ListItemDecorator>🧅</ListItemDecorator> 1 red onion
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/DividedList.js
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@ export default function DividedList() {
sx={{
minWidth: 240,
borderRadius: 'sm',
'--List-decorator-width': '48px',
'--List-decorator-size': '48px',
'--List-item-paddingLeft': '1.5rem',
'--List-item-paddingRight': '1rem',
}}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/EllipsisList.js
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ export default function EllipsisList() {
</Typography>
<List
aria-labelledby="ellipsis-list-demo"
sx={{ '--List-decorator-width': '56px' }}
sx={{ '--List-decorator-size': '56px' }}
>
<ListItem>
<ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/ExampleGmailList.js
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ export default function ExampleGmailList() {
sx={{
// ...applyRadiusOnEdges({ target: 'deepest' | 'nested' }),
'--List-item-paddingLeft': '0px',
'--List-decorator-width': '64px',
'--List-decorator-size': '64px',
'--List-decorator-color': (theme) => theme.vars.palette.text.secondary,
'--List-item-minHeight': '32px',
'--List-nestedInsetStart': '13px',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/ExampleIOSList.js
View file
Open in desktop
Expand Up @@ -59,7 +59,7 @@ export default function ExampleIOSList() {
})}
>
<ListItem nested>
<List aria-label="Personal info" sx={{ '--List-decorator-width': '72px' }}>
<List aria-label="Personal info" sx={{ '--List-decorator-size': '72px' }}>
<ListItem>
<ListItemDecorator>
<Avatar size="lg" sx={{ '--Avatar-size': '60px' }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/ExampleNavigationMenu.js
View file
Open in desktop
Expand Up @@ -147,7 +147,7 @@ const AboutMenu = React.forwardRef(({ focusNext, focusPrevious, ...props }, ref)
'--List-radius': '8px',
'--List-padding': '4px',
'--List-divider-gap': '4px',
'--List-decorator-width': '32px',
'--List-decorator-size': '32px',
}}
>
<ListItem role="none">
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/HorizontalDividedList.js
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ export default function HorizontalDividedList() {
borderRadius: 'sm',
flexGrow: 0,
mx: 'auto',
'--List-decorator-width': '48px',
'--List-decorator-size': '48px',
'--List-item-paddingY': '1rem',
}}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/ListVariables.js
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@ export default function ListVariables() {
{ var: '--List-item-minHeight', defaultValue: '40px' },
{ var: '--List-item-paddingY', defaultValue: '6px' },
{ var: '--List-item-paddingX', defaultValue: '12px' },
{ var: '--List-decorator-width', defaultValue: '40px' },
{ var: '--List-decorator-size', defaultValue: '40px' },
{ var: '--List-divider-gap', defaultValue: '6px' },
]}
renderDemo={(sx) => (
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/list/list.md
View file
Open in desktop
Expand Up @@ -56,7 +56,7 @@ Use the `size` prop to control font-size and general list density.

Use the `ListItemDecorator` component to add supporting icons or elements to the list item.

It comes with a minimum set width that you can adjust via the `--List-decorator-width` CSS variable within the `List` component.
It comes with a minimum set width that you can adjust via the `--List-decorator-size` CSS variable within the `List` component.

{{"demo": "DecoratedList.js"}}

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/menu/GroupMenu.js
View file
Open in desktop
Expand Up @@ -41,7 +41,7 @@ export default function BasicMenu() {
open={open}
onClose={handleClose}
aria-labelledby="group-demo-button"
sx={{ minWidth: 160, '--List-decorator-width': '24px' }}
sx={{ minWidth: 160, '--List-decorator-size': '24px' }}
>
<MenuItem
onClick={() => {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/radio/RadioPositionEnd.js
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ export default function RadioPositionEnd() {
'--List-gap': '0.5rem',
'--List-item-paddingY': '1rem',
'--List-item-radius': '8px',
'--List-decorator-width': '32px',
'--List-decorator-size': '32px',
[`& .${radioClasses.root}`]: {
flexGrow: 1,
flexDirection: 'row-reverse',
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/select/SelectCustomOption.js
View file
Open in desktop
Expand Up @@ -12,12 +12,12 @@ export default function SelectCustomOption() {
componentsProps={{
listbox: {
sx: {
'--List-decorator-width': '44px',
'--List-decorator-size': '44px',
},
},
}}
sx={{
'--List-decorator-width': '44px',
'--List-decorator-size': '44px',
minWidth: 240,
}}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/select/SelectCustomValueAppearance.js
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ export default function SelectCustomValueAppearance() {
componentsProps={{
listbox: {
sx: {
'--List-decorator-width': '48px',
'--List-decorator-size': '48px',
},
},
}}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/select/SelectGroupedOptions.js
View file
Open in desktop
Expand Up @@ -43,7 +43,7 @@ export default function SelectGroupedOptions() {
<List
role="group"
aria-labelledby={`select-group-${name}`}
sx={{ '--List-decorator-width': '28px' }}
sx={{ '--List-decorator-size': '28px' }}
>
<ListItem role="presentation" id={`select-group-${name}`} sticky>
<Typography level="body3" textTransform="uppercase" letterSpacing="md">
Expand Down
33 changes: 22 additions & 11 deletions docs/data/joy/components/tabs/TabsBottomNavExample.js
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
import Search from '@mui/icons-material/Search';
import Person from '@mui/icons-material/Person';

export default function TabsBasic() {
export default function TabsBottomNavExample() {
const [index, setIndex] = React.useState(0);
const colors = ['primary', 'info', 'danger', 'success'];
return (
Expand Down Expand Up @@ -43,34 +43,45 @@ export default function TabsBasic() {
transition: '0.3s',
fontWeight: 'lg',
flex: 1,
flexDirection: 'column',
[`&:not(.${tabClasses.selected}):not(:hover)`]: {
opacity: 0.72,
},
},
})}
>
<TabList variant="plain" sx={{ '--List-decorator-width': '24px' }}>
<Tab {...(index === 0 && { variant: 'soft', color: colors[0] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<TabList variant="plain" sx={{ '--List-decorator-size': '28px' }}>
<Tab
orientation="vertical"
{...(index === 0 && { variant: 'soft', color: colors[0] })}
>
<ListItemDecorator>
<HomeOutlined />
</ListItemDecorator>
Home
</Tab>
<Tab {...(index === 1 && { variant: 'soft', color: colors[1] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 1 && { variant: 'soft', color: colors[1] })}
>
<ListItemDecorator>
<FavoriteBorder />
</ListItemDecorator>
Likes
</Tab>
<Tab {...(index === 2 && { variant: 'soft', color: colors[2] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 2 && { variant: 'soft', color: colors[2] })}
>
<ListItemDecorator>
<Search />
</ListItemDecorator>
Search
</Tab>
<Tab {...(index === 3 && { variant: 'soft', color: colors[3] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 3 && { variant: 'soft', color: colors[3] })}
>
<ListItemDecorator>
<Person />
</ListItemDecorator>
Profile
Expand Down
33 changes: 22 additions & 11 deletions docs/data/joy/components/tabs/TabsBottomNavExample.tsx
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
import Search from '@mui/icons-material/Search';
import Person from '@mui/icons-material/Person';

export default function TabsBasic() {
export default function TabsBottomNavExample() {
const [index, setIndex] = React.useState(0);
const colors = ['primary', 'info', 'danger', 'success'] as const;
return (
Expand Down Expand Up @@ -43,34 +43,45 @@ export default function TabsBasic() {
transition: '0.3s',
fontWeight: 'lg',
flex: 1,
flexDirection: 'column',
[`&:not(.${tabClasses.selected}):not(:hover)`]: {
opacity: 0.72,
},
},
})}
>
<TabList variant="plain" sx={{ '--List-decorator-width': '24px' }}>
<Tab {...(index === 0 && { variant: 'soft', color: colors[0] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<TabList variant="plain" sx={{ '--List-decorator-size': '28px' }}>
<Tab
orientation="vertical"
{...(index === 0 && { variant: 'soft', color: colors[0] })}
>
<ListItemDecorator>
<HomeOutlined />
</ListItemDecorator>
Home
</Tab>
<Tab {...(index === 1 && { variant: 'soft', color: colors[1] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 1 && { variant: 'soft', color: colors[1] })}
>
<ListItemDecorator>
<FavoriteBorder />
</ListItemDecorator>
Likes
</Tab>
<Tab {...(index === 2 && { variant: 'soft', color: colors[2] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 2 && { variant: 'soft', color: colors[2] })}
>
<ListItemDecorator>
<Search />
</ListItemDecorator>
Search
</Tab>
<Tab {...(index === 3 && { variant: 'soft', color: colors[3] })}>
<ListItemDecorator sx={{ mb: 0.5 }}>
<Tab
orientation="vertical"
{...(index === 3 && { variant: 'soft', color: colors[3] })}
>
<ListItemDecorator>
<Person />
</ListItemDecorator>
Profile
Expand Down
68 changes: 46 additions & 22 deletions docs/data/joy/components/tabs/TabsIconWithText.js
View file
Open in desktop
Expand Up @@ -9,27 +9,51 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';

export default function TabsIconWithText() {
return (
<Tabs aria-label="Icon tabs" defaultValue={0}>
<TabList>
<Tab>
<ListItemDecorator>
<PhoneIcon />
</ListItemDecorator>
Recents
</Tab>
<Tab>
<ListItemDecorator>
<FavoriteIcon />
</ListItemDecorator>
Favorite
</Tab>
<Tab>
<ListItemDecorator>
<PersonPinIcon />
</ListItemDecorator>
Nearby
</Tab>
</TabList>
</Tabs>
<div>
<Tabs aria-label="Icon tabs" defaultValue={0} sx={{ mb: 2 }}>
<TabList>
<Tab>
<ListItemDecorator>
<PhoneIcon />
</ListItemDecorator>
Recents
</Tab>
<Tab>
<ListItemDecorator>
<FavoriteIcon />
</ListItemDecorator>
Favorite
</Tab>
<Tab>
<ListItemDecorator>
<PersonPinIcon />
</ListItemDecorator>
Nearby
</Tab>
</TabList>
</Tabs>
<Tabs aria-label="Icon tabs" defaultValue={0}>
<TabList>
<Tab orientation="vertical">
<ListItemDecorator>
<PhoneIcon />
</ListItemDecorator>
Recents
</Tab>
<Tab orientation="vertical">
<ListItemDecorator>
<FavoriteIcon />
</ListItemDecorator>
Favorite
</Tab>
<Tab orientation="vertical">
<ListItemDecorator>
<PersonPinIcon />
</ListItemDecorator>
Nearby
</Tab>
</TabList>
</Tabs>
</div>
);
}