From 4a8fb4d3ad1de3eb8285312a96e49280cfd0e7f3 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 20 Jan 2025 15:47:14 +0530 Subject: [PATCH 01/27] add tooltip slot --- .../src/SpeedDialAction/SpeedDialAction.d.ts | 78 ++++++++++++++++++- .../src/SpeedDialAction/SpeedDialAction.js | 40 ++++++---- 2 files changed, 102 insertions(+), 16 deletions(-) diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts index 8c288ca4b7de00..3fbe1ffd1bdc99 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts @@ -5,8 +5,81 @@ import { InternalStandardProps as StandardProps } from '..'; import { FabProps } from '../Fab'; import { TooltipProps } from '../Tooltip'; import { SpeedDialActionClasses } from './speedDialActionClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -export interface SpeedDialActionProps extends StandardProps, 'children'> { +export interface SpeedDialActionSlots { + /** + * The component that renders the fab. + * @default Fab + */ + fab?: React.ElementType; + /** + * The component that renders the tooltip. + * @default Tooltip + */ + tooltip?: React.ElementType; + /** + * The component that renders the static tooltip. + * @default 'span' + */ + staticTooltip?: React.ElementType; + /** + * The component that renders the static tooltip label. + * @default 'span' + */ + staticTooltipLabel?: React.ElementType; +} + +export interface SpeedDialActionFabSlotPropsOverrides {} +export interface SpeedDialActionTooltipSlotPropsOverrides {} +export interface SpeedDialActionStaticTooltipSlotPropsOverrides {} +export interface SpeedDialActionStaticTooltipLabelSlotPropsOverrides {} + +export type SpeedDialActionSlotsAndSlotProps = CreateSlotsAndSlotProps< + SpeedDialActionSlots, + { + /** + * Props forwarded to the fab slot. + * By default, the avaible props are based on the [Fab](https://mui.com/material-ui/api/fab/#props) component. + */ + fab: SlotProps< + React.ElementType, + SpeedDialActionFabSlotPropsOverrides, + SpeedDialActionOwnerState + >; + /** + * Props forwarded to the tooltip slot. + * By default, the avaible props are based on the [Tooltip](https://mui.com/material-ui/api/tooltip/#props) component. + */ + tooltip: SlotProps< + React.ElementType, + SpeedDialActionTooltipSlotPropsOverrides, + SpeedDialActionOwnerState + >; + /** + * Props forwarded to the static tooltip slot. + * By default, the avaible props are based on a span element. + */ + staticTooltip: SlotProps< + 'span', + SpeedDialActionStaticTooltipSlotPropsOverrides, + SpeedDialActionOwnerState + >; + /** + * Props forwarded to the static tooltip label slot. + * By default, the avaible props are based on a span element. + */ + staticTooltipLabel: SlotProps< + 'span', + SpeedDialActionStaticTooltipLabelSlotPropsOverrides, + SpeedDialActionOwnerState + >; + } +>; + +export interface SpeedDialActionProps + extends Omit, 'children'>, 'slotProps' | 'slots'>, + SpeedDialActionSlotsAndSlotProps { /** * Override or extend the styles applied to the component. */ @@ -61,3 +134,6 @@ export interface SpeedDialActionProps extends StandardProps {} diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index 340633f5617e94..af668df98d6105 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -12,6 +12,7 @@ import Fab from '../Fab'; import Tooltip from '../Tooltip'; import capitalize from '../utils/capitalize'; import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses'; +import useSlot from '../utils/useSlot'; const useUtilityClasses = (ownerState) => { const { open, tooltipPlacement, classes } = ownerState; @@ -155,6 +156,8 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) tooltipOpen: tooltipOpenProp = false, tooltipPlacement = 'left', tooltipTitle, + slots = {}, + slotsProps = {}, ...other } = props; @@ -173,6 +176,27 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) const transitionStyle = { transitionDelay: `${delay}ms` }; + const externalForwardedProps = { + slots, + slotsProps, + }; + + const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', { + elementType: Tooltip, + externalForwardedProps, + ownerState, + ref, + additionalProps: { + title: tooltipTitle, + placement: tooltipPlacement, + onClose: handleTooltipClose, + onOpen: handleTooltipOpen, + open: open && tooltipOpen, + classes: TooltipClasses, + id, + }, + }); + const fab = ( - {fab} - - ); + return {fab}; }); SpeedDialAction.propTypes /* remove-proptypes */ = { From 39f887a4fb36055b21be73e38b553228bbe0fac3 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 20 Jan 2025 15:47:30 +0530 Subject: [PATCH 02/27] add tooltip slot --- .../mui-material/src/SpeedDialAction/SpeedDialAction.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index af668df98d6105..33207437715d51 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -185,6 +185,7 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) elementType: Tooltip, externalForwardedProps, ownerState, + shouldForwardComponentProp: true, ref, additionalProps: { title: tooltipTitle, @@ -242,7 +243,11 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) setTooltipOpen(false); } - return {fab}; + return ( + + {fab} + + ); }); SpeedDialAction.propTypes /* remove-proptypes */ = { From 84277f549aedbcd3c2765a81cf447fab2d854d1c Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 20 Jan 2025 16:28:11 +0530 Subject: [PATCH 03/27] add fab slot --- .../test-utils/src/describeConformance.tsx | 2 +- .../src/SpeedDialAction/SpeedDialAction.js | 42 ++++++++++--------- .../SpeedDialAction/SpeedDialAction.test.js | 11 +++++ 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 943c71e214fecd..96e1490e24c403 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -333,7 +333,7 @@ function testSlotsProp( )); forEachSlot(slots, (slotName, slotOptions) => { - it(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, async () => { + it.only(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, async () => { if (!render) { throwMissingPropError('render'); } diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index 33207437715d51..218b8b16052b72 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -157,7 +157,7 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) tooltipPlacement = 'left', tooltipTitle, slots = {}, - slotsProps = {}, + slotProps = {}, ...other } = props; @@ -178,13 +178,32 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) const externalForwardedProps = { slots, - slotsProps, + slotProps: { + fab: FabProps, + ...slotProps, + }, }; + const [FabSlot, fabSlotProps] = useSlot('fab', { + elementType: SpeedDialActionFab, + externalForwardedProps, + ownerState, + shouldForwardComponentProp: true, + className: clsx(classes.fab, className), + additionalProps: { + style: { + ...transitionStyle, + ...FabProps.style, + }, + tabIndex: -1, + role: 'menuitem', + size: 'small', + }, + }); + const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', { elementType: Tooltip, externalForwardedProps, - ownerState, shouldForwardComponentProp: true, ref, additionalProps: { @@ -198,22 +217,7 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) }, }); - const fab = ( - - {icon} - - ); + const fab = {icon}; if (tooltipOpenProp) { return ( diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js index a0bf7d80df823f..b2bb729a71e4c0 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js @@ -7,6 +7,10 @@ import { fabClasses } from '@mui/material/Fab'; import SpeedDialAction, { speedDialActionClasses as classes } from '@mui/material/SpeedDialAction'; import describeConformance from '../../test/describeConformance'; +const CustomButton = React.forwardRef(({ ownerState, ...props }, ref) => ( +