@strapi/admin 4.1.3 → 4.2.0-alpha.O

package/admin/src/content-manager/components/NonRepeatableComponent/index.js

@@ -28,7 +28,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
       hasRadius={isNested}
       borderColor={isNested ? 'neutral200' : ''}
     >
-      <Stack size={6}>
+      <Stack spacing={6}>
         {fields.map((fieldRow, key) => {
           return (
             <Grid gap={4} key={key}>

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DraggingSibling.js

@@ -37,7 +37,7 @@ const ToggleButton = styled(TextButton)`
 const DraggingSibling = ({ displayedValue }) => {
   return (
     <SiblingWrapper>
-      <Stack horizontal size={3} flex={1}>
+      <Stack horizontal spacing={3} flex={1}>
         <Flex
           justifyContent="center"
           borderRadius="50%"
@@ -57,7 +57,7 @@ const DraggingSibling = ({ displayedValue }) => {
         </ToggleButton>
       </Stack>
 
-      <Stack horizontal size={0}>
+      <Stack horizontal spacing={0}>
         <CustomIconButtonSibling noBorder onClick={() => {}} icon={<Trash />} />
         <CustomIconButtonSibling icon={<Drag />} noBorder />
       </Stack>

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -194,14 +194,14 @@ const DraggedItem = ({
           error={accordionHasError}
           hasErrorMessage={hasErrorMessage}
           expanded={isOpen}
-          toggle={onClickToggle}
+          onToggle={onClickToggle}
           id={componentFieldName}
           size="S"
         >
           <AccordionToggle
             action={
               isReadOnly ? null : (
-                <Stack horizontal size={0}>
+                <Stack horizontal spacing={0}>
                   <CustomIconButton
                     expanded={isOpen}
                     noBorder
@@ -238,7 +238,7 @@ const DraggedItem = ({
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background="neutral100" padding={6} size={6}>
+            <Stack background="neutral100" padding={6} spacing={6}>
               {fields.map((fieldRow, key) => {
                 return (
                   <Grid gap={4} key={key}>
@@ -318,9 +318,6 @@ DraggedItem.propTypes = {
 
 const Memoized = memo(DraggedItem);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { DraggedItem };

package/admin/src/content-manager/components/SelectMany/index.js

@@ -39,7 +39,7 @@ function SelectMany({
   };
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Select
         components={components}
         isDisabled={isDisabled}
@@ -76,7 +76,7 @@ function SelectMany({
         value={[]}
       />
       <Box paddingTop={3} style={{ overflow: 'auto' }}>
-        <Stack as="ul" size={4} style={{ maxHeight: '128px', overflowX: 'hidden' }}>
+        <Stack as="ul" spacing={4} style={{ maxHeight: '128px', overflowX: 'hidden' }}>
           {value?.map((data, index) => {
             return (
               <ListItem

package/admin/src/content-manager/components/SelectOne/index.js

@@ -28,7 +28,7 @@ function SelectOne({
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Select
         components={{
           ...components,

package/admin/src/content-manager/components/SelectWrapper/index.js

@@ -280,7 +280,7 @@ function SelectWrapper({
   const styles = getSelectStyles(theme);
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Label
         intlLabel={intlLabel}
         isSingle={isSingle}
@@ -368,7 +368,4 @@ SelectWrapper.propTypes = {
 
 const Memoized = memo(SelectWrapper);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -49,6 +49,7 @@ const getSelectStyles = theme => {
         ...base,
         width: '100%',
         marginTop: theme.spaces[1],
+        backgroundColor: theme.colors.neutral0,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import get from 'lodash/get';
 import {
   useTracking,
-  formatComponentData,
+  formatContentTypeData,
   useQueryParams,
   useNotification,
   useGuidedTour,
@@ -55,7 +55,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       );
 
       // This is needed in order to add a unique id for the repeatable components, in order to make the reorder easier
-      return formatComponentData(cleaned, allLayoutData.contentType, allLayoutData.components);
+      return formatContentTypeData(cleaned, allLayoutData.contentType, allLayoutData.components);
     },
     [allLayoutData]
   );
@@ -73,7 +73,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         allLayoutData.components
       );
 
-      acc[current] = formatComponentData(
+      acc[current] = formatContentTypeData(
         defaultComponentForm,
         allLayoutData.components[current],
         allLayoutData.components
@@ -86,7 +86,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       allLayoutData.contentType.attributes,
       allLayoutData.components
     );
-    const contentTypeDataStructureFormatted = formatComponentData(
+    const contentTypeDataStructureFormatted = formatContentTypeData(
       contentTypeDataStructure,
       allLayoutData.contentType,
       allLayoutData.components

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -29,7 +29,8 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   /* GUTTER */
@@ -158,7 +159,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: white;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   .CodeMirror-scroll {
@@ -224,7 +225,7 @@ export const EditorStylesContainer = styled.div`
     margin: 0;
     white-space: pre;
     word-wrap: normal;
-    line-height: inherit;
+    line-height: 1.5;
     color: inherit;
     /* z-index: 2; */
     position: relative;
@@ -292,6 +293,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
   }
   .CodeMirror-measure pre {
     position: static;

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -11,7 +11,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import Bold from '@strapi/icons/Bold';
 import Italic from '@strapi/icons/Italic';
 import Underline from '@strapi/icons/Underline';
-import Strikethrough from '@strapi/icons/Strikethrough';
+import StrikeThrough from '@strapi/icons/StrikeThrough';
 import BulletList from '@strapi/icons/BulletList';
 import NumberList from '@strapi/icons/NumberList';
 import Code from '@strapi/icons/Code';
@@ -161,7 +161,7 @@ const WysiwygNav = ({
                       id="Strikethrough"
                       label="Strikethrough"
                       name="Strikethrough"
-                      icon={<Strikethrough />}
+                      icon={<StrikeThrough />}
                     />
                     <CustomIconButton
                       onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -128,8 +128,8 @@ const Wysiwyg = ({
 
   return (
     <>
-      <Stack size={1}>
-        <Stack horizontal size={1}>
+      <Stack spacing={1}>
+        <Stack horizontal spacing={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
             {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -16,7 +16,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={4}>
+    <Stack spacing={4}>
       <Flex justifyContent="space-between">
         <div>
           <Box>
@@ -39,7 +39,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
         <LinkToCTB />
       </Flex>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack size={2}>
+        <Stack spacing={2}>
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -45,7 +45,7 @@ const DynamicZoneList = ({ components }) => {
   const { componentLayouts } = useLayoutDnd();
 
   return (
-    <Stack size={2} horizontal overflow="scroll hidden" padding={3}>
+    <Stack spacing={2} horizontal overflow="scroll hidden" padding={3}>
       {components.map(componentUid => (
         <CustomLink
           hasRadius

package/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js

@@ -22,7 +22,7 @@ const RelationalFields = ({
   const { setEditFieldToSelect, modifiedData, onMoveRelation } = useLayoutDnd();
 
   return (
-    <Stack size={4}>
+    <Stack spacing={4}>
       <div>
         <Box>
           <Typography fontWeight="bold">
@@ -42,7 +42,7 @@ const RelationalFields = ({
         </Box>
       </div>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack size={2}>
+        <Stack spacing={2}>
           {relationsLayout.map((relationName, index) => {
             const relationLabel = get(
               modifiedData,

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -275,7 +275,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack size={4}>
+              <Stack spacing={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -71,7 +71,7 @@ const Header = ({
 
   if (isCreatingEntry && canCreate) {
     primaryAction = (
-      <Stack horizontal size={2}>
+      <Stack horizontal spacing={2}>
         {hasDraftAndPublish && (
           <Button disabled startIcon={<Check />} variant="secondary">
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@@ -187,7 +187,7 @@ const Header = ({
           isOpen={showWarningUnpublish}
         >
           <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack size={2}>
+            <Stack spacing={2}>
               <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Typography id="confirm-description">
                   {formatMessage(
@@ -242,7 +242,7 @@ const Header = ({
           isOpen={showWarningDraftRelation}
         >
           <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack size={2}>
+            <Stack spacing={2}>
               <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Typography id="confirm-description">
                   {draftRelationsCountRef.current}
@@ -314,8 +314,5 @@ Header.propTypes = {
 
 const Memoized = memo(Header, isEqualFastCompare);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 export { Header };

package/admin/src/content-manager/pages/EditView/Informations/index.js

@@ -44,7 +44,7 @@ const Informations = () => {
       <Box paddingTop={2} paddingBottom={6}>
         <Divider />
       </Box>
-      <Stack size={4}>
+      <Stack spacing={4}>
         <Flex justifyContent="space-between">
           <Typography fontWeight="bold">
             {formatMessage({

package/admin/src/content-manager/pages/EditView/index.js

@@ -137,7 +137,7 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack size={6}>
+                    <Stack spacing={6}>
                       {formattedContentTypeLayout.map((row, index) => {
                         if (isDynamicZone(row)) {
                           const {
@@ -174,7 +174,7 @@ const EditView = ({
                             paddingBottom={6}
                             borderColor="neutral150"
                           >
-                            <Stack size={6}>
+                            <Stack spacing={6}>
                               {row.map((grid, gridIndex) => {
                                 return (
                                   <Grid gap={4} key={gridIndex}>
@@ -232,7 +232,7 @@ const EditView = ({
                     </Stack>
                   </GridItem>
                   <GridItem col={3} s={12}>
-                    <Stack size={2}>
+                    <Stack spacing={2}>
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
@@ -275,7 +275,7 @@ const EditView = ({
                           <Box paddingTop={2} paddingBottom={6}>
                             <Divider />
                           </Box>
-                          <Stack size={4}>
+                          <Stack spacing={4}>
                             {relationsLayout.map(
                               ({ name, fieldSchema, labelAction, metadatas, queryInfos }) => {
                                 return (
@@ -308,7 +308,7 @@ const EditView = ({
                         </Box>
                       )}
                       <Box as="aside" aria-labelledby="links">
-                        <Stack size={2}>
+                        <Stack spacing={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -66,7 +66,7 @@ const CardPreview = ({ labelField, transparent, isSibling }) => {
       transparent={transparent}
       isSibling={isSibling}
     >
-      <Stack horizontal size={3}>
+      <Stack horizontal spacing={3}>
         <DragButton alignItems="center">
           <Drag />
         </DragButton>

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -193,7 +193,7 @@ const DraggableCard = ({
           onClick={handleClickEditRow}
           isDragging={isDragging}
         >
-          <Stack horizontal size={3}>
+          <Stack horizontal spacing={3}>
             <DragButton
               as="span"
               aria-label={formatMessage(

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -75,7 +75,7 @@ const SortDisplayedFields = ({
         hasRadius
       >
         <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
-          <Stack horizontal size={3}>
+          <Stack horizontal spacing={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
                 key={field}

package/admin/src/contexts/ThemeToggle/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeToggleContext = createContext({});
+
+export default ThemeToggleContext;

package/admin/src/contexts/index.js

@@ -1,3 +1,4 @@
 export { default as AdminContext } from './Admin';
 export { default as ConfigurationsContext } from './Configurations';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
+export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
+export { default as useThemeToggle } from './useThemeToggle';

package/admin/src/hooks/useSettingsMenu/init.js

@@ -10,7 +10,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
   // Sort the links by name
   const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]).map(link => ({
     ...link,
-    hasNotification: link.id === 'application-infos' && shouldUpdateStrapi,
+    hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
   }));
 
   const otherSections = Object.values(omit(settings, 'global'));
@@ -25,7 +25,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.roles.label' },
+          intlLabel: { id: 'Settings.permissions.menu.link.roles.label', defaultMessage: 'Roles' },
           to: '/settings/roles',
           id: 'roles',
           isDisplayed: false,

package/admin/src/hooks/useThemeToggle/index.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeToggleContext } from '../../contexts';
+
+const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};
+
+export default useThemeToggle;

package/admin/src/pages/Admin/Onboarding/index.js

@@ -21,7 +21,7 @@ const Button = styled.button`
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
   svg {
-    color: ${({ theme }) => theme.colors.neutral0};
+    color: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -60,7 +60,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack size={6}>
+                <Stack spacing={6}>
                   <TextInput
                     error={
                       errors.email

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -75,7 +75,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 )}
               </Column>
 
-              <Stack size={6}>
+              <Stack spacing={6}>
                 <TextInput
                   error={
                     errors.email