all-instances

mui · Sep 21, 2023 · 7d5c676 · 7d5c676
1 parent b89dd1a
commit 7d5c676
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 30 deletions.
diff --git a/docs/data/joy/components/circular-progress/CircularProgressChildren.js b/docs/data/joy/components/circular-progress/CircularProgressChildren.js
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import CircularProgress from '@mui/joy/CircularProgress';
+import CircularProgress, {
+  circularProgressCssVars,
+} from '@mui/joy/CircularProgress';
 import ReportIcon from '@mui/icons-material/Report';
 import WarningIcon from '@mui/icons-material/Warning';
 
@@ -13,7 +15,10 @@ export default function CircularProgressChildren() {
       <CircularProgress size="lg" determinate value={66.67}>
         2 / 3
       </CircularProgress>
-      <CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+      <CircularProgress
+        color="danger"
+        sx={{ [circularProgressCssVars.size]: '80px' }}
+      >
         <ReportIcon color="danger" />
       </CircularProgress>
     </Box>

diff --git a/docs/data/joy/components/circular-progress/CircularProgressChildren.tsx b/docs/data/joy/components/circular-progress/CircularProgressChildren.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import CircularProgress from '@mui/joy/CircularProgress';
+import CircularProgress, {
+  circularProgressCssVars,
+} from '@mui/joy/CircularProgress';
 import ReportIcon from '@mui/icons-material/Report';
 import WarningIcon from '@mui/icons-material/Warning';
 
@@ -13,7 +15,10 @@ export default function CircularProgressChildren() {
       <CircularProgress size="lg" determinate value={66.67}>
         2 / 3
       </CircularProgress>
-      <CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+      <CircularProgress
+        color="danger"
+        sx={{ [circularProgressCssVars.size]: '80px' }}
+      >
         <ReportIcon color="danger" />
       </CircularProgress>
     </Box>

diff --git a/docs/data/joy/components/circular-progress/CircularProgressChildren.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressChildren.tsx.preview
@@ -4,6 +4,9 @@
 <CircularProgress size="lg" determinate value={66.67}>
   2 / 3
 </CircularProgress>
-<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+<CircularProgress
+  color="danger"
+  sx={{ [circularProgressCssVars.size]: '80px' }}
+>
   <ReportIcon color="danger" />
 </CircularProgress>
diff --git a/docs/data/joy/components/circular-progress/CircularProgressVariables.js b/docs/data/joy/components/circular-progress/CircularProgressVariables.js
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import CircularProgress from '@mui/joy/CircularProgress';
+import CircularProgress, {
+  circularProgressCssVars,
+} from '@mui/joy/CircularProgress';
 import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function CircularProgressVariables() {
@@ -8,16 +10,16 @@ export default function CircularProgressVariables() {
       componentName="CircularProgress"
       data={[
         {
-          var: '--CircularProgress-size',
+          var: [circularProgressCssVars.size],
           defaultValue: '40px',
           helperText: 'Supports only `px` unit',
         },
         {
-          var: '--CircularProgress-trackThickness',
+          var: [circularProgressCssVars.trackThickness],
           defaultValue: '6px',
         },
         {
-          var: '--CircularProgress-progressThickness',
+          var: [circularProgressCssVars.progressThickness],
           defaultValue: '6px',
         },
       ]}

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -8,7 +8,7 @@ import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef }
 import { styled, Theme, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
-import CircularProgress from '../CircularProgress';
+import CircularProgress, { circularProgressCssVars } from '../CircularProgress';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import { ButtonOwnerState, ButtonTypeMap, ExtendButton } from './ButtonProps';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
@@ -56,7 +56,7 @@ const ButtonStartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: ButtonOwnerState }>({
   '--Icon-margin': '0 0 0 calc(var(--Button-gap) / -2)',
-  '--CircularProgress-margin': '0 0 0 calc(var(--Button-gap) / -2)',
+  [circularProgressCssVars.margin]: '0 0 0 calc(var(--Button-gap) / -2)',
   display: 'inherit',
   marginRight: 'var(--Button-gap)',
 });
@@ -67,7 +67,7 @@ const ButtonEndDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: ButtonOwnerState }>({
   '--Icon-margin': '0 calc(var(--Button-gap) / -2) 0 0',
-  '--CircularProgress-margin': '0 calc(var(--Button-gap) / -2) 0 0',
+  [circularProgressCssVars.margin]: '0 calc(var(--Button-gap) / -2) 0 0',
   display: 'inherit',
   marginLeft: 'var(--Button-gap)',
 });
@@ -103,8 +103,8 @@ export const getButtonStyles = ({
           : theme.vars.palette.text.icon,
       ...(ownerState.size === 'sm' && {
         '--Icon-fontSize': theme.vars.fontSize.lg,
-        '--CircularProgress-size': '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
-        '--CircularProgress-thickness': '2px',
+        [circularProgressCssVars.size]: '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
+        [circularProgressCssVars.thickness]: '2px',
         '--Button-gap': '0.375rem',
         minHeight: 'var(--Button-minHeight, 2rem)',
         fontSize: theme.vars.fontSize.sm,
@@ -113,8 +113,8 @@ export const getButtonStyles = ({
       }),
       ...(ownerState.size === 'md' && {
         '--Icon-fontSize': theme.vars.fontSize.xl,
-        '--CircularProgress-size': '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
-        '--CircularProgress-thickness': '2px',
+        [circularProgressCssVars.size]: '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
+        [circularProgressCssVars.thickness]: '2px',
         '--Button-gap': '0.5rem',
         minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
@@ -123,8 +123,8 @@ export const getButtonStyles = ({
       }),
       ...(ownerState.size === 'lg' && {
         '--Icon-fontSize': theme.vars.fontSize.xl2,
-        '--CircularProgress-size': '28px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
-        '--CircularProgress-thickness': '4px',
+        [circularProgressCssVars.size]: '28px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
+        [circularProgressCssVars.thickness]: '4px',
         '--Button-gap': '0.75rem',
         minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,

diff --git a/packages/mui-joy/src/CircularProgress/index.ts b/packages/mui-joy/src/CircularProgress/index.ts
@@ -3,4 +3,4 @@ export { default } from './CircularProgress';
 export * from './circularProgressClasses';
 export { default as circularProgressClasses } from './circularProgressClasses';
 export * from './CircularProgressProps';
-export { default as cssVars } from './CircularProgressCssVars';
+export { default as circularProgressCssVars } from './CircularProgressCssVars';
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -10,6 +10,7 @@ import useSlot from '../utils/useSlot';
 import { getIconButtonUtilityClass } from './iconButtonClasses';
 import { IconButtonOwnerState, IconButtonTypeMap, ExtendIconButton } from './IconButtonProps';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+import { circularProgressCssVars } from '../CircularProgress';
 
 const useUtilityClasses = (ownerState: IconButtonOwnerState) => {
   const { color, disabled, focusVisible, focusVisibleClassName, size, variant } = ownerState;
@@ -47,26 +48,26 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
       }),
       ...(ownerState.size === 'sm' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default
-        '--CircularProgress-size': '20px',
-        '--CircularProgress-thickness': '2px',
+        [circularProgressCssVars.size]: '20px',
+        [circularProgressCssVars.thickness]: '2px',
         minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content
         minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
         paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
       }),
       ...(ownerState.size === 'md' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2.25rem) / 1.5)', // 1.5rem by default
-        '--CircularProgress-size': '20px',
-        '--CircularProgress-thickness': '2px',
+        [circularProgressCssVars.size]: '20px',
+        [circularProgressCssVars.thickness]: '2px',
         minWidth: 'var(--IconButton-size, 2.25rem)',
         minHeight: 'var(--IconButton-size, 2.25rem)',
         fontSize: theme.vars.fontSize.md,
         paddingInline: '0.25rem',
       }),
       ...(ownerState.size === 'lg' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2.75rem) / 1.571)', // 1.75rem by default
-        '--CircularProgress-size': '28px',
-        '--CircularProgress-thickness': '4px',
+        [circularProgressCssVars.size]: '28px',
+        [circularProgressCssVars.thickness]: '4px',
         minWidth: 'var(--IconButton-size, 2.75rem)',
         minHeight: 'var(--IconButton-size, 2.75rem)',
         fontSize: theme.vars.fontSize.lg,

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
@@ -17,6 +17,7 @@ import useSlot from '../utils/useSlot';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import { LinkProps, LinkOwnerState, LinkTypeMap } from './LinkProps';
 import { TypographyNestedContext, TypographyInheritContext } from '../Typography/Typography';
+import { circularProgressCssVars } from '../CircularProgress';
 
 const useUtilityClasses = (ownerState: LinkOwnerState) => {
   const { level, color, variant, underline, focusVisible, disabled } = ownerState;
@@ -75,8 +76,8 @@ const LinkRoot = styled('a', {
     {
       '--Icon-fontSize': '1.25em',
       '--Icon-color': 'currentColor',
-      '--CircularProgress-size': '1.25em',
-      '--CircularProgress-thickness': '3px',
+      [circularProgressCssVars.size]: '1.25em',
+      [circularProgressCssVars.thickness]: '3px',
       ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]),
       ...(ownerState.level === 'inherit' && {
         font: 'inherit',

diff --git a/packages/mui-joy/src/MenuButton/MenuButton.tsx b/packages/mui-joy/src/MenuButton/MenuButton.tsx
@@ -13,7 +13,7 @@ import {
 import { getMenuButtonUtilityClass } from './menuButtonClasses';
 import useThemeProps from '../styles/useThemeProps';
 import useSlot from '../utils/useSlot';
-import CircularProgress from '../CircularProgress';
+import CircularProgress, { circularProgressCssVars } from '../CircularProgress';
 import { getButtonStyles } from '../Button/Button';
 import { styled, useColorInversion } from '../styles';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
@@ -51,7 +51,7 @@ const MenuButtonStartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: MenuButtonOwnerState }>({
   '--Icon-margin': '0 0 0 calc(var(--Button-gap) / -2)',
-  '--CircularProgress-margin': '0 0 0 calc(var(--Button-gap) / -2)',
+  [circularProgressCssVars.margin]: '0 0 0 calc(var(--Button-gap) / -2)',
   display: 'inherit',
   marginRight: 'var(--Button-gap)',
 });
@@ -62,7 +62,7 @@ const MenuButtonEndDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: MenuButtonOwnerState }>({
   '--Icon-margin': '0 calc(var(--Button-gap) / -2) 0 0',
-  '--CircularProgress-margin': '0 calc(var(--Button-gap) / -2) 0 0',
+  [circularProgressCssVars.margin]: '0 calc(var(--Button-gap) / -2) 0 0',
   display: 'inherit',
   marginLeft: 'var(--Button-gap)',
 });