From 6e77d7699ec858e0d682593175a06302e00671a0 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Mon, 15 Nov 2021 09:22:49 +0100 Subject: [PATCH 01/10] Add relation dnd Signed-off-by: HichamELBSI --- .../components/DragLayer/index.js | 1 + .../components/DisplayedFields.js | 13 +-- .../components/FieldButton.js | 86 +++++++++++++++++-- .../components/RelationalFields.js | 10 ++- .../pages/EditSettingsView/index.js | 18 ++++ 5 files changed, 112 insertions(+), 16 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/DragLayer/index.js b/packages/core/admin/admin/src/content-manager/components/DragLayer/index.js index d77e66ac21..1923965456 100644 --- a/packages/core/admin/admin/src/content-manager/components/DragLayer/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DragLayer/index.js @@ -55,6 +55,7 @@ const CustomDragLayer = () => {
{itemType === ItemTypes.FIELD && } + {itemType === ItemTypes.EDIT_RELATION && } {itemType === ItemTypes.COMPONENT && ( )} diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js index c68ae73695..0cfa51b2a5 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js @@ -11,14 +11,14 @@ import { Flex } from '@strapi/design-system/Flex'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu'; import Plus from '@strapi/icons/Plus'; -import { getTrad } from '../../../utils'; +import { getTrad, ItemTypes } from '../../../utils'; import { useLayoutDnd } from '../../../hooks'; import FieldButton from './FieldButton'; import LinkToCTB from './LinkToCTB'; const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField, onAddField }) => { const { formatMessage } = useIntl(); - const { setEditFieldToSelect, attributes, modifiedData } = useLayoutDnd(); + const { setEditFieldToSelect, attributes, modifiedData, onMoveField } = useLayoutDnd(); return ( @@ -32,15 +32,14 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField, })} - {/* Since the drag n drop will not be available, this text will be hidden for the moment */} - {/* + {formatMessage({ id: 'containers.SettingPage.editSettings.description', defaultMessage: 'Drag & drop the fields to build the layout', })} - */} +
@@ -63,6 +62,10 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField, onEditField={() => setEditFieldToSelect(rowItem.name)} onDeleteField={() => onRemoveField(row.rowId, index)} attribute={attribute} + itemType={ItemTypes.EDIT_RELATION} + index={index} + name={rowItem.name} + onMoveField={onMoveField} > {attributeLabel || rowItem.name} diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js index 1800daeabb..8913dc1499 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js @@ -1,6 +1,9 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; +import { useDrop, useDrag } from 'react-dnd'; +import { getEmptyImage } from 'react-dnd-html5-backend'; +import { useIntl } from 'react-intl'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { IconButton } from '@strapi/design-system/IconButton'; @@ -8,10 +11,9 @@ import { Typography } from '@strapi/design-system/Typography'; import Drag from '@strapi/icons/Drag'; import Pencil from '@strapi/icons/Pencil'; import Trash from '@strapi/icons/Trash'; -import { useIntl } from 'react-intl'; +import { getTrad } from '../../../utils'; import ComponentFieldList from './ComponentFieldList'; import DynamicZoneList from './DynamicZoneList'; -import getTrad from '../../../utils/getTrad'; const CustomIconButton = styled(IconButton)` background-color: transparent; @@ -27,10 +29,63 @@ const CustomDragIcon = styled(Drag)` } `; const CustomFlex = styled(Flex)` + opacity: ${({ isDragging }) => (isDragging ? 0 : 1)}; +`; +const DragButton = styled(Flex)` + cursor: all-scroll; border-right: 1px solid ${({ theme }) => theme.colors.neutral200}; `; -const FieldButton = ({ attribute, onEditField, onDeleteField, children }) => { +const FieldButton = ({ + attribute, + onEditField, + onDeleteField, + children, + index, + itemType, + name, + onMoveField, +}) => { + const dragButtonRef = useRef(); + + const [, drop] = useDrop({ + accept: itemType, + hover(item) { + if (!dragButtonRef.current) { + return; + } + const dragIndex = item.index; + const hoverIndex = index; + + // Don't replace items with themselves + if (dragIndex === hoverIndex) { + return; + } + + console.log(hoverIndex); + + onMoveField(dragIndex, hoverIndex); + + item.index = hoverIndex; + }, + }); + + const [{ isDragging }, drag, dragPreview] = useDrag({ + type: itemType, + item: () => { + return { index, labelField: children, name }; + }, + collect: monitor => ({ + isDragging: monitor.isDragging(), + }), + }); + + useEffect(() => { + dragPreview(getEmptyImage(), { captureDraggingState: true }); + }, [dragPreview]); + + drag(drop(dragButtonRef)); + const { formatMessage } = useIntl(); const getHeight = () => { const higherFields = ['json', 'text', 'file', 'media', 'component', 'richtext', 'dynamiczone']; @@ -43,17 +98,28 @@ const FieldButton = ({ attribute, onEditField, onDeleteField, children }) => { }; return ( - - + e.stopPropagation()} + alignItems="center" + paddingLeft={3} + paddingRight={3} + // Disable the keyboard navigation since the drag n drop isn't accessible with the keyboard for the moment + tabIndex={-1} + > - + @@ -96,7 +162,7 @@ const FieldButton = ({ attribute, onEditField, onDeleteField, children }) => { )} {attribute?.type === 'dynamiczone' && } - + ); }; @@ -113,6 +179,10 @@ FieldButton.propTypes = { onEditField: PropTypes.func.isRequired, onDeleteField: PropTypes.func.isRequired, children: PropTypes.string.isRequired, + index: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + itemType: PropTypes.string.isRequired, + onMoveField: PropTypes.func.isRequired, }; export default FieldButton; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js index 639c1aa438..c4f05d1fb3 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js @@ -8,9 +8,9 @@ import { Typography } from '@strapi/design-system/Typography'; import { Stack } from '@strapi/design-system/Stack'; import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu'; import Plus from '@strapi/icons/Plus'; -import { getTrad } from '../../../utils'; -import FieldButton from './FieldButton'; +import { getTrad, ItemTypes } from '../../../utils'; import { useLayoutDnd } from '../../../hooks'; +import FieldButton from './FieldButton'; const RelationalFields = ({ relationsLayout, @@ -19,7 +19,7 @@ const RelationalFields = ({ onAddField, }) => { const { formatMessage } = useIntl(); - const { setEditFieldToSelect, modifiedData } = useLayoutDnd(); + const { setEditFieldToSelect, modifiedData, onMoveRelation } = useLayoutDnd(); return ( @@ -56,6 +56,10 @@ const RelationalFields = ({ onEditField={() => setEditFieldToSelect(relationName)} onDeleteField={() => onRemoveField(index)} key={relationName} + index={index} + name={relationName} + onMoveField={onMoveRelation} + itemType={ItemTypes.EDIT_RELATION} > {relationLabel || relationName} diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js index 137b2d10d6..04c236083c 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js @@ -151,6 +151,22 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd submitMutation.mutate(body); }; + const handleMoveRelation = (fromIndex, toIndex) => { + dispatch({ + type: 'MOVE_RELATION', + fromIndex, + toIndex, + }); + }; + + const handleMoveField = (fromIndex, toIndex) => { + dispatch({ + type: 'MOVE_FIELD', + fromIndex, + toIndex, + }); + }; + return ( { dispatch({ type: 'SET_FIELD_TO_EDIT', From 1342907876b478d7a78d49a498dba2883e4b2bd3 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Mon, 15 Nov 2021 10:35:19 +0100 Subject: [PATCH 02/10] Remove log Signed-off-by: HichamELBSI --- .../pages/EditSettingsView/components/FieldButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js index 8913dc1499..51b1468dae 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js @@ -62,8 +62,6 @@ const FieldButton = ({ return; } - console.log(hoverIndex); - onMoveField(dragIndex, hoverIndex); item.index = hoverIndex; From f5465eeb585d893ebeb90185b58a8ec1109c65f4 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Mon, 15 Nov 2021 12:15:00 +0100 Subject: [PATCH 03/10] Fix tests Signed-off-by: HichamELBSI --- .../tests/__snapshots__/index.test.js.snap | 1015 +++++++++-------- .../EditSettingsView/tests/index.test.js | 16 +- 2 files changed, 579 insertions(+), 452 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap index 3a4d725797..9a8335d7a1 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap @@ -16,7 +16,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` padding-bottom: 8px; } -.c50 { +.c52 { padding: 16px; border-radius: 4px; border-style: dashed; @@ -24,7 +24,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border-color: #c0c0cf; } -.c59 { +.c62 { overflow: hidden; width: 100%; } @@ -167,7 +167,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` background: #4945ff; } -.c65 { +.c69 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -188,7 +188,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` width: 100%; } -.c65 .c12 { +.c69 .c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -199,66 +199,66 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: center; } -.c65 .c15 { +.c69 .c15 { color: #ffffff; } -.c65[aria-disabled='true'] { +.c69[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c65[aria-disabled='true'] .c15 { +.c69[aria-disabled='true'] .c15 { color: #666687; } -.c65[aria-disabled='true'] svg > g, -.c65[aria-disabled='true'] svg path { +.c69[aria-disabled='true'] svg > g, +.c69[aria-disabled='true'] svg path { fill: #666687; } -.c65[aria-disabled='true']:active { +.c69[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c65[aria-disabled='true']:active .c15 { +.c69[aria-disabled='true']:active .c15 { color: #666687; } -.c65[aria-disabled='true']:active svg > g, -.c65[aria-disabled='true']:active svg path { +.c69[aria-disabled='true']:active svg > g, +.c69[aria-disabled='true']:active svg path { fill: #666687; } -.c65:hover { +.c69:hover { background-color: #ffffff; } -.c65:active { +.c69:active { background-color: #ffffff; border: 1px solid #4945ff; } -.c65:active .c15 { +.c69:active .c15 { color: #4945ff; } -.c65:active svg > g, -.c65:active svg path { +.c69:active svg > g, +.c69:active svg path { fill: #4945ff; } -.c65 .c15 { +.c69 .c15 { color: #271fe0; } -.c65 svg > g, -.c65 svg path { +.c69 svg > g, +.c69 svg path { fill: #271fe0; } -.c53 { +.c55 { background: #f6f6f9; border-radius: 4px; border-color: #eaeaef; @@ -267,12 +267,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` min-height: 2rem; } -.c55 { +.c58 { padding-right: 12px; padding-left: 12px; } -.c60 { +.c63 { padding-left: 12px; } @@ -294,7 +294,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: center; } -.c54 { +.c56 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -308,7 +308,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: stretch; } -.c56 { +.c59 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -322,7 +322,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: center; } -.c61 { +.c64 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -340,7 +340,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: baseline; } -.c62 { +.c66 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -354,21 +354,21 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` outline: none; } -.c62 svg { +.c66 svg { height: 12px; width: 12px; } -.c62 svg > g, -.c62 svg path { +.c66 svg > g, +.c66 svg path { fill: #ffffff; } -.c62[aria-disabled='true'] { +.c66[aria-disabled='true'] { pointer-events: none; } -.c62:after { +.c66:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -383,11 +383,11 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border: 2px solid transparent; } -.c62:focus-visible { +.c66:focus-visible { outline: none; } -.c62:focus-visible:after { +.c66:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -398,7 +398,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border: 2px solid #4945ff; } -.c63 { +.c67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -416,26 +416,26 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border: none; } -.c63 svg > g, -.c63 svg path { +.c67 svg > g, +.c67 svg path { fill: #8e8ea9; } -.c63:hover svg > g, -.c63:hover svg path { +.c67:hover svg > g, +.c67:hover svg path { fill: #666687; } -.c63:active svg > g, -.c63:active svg path { +.c67:active svg > g, +.c67:active svg path { fill: #a5a5ba; } -.c63[aria-disabled='true'] { +.c67[aria-disabled='true'] { background-color: #eaeaef; } -.c63[aria-disabled='true'] svg path { +.c67[aria-disabled='true'] svg path { fill: #666687; } @@ -614,7 +614,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` margin-top: 16px; } -.c51 { +.c53 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -624,27 +624,19 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` flex-direction: column; } -.c51 > * { +.c53 > * { margin-top: 0; margin-bottom: 0; } -.c51 > * + * { +.c53 > * + * { margin-top: 8px; } -.c21 { - color: #32324d; - font-weight: 500; - font-size: 1rem; - line-height: 1.25; -} - -.c43 { - font-weight: 600; - color: #32324d; - font-size: 0.875rem; - line-height: 1.43; +.c45 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; } .c0 { @@ -786,6 +778,32 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` display: flex; } +.c21 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #32324d; +} + +.c43 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c65 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c44 { + font-weight: 600; + line-height: 1.14; +} + .c22 { display: grid; grid-template-columns: repeat(12,1fr); @@ -806,11 +824,11 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` grid-column: span 8; } -.c52 { +.c54 { grid-column: span 6; } -.c66 { +.c70 { grid-column: span 4; } @@ -824,39 +842,44 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` margin: 0; } -.c64 { +.c68 { background-color: transparent; } -.c64 path { +.c68 path { fill: #666687; } -.c58 { +.c61 { height: 0.75rem; width: 0.75rem; } -.c58 path { +.c61 path { fill: #666687; } .c57 { + opacity: 1; +} + +.c60 { + cursor: all-scroll; border-right: 1px solid #dcdce4; } -.c49 { +.c51 { font-weight: 600; color: #32324d; font-size: 0.75rem; line-height: 1.33; } -.c47 { +.c49 { padding-right: 8px; } -.c44 { +.c46 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -870,21 +893,21 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` outline: none; } -.c44 svg { +.c46 svg { height: 12px; width: 12px; } -.c44 svg > g, -.c44 svg path { +.c46 svg > g, +.c46 svg path { fill: #ffffff; } -.c44[aria-disabled='true'] { +.c46[aria-disabled='true'] { pointer-events: none; } -.c44:after { +.c46:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -899,11 +922,11 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border: 2px solid transparent; } -.c44:focus-visible { +.c46:focus-visible { outline: none; } -.c44:focus-visible:after { +.c46:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -914,7 +937,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` border: 2px solid #4945ff; } -.c45 { +.c47 { padding: 8px 16px; background: #4945ff; border: none; @@ -929,7 +952,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` text-decoration: none; } -.c45 .c46 { +.c47 .c48 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -940,62 +963,62 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` align-items: center; } -.c45 .c48 { +.c47 .c50 { color: #ffffff; } -.c45[aria-disabled='true'] { +.c47[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c45[aria-disabled='true'] .c48 { +.c47[aria-disabled='true'] .c50 { color: #666687; } -.c45[aria-disabled='true'] svg > g, -.c45[aria-disabled='true'] svg path { +.c47[aria-disabled='true'] svg > g, +.c47[aria-disabled='true'] svg path { fill: #666687; } -.c45[aria-disabled='true']:active { +.c47[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c45[aria-disabled='true']:active .c48 { +.c47[aria-disabled='true']:active .c50 { color: #666687; } -.c45[aria-disabled='true']:active svg > g, -.c45[aria-disabled='true']:active svg path { +.c47[aria-disabled='true']:active svg > g, +.c47[aria-disabled='true']:active svg path { fill: #666687; } -.c45:hover { +.c47:hover { background-color: #ffffff; } -.c45:active { +.c47:active { background-color: #ffffff; border: 1px solid #4945ff; } -.c45:active .c48 { +.c47:active .c50 { color: #4945ff; } -.c45:active svg > g, -.c45:active svg path { +.c47:active svg > g, +.c47:active svg path { fill: #4945ff; } -.c45 .c48 { +.c47 .c50 { color: #271fe0; } -.c45 svg > g, -.c45 svg path { +.c47 svg > g, +.c47 svg path { fill: #271fe0; } @@ -1024,25 +1047,25 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` } @media (max-width:68.75rem) { - .c52 { + .c54 { grid-column: span; } } @media (max-width:34.375rem) { - .c52 { + .c54 { grid-column: span; } } @media (max-width:68.75rem) { - .c66 { + .c70 { grid-column: span 12; } } @media (max-width:34.375rem) { - .c66 { + .c70 { grid-column: span; } } @@ -1281,17 +1304,26 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` Displayed fields
+
+ + Drag & drop the fields to build the layout + +
Edit the content type @@ -1317,29 +1349,32 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
-
-
+
postal_code
-
-
+
city
-
-
+
categories
+
+ + Drag & drop the fields to build the layout + +
-
-
+
postal_code
-
-
+
city
-
-
+
categories
+
+ + Drag & drop the fields to build the layout + +
-
-
+
postal_code
-
-
+
city
-
-
+
categories
postal_code
city
categories
postal_code
city
categories
postal_code
city
categories
Forgot your password? diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js index 6d6d491cb6..6c59c62498 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js @@ -116,14 +116,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => { align-items: center; } - .c47 { + .c46 { font-weight: 600; color: #32324d; font-size: 0.875rem; line-height: 1.43; } - .c44 { + .c43 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -137,21 +137,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => { outline: none; } - .c44 svg { + .c43 svg { height: 12px; width: 12px; } - .c44 svg > g, - .c44 svg path { + .c43 svg > g, + .c43 svg path { fill: #ffffff; } - .c44[aria-disabled='true'] { + .c43[aria-disabled='true'] { pointer-events: none; } - .c44:after { + .c43:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -166,11 +166,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => { border: 2px solid transparent; } - .c44:focus-visible { + .c43:focus-visible { outline: none; } - .c44:focus-visible:after { + .c43:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -181,7 +181,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { border: 2px solid #4945ff; } - .c45 { + .c44 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -202,7 +202,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { width: 100%; } - .c45 .sc-kstqJO { + .c44 .sc-kstqJO { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -213,44 +213,44 @@ describe('ADMIN | PAGES | AUTH | Register', () => { align-items: center; } - .c45 .c46 { + .c44 .c45 { color: #ffffff; } - .c45[aria-disabled='true'] { + .c44[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c45[aria-disabled='true'] .c46 { + .c44[aria-disabled='true'] .c45 { color: #666687; } - .c45[aria-disabled='true'] svg > g, - .c45[aria-disabled='true'] svg path { + .c44[aria-disabled='true'] svg > g, + .c44[aria-disabled='true'] svg path { fill: #666687; } - .c45[aria-disabled='true']:active { + .c44[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c45[aria-disabled='true']:active .c46 { + .c44[aria-disabled='true']:active .c45 { color: #666687; } - .c45[aria-disabled='true']:active svg > g, - .c45[aria-disabled='true']:active svg path { + .c44[aria-disabled='true']:active svg > g, + .c44[aria-disabled='true']:active svg path { fill: #666687; } - .c45:hover { + .c44:hover { border: 1px solid #7b79ff; background: #7b79ff; } - .c45:active { + .c44:active { border: 1px solid #4945ff; background: #4945ff; } @@ -263,22 +263,19 @@ describe('ADMIN | PAGES | AUTH | Register', () => { } .c27 { + line-height: 1.14; color: #d02b20; font-size: 0.875rem; line-height: 1.43; } - .c37 { + .c36 { color: #666687; font-size: 0.75rem; line-height: 1.33; } - .c28 { - line-height: 0; - } - - .c34 { + .c33 { padding-right: 12px; padding-left: 8px; } @@ -297,7 +294,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { align-items: center; } - .c29 { + .c28 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -315,7 +312,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { align-items: center; } - .c31 { + .c30 { border: none; border-radius: 4px; padding-left: 16px; @@ -327,6 +324,48 @@ describe('ADMIN | PAGES | AUTH | Register', () => { width: 100%; } + .c30::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30::-moz-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30::placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30[aria-disabled='true'] { + background: inherit; + color: inherit; + } + + .c30:focus { + outline: none; + box-shadow: none; + } + + .c31 { + border: none; + border-radius: 4px; + padding-left: 16px; + padding-right: 0; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + } + .c31::-webkit-input-placeholder { color: #8e8ea9; opacity: 1; @@ -357,49 +396,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { box-shadow: none; } - .c32 { - border: none; - border-radius: 4px; - padding-left: 16px; - padding-right: 0; - color: #32324d; - font-weight: 400; - font-size: 0.875rem; - display: block; - width: 100%; - } - - .c32::-webkit-input-placeholder { - color: #8e8ea9; - opacity: 1; - } - - .c32::-moz-placeholder { - color: #8e8ea9; - opacity: 1; - } - - .c32:-ms-input-placeholder { - color: #8e8ea9; - opacity: 1; - } - - .c32::placeholder { - color: #8e8ea9; - opacity: 1; - } - - .c32[aria-disabled='true'] { - background: inherit; - color: inherit; - } - - .c32:focus { - outline: none; - box-shadow: none; - } - - .c30 { + .c29 { border: 1px solid #dcdce4; border-radius: 4px; background: #ffffff; @@ -412,7 +409,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { transition-duration: 0.2s; } - .c30:focus-within { + .c29:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } @@ -436,7 +433,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { margin-top: 4px; } - .c41 { + .c40 { margin: 0; height: 18px; min-width: 18px; @@ -447,12 +444,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => { cursor: pointer; } - .c41:checked { + .c40:checked { background-color: #4945ff; border: 1px solid #4945ff; } - .c41:checked:after { + .c40:checked:after { content: ''; display: block; position: relative; @@ -466,21 +463,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => { transform: translateX(-50%) translateY(-50%); } - .c41:checked:disabled:after { + .c40:checked:disabled:after { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; } - .c41:disabled { + .c40:disabled { background-color: #dcdce4; border: 1px solid #c0c0cf; } - .c41:indeterminate { + .c40:indeterminate { background-color: #4945ff; border: 1px solid #4945ff; } - .c41:indeterminate:after { + .c40:indeterminate:after { content: ''; display: block; position: relative; @@ -495,20 +492,20 @@ describe('ADMIN | PAGES | AUTH | Register', () => { transform: translateX(-50%) translateY(-50%); } - .c41:indeterminate:disabled { + .c40:indeterminate:disabled { background-color: #dcdce4; border: 1px solid #c0c0cf; } - .c41:indeterminate:disabled:after { + .c40:indeterminate:disabled:after { background-color: #8e8ea9; } - .c42 { + .c41 { padding-left: 8px; } - .c38 { + .c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -518,22 +515,22 @@ describe('ADMIN | PAGES | AUTH | Register', () => { flex-direction: column; } - .c38 > * { + .c37 > * { margin-top: 0; margin-bottom: 0; } - .c38 > * + * { + .c37 > * + * { margin-top: 4px; } - .c39 { + .c38 { color: #32324d; font-size: 0.875rem; line-height: 1.43; } - .c40 { + .c39 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -544,7 +541,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { align-items: flex-start; } - .c40 * { + .c39 * { cursor: pointer; } @@ -571,7 +568,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => { line-height: 1.5; } - .c35 { + .c34 { border: none; background: transparent; font-size: 1.6rem; @@ -760,12 +757,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => { height: 4.5rem; } - .c36 svg { + .c35 svg { height: 1rem; width: 1rem; } - .c36 svg path { + .c35 svg path { fill: #666687; } @@ -773,11 +770,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => { text-align: center; } - .c43 { + .c42 { color: #4945ff; } - .c33::-ms-reveal { + .c32::-ms-reveal { display: none; } @@ -910,19 +907,19 @@ describe('ADMIN | PAGES | AUTH | Register', () => { > Firstname *
{
{ > Email *
{ > Password *

Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number @@ -1090,30 +1087,30 @@ describe('ADMIN | PAGES | AUTH | Register', () => { > Confirmation Password *

Keep me updated about the new features and upcoming improvements (by doing this you accept the { and the {

Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number @@ -839,30 +836,30 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => { > Confirmation Password *

Ready to sign in? diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js index 9042fca064..1995b8b6a3 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js @@ -253,7 +253,7 @@ describe('Marketplace coming soon', () => { text-decoration: none; } - .c25 .sc-jYCGPb { + .c25 .sc-bAffKu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js index 83d034041b..d39e1c624a 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js @@ -257,7 +257,7 @@ describe('ADMIN | Pages | Profile page', () => { .c40 { color: #32324d; - display: block; + display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js index 33e6dc9171..6da6ed0609 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js @@ -324,7 +324,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => { .c32 { color: #32324d; - display: block; + display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap index ec28d6f42e..9031d57c5a 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap @@ -252,7 +252,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = ` .c10 { color: #32324d; - display: block; + display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -466,7 +466,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `