[Joy] Miscellaneous fixes (#35044)

mui · Nov 8, 2022 · 0d290f8 · 0d290f8
1 parent 43408b1
commit 0d290f8
Show file tree

Hide file tree

Showing 30 changed files with 183 additions and 145 deletions.
diff --git a/docs/data/joy/components/link/DecoratorExamples.js b/docs/data/joy/components/link/DecoratorExamples.js
@@ -13,7 +13,7 @@ const circulate = keyframes({
   },
 });
 
-export default function LinkScales() {
+export default function DecoratorExamples() {
   return (
     <Box
       sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}
@@ -61,7 +61,7 @@ export default function LinkScales() {
         variant="soft"
         color="success"
         endDecorator={
-          <Chip color="success" size="sm" sx={{ borderRadius: 'xs' }}>
+          <Chip color="success" size="sm" sx={{ borderRadius: '3px', mr: '2px' }}>
             HIRING!
           </Chip>
         }

diff --git a/docs/data/joy/components/select/SelectUsage.js b/docs/data/joy/components/select/SelectUsage.js
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
-import IconButton from '@mui/joy/IconButton';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
-import CloseRounded from '@mui/icons-material/CloseRounded';
 
 export default function SelectUsage() {
   const [value, setValue] = React.useState(null);
@@ -50,26 +48,6 @@ export default function SelectUsage() {
           action={action}
           value={value}
           onChange={(e, newValue) => setValue(newValue)}
-          {...(value && {
-            endDecorator: (
-              <IconButton
-                size="sm"
-                variant={props.variant}
-                color="neutral"
-                disabled={props.disabled}
-                onMouseDown={(event) => {
-                  event.stopPropagation();
-                }}
-                onClick={() => {
-                  setValue(null);
-                  action.current?.focusVisible();
-                }}
-              >
-                <CloseRounded />
-              </IconButton>
-            ),
-            indicator: null,
-          })}
           sx={{ minWidth: 160, mb: 20 }}
         >
           <Option value="react">React</Option>

diff --git a/docs/data/joy/components/typography/DecoratorExamples.js b/docs/data/joy/components/typography/DecoratorExamples.js
@@ -3,14 +3,15 @@ import Box from '@mui/joy/Box';
 import Typography from '@mui/joy/Typography';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
-export default function TypographyScales() {
+export default function DecoratorExamples() {
   return (
     <Box
       sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}
     >
       <Typography
         startDecorator={
           <Box
+            component="span"
             sx={{
               bgcolor: 'neutral.400',
               width: '0.5em',

diff --git a/docs/data/joy/components/typography/NestedTypography.js b/docs/data/joy/components/typography/NestedTypography.js
@@ -3,7 +3,7 @@ import Typography from '@mui/joy/Typography';
 
 export default function NestedTypography() {
   return (
-    <Typography mb={2} maxWidth={400}>
+    <Typography mb={2} maxWidth={400} lineHeight="lg">
       Typography lets you create <Typography variant="soft">nested</Typography>{' '}
       typography. Use your{' '}
       <Typography variant="outlined" color="success">

diff --git a/docs/data/joy/components/typography/TypographyDecorators.js b/docs/data/joy/components/typography/TypographyDecorators.js
@@ -4,7 +4,7 @@ import Typography from '@mui/joy/Typography';
 import Chip from '@mui/joy/Chip';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
-export default function TypographyScales() {
+export default function TypographyDecorators() {
   return (
     <Box>
       <Typography startDecorator={<InfoOutlined />} mb={2}>

diff --git a/docs/data/joy/customization/dark-mode/IdentifySystemMode.js b/docs/data/joy/customization/dark-mode/IdentifySystemMode.js
@@ -23,7 +23,6 @@ const Identifier = () => {
         fontSize="md"
         sx={{
           boxShadow: 'sm',
-          py: 0.25,
           fontFamily: 'code',
           bgcolor: 'background.level1',
         }}

diff --git a/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx b/docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx
@@ -23,7 +23,6 @@ const Identifier = () => {
         fontSize="md"
         sx={{
           boxShadow: 'sm',
-          py: 0.25,
           fontFamily: 'code',
           bgcolor: 'background.level1',
         }}

diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -13,7 +13,6 @@ import Radio, { radioClasses } from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Select from '@mui/joy/Select';
 import Sheet from '@mui/joy/Sheet';
-import { ColorPaletteProp } from '@mui/joy/styles';
 import Switch from '@mui/joy/Switch';
 import TextField from '@mui/joy/TextField';
 import Typography from '@mui/joy/Typography';
@@ -436,63 +435,67 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                     }
                     sx={{ flexWrap: 'wrap', gap: 1.5 }}
                   >
-                    {['primary', 'neutral', 'danger', 'info', 'success', 'warning'].map((value) => {
-                      const checked = resolvedValue === value;
-                      return (
-                        <Sheet
-                          key={value}
-                          sx={{
-                            width: 28,
-                            height: 28,
-                            bgcolor: 'unset',
-                            textTransform: 'capitalize',
-                          }}
-                        >
-                          <Radio
+                    {(['primary', 'neutral', 'danger', 'info', 'success', 'warning'] as const).map(
+                      (value) => {
+                        const checked = resolvedValue === value;
+                        return (
+                          <Sheet
+                            key={value}
                             variant="solid"
-                            color={value as ColorPaletteProp}
-                            label={value}
-                            value={value}
-                            disableIcon
-                            overlay
+                            color={value}
                             sx={{
-                              [`& .${radioClasses.action}`]: { bgcolor: `${value}.500` },
-                              [`& .${radioClasses.label}`]: {
-                                fontSize: '10px',
-                                color: 'text.secondary',
-                                position: 'absolute',
-                                bottom: '-1rem',
-                                left: '50%',
-                                transform: 'translateX(-50%)',
-                                opacity: '0.01', // prevent double for touch device.
-                                transition: '0.2s',
-                              },
-                              [`&:hover, &.${radioClasses.focusVisible}, &.${radioClasses.checked}`]:
-                                {
-                                  [`& .${radioClasses.label}`]: {
-                                    opacity: 1,
-                                    bottom: '-1.25rem',
-                                  },
-                                },
+                              width: 28,
+                              height: 28,
+                              borderRadius: 'sm',
+                              textTransform: 'capitalize',
                             }}
-                          />
-                          {checked && (
-                            <Check
-                              fontSize="md"
+                          >
+                            <Radio
+                              variant="solid"
+                              color={value}
+                              label={value}
+                              value={value}
+                              disableIcon
+                              overlay
                               sx={{
-                                color: '#fff',
-                                zIndex: 1,
-                                position: 'absolute',
-                                top: '50%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                pointerEvents: 'none',
+                                // [`& .${radioClasses.action}`]: { bgcolor: `${value}.500` },
+                                [`& .${radioClasses.label}`]: {
+                                  fontSize: '10px',
+                                  color: 'text.secondary',
+                                  position: 'absolute',
+                                  bottom: '-1rem',
+                                  left: '50%',
+                                  transform: 'translateX(-50%)',
+                                  opacity: '0.01', // prevent double for touch device.
+                                  transition: '0.2s',
+                                },
+                                [`&:hover, &.${radioClasses.focusVisible}, &.${radioClasses.checked}`]:
+                                  {
+                                    [`& .${radioClasses.label}`]: {
+                                      opacity: 1,
+                                      bottom: '-1.25rem',
+                                    },
+                                  },
                               }}
                             />
-                          )}
-                        </Sheet>
-                      );
-                    })}
+                            {checked && (
+                              <Check
+                                fontSize="md"
+                                color="inherit"
+                                sx={{
+                                  zIndex: 1,
+                                  position: 'absolute',
+                                  top: '50%',
+                                  left: '50%',
+                                  transform: 'translate(-50%, -50%)',
+                                  pointerEvents: 'none',
+                                }}
+                              />
+                            )}
+                          </Sheet>
+                        );
+                      },
+                    )}
                   </RadioGroup>
                 </FormControl>
               );

diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -91,6 +91,8 @@ const CircularProgressRoot = styled('span', {
     '--_thickness-diff':
       'calc(var(--CircularProgress-track-thickness) - var(--CircularProgress-progress-thickness))',
     '--_inner-size': 'calc(var(--_root-size) - 2 * var(--variant-borderWidth))',
+    '--_outlined-inset':
+      'max(var(--CircularProgress-track-thickness), var(--CircularProgress-progress-thickness))',
     width: 'var(--_root-size)',
     height: 'var(--_root-size)',
     borderRadius: 'var(--_root-size)',
@@ -109,6 +111,19 @@ const CircularProgressRoot = styled('span', {
       fontSize: 'calc(0.2 * var(--_root-size))',
     }),
     ...rest,
+    ...(ownerState.variant === 'outlined' && {
+      '&:before': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        borderRadius: 'inherit',
+        top: 'var(--_outlined-inset)',
+        left: 'var(--_outlined-inset)',
+        right: 'var(--_outlined-inset)',
+        bottom: 'var(--_outlined-inset)',
+        ...rest,
+      },
+    }),
   };
 });
 
@@ -169,7 +184,7 @@ const CircularProgressProgress = styled('circle', {
       : css`
           animation: var(
               --CircularProgress-circulation,
-              0.5s linear 0s infinite normal none running
+              0.8s linear 0s infinite normal none running
             )
             ${circulate};
         `,

diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/system';
 import { Theme, DefaultColorScheme, ColorSystem } from '../styles/types';
+import { Components } from '../styles/components';
 import { CssBaselineProps } from './CssBaselineProps';
 
 /**
@@ -23,6 +24,9 @@ function CssBaseline({ children, disableColorScheme = false }: CssBaselineProps)
               };
             });
           }
+          const defaultTypographyLevel =
+            (theme as unknown as { components: Components<Theme> }).components?.JoyTypography
+              ?.defaultProps?.level ?? 'body1';
           return {
             html: {
               WebkitFontSmoothing: 'antialiased',
@@ -42,7 +46,8 @@ function CssBaseline({ children, disableColorScheme = false }: CssBaselineProps)
             body: {
               margin: 0, // Remove the margin in all browsers.
               color: theme.vars.palette.text.primary,
-              ...(theme.typography.body1 as any),
+              fontFamily: theme.vars.fontFamily.body,
+              ...(theme.typography as any)[defaultTypographyLevel],
               backgroundColor: theme.vars.palette.background.body,
               '@media print': {
                 // Save printer ink.

diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx
@@ -32,7 +32,7 @@ export const FormControlRoot = styled('div', {
 })<{ ownerState: FormControlOwnerState }>(({ theme, ownerState }) => ({
   '--FormLabel-margin':
     ownerState.orientation === 'horizontal' ? '0 0.375rem 0 0' : '0 0 0.25rem 0',
-  '--FormLabel-alignSelf': 'flex-start',
+  '--FormLabel-alignSelf': ownerState.orientation === 'horizontal' ? 'align-items' : 'flex-start',
   '--FormHelperText-margin': '0.375rem 0 0 0',
   '--FormLabel-asterisk-color': theme.vars.palette.danger[500],
   '--FormHelperText-color': theme.vars.palette[ownerState.color!]?.[500],

diff --git a/packages/mui-joy/src/GlobalStyles/index.ts b/packages/mui-joy/src/GlobalStyles/index.ts
@@ -1 +1,6 @@
-export { GlobalStyles as default } from '@mui/system';
+import { GlobalStyles as SystemGlobalStyles } from '@mui/system';
+import { Theme } from '../styles/types';
+
+const GlobalStyles = SystemGlobalStyles<Theme>;
+
+export default GlobalStyles;
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -36,6 +36,7 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
       {
         '--Input-radius': theme.vars.radius.sm,
         '--Input-gap': '0.5rem',
+        '--Input-placeholderColor': 'inherit',
         '--Input-placeholderOpacity': 0.5,
         '--Input-focusedThickness': theme.vars.focus.thickness,
         ...(ownerState.color === 'context'
@@ -153,10 +154,25 @@ export const StyledInputHtml = styled('input')<{ ownerState: InputOwnerState }>(
     WebkitBackgroundClip: 'text', // remove autofill background
     WebkitTextFillColor: 'currentColor',
   },
-  '&::-webkit-input-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' },
-  '&::-moz-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' }, // Firefox 19+
-  '&:-ms-input-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' }, // IE11
-  '&::-ms-input-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' }, // Edge
+  '&::-webkit-input-placeholder': {
+    color: 'var(--Input-placeholderColor)',
+    opacity: 'var(--Input-placeholderOpacity)',
+  },
+  '&::-moz-placeholder': {
+    // Firefox 19+
+    color: 'var(--Input-placeholderColor)',
+    opacity: 'var(--Input-placeholderOpacity)',
+  },
+  '&:-ms-input-placeholder': {
+    // IE11
+    color: 'var(--Input-placeholderColor)',
+    opacity: 'var(--Input-placeholderOpacity)',
+  },
+  '&::-ms-input-placeholder': {
+    // Edge
+    color: 'var(--Input-placeholderColor)',
+    opacity: 'var(--Input-placeholderOpacity)',
+  },
 });
 
 export const StyledInputStartDecorator = styled('span')<{ ownerState: InputOwnerState }>(

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
@@ -41,7 +41,7 @@ const StartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: LinkOwnerState }>({
   display: 'inline-flex',
-  marginInlineEnd: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)',
+  marginInlineEnd: 'clamp(4px, var(--Link-gap, 0.375em), 0.75rem)',
 });
 
 const EndDecorator = styled('span', {
@@ -50,7 +50,7 @@ const EndDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: LinkOwnerState }>({
   display: 'inline-flex',
-  marginInlineStart: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)',
+  marginInlineStart: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)', // for end decorator, 0.25em looks better.
 });
 
 const LinkRoot = styled('a', {
@@ -98,9 +98,10 @@ const LinkRoot = styled('a', {
       } / var(--Link-underlineOpacity, 0.72))`,
       ...(ownerState.variant
         ? {
-            paddingInline: '0.25em', // better than left, right because it also works with writing mode.
+            paddingBlock: 'min(0.15em, 4px)',
+            paddingInline: '0.375em', // better than left, right because it also works with writing mode.
             ...(!ownerState.nested && {
-              marginInline: '-0.25em',
+              marginInline: '-0.375em',
             }),
           }
         : {

diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
@@ -136,7 +136,7 @@ export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme,
   ];
 });
 
-export const ListRoot = styled(StyledList, {
+const ListRoot = styled(StyledList, {
   name: 'JoyList',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,