@strapi/admin 4.7.0 → 4.7.2-exp.24dd7d95972fa822bf43e9b095b51027402c229e

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
+import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';
@@ -26,7 +26,7 @@ const FormTransferTokenContainer = ({
       paddingLeft={7}
       paddingRight={7}
     >
-      <Stack spacing={4}>
+      <Flex direction="column" alignItems="stretch" gap={4}>
         <Typography variant="delta" as="h2">
           {formatMessage({
             id: 'global.details',
@@ -60,7 +60,7 @@ const FormTransferTokenContainer = ({
             />
           </GridItem>
         </Grid>
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js

@@ -14,7 +14,7 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { ContentLayout, Main, Stack } from '@strapi/design-system';
+import { ContentLayout, Main, Flex } from '@strapi/design-system';
 import { formatAPIErrors } from '../../../../../utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
@@ -194,7 +194,7 @@ const TransferTokenCreateView = () => {
                 regenerateUrl="/admin/transfer/tokens/"
               />
               <ContentLayout>
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   {Boolean(transferToken?.name) && (
                     <TokenBox token={transferToken?.accessKey} tokenType={TRANSFER_TOKEN_TYPE} />
                   )}
@@ -206,7 +206,7 @@ const TransferTokenCreateView = () => {
                     values={values}
                     transferToken={transferToken}
                   />
-                </Stack>
+                </Flex>
               </ContentLayout>
             </Form>
           );

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -28,7 +28,7 @@ import {
   ContentLayout,
   Typography,
   Main,
-  Stack,
+  Flex,
 } from '@strapi/design-system';
 import { ArrowLeft, Check } from '@strapi/icons';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
@@ -205,7 +205,7 @@ const EditPage = ({ canUpdate }) => {
                     <MagicLink registrationToken={data.registrationToken} />
                   </Box>
                 )}
-                <Stack spacing={7}>
+                <Flex direction="column" alignItems="stretch" gap={7}>
                   <Box
                     background="neutral0"
                     hasRadius
@@ -215,7 +215,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.details',
@@ -239,7 +239,7 @@ const EditPage = ({ canUpdate }) => {
                           });
                         })}
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
                   <Box
                     background="neutral0"
@@ -250,7 +250,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'global.roles',
@@ -267,9 +267,9 @@ const EditPage = ({ canUpdate }) => {
                           />
                         </GridItem>
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
-                </Stack>
+                </Flex>
               </ContentLayout>
             </Form>
           );

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -12,7 +12,7 @@ import {
   Crumb,
   Box,
   Button,
-  Stack,
+  Flex,
   Typography,
 } from '@strapi/design-system';
 
@@ -128,7 +128,7 @@ const ModalForm = ({ queryName, onToggle }) => {
           return (
             <Form>
               <ModalBody>
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   {currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
                   <Box>
                     <Typography variant="beta" as="h2">
@@ -138,7 +138,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                       })}
                     </Typography>
                     <Box paddingTop={4}>
-                      <Stack spacing={1}>
+                      <Flex direction="column" alignItems="stretch" gap={1}>
                         <Grid gap={5}>
                           {layout.map((row) => {
                             return row.map((input) => {
@@ -156,7 +156,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                             });
                           })}
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                   </Box>
                   <Box>
@@ -193,7 +193,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                       </Grid>
                     </Box>
                   </Box>
-                </Stack>
+                </Flex>
               </ModalBody>
               <ModalFooter
                 startActions={

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FieldLabel, Stack, Typography } from '@strapi/design-system';
+import { FieldLabel, Flex, Typography } from '@strapi/design-system';
 import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -97,7 +97,7 @@ const EventInput = ({ isDraftAndPublish }) => {
   };
 
   return (
-    <Stack spacing={1}>
+    <Flex direction="column" alignItems="stretch" gap={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.events',
@@ -152,7 +152,7 @@ const EventInput = ({ isDraftAndPublish }) => {
           })}
         </tbody>
       </StyledTable>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js

@@ -7,7 +7,6 @@ import {
   Grid,
   GridItem,
   Flex,
-  Stack,
   TextInput,
   TextButton,
 } from '@strapi/design-system';
@@ -20,7 +19,7 @@ const HeadersInput = () => {
   const { values, errors } = useFormikContext();
 
   return (
-    <Stack spacing={1}>
+    <Flex direction="column" alignItems="stretch" gap={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.headers',
@@ -112,7 +111,7 @@ const HeadersInput = () => {
           )}
         />
       </Box>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Check, Cross, Loader } from '@strapi/icons';
-import { Box, Flex, Typography, Stack, Grid, GridItem } from '@strapi/design-system';
+import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(
@@ -23,34 +23,34 @@ const Status = ({ isPending, statusCode }) => {
 
   if (isPending) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Loader} />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
   if (statusCode >= 200 && statusCode < 300) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Check} color="success700" />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
   if (statusCode >= 300) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Cross} color="danger700" />
         <Typography>
           {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
@@ -109,12 +109,12 @@ const CancelButton = ({ onCancel }) => {
   return (
     <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
-        <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+        <Flex gap={2} alignItems="center">
           <Typography textColor="neutral400">
             {formatMessage({ id: 'Settings.webhooks.trigger.cancel', defaultMessage: 'cancel' })}
           </Typography>
           <Icon as={Cross} color="neutral400" />
-        </Stack>
+        </Flex>
       </button>
     </Flex>
   );

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -7,7 +7,7 @@ import {
   HeaderLayout,
   Box,
   Button,
-  Stack,
+  Flex,
   TextInput,
   Grid,
   GridItem,
@@ -51,7 +51,7 @@ const WebhookForm = ({
         <Form noValidate>
           <HeaderLayout
             primaryAction={
-              <Stack horizontal spacing={2}>
+              <Flex gap={2}>
                 <Button
                   onClick={() => {
                     triggerWebhook();
@@ -73,7 +73,7 @@ const WebhookForm = ({
                     defaultMessage: 'Save',
                   })}
                 </Button>
-              </Stack>
+              </Flex>
             }
             title={
               isCreating
@@ -93,7 +93,7 @@ const WebhookForm = ({
             }
           />
           <ContentLayout>
-            <Stack spacing={4}>
+            <Flex direction="column" alignItems="stretch" gap={4}>
               {showTriggerResponse && (
                 <div className="trigger-wrapper">
                   <TriggerContainer
@@ -104,7 +104,7 @@ const WebhookForm = ({
                 </div>
               )}
               <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <Grid gap={6}>
                     <GridItem col={6}>
                       <Field
@@ -133,9 +133,9 @@ const WebhookForm = ({
                   </Grid>
                   <HeadersInput />
                   <EventInput isDraftAndPublish={isDraftAndPublishEvents} />
-                </Stack>
+                </Flex>
               </Box>
-            </Stack>
+            </Flex>
           </ContentLayout>
         </Form>
       )}