Merge pull request #11333 from strapi/notification-fix

Migration-QA/ notification fix

packages/core/admin/admin/src/components/Notifications/Wrapper.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { Flex } from '@strapi/parts/Flex';
-
-const Wrapper = styled(Flex)`
-  position: fixed;
-  top: 46px;
-  right: 0;
-  left: 0;
-  z-index: 1100;
-`;
-
-export default Wrapper;

packages/core/admin/admin/src/components/Notifications/index.js

@@ -1,11 +1,9 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
-import NotificationsWrapper from './Wrapper';
 
 const Notifications = ({ children }) => {
   const [{ notifications }, dispatch] = useReducer(reducer, initialState);
@@ -19,17 +17,21 @@ const Notifications = ({ children }) => {
 
   return (
     <NotificationsProvider toggleNotification={displayNotification}>
-      <NotificationsWrapper justifyContent="space-around">
+      <Stack
-        <Stack size={notifications.length}>
+        left="50%"
+        marginLeft="-250px"
+        position="fixed"
+        size={2}
+        top={`${46 / 16}rem`}
+        width={`${500 / 16}rem`}
+        zIndex={10}
+      >
         {notifications.map(notification => {
           return (
-              <Box key={notification.id} style={{ width: 500 }}>
+            <Notification key={notification.id} dispatch={dispatch} notification={notification} />
-                <Notification dispatch={dispatch} notification={notification} />
-              </Box>
           );
         })}
       </Stack>
-      </NotificationsWrapper>
       {children}
     </NotificationsProvider>
   );

packages/core/admin/admin/src/components/Notifications/tests/index.test.js

@@ -30,24 +30,15 @@ describe('<Notifications />', () => {
 
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
-        display: -webkit-box;
+        margin-left: -250px;
-        display: -webkit-flex;
+        position: fixed;
-        display: -ms-flexbox;
+        left: 50%;
-        display: flex;
+        top: 2.875rem;
-        -webkit-flex-direction: row;
+        z-index: 10;
-        -ms-flex-direction: row;
+        width: 31.25rem;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c2 {
+      .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -57,30 +48,19 @@ describe('<Notifications />', () => {
         flex-direction: column;
       }
 
-      .c2 > * {
+      .c1 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c2 > * + * {
+      .c1 > * + * {
-        margin-top: 0px;
+        margin-top: 8px;
-      }
-
-      .c1 {
-        position: fixed;
-        top: 46px;
-        right: 0;
-        left: 0;
-        z-index: 1100;
       }
 
       <div
         class="c0 c1"
-      >
+        width="31.25rem"
-        <div
-          class="c2"
       />
-      </div>
     `);
   });
 

packages/core/admin/admin/src/tests/StrapiApp.test.js

@@ -15,24 +15,15 @@ describe('ADMIN | StrapiApp', () => {
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       .c0 {
-        display: -webkit-box;
+        margin-left: -250px;
-        display: -webkit-flex;
+        position: fixed;
-        display: -ms-flexbox;
+        left: 50%;
-        display: flex;
+        top: 2.875rem;
-        -webkit-flex-direction: row;
+        z-index: 10;
-        -ms-flex-direction: row;
+        width: 31.25rem;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c2 {
+      .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -42,30 +33,19 @@ describe('ADMIN | StrapiApp', () => {
         flex-direction: column;
       }
 
-      .c2 > * {
+      .c1 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c2 > * + * {
+      .c1 > * + * {
-        margin-top: 0px;
+        margin-top: 8px;
-      }
-
-      .c1 {
-        position: fixed;
-        top: 46px;
-        right: 0;
-        left: 0;
-        z-index: 1100;
       }
 
       <div
         class="c0 c1"
-      >
+        width="31.25rem"
-        <div
-          class="c2"
       />
-      </div>
     `);
   });