Unable to change Sing-in/Sing-out label while sending localeText to <Account/>

[NicoMartinic]

import React from 'react';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import { SidebarFooterProps } from '@toolpad/core/DashboardLayout';
import {  Account,  AccountPreview,  AccountPopoverFooter,  SignOutButton,  AccountPreviewProps } from '@toolpad/core/Account';
import { Button } from '@mui/material';
import { useNavigate } from 'react-router';
import { Person } from "@mui/icons-material";

function AccountSidebarPreview(props: AccountPreviewProps & { mini: boolean }) {
  const { handleClick, open, mini } = props;
  return (
    <Stack direction="column" p={0}>
      <Divider />
      <AccountPreview
        variant={mini ? 'condensed' : 'expanded'}
        handleClick={handleClick}
        open={open}
      />
    </Stack>
  );
}

function SidebarFooterAccountPopover() {
    const navigate = useNavigate();

    return (
        <Stack direction="column">
            <AccountPopoverFooter>
                <Button
                    size="medium"
                    variant="outlined"
                    startIcon={<Person />}
                    onClick={() => navigate("/profile")}
                    sx={{
                        textTransform: "none",
                    }}
                >
                    Editar Perfil
                </Button>
            </AccountPopoverFooter>

            <AccountPopoverFooter>
                <SignOutButton size="medium" />
            </AccountPopoverFooter>
        </Stack>
    );
}

const createPreviewComponent = (mini: boolean) => {
  function PreviewComponent(props: AccountPreviewProps) {
    return <AccountSidebarPreview {...props} mini={mini} />;
  }
  return PreviewComponent;
};

export default function SidebarFooterAccount({ mini }: SidebarFooterProps) {
  const PreviewComponent = React.useMemo(() => createPreviewComponent(mini), [mini]);
  return (
    <Account
      localeText={{
        signInLabel: 'Iniciar sesión', 
        signOutLabel: 'Cerrar sesión',
      }}
      slots={{
        preview: PreviewComponent,
        popoverContent: SidebarFooterAccountPopover,
      }}
      slotProps={{
        popover: {
          transformOrigin: { horizontal: 'left', vertical: 'bottom' },
          anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
          disableAutoFocus: true,
          slotProps: {
            paper: {
              elevation: 0,
              sx: {
                overflow: 'visible',
                filter: (theme) =>
                  `drop-shadow(0px 2px 8px ${theme.palette.mode === 'dark' 
                    ? 'rgba(255,255,255,0.10)' 
                    : 'rgba(0,0,0,0.32)'})`,
                mt: 1,
                '&::before': {
                  content: '""',
                  display: 'block',
                  position: 'absolute',
                  bottom: 10,
                  left: 0,
                  width: 10,
                  height: 10,
                  bgcolor: 'background.paper',
                  transform: 'translate(-50%, -50%) rotate(45deg)',
                  zIndex: 0,
                },
              },
            },
          },
        },
      }}
    />
  );
}

App.tsx

import React from 'react';
import { Outlet } from 'react-router';
import SidebarFooterAccount from './components/dashboard/Account';
import { ReactRouterAppProvider } from '@toolpad/core/react-router';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { type Session } from '@toolpad/core/AppProvider';
import { SessionContext } from './components/context/SessionContext';
import NAVIGATION from './components/dashboard/Navigation';
import BRANDING from './components/dashboard/Branding';
import { useNavigate } from 'react-router';

export default function App() {
  const navigate = useNavigate();
  const storedUser = localStorage.getItem('user');
  const storedSession = storedUser ? { user: JSON.parse(storedUser) } : null;
  const [session, setSession] = React.useState<Session | null>(storedSession);
  const sessionContextValue = React.useMemo(() => ({ session, setSession }), [session]);

  const authentication = React.useMemo(() => ({
    signIn: () => {
      navigate('/login');
    },
    signOut: () => {
      localStorage.removeItem('user');
      setSession(null);
    },
  }), [navigate]);

  return (
    <SessionContext.Provider value={sessionContextValue}>
      <ReactRouterAppProvider
        navigation={NAVIGATION}
        authentication={authentication}
        session={session}
        branding={BRANDING}
      >
        <DashboardLayout
          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
        >
          <Outlet />
        </DashboardLayout>
      </ReactRouterAppProvider>
    </SessionContext.Provider>
  );
}

package.json

  "dependencies": {
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@mui/icons-material": "^6",
    "@mui/material": "^6",
    "@toolpad/core": "^0.12.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7",
    "axios": "^1.7.7"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@types/node": "^22.13.4",
    "@vitejs/plugin-react": "^4.3.2",
    "typescript": "^5",
    "vite": "^5.4.8",
    "@eslint/js": "^9.21.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript-eslint": "^8.24.1"
  }

[prakhargupta1]

Can you try again after upgrading @toolpad/core to v0.12.1? Support for localText was released last week.

[NicoMartinic]

I also needed to change from:

localeText={{
        signInLabel: 'Iniciar sesión', 
        signOutLabel: 'Cerrar sesión',
      }}

to:

localeText={{
        accountSignInLabel: 'Iniciar sesión', 
        accountSignOutLabel: 'Cerrar sesión',
      }}

But in the examples from the documentation still called as signInLabel/signOutLabel:

https://mui.com/toolpad/core/react-account/

https://codesandbox.io/embed/qg68sz?module=/src/Demo.tsx&fontsize=12

[prakhargupta1]

Got it. cc: @bharatkashyap

[bharatkashyap]

I think the docs demos show the correct labels now: https://mui.com/toolpad/core/react-account/#localization, correct me if I'm wrong