Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Ant Design Notifications message and description fields are swapped. #6524

Open
sqwxl opened this issue Nov 26, 2024 · 2 comments
Open
Labels
bug Something isn't working

Comments

@sqwxl
Copy link

sqwxl commented Nov 26, 2024

Describe the bug

The useNotificationProvider hook has swapped the description and message fields.

For example, a simple call like this:

import { useNotification } from "@refinedev/core";

//...

    const { open } = useNotification();

    useEffect(() => {
        open?.({
            type: "success",
            message: "Message",
            description: "Description"
        });
    });

Yields this notification:
image

Which is the opposite of the expected output, which should look like this:
image

As per the Ant Design Notification API, the message property corresponds to the notifications "title", whereas the description property is the "content". This is matches Refine's own specs for OpenNotificationParams.

This bug also affects indirect notification requests like the successNotification and errorNotification props of mutation parameters.

Steps To Reproduce

  1. Create a vanilla Antd app and use the following for App.tsx
import { Refine, useNotification } from "@refinedev/core";
import { useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp } from "antd";
import { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
	return (
		<BrowserRouter>
			<AntdApp>
				<Refine notificationProvider={useNotificationProvider}>
					<Routes>
						<Route index element={<Notif />} />
					</Routes>
				</Refine>
			</AntdApp>
		</BrowserRouter>
	);
}

export default App;

export const Notif = () => {
	const { open } = useNotification();

	useEffect(() =>
		open?.({
			type: "success",
			message: "This is the title",
			description: "This is the description",
		}),
	);

	return null;
};
  1. Run npm run dev and open the page.
  2. Each time the page is refreshed, a notification will be displayed with swapped elements:
    image

Expected behavior

The props shouldn't be swapped.

Packages

  • @refinedev/antd 5.44.0
  • @refinedev/core 4.56.0

Additional Context

No response

@sqwxl sqwxl added the bug Something isn't working label Nov 26, 2024
@aress31
Copy link

aress31 commented Nov 27, 2024

The same issue affects the mui package - and most likely chakra and mantine too.

@alicanerdurmaz
Copy link
Member

Hello @sqwxl, thanks for the issue.

We would love to fix this bug, but this change causes a breaking change and requires a major release. We don't want to bump the major version just for this bug. We will address this fix when we plan a major release for the UI packages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants