79271216

Date: 2024-12-11 09:55:52
Score: 1
Natty:
Report link

I've recently faced with the similar issue. While designer can easily move components in Figma or w/e you are dependent on MUI realisation. In this case you need to manipulate over MuiSpeedDial-root, MuiSpeedDial-actions and MuiButtonBase-root to achieve desired results.

So for my case it looks like so:

const actions = [
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.selectDate')}</Typography>
          <EventIcon />
        </Box>
      ),
      name: t('dashboard.selectDate'),
      onClick: () => {
        handleOpenDateModal();
        handleClose();
      }
    },
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.today')}</Typography>
          <CalendarTodayIcon />
        </Box>
      ),
      name: t('dashboard.today'),
      onClick: () => {
        handleSetMonth(getTodayIso());
        handleClose();
      }
    },
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.navigation.uploadInvoice')}</Typography>
          <UploadFileIcon />
        </Box>
      ),
      name: t('dashboard.navigation.uploadInvoice'),
      onClick: () => navigate(`/${ROUTING.INVOICE_UPLOAD}`)
    }
  ];
...

<StyledSpeedDial
          ariaLabel="SpeedDial controlled"
          icon={<SpeedDialIcon />}
          onClose={handleClose}
          onOpen={handleOpen}
          open={open}
        >
          {actions.map((action) => (
            <SpeedDialAction
              TooltipClasses={{
                tooltip: 'speed-action-tooltip-hide'
              }}
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={action.onClick}
            />
          ))}
        </StyledSpeedDial>

Styled components saved in separate file:

export const StyledSpeedDial = styled(SpeedDial)<SpeedDialProps>(({ theme }) => ({
  position: 'absolute',
  bottom: 20,
  right: 16,
  zIndex: 2500,
  alignItems: 'end',
  '& .MuiSpeedDial-actions': {
    marginLeft: '-50px',
    '& .MuiButtonBase-root': {
      color: theme.colors.contrast,
      height: '40px',
      width: 'fit-content',
      alignSelf: 'flex-end',
      padding: '8px 16px',
      borderRadius: '100px',
      marginRight: 0,
      '& .MuiBox-root': {
        alignItems: 'center'
      }
    }
  }
}));

Don't kick me too hard on those negative margins. That's what worked for me. And I had to override height and width this way, because it's the most convenient way to fit that text.

I didn't found out more elegant way, if you do, please let me know. P.S. this is how it looks Open state

Reasons:
  • Whitelisted phrase (-1): worked for me
  • RegEx Blacklisted phrase (2.5): please let me know
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Roman Olly