Skip to content

Commit

Permalink
[Popover] Add ownerState on the paper slot (mui#34445)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored and Daniel Rabe committed Nov 29, 2022
1 parent e93359c commit fa48e15
Show file tree
Hide file tree
Showing 13 changed files with 46 additions and 30 deletions.
1 change: 1 addition & 0 deletions docs/data/joy/components/tabs/TabsPricingExample.js
Expand Up @@ -16,6 +16,7 @@ export default function TabsPricingExample() {
<TabList
variant="outlined"
sx={(theme) => ({
'--List-item-radius': '0px',
borderRadius: 0,
[`& .${tabClasses.root}`]: {
fontWeight: 'lg',
Expand Down
1 change: 1 addition & 0 deletions docs/data/joy/components/tabs/TabsPricingExample.tsx
Expand Up @@ -16,6 +16,7 @@ export default function TabsPricingExample() {
<TabList
variant="outlined"
sx={(theme) => ({
'--List-item-radius': '0px',
borderRadius: 0,
[`& .${tabClasses.root}`]: {
fontWeight: 'lg',
Expand Down
17 changes: 13 additions & 4 deletions docs/data/joy/components/text-field/TextFieldDecorators.js
@@ -1,22 +1,31 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Stack from '@mui/joy/Stack';
import TextField from '@mui/joy/TextField';
import Chip from '@mui/joy/Chip';
import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
import EditIcon from '@mui/icons-material/Edit';
import CheckIcon from '@mui/icons-material/Check';

export default function TextFieldDecorator() {
return (
<Box sx={{ p: 2 }}>
<Stack direction="column" spacing={2}>
<TextField
label="Label"
placeholder="Type in here…"
startDecorator={<PersonRoundedIcon fontSize="small" />}
startDecorator={<PersonRoundedIcon />}
endDecorator={
<Chip size="sm" variant="soft">
New stuff
</Chip>
}
/>
</Box>
<TextField
disabled
label="Label"
placeholder="I am disabled."
startDecorator={<EditIcon />}
endDecorator={<CheckIcon />}
/>
</Stack>
);
}
17 changes: 13 additions & 4 deletions docs/data/joy/components/text-field/TextFieldDecorators.tsx
@@ -1,22 +1,31 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Stack from '@mui/joy/Stack';
import TextField from '@mui/joy/TextField';
import Chip from '@mui/joy/Chip';
import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
import EditIcon from '@mui/icons-material/Edit';
import CheckIcon from '@mui/icons-material/Check';

export default function TextFieldDecorator() {
return (
<Box sx={{ p: 2 }}>
<Stack direction="column" spacing={2}>
<TextField
label="Label"
placeholder="Type in here…"
startDecorator={<PersonRoundedIcon fontSize="small" />}
startDecorator={<PersonRoundedIcon />}
endDecorator={
<Chip size="sm" variant="soft">
New stuff
</Chip>
}
/>
</Box>
<TextField
disabled
label="Label"
placeholder="I am disabled."
startDecorator={<EditIcon />}
endDecorator={<CheckIcon />}
/>
</Stack>
);
}

This file was deleted.

2 changes: 1 addition & 1 deletion packages/mui-joy/src/Chip/Chip.tsx
Expand Up @@ -46,7 +46,7 @@ const ChipRoot = styled('div', {
'--internal-paddingBlock':
'max((var(--Chip-minHeight) - 2 * var(--variant-borderWidth) - var(--Chip-decorator-childHeight)) / 2, 0px)',
'--Chip-decorator-childRadius':
'max((var(--Chip-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Chip-radius) - var(--variant-borderWidth)) / 2))',
'max(var(--Chip-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Chip-radius) / 2))',
'--Chip-delete-radius': 'var(--Chip-decorator-childRadius)',
'--Chip-delete-size': 'var(--Chip-decorator-childHeight)',
'--Avatar-radius': 'var(--Chip-decorator-childRadius)',
Expand Down
8 changes: 7 additions & 1 deletion packages/mui-joy/src/Input/Input.tsx
Expand Up @@ -68,7 +68,7 @@ const InputRoot = styled('div', {
'--internal-paddingBlock':
'max((var(--Input-minHeight) - 2 * var(--variant-borderWidth) - var(--Input-decorator-childHeight)) / 2, 0px)',
'--Input-decorator-childRadius':
'max((var(--Input-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Input-radius) - var(--variant-borderWidth)) / 2))',
'max(var(--Input-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Input-radius) / 2))',
'--Button-minHeight': 'var(--Input-decorator-childHeight)',
'--IconButton-size': 'var(--Input-decorator-childHeight)',
'--Button-radius': 'var(--Input-decorator-childRadius)',
Expand Down Expand Up @@ -173,6 +173,9 @@ const InputStartDecorator = styled('span', {
...(ownerState.focused && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
}),
...(ownerState.disabled && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
}),
}));

const InputEndDecorator = styled('span', {
Expand All @@ -188,6 +191,9 @@ const InputEndDecorator = styled('span', {
marginInlineStart: 'var(--Input-gap)',
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
cursor: 'initial',
...(ownerState.disabled && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
}),
}));

const Input = React.forwardRef(function Input(inProps, ref) {
Expand Down
6 changes: 3 additions & 3 deletions packages/mui-joy/src/List/List.tsx
Expand Up @@ -97,10 +97,10 @@ export const ListRoot = styled('ul', {
'--List-nestedInsetStart': '0px',
'--List-item-paddingLeft': 'var(--List-item-paddingX)',
'--List-item-paddingRight': 'var(--List-item-paddingX)',
// Automatic radius adjustment kicks in only if '--List-padding' and '--List-radius' are provided.
'--internal-child-radius':
'max(var(--List-radius, 0px) - var(--List-padding), min(var(--List-padding) / 2, var(--List-radius, 0px) / 2))',
// If --List-padding is 0, the --List-item-radius will be 0.
'--List-item-radius': 'min(calc(var(--List-padding) * 999), var(--internal-child-radius))',
'max(var(--List-radius) - var(--List-padding), min(var(--List-padding) / 2, var(--List-radius) / 2))',
'--List-item-radius': 'var(--internal-child-radius)',
// by default, The ListItem & ListItemButton use automatic radius adjustment based on the parent List.
'--List-item-startActionTranslateX': 'calc(0.5 * var(--List-item-paddingLeft))',
'--List-item-endActionTranslateX': 'calc(-0.5 * var(--List-item-paddingRight))',
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Select/Select.tsx
Expand Up @@ -99,7 +99,7 @@ const SelectRoot = styled('div', {
'--internal-paddingBlock':
'max((var(--Select-minHeight) - 2 * var(--variant-borderWidth) - var(--Select-decorator-childHeight)) / 2, 0px)',
'--Select-decorator-childRadius':
'max((var(--Select-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Select-radius) - var(--variant-borderWidth)) / 2))',
'max(var(--Select-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Select-radius) / 2))',
'--Button-minHeight': 'var(--Select-decorator-childHeight)',
'--IconButton-size': 'var(--Select-decorator-childHeight)',
'--Button-radius': 'var(--Select-decorator-childRadius)',
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Switch/Switch.tsx
Expand Up @@ -85,7 +85,7 @@ const SwitchRoot = styled('div', {
'--Switch-gap': '12px',
}),
'--internal-paddingBlock': `max((var(--Switch-track-height) - 2 * var(--variant-borderWidth) - var(--Switch-thumb-size)) / 2, 0px)`,
'--Switch-thumb-radius': `max((var(--Switch-track-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Switch-track-radius) - var(--variant-borderWidth)) / 2))`,
'--Switch-thumb-radius': `max(var(--Switch-track-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Switch-track-radius) / 2))`,
'--Switch-thumb-width': 'var(--Switch-thumb-size)',
'--Switch-thumb-offset': `max((var(--Switch-track-height) - var(--Switch-thumb-size)) / 2, 0px)`,
...getColorVariables(),
Expand Down
5 changes: 3 additions & 2 deletions packages/mui-joy/src/TabList/TabList.tsx
Expand Up @@ -33,13 +33,14 @@ const TabListRoot = styled(ListRoot, {
name: 'JoyTabList',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})<{ ownerState: TabListOwnerState }>({
})<{ ownerState: TabListOwnerState }>(({ theme }) => ({
flexGrow: 'initial',
'--List-radius': theme.vars.radius.md, // targets TabList which reuses styles from List.
'--List-gap': 'var(--Tabs-gap)',
'--List-padding': 'var(--Tabs-gap)',
'--List-divider-gap': '0px',
...scopedVariables,
});
}));

const TabList = React.forwardRef(function TabList(inProps, ref) {
const props = useThemeProps<typeof inProps & TabListProps>({
Expand Down
3 changes: 1 addition & 2 deletions packages/mui-joy/src/Tabs/Tabs.tsx
Expand Up @@ -31,7 +31,7 @@ const TabsRoot = styled(SheetRoot, {
name: 'JoyTabs',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})<{ ownerState: TabsOwnerState }>(({ ownerState, theme }) => ({
})<{ ownerState: TabsOwnerState }>(({ ownerState }) => ({
...(ownerState.size === 'sm' && {
'--Tabs-gap': '3px',
}),
Expand All @@ -41,7 +41,6 @@ const TabsRoot = styled(SheetRoot, {
...(ownerState.size === 'lg' && {
'--Tabs-gap': '0.5rem',
}),
'--List-radius': theme.vars.radius.md, // targets TabList which reuses styles from List.
display: 'flex',
flexDirection: 'column',
...(ownerState.orientation === 'vertical' && {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Textarea/Textarea.tsx
Expand Up @@ -69,7 +69,7 @@ const TextareaRoot = styled('div', {
'--internal-paddingBlock':
'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth) - var(--Textarea-decorator-childHeight)) / 2, 0px)',
'--Textarea-decorator-childRadius':
'max((var(--Textarea-radius) - var(--variant-borderWidth)) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, (var(--Textarea-radius) - var(--variant-borderWidth)) / 2))',
'max(var(--Textarea-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Textarea-radius) / 2))',
'--Button-minHeight': 'var(--Textarea-decorator-childHeight)',
'--IconButton-size': 'var(--Textarea-decorator-childHeight)',
'--Button-radius': 'var(--Textarea-decorator-childRadius)',
Expand Down

0 comments on commit fa48e15

Please sign in to comment.