absent-sapphire•10mo ago

Refine 3.x with Antd4 List.extra not appearing correctly

I am trying to update my Antd from 3.x to 4.x with Refine v3 and the page header extra is missing layout and styles. Still looks fine on show and edit pages. On list pages, the buttons are not appearing side-by-side and instead stack vertically. If I wrap the entire extra in a PageHeader component it looks right but I think then I'll have a PageHeader within a PageHeader.

3 Replies

kapa.ai•10mo ago

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're experiencing issues with the layout and styles of your page header after updating Ant Design from 3.x to 4.x in your Refine project. This could be due to some changes in the Ant Design and Refine packages. In the migration from Refine v3 to v4, the actionButtons and pageHeaderProps props were deprecated and have been removed from the <List>, <Create>, <Edit>, and <Show> components. Instead, you should use the headerButtons and headerProps props. This could be the reason why your buttons are not appearing side-by-side on list pages. Here's how you should update your components: List.tsx

- <List actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <List headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <List actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <List headerButtons={actionButtons} headerProps={pageHeaderProps}>

Create.tsx

- <Create actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Create headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Create actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Create headerButtons={actionButtons} headerProps={pageHeaderProps}>

Show.tsx

- <Show actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Show headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Show actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Show headerButtons={actionButtons} headerProps={pageHeaderProps}>

Edit.tsx

- <Edit actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Edit headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Edit actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>  
+ <Edit headerButtons={actionButtons} headerProps={pageHeaderProps}>

(Source: Refine Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/)) Also, note that the <PageHeader> component has been moved into @ant-design/pro-components in Ant Design v5. Refine is using <PageHeader> in <List>, <Create>, <Edit>, <Show> components and added as a dependency. You don't need to install @ant-design/pro-components package manually. (Source: Refine Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/)) If you're still experiencing issues, it might be helpful to review the Ant Design's own migration guide (https://ant.design/docs/react/migration-v5) for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below

absent-sapphire•10mo ago

If I move it to headerButtons, it works