Skip to content

Commit

Permalink
[material-ui][SpeedDialAction] Add slots and slotProps (#45065)
Browse files Browse the repository at this point in the history
  • Loading branch information
sai6855 authored Feb 7, 2025
1 parent c2335e6 commit f8319d1
Show file tree
Hide file tree
Showing 14 changed files with 862 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2475,3 +2475,65 @@ The SpeedDial's `TransitionProps` prop was deprecated in favor of `slotProps.tra
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
```

## SpeedDialAction

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#speed-dial-action-props) below to migrate the code as described in the following sections:

```bash
npx @mui/codemod@latest deprecations/speed-dial-action-props <path>
```

### FabProps

The SpeedDialAction's `FabProps` prop was deprecated in favor of `slotProps.fab`:

```diff
<SpeedDialAction
- FabProps={CustomFabProps}
+ slotProps={{ fab: CustomFabProps }}
```

### TooltipClasses

The SpeedDialAction's `TooltipClasses` prop was deprecated in favor of `slotProps.tooltip.classes`:

```diff
<SpeedDialAction
- TooltipClasses={{ tooltip: 'foo' }}
+ slotProps={{ tooltip: { classes: { tooltip: 'foo' } } }}
/>
```

### tooltipPlacement

The SpeedDialAction's `tooltipPlacement` prop was deprecated in favor of `slotProps.tooltip.placement`:

```diff
<SpeedDialAction
- tooltipPlacement="top"
+ slotProps={{ tooltip: { placement: 'top' } }}
/>
```

### tooltipTitle

The SpeedDialAction's `tooltipTitle` prop was deprecated in favor of `slotProps.tooltip.title`:

```diff
<SpeedDialAction
- tooltipTitle="foo"
+ slotProps={{ tooltip: { title: 'foo' } }}
/>
```

### tooltipOpen

The SpeedDialAction's `tooltipOpen` prop was deprecated in favor of `slotProps.tooltip.open`:

```diff
<SpeedDialAction
- tooltipOpen
+ slotProps={{ tooltip: { open: true } }}
/>
```
86 changes: 64 additions & 22 deletions docs/pages/material-ui/api/speed-dial-action.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,106 @@
"props": {
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"delay": { "type": { "name": "number" }, "default": "0" },
"FabProps": { "type": { "name": "object" }, "default": "{}" },
"FabProps": {
"type": { "name": "object" },
"default": "{}",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.fab</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."
},
"icon": { "type": { "name": "node" } },
"id": { "type": { "name": "string" } },
"open": { "type": { "name": "bool" } },
"slotProps": {
"type": {
"name": "shape",
"description": "{ fab?: func<br>&#124;&nbsp;object, staticTooltip?: func<br>&#124;&nbsp;object, staticTooltipLabel?: func<br>&#124;&nbsp;object, tooltip?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
"description": "{ fab?: elementType, staticTooltip?: elementType, staticTooltipLabel?: elementType, tooltip?: 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 }
},
"TooltipClasses": { "type": { "name": "object" } },
"tooltipOpen": { "type": { "name": "bool" }, "default": "false" },
"TooltipClasses": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.tooltip.classes</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."
},
"tooltipOpen": {
"type": { "name": "bool" },
"default": "false",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.tooltip.open</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."
},
"tooltipPlacement": {
"type": {
"name": "enum",
"description": "'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'"
},
"default": "'left'"
"default": "'left'",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.tooltip.placement</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."
},
"tooltipTitle": { "type": { "name": "node" } }
"tooltipTitle": {
"type": { "name": "node" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.tooltip.title</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": "SpeedDialAction",
"imports": [
"import SpeedDialAction from '@mui/material/SpeedDialAction';",
"import { SpeedDialAction } from '@mui/material';"
],
"classes": [
"slots": [
{
"key": "fab",
"className": "MuiSpeedDialAction-fab",
"description": "Styles applied to the Fab component.",
"isGlobal": false
"name": "fab",
"description": "The component that renders the fab.",
"default": "Fab",
"class": "MuiSpeedDialAction-fab"
},
{
"name": "tooltip",
"description": "The component that renders the tooltip.",
"default": "Tooltip",
"class": null
},
{
"name": "staticTooltip",
"description": "The component that renders the static tooltip.",
"default": "'span'",
"class": "MuiSpeedDialAction-staticTooltip"
},
{
"name": "staticTooltipLabel",
"description": "The component that renders the static tooltip label.",
"default": "'span'",
"class": "MuiSpeedDialAction-staticTooltipLabel"
}
],
"classes": [
{
"key": "fabClosed",
"className": "MuiSpeedDialAction-fabClosed",
"description": "Styles applied to the Fab component if `open={false}`.",
"isGlobal": false
},
{
"key": "staticTooltip",
"className": "MuiSpeedDialAction-staticTooltip",
"description": "Styles applied to the root element if `tooltipOpen={true}`.",
"isGlobal": false
},
{
"key": "staticTooltipClosed",
"className": "MuiSpeedDialAction-staticTooltipClosed",
"description": "Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.",
"isGlobal": false
},
{
"key": "staticTooltipLabel",
"className": "MuiSpeedDialAction-staticTooltipLabel",
"description": "Styles applied to the static tooltip label if `tooltipOpen={true}`.",
"isGlobal": false
},
{
"key": "tooltipPlacementLeft",
"className": "MuiSpeedDialAction-tooltipPlacementLeft",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
"description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."
},
"open": { "description": "If <code>true</code>, the component is shown." },
"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 All @@ -24,32 +26,27 @@
"tooltipTitle": { "description": "Label to display in the tooltip." }
},
"classDescriptions": {
"fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" },
"fabClosed": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Fab component",
"conditions": "<code>open={false}</code>"
},
"staticTooltip": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>tooltipOpen={true}</code>"
},
"staticTooltipClosed": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>tooltipOpen={true}</code> and <code>open={false}</code>"
},
"staticTooltipLabel": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the static tooltip label",
"conditions": "<code>tooltipOpen={true}</code>"
},
"tooltipPlacementLeft": {
"description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;left&quot;``"
},
"tooltipPlacementRight": {
"description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;right&quot;``"
}
},
"slotDescriptions": {
"fab": "The component that renders the fab.",
"staticTooltip": "The component that renders the static tooltip.",
"staticTooltipLabel": "The component that renders the static tooltip label.",
"tooltip": "The component that renders the tooltip."
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './speed-dial-action-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
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;

movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDialAction',
propName: 'tooltipTitle',
slotName: 'tooltip',
slotPropName: 'title',
});

movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDialAction',
propName: 'tooltipPlacement',
slotName: 'tooltip',
slotPropName: 'placement',
});

movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDialAction',
propName: 'tooltipOpen',
slotName: 'tooltip',
slotPropName: 'open',
});

movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDialAction',
propName: 'TooltipClasses',
slotName: 'tooltip',
slotPropName: 'classes',
});

movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDialAction',
propName: 'FabProps',
slotName: 'fab',
});

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 './speed-dial-action-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'speed-dial-action-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,33 @@
import SpeedDialAction from '@mui/material/SpeedDialAction';
import { SpeedDialAction as MySpeedDialAction } from '@mui/material';

<SpeedDialAction tooltipTitle="test" />;
<SpeedDialAction tooltipOpen={true} />;
<SpeedDialAction tooltipPlacement="test" />;
<SpeedDialAction TooltipClasses={TooltipClasses} />;
<SpeedDialAction FabProps={FabProps} />;
<SpeedDialAction
TooltipClasses={TooltipClasses}
tooltipOpen={true}
tooltipPlacement="top"
tooltipTitle="test"
/>;
<SpeedDialAction
TooltipClasses={TooltipClasses}
tooltipOpen={true}
tooltipPlacement="top"
tooltipTitle="test"
FabProps={FabProps}
/>;
<MySpeedDialAction tooltipTitle="test" />;
<MySpeedDialAction tooltipOpen={true} />;
<MySpeedDialAction tooltipPlacement="test" />;
<MySpeedDialAction TooltipClasses={TooltipClasses} />;
<MySpeedDialAction FabProps={FabProps} />;
<MySpeedDialAction
TooltipClasses={TooltipClasses}
tooltipOpen={true}
tooltipPlacement="top"
tooltipTitle="test"
FabProps={FabProps}
/>;
Loading

0 comments on commit f8319d1

Please sign in to comment.