[Joy] Fix input decorator color and list padding

docs/data/joy/components/tabs/TabsPricingExample.js

@@ -16,6 +16,7 @@ export default function TabsPricingExample() {
       <TabList
         variant="outlined"
         sx={(theme) => ({
+          '--List-item-radius': '0px',
           borderRadius: 0,
           [`& .${tabClasses.root}`]: {
             fontWeight: 'lg',

docs/data/joy/components/tabs/TabsPricingExample.tsx

@@ -16,6 +16,7 @@ export default function TabsPricingExample() {
       <TabList
         variant="outlined"
         sx={(theme) => ({
+          '--List-item-radius': '0px',
           borderRadius: 0,
           [`& .${tabClasses.root}`]: {
             fontWeight: 'lg',

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>
   );
 }

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>
   );
 }

packages/mui-joy/src/Chip/Chip.tsx

@@ -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)',

packages/mui-joy/src/Input/Input.tsx

@@ -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)',
@@ -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', {
@@ -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) {

packages/mui-joy/src/List/List.tsx

@@ -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))',

packages/mui-joy/src/Select/Select.tsx

@@ -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)',

packages/mui-joy/src/Switch/Switch.tsx

@@ -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(),

packages/mui-joy/src/TabList/TabList.tsx

@@ -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>({

packages/mui-joy/src/Tabs/Tabs.tsx

@@ -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',
   }),
@@ -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' && {

packages/mui-joy/src/Textarea/Textarea.tsx

@@ -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)',