Skip to content

Commit

Permalink
[material-ui][Snackbar] Add Slots and SlotProps (#45103)
Browse files Browse the repository at this point in the history
  • Loading branch information
harry-whorlow authored Jan 31, 2025
1 parent c490d7b commit 4b74f87
Show file tree
Hide file tree
Showing 22 changed files with 650 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function ConsecutiveSnackbars() {
open={open}
autoHideDuration={6000}
onClose={handleClose}
TransitionProps={{ onExited: handleExited }}
slotProps={{ transition: { onExited: handleExited } }}
message={messageInfo ? messageInfo.message : undefined}
action={
<React.Fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function ConsecutiveSnackbars() {
open={open}
autoHideDuration={6000}
onClose={handleClose}
TransitionProps={{ onExited: handleExited }}
slotProps={{ transition: { onExited: handleExited } }}
message={messageInfo ? messageInfo.message : undefined}
action={
<React.Fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function DirectionSnackbar() {
<Snackbar
open={open}
onClose={handleClose}
TransitionComponent={transition}
slots={{ transition }}
message="I love snacks"
key={transition ? transition.name : ''}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function DirectionSnackbar() {
<Snackbar
open={open}
onClose={handleClose}
TransitionComponent={transition}
slots={{ transition }}
message="I love snacks"
key={transition ? transition.name : ''}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function TransitionsSnackbar() {
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
slots={{ transition: state.Transition }}
message="I love snacks"
key={state.Transition.name}
autoHideDuration={1200}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function TransitionsSnackbar() {
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
slots={{ transition: state.Transition }}
message="I love snacks"
key={state.Transition.name}
autoHideDuration={1200}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
slots={{ transition: state.Transition }}
message="I love snacks"
key={state.Transition.name}
autoHideDuration={1200}
Expand Down
72 changes: 62 additions & 10 deletions docs/pages/material-ui/api/snackbar.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,16 @@
"autoHideDuration": { "type": { "name": "number" }, "default": "null" },
"children": { "type": { "name": "element" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"ClickAwayListenerProps": { "type": { "name": "object" } },
"ContentProps": { "type": { "name": "object" } },
"ClickAwayListenerProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.clickAwayListener</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"ContentProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.content</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" },
"key": { "type": { "name": "custom", "description": "any" } },
"message": { "type": { "name": "node" } },
Expand All @@ -25,28 +33,78 @@
},
"open": { "type": { "name": "bool" } },
"resumeHideDuration": { "type": { "name": "number" } },
"slotProps": {
"type": {
"name": "shape",
"description": "{ clickAwayListener?: func<br>&#124;&nbsp;object<br>&#124;&nbsp;{ children: element, disableReactTree?: bool, mouseEvent?: 'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false, onClickAway?: func, touchEvent?: 'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false }<br>&#124;&nbsp;{ children: element, disableReactTree?: bool, key?: number<br>&#124;&nbsp;{ __@toStringTag@9059: 'BigInt', toLocaleString: func, toString: func, valueOf: func }<br>&#124;&nbsp;string, mouseEvent?: 'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false, onClickAway?: func, touchEvent?: 'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false }, content?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
"description": "{ clickAwayListener?: elementType, content?: elementType, root?: elementType, transition?: elementType }"
},
"default": "{}"
},
"sx": {
"type": {
"name": "union",
"description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
},
"additionalInfo": { "sx": true }
},
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
"TransitionComponent": {
"type": { "name": "elementType" },
"default": "Grow",
"deprecated": true,
"deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"transitionDuration": {
"type": {
"name": "union",
"description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
},
"default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}"
},
"TransitionProps": { "type": { "name": "object" }, "default": "{}" }
"TransitionProps": {
"type": { "name": "object" },
"default": "{}",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
}
},
"name": "Snackbar",
"imports": [
"import Snackbar from '@mui/material/Snackbar';",
"import { Snackbar } from '@mui/material';"
],
"slots": [
{
"name": "root",
"description": "The component that renders the root slot.",
"default": "'div'",
"class": "MuiSnackbar-root"
},
{
"name": "content",
"description": "The component that renders the content slot.",
"default": "SnackbarContent",
"class": null
},
{
"name": "clickAwayListener",
"description": "The component that renders the clickAwayListener slot.",
"default": "ClickAwayListener",
"class": null
},
{
"name": "transition",
"description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
"default": "Grow",
"class": null
}
],
"classes": [
{
"key": "anchorOriginBottomCenter",
Expand Down Expand Up @@ -83,12 +141,6 @@
"className": "MuiSnackbar-anchorOriginTopRight",
"description": "Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`.",
"isGlobal": false
},
{
"key": "root",
"className": "MuiSnackbar-root",
"description": "Styles applied to the root element.",
"isGlobal": false
}
],
"spread": true,
Expand Down
11 changes: 9 additions & 2 deletions docs/translations/api-docs/snackbar/snackbar.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
"resumeHideDuration": {
"description": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
Expand Down Expand Up @@ -79,7 +81,12 @@
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
},
"root": { "description": "Styles applied to the root element." }
}
},
"slotDescriptions": {
"clickAwayListener": "The component that renders the clickAwayListener slot.",
"content": "The component that renders the content slot.",
"root": "The component that renders the root slot.",
"transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
}
}
21 changes: 21 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1612,6 +1612,27 @@ npx @mui/codemod@latest deprecations/select-classes <path>
npx @mui/codemod@latest deprecations/slider-props <path>
```

#### `snackbar-props`

```diff
<Snackbar
- ClickAwayListenerProps={CustomClickAwayListenerProps}
- ContentProps={CustomContentProps}
- TransitionComponent={CustomTransition}
- TransitionProps={CustomTransitionProps}
+ slots={{ transition: CustomTransition }}
+ slotProps={{
+ clickAwayListener: CustomClickAwayListenerProps,
+ content: CustomContentProps,
+ transition: CustomTransitionProps
+ }}
/>
```

```bash
npx @mui/codemod@next deprecations/snackbar-props <path>
```

#### `tooltip-props`

```diff
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import transformTooltipProps from '../tooltip-props';
import transformTablePaginationProps from '../table-pagination-props';
import transformCardHeaderProps from '../card-header-props';
import transformPopoverProps from '../popover-props';
import transformSnackbarProps from '../snackbar-props';

/**
* @param {import('jscodeshift').FileInfo} file
Expand Down Expand Up @@ -76,6 +77,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformTablePaginationProps(file, api, options);
file.source = transformCardHeaderProps(file, api, options);
file.source = transformPopoverProps(file, api, options);
file.source = transformSnackbarProps(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './snackbar-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import movePropIntoSlots from '../utils/movePropIntoSlots';
import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';

/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
const printOptions = options.printOptions;

movePropIntoSlots(j, {
root,
componentName: 'Snackbar',
propName: 'TransitionComponent',
slotName: 'transition',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Snackbar',
propName: 'TransitionProps',
slotName: 'transition',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Snackbar',
propName: 'ContentProps',
slotName: 'content',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Snackbar',
propName: 'ClickAwayListenerProps',
slotName: 'clickAwayListener',
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { describeJscodeshiftTransform } from '../../../testUtils';
import transform from './snackbar-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'snackbar-props',
dirname: __dirname,
testCases: [
{ actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
{ actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
],
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import Snackbar from '@mui/material/Snackbar';
import { Snackbar as MySnackbar } from '@mui/material';

<Snackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
/>;
<MySnackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
/>;
<Snackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
slots={{
root: 'div',
}}
/>;
<MySnackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
slots={{
...outerSlots,
}}
/>;
<Snackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={ComponentTransition}
TransitionProps={CustomTransitionProps}
slots={{
root: 'div',
transition: SlotTransition,
}}
/>;

// should skip non MUI components
<NonMuiSnackbar
ClickAwayListenerProps={CustomListenerProps}
ContentProps={CustomContentProps}
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
/>;
Loading

0 comments on commit 4b74f87

Please sign in to comment.