@strapi/plugin-users-permissions 5.0.0-beta.5 → 5.0.0-beta.7

package/admin/src/components/BoundRoute/index.jsx

@@ -5,7 +5,7 @@ import map from 'lodash/map';
 import tail from 'lodash/tail';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import getMethodColor from './getMethodColor';
 
@@ -24,7 +24,7 @@ function BoundRoute({ route }) {
 
   return (
     <Flex direction="column" alignItems="stretch" gap={2}>
-      <Typography variant="delta" as="h3">
+      <Typography variant="delta" tag="h3">
         {formatMessage({
           id: 'users-permissions.BoundRoute.title',
           defaultMessage: 'Bound route to',

package/admin/src/components/FormModal/Input/index.jsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { TextInput, ToggleInput } from '@strapi/design-system';
+import { TextInput, Toggle, Field } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -41,25 +41,26 @@ const Input = ({
 
   if (type === 'bool') {
     return (
-      <ToggleInput
-        aria-label={name}
-        checked={value}
-        disabled={disabled}
-        hint={hint}
-        label={label}
-        name={name}
-        offLabel={formatMessage({
-          id: 'app.components.ToggleCheckbox.off-label',
-          defaultMessage: 'Off',
-        })}
-        onLabel={formatMessage({
-          id: 'app.components.ToggleCheckbox.on-label',
-          defaultMessage: 'On',
-        })}
-        onChange={(e) => {
-          onChange({ target: { name, value: e.target.checked } });
-        }}
-      />
+      <Field.Root hint={hint} name={name}>
+        <Field.Label>{label}</Field.Label>
+        <Toggle
+          aria-label={name}
+          checked={value}
+          disabled={disabled}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'Off',
+          })}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'On',
+          })}
+          onChange={(e) => {
+            onChange({ target: { name, value: e.target.checked } });
+          }}
+        />
+        <Field.Hint />
+      </Field.Root>
     );
   }
 
@@ -73,17 +74,17 @@ const Input = ({
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <TextInput
-      aria-label={name}
-      disabled={disabled}
-      error={errorMessage}
-      label={label}
-      name={name}
-      onChange={onChange}
-      placeholder={formattedPlaceholder}
-      type={type}
-      value={inputValue}
-    />
+    <Field.Root error={errorMessage} name={name}>
+      <Field.Label>{label}</Field.Label>
+      <TextInput
+        disabled={disabled}
+        onChange={onChange}
+        placeholder={formattedPlaceholder}
+        type={type}
+        value={inputValue}
+      />
+      <Field.Error />
+    </Field.Root>
   );
 };
 

package/admin/src/components/FormModal/index.jsx

@@ -16,7 +16,7 @@ import {
   ModalHeader,
   ModalLayout,
 } from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Breadcrumbs, Crumb } from '@strapi/design-system';
 import { Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';

package/admin/src/components/Permissions/PermissionRow/CheckboxWrapper.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

package/admin/src/components/Permissions/PermissionRow/SubCategory.jsx

@@ -13,7 +13,7 @@ import { Cog as CogIcon } from '@strapi/icons';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';
 
@@ -101,7 +101,7 @@ const SubCategory = ({ subCategory }) => {
                     onClick={() => onSelectedAction(action.name)}
                     style={{ display: 'inline-flex', alignItems: 'center' }}
                   >
-                    <VisuallyHidden as="span">
+                    <VisuallyHidden tag="span">
                       {formatMessage(
                         {
                           id: 'app.utils.show-bound-route',

package/admin/src/components/Policies/index.jsx

@@ -40,13 +40,13 @@ const Policies = () => {
         </Flex>
       ) : (
         <Flex direction="column" alignItems="stretch" gap={2}>
-          <Typography variant="delta" as="h3">
+          <Typography variant="delta" tag="h3">
             {formatMessage({
               id: 'users-permissions.Policies.header.title',
               defaultMessage: 'Advanced settings',
             })}
           </Typography>
-          <Typography as="p" textColor="neutral600">
+          <Typography tag="p" textColor="neutral600">
             {formatMessage({
               id: 'users-permissions.Policies.header.hint',
               defaultMessage:

package/admin/src/components/UsersPermissions/index.jsx

@@ -65,13 +65,13 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
         <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
           <Flex direction="column" alignItems="stretch" gap={6}>
             <Flex direction="column" alignItems="stretch" gap={2}>
-              <Typography variant="delta" as="h2">
+              <Typography variant="delta" tag="h2">
                 {formatMessage({
                   id: getTrad('Plugins.header.title'),
                   defaultMessage: 'Permissions',
                 })}
               </Typography>
-              <Typography as="p" textColor="neutral600">
+              <Typography tag="p" textColor="neutral600">
                 {formatMessage({
                   id: getTrad('Plugins.header.description'),
                   defaultMessage: 'Only actions bound by a route are listed below.',

package/admin/src/pages/AdvancedSettings/index.jsx

@@ -1,16 +1,6 @@
 import React from 'react';
 
-import {
-  Box,
-  Button,
-  ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  Typography,
-  useNotifyAT,
-} from '@strapi/design-system';
+import { Box, Button, Flex, Grid, GridItem, Typography, useNotifyAT } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
   useAPIErrorHandler,
@@ -20,8 +10,8 @@ import {
   useNotification,
   useFetchClient,
   useRBAC,
+  Layouts,
 } from '@strapi/strapi/admin';
-
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -133,7 +123,7 @@ const AdvancedSettingsPage = () => {
         {({ values, isSubmitting, modified }) => {
           return (
             <>
-              <HeaderLayout
+              <Layouts.Header
                 title={formatMessage({
                   id: getTrad('HeaderNav.link.advancedSettings'),
                   defaultMessage: 'Advanced Settings',
@@ -150,7 +140,7 @@ const AdvancedSettingsPage = () => {
                   </Button>
                 }
               />
-              <ContentLayout>
+              <Layouts.Content>
                 <Box
                   background="neutral0"
                   hasRadius
@@ -161,7 +151,7 @@ const AdvancedSettingsPage = () => {
                   paddingRight={7}
                 >
                   <Flex direction="column" alignItems="stretch" gap={4}>
-                    <Typography variant="delta" as="h2">
+                    <Typography variant="delta" tag="h2">
                       {formatMessage({
                         id: 'global.settings',
                         defaultMessage: 'Settings',
@@ -207,7 +197,7 @@ const AdvancedSettingsPage = () => {
                     </Grid>
                   </Flex>
                 </Box>
-              </ContentLayout>
+              </Layouts.Content>
             </>
           );
         }}

package/admin/src/pages/EmailTemplates/components/EmailForm.jsx

@@ -8,8 +8,9 @@ import {
   ModalFooter,
   ModalHeader,
   ModalLayout,
+  Breadcrumbs,
+  Crumb,
 } from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
 import { Form, InputRenderer } from '@strapi/strapi/admin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';

package/admin/src/pages/EmailTemplates/components/EmailTable.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {
-  Icon,
   IconButton,
   Table,
   Tbody,
@@ -12,7 +11,7 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Check, Pencil, Refresh } from '@strapi/icons';
+import { Check, Pencil, ArrowClockwise as Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -54,14 +53,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
       <Tbody>
         <Tr onClick={() => onEditClick('reset_password')}>
           <Td>
-            <Icon>
-              <Refresh
-                aria-label={formatMessage({
-                  id: 'global.reset-password',
-                  defaultMessage: 'Reset password',
-                })}
-              />
-            </Icon>
+            <Refresh
+              aria-label={formatMessage({
+                id: 'global.reset-password',
+                defaultMessage: 'Reset password',
+              })}
+            />
           </Td>
           <Td>
             <Typography>
@@ -85,14 +82,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
         <Tr onClick={() => onEditClick('email_confirmation')}>
           <Td>
-            <Icon>
-              <Check
-                aria-label={formatMessage({
-                  id: getTrad('Email.template.email_confirmation'),
-                  defaultMessage: 'Email address confirmation',
-                })}
-              />
-            </Icon>
+            <Check
+              aria-label={formatMessage({
+                id: getTrad('Email.template.email_confirmation'),
+                defaultMessage: 'Email address confirmation',
+              })}
+            />
           </Td>
           <Td>
             <Typography>

package/admin/src/pages/EmailTemplates/index.jsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import { useTracking } from '@strapi/admin/strapi-admin';
-import { ContentLayout, HeaderLayout, useNotifyAT } from '@strapi/design-system';
+import { useNotifyAT } from '@strapi/design-system';
 import {
   Page,
   useAPIErrorHandler,
   useNotification,
   useFetchClient,
   useRBAC,
+  Layouts,
 } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -125,13 +126,13 @@ const EmailTemplatesPage = () => {
           }
         )}
       </Page.Title>
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),
           defaultMessage: 'Email templates',
         })}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
         {isModalOpen && (
           <EmailForm
@@ -140,7 +141,7 @@ const EmailTemplatesPage = () => {
             onSubmit={handleSubmit}
           />
         )}
-      </ContentLayout>
+      </Layouts.Content>
     </Page.Main>
   );
 };

package/admin/src/pages/Providers/index.jsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
 
-import { useTracking } from '@strapi/admin/strapi-admin';
+import { useTracking, Layouts } from '@strapi/admin/strapi-admin';
 import {
-  ContentLayout,
-  HeaderLayout,
   IconButton,
-  Layout,
   Table,
   Tbody,
   Td,
@@ -147,7 +144,7 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -160,13 +157,13 @@ export const ProvidersPage = () => {
         )}
       </Page.Title>
       <Page.Main>
-        <HeaderLayout
+        <Layouts.Header
           title={formatMessage({
             id: getTrad('HeaderNav.link.providers'),
             defaultMessage: 'Providers',
           })}
         />
-        <ContentLayout>
+        <Layouts.Content>
           <Table colCount={3} rowCount={providers.length + 1}>
             <Thead>
               <Tr>
@@ -233,7 +230,7 @@ export const ProvidersPage = () => {
               ))}
             </Tbody>
           </Table>
-        </ContentLayout>
+        </Layouts.Content>
       </Page.Main>
       <FormModal
         initialData={data[providerToEditName]}
@@ -251,7 +248,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layout>
+    </Layouts.Root>
   );
 };
 

package/admin/src/pages/Roles/pages/CreatePage.jsx

@@ -2,18 +2,17 @@ import * as React from 'react';
 
 import {
   Button,
-  ContentLayout,
   Flex,
   Grid,
   GridItem,
-  HeaderLayout,
   Main,
   Textarea,
   TextInput,
   Typography,
+  Field,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import { Page, useTracking, useNotification, useFetchClient } from '@strapi/strapi/admin';
+import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
@@ -85,7 +84,7 @@ export const CreatePage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
                 !isLoadingPlugins && (
                   <Button type="submit" loading={mutation.isLoading} startIcon={<Check />}>
@@ -105,7 +104,7 @@ export const CreatePage = () => {
                 defaultMessage: 'Define the rights given to the role',
               })}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -119,7 +118,7 @@ export const CreatePage = () => {
                 shadow="filterShadow"
               >
                 <Flex direction="column" alignItems="stretch">
-                  <Typography variant="delta" as="h2">
+                  <Typography variant="delta" tag="h2">
                     {formatMessage({
                       id: getTrad('EditPage.form.roles'),
                       defaultMessage: 'Role details',
@@ -128,31 +127,28 @@ export const CreatePage = () => {
 
                   <Grid gap={4}>
                     <GridItem col={6}>
-                      <TextInput
+                      <Field.Root
                         name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
                         error={
                           errors?.name
                             ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
                             : false
                         }
                         required
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                     <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -162,7 +158,16 @@ export const CreatePage = () => {
                             : false
                         }
                         required
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                   </Grid>
                 </Flex>
@@ -175,7 +180,7 @@ export const CreatePage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>

package/admin/src/pages/Roles/pages/EditPage.jsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 
 import {
-  ContentLayout,
-  HeaderLayout,
   Main,
   Button,
   Flex,
@@ -11,6 +9,7 @@ import {
   Typography,
   GridItem,
   Grid,
+  Field,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
@@ -19,6 +18,7 @@ import {
   useAPIErrorHandler,
   useNotification,
   useFetchClient,
+  Layouts,
 } from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
@@ -102,7 +102,7 @@ export const EditPage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
                 !isLoadingPlugins ? (
                   <Button
@@ -122,7 +122,7 @@ export const EditPage = () => {
               subtitle={role.description}
               navigationAction={<BackButton />}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -136,7 +136,7 @@ export const EditPage = () => {
                 shadow="filterShadow"
               >
                 <Flex direction="column" alignItems="stretch" gap={4}>
-                  <Typography variant="delta" as="h2">
+                  <Typography variant="delta" tag="h2">
                     {formatMessage({
                       id: getTrad('EditPage.form.roles'),
                       defaultMessage: 'Role details',
@@ -145,31 +145,31 @@ export const EditPage = () => {
 
                   <Grid gap={4}>
                     <GridItem col={6}>
-                      <TextInput
+                      <Field.Root
                         name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
                         error={
                           errors?.name
-                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
+                            ? formatMessage({
+                                id: errors.name,
+                                defaultMessage: 'Name is required',
+                              })
                             : false
                         }
                         required
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                     <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -179,7 +179,16 @@ export const EditPage = () => {
                             : false
                         }
                         required
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                   </Grid>
                 </Flex>
@@ -192,7 +201,7 @@ export const EditPage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>

package/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -5,19 +5,19 @@ import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${32 / 16}rem;
+  height: 3.2rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${32 / 16}rem;
+  width: 3.2rem;
 
   svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
+    height: 1.2rem;
+    width: 1.2rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};