From 9ad552d548c3eb559fe136f9a1c72bf633045d52 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Fri, 18 Nov 2022 13:38:45 +0100 Subject: [PATCH 1/2] CM: Fix ToggleInput wrapping for configure the view --- .../ListSettingsView/components/Settings.js | 155 +++++++++--------- 1 file changed, 79 insertions(+), 76 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js index 7ea6a20dd2..477b5f4515 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js @@ -1,92 +1,95 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import { useIntl } from 'react-intl'; -import { Flex } from '@strapi/design-system/Flex'; +import { Box } from '@strapi/design-system/Box'; import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Select, Option } from '@strapi/design-system/Select'; import { ToggleInput } from '@strapi/design-system/ToggleInput'; -import { Box } from '@strapi/design-system/Box'; +import { Stack } from '@strapi/design-system/Stack'; import { Typography } from '@strapi/design-system/Typography'; import { getTrad } from '../../../utils'; -const FlexGap = styled(Flex)` - gap: ${({ theme }) => theme.spaces[4]}; -`; - const Settings = ({ modifiedData, onChange, sortOptions }) => { const { formatMessage } = useIntl(); const { settings, metadatas } = modifiedData; return ( - <> - - - {formatMessage({ - id: getTrad('containers.SettingPage.settings'), - defaultMessage: 'Settings', - })} - - - - { - onChange({ target: { name: 'settings.searchable', value: e.target.checked } }); - }} - onLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.on-label', - defaultMessage: 'on', - })} - offLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.off-label', - defaultMessage: 'off', - })} - name="settings.searchable" - checked={settings.searchable} - /> - { - onChange({ target: { name: 'settings.filterable', value: e.target.checked } }); - }} - onLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.on-label', - defaultMessage: 'on', - })} - offLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.off-label', - defaultMessage: 'off', - })} - name="settings.filterable" - checked={settings.filterable} - /> - { - onChange({ target: { name: 'settings.bulkable', value: e.target.checked } }); - }} - onLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.on-label', - defaultMessage: 'on', - })} - offLabel={formatMessage({ - id: 'app.components.ToggleCheckbox.off-label', - defaultMessage: 'off', - })} - name="settings.bulkable" - checked={settings.bulkable} - /> - + + + {formatMessage({ + id: getTrad('containers.SettingPage.settings'), + defaultMessage: 'Settings', + })} + + + + + { + onChange({ target: { name: 'settings.searchable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.searchable" + checked={settings.searchable} + /> + + + + { + onChange({ target: { name: 'settings.filterable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.filterable" + checked={settings.filterable} + /> + + + + { + onChange({ target: { name: 'settings.bulkable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.bulkable" + checked={settings.bulkable} + /> + + + - + ); }; From 9ad596d6e99a21bf2b84b174ecc462fcde21f8d7 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Fri, 18 Nov 2022 15:32:13 +0100 Subject: [PATCH 2/2] Chore: Update snapshot tests --- .../tests/__snapshots__/index.test.js.snap | 1824 +++++++++-------- 1 file changed, 921 insertions(+), 903 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap index 3bc6a74383..4cce2a19f0 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap @@ -13,7 +13,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 width: 1px; } -.c32 { +.c31 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -60,15 +60,11 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c22 { - padding-bottom: 16px; +.c26 { + width: 100%; } -.c24 { - padding-bottom: 24px; -} - -.c33 { +.c32 { background: #f6f6f9; padding: 4px; border-radius: 4px; @@ -81,30 +77,34 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 display: flex; } -.c35 { +.c34 { padding-right: 12px; padding-left: 12px; border-radius: 4px; } -.c48 { +.c47 { padding-right: 16px; padding-left: 16px; } -.c50 { +.c49 { padding-left: 12px; } -.c55 { +.c54 { padding-top: 24px; padding-bottom: 24px; } -.c56 { +.c55 { background: #eaeaef; } +.c57 { + padding-bottom: 16px; +} + .c58 { padding-top: 16px; padding-right: 16px; @@ -154,28 +154,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 flex-direction: row; } -.c25 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c28 { +.c22 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -189,7 +168,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 flex-direction: column; } -.c36 { +.c35 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -234,21 +213,21 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 color: #666687; } -.c23 { +.c24 { font-weight: 500; font-size: 1rem; line-height: 1.25; color: #32324d; } -.c30 { +.c29 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; color: #32324d; } -.c38 { +.c37 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -256,7 +235,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 text-transform: uppercase; } -.c40 { +.c39 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -264,7 +243,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 text-transform: uppercase; } -.c42 { +.c41 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -272,7 +251,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 text-transform: uppercase; } -.c49 { +.c48 { font-size: 0.875rem; line-height: 1.43; display: block; @@ -282,7 +261,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 color: #32324d; } -.c53 { +.c52 { font-size: 0.75rem; line-height: 1.33; color: #666687; @@ -295,15 +274,33 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 color: #32324d; } -.c29 > * { +.c23 > * { margin-top: 0; margin-bottom: 0; } -.c29 > * + * { +.c23 > * + * { + margin-top: 16px; +} + +.c28 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c28 > * + * { margin-top: 4px; } +.c25 > * { + margin-left: 0; + margin-right: 0; +} + +.c25 > * + * { + margin-left: 16px; +} + .c61 > * { margin-left: 0; margin-right: 0; @@ -445,7 +442,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 fill: #ffffff; } -.c57 { +.c56 { height: 1px; border: none; margin: 0; @@ -491,7 +488,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 fill: #666687; } -.c46 { +.c45 { position: absolute; left: 0; right: 0; @@ -502,15 +499,15 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 border: none; } -.c46:focus { +.c45:focus { outline: none; } -.c46[aria-disabled='true'] { +.c45[aria-disabled='true'] { cursor: not-allowed; } -.c45 { +.c44 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -526,28 +523,28 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 transition-duration: 0.2s; } -.c45:focus-within { +.c44:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } -.c51 { +.c50 { background: transparent; border: none; position: relative; z-index: 1; } -.c51 svg { +.c50 svg { height: 0.6875rem; width: 0.6875rem; } -.c51 svg path { +.c50 svg path { fill: #666687; } -.c52 { +.c51 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -556,22 +553,22 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 border: none; } -.c52 svg { +.c51 svg { width: 0.375rem; } -.c47 { +.c46 { width: 100%; } -.c31 { +.c30 { position: relative; display: inline-block; z-index: 0; width: 100%; } -.c34 { +.c33 { overflow: hidden; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; @@ -584,12 +581,12 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 transition-duration: 0.2s; } -.c34:focus-within { +.c33:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } -.c37 { +.c36 { background-color: transparent; border: 1px solid #f6f6f9; position: relative; @@ -605,7 +602,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 padding-bottom: 6px; } -.c39 { +.c38 { background-color: #ffffff; border: 1px solid #dcdce4; position: relative; @@ -621,7 +618,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 padding-bottom: 6px; } -.c41 { +.c40 { height: 100%; left: 0; opacity: 0; @@ -704,18 +701,18 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 overflow-x: hidden; } -.c43 { +.c42 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } -.c44 { +.c43 { grid-column: span 6; max-width: 100%; } -.c54 { +.c53 { grid-column: span 3; max-width: 100%; } @@ -724,10 +721,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 outline: none; } -.c26 { - gap: 16px; -} - .c66 { display: -webkit-box; display: -webkit-flex; @@ -812,25 +805,25 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 } @media (max-width:68.75rem) { - .c44 { + .c43 { grid-column: span 12; } } @media (max-width:34.375rem) { - .c44 { + .c43 { grid-column: span; } } @media (max-width:68.75rem) { - .c54 { + .c53 { grid-column: span 12; } } @media (max-width:34.375rem) { - .c54 { + .c53 { grid-column: span; } } @@ -945,465 +938,481 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 class="c0 c21" >

Settings

-
-
- + +
-
-
-
- + +
-
- -
- + +
-
+
+
+
-
- Enable bulk actions -
-
+
- - -
- -
-
-
-
-
-
-
-
- -
- Entries per page -
- -
-
-
- -
+

+ Note: You can override this value in the Collection Type settings page. +

-

- Note: You can override this value in the Collection Type settings page. -

- -
-
-
- -
- Default sort attribute -
- +
+
-
-
- + + + + +
- -
-
-
- -
- Default sort order -
- +
+
-
-
- + + + + +
@@ -1413,17 +1422,17 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1

View

@@ -1432,7 +1441,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 class="c0 c58 c13" >
@@ -1666,7 +1675,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 type="button" > Add a field @@ -1733,7 +1742,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` width: 1px; } -.c32 { +.c31 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -1780,15 +1789,11 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c22 { - padding-bottom: 16px; +.c26 { + width: 100%; } -.c24 { - padding-bottom: 24px; -} - -.c33 { +.c32 { background: #f6f6f9; padding: 4px; border-radius: 4px; @@ -1801,30 +1806,34 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` display: flex; } -.c35 { +.c34 { padding-right: 12px; padding-left: 12px; border-radius: 4px; } -.c48 { +.c47 { padding-right: 16px; padding-left: 16px; } -.c50 { +.c49 { padding-left: 12px; } -.c55 { +.c54 { padding-top: 24px; padding-bottom: 24px; } -.c56 { +.c55 { background: #eaeaef; } +.c57 { + padding-bottom: 16px; +} + .c58 { padding-top: 16px; padding-right: 16px; @@ -1874,28 +1883,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` flex-direction: row; } -.c25 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c28 { +.c22 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1909,7 +1897,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` flex-direction: column; } -.c36 { +.c35 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1954,21 +1942,21 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` color: #666687; } -.c23 { +.c24 { font-weight: 500; font-size: 1rem; line-height: 1.25; color: #32324d; } -.c30 { +.c29 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; color: #32324d; } -.c38 { +.c37 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -1976,7 +1964,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` text-transform: uppercase; } -.c40 { +.c39 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -1984,7 +1972,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` text-transform: uppercase; } -.c42 { +.c41 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -1992,7 +1980,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` text-transform: uppercase; } -.c49 { +.c48 { font-size: 0.875rem; line-height: 1.43; display: block; @@ -2002,7 +1990,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` color: #32324d; } -.c53 { +.c52 { font-size: 0.75rem; line-height: 1.33; color: #666687; @@ -2015,15 +2003,33 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` color: #32324d; } -.c29 > * { +.c23 > * { margin-top: 0; margin-bottom: 0; } -.c29 > * + * { +.c23 > * + * { + margin-top: 16px; +} + +.c28 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c28 > * + * { margin-top: 4px; } +.c25 > * { + margin-left: 0; + margin-right: 0; +} + +.c25 > * + * { + margin-left: 16px; +} + .c61 > * { margin-left: 0; margin-right: 0; @@ -2165,7 +2171,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` fill: #ffffff; } -.c57 { +.c56 { height: 1px; border: none; margin: 0; @@ -2211,7 +2217,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` fill: #666687; } -.c46 { +.c45 { position: absolute; left: 0; right: 0; @@ -2222,15 +2228,15 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` border: none; } -.c46:focus { +.c45:focus { outline: none; } -.c46[aria-disabled='true'] { +.c45[aria-disabled='true'] { cursor: not-allowed; } -.c45 { +.c44 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -2246,28 +2252,28 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` transition-duration: 0.2s; } -.c45:focus-within { +.c44:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } -.c51 { +.c50 { background: transparent; border: none; position: relative; z-index: 1; } -.c51 svg { +.c50 svg { height: 0.6875rem; width: 0.6875rem; } -.c51 svg path { +.c50 svg path { fill: #666687; } -.c52 { +.c51 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2276,22 +2282,22 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` border: none; } -.c52 svg { +.c51 svg { width: 0.375rem; } -.c47 { +.c46 { width: 100%; } -.c31 { +.c30 { position: relative; display: inline-block; z-index: 0; width: 100%; } -.c34 { +.c33 { overflow: hidden; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; @@ -2304,12 +2310,12 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` transition-duration: 0.2s; } -.c34:focus-within { +.c33:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } -.c37 { +.c36 { background-color: transparent; border: 1px solid #f6f6f9; position: relative; @@ -2325,7 +2331,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` padding-bottom: 6px; } -.c39 { +.c38 { background-color: #ffffff; border: 1px solid #dcdce4; position: relative; @@ -2341,7 +2347,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` padding-bottom: 6px; } -.c41 { +.c40 { height: 100%; left: 0; opacity: 0; @@ -2424,18 +2430,18 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` overflow-x: hidden; } -.c43 { +.c42 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } -.c44 { +.c43 { grid-column: span 6; max-width: 100%; } -.c54 { +.c53 { grid-column: span 3; max-width: 100%; } @@ -2444,10 +2450,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` outline: none; } -.c26 { - gap: 16px; -} - .c66 { display: -webkit-box; display: -webkit-flex; @@ -2532,25 +2534,25 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` } @media (max-width:68.75rem) { - .c44 { + .c43 { grid-column: span 12; } } @media (max-width:34.375rem) { - .c44 { + .c43 { grid-column: span; } } @media (max-width:68.75rem) { - .c54 { + .c53 { grid-column: span 12; } } @media (max-width:34.375rem) { - .c54 { + .c53 { grid-column: span; } } @@ -2664,465 +2666,481 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` class="c0 c21" >

Settings

-
-
- + +
-
-
-
- + +
-
-
-
- + +
-
+
+
+
-
- Enable bulk actions -
-
+
- - -
- -
-
-
-
-
-
-
-
- -
- Entries per page -
- -
-
-
- -
+

+ Note: You can override this value in the Collection Type settings page. +

-

- Note: You can override this value in the Collection Type settings page. -

-
-
-
-
- -
- Default sort attribute -
- +
+
-
-
- + + + + +
-
-
-
-
- -
- Default sort order -
- +
+
-
-
- + + + + +
@@ -3132,17 +3150,17 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `

View

@@ -3151,7 +3169,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` class="c0 c58 c13" >
@@ -3489,7 +3507,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` type="button" > Add a field