yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-07-23 09:00:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into fix/publish-webhook-with-publishedAt

Browse Source
This commit is contained in:
Marc 2023-03-03 10:25:01 +01:00 committed by GitHub
commit fbad5cd13c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
232 changed files with 5976 additions and 5199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.front.js
View File

@ -41,6 +41,14 @@ module.exports = {
'no-restricted-imports': [
'error',
{
paths: [
{
name: '@strapi/design-system',
importNames: ['Stack'],
message:
"'Stack' has been deprecated. Please import 'Flex' from '@strapi/design-system' instead.",
},
],
patterns: [
{
group: [

2
.github/actions/check-pr-status/package.json vendored
View File

@ -1,6 +1,6 @@
{
"name": "check-pr-status",
"version": "4.7.0",
"version": "4.7.1",
"main": "dist/index.js",
"license": "MIT",
"private": true,

23
docs/docs/how-to-install-packages.md Normal file
View File

@ -0,0 +1,23 @@
---
title: How to install packages
slug: /how-to-install-packages
tags:
- lerna
- packages
---
# Best practices for installing packages in Strapi
When working with the Strapi monorepo, it's important to follow best practices for installing packages to avoid potential issues and ensure consistent results. Instead of using the standard **`yarn add`** command, we recommend using **`yarn lerna add <package_name> --scope @strapi/<module_name>`** for installing packages. Actually, you may encounter the following error using `yarn add`:
`An unexpected error occurred: "expected workspace package to exist for \"@typescript-eslint/typescript-estree\'`
This approach uses Lerna, a tool for managing JavaScript projects with multiple packages, to ensure that the package is installed in the correct location(s) and version across all modules that include it. The **`--scope`** flag specifies the specific module(s) that the package should be installed in, ensuring that it's only installed where it's needed.
By using this method, Strapi developers can avoid issues with mismatched package versions or unnecessary dependencies in certain modules. This can help to keep the codebase clean and maintainable, and reduce the potential for conflicts or issues in the future.
Overall, we recommend using **`yarn lerna add`** with the **`--scope`** flag for installing packages in the Strapi mono repo, to ensure consistent and reliable results.
## Resources
- [Lerna Docs](https://futurestud.io/tutorials/lerna-install-dependencies-for-a-specific-package)

9
docs/sidebars.js
View File

@ -167,6 +167,15 @@ const sidebars = {
},
items: [],
},
{
type: 'category',
label: 'How to install packages in a module',
link: {
type: 'doc',
id: 'how-to-install-packages',
},
items: [],
},
],
api: [{ type: 'autogenerated', dirName: 'api' }],
community: [{ type: 'autogenerated', dirName: 'community' }],

27
examples/getstarted/package.json
View File

@ -1,7 +1,7 @@
{
"name": "getstarted",
"private": true,
"version": "4.7.0",
"version": "4.7.1",
"description": "A Strapi application.",
"scripts": {
"develop": "strapi develop",
@ -12,22 +12,25 @@
"strapi": "strapi"
},
"dependencies": {
"@strapi/plugin-color-picker": "4.7.0",
"@strapi/plugin-documentation": "4.7.0",
"@strapi/plugin-graphql": "4.7.0",
"@strapi/plugin-i18n": "4.7.0",
"@strapi/plugin-sentry": "4.7.0",
"@strapi/plugin-users-permissions": "4.7.0",
"@strapi/provider-email-mailgun": "4.7.0",
"@strapi/provider-upload-aws-s3": "4.7.0",
"@strapi/provider-upload-cloudinary": "4.7.0",
"@strapi/strapi": "4.7.0",
"@vscode/sqlite3": "5.0.8",
"@strapi/icons": "1.6.3",
"@strapi/plugin-color-picker": "4.7.1",
"@strapi/plugin-documentation": "4.7.1",
"@strapi/plugin-graphql": "4.7.1",
"@strapi/plugin-i18n": "4.7.1",
"@strapi/plugin-sentry": "4.7.1",
"@strapi/plugin-users-permissions": "4.7.1",
"@strapi/provider-email-mailgun": "4.7.1",
"@strapi/provider-upload-aws-s3": "4.7.1",
"@strapi/provider-upload-cloudinary": "4.7.1",
"@strapi/strapi": "4.7.1",
"@vscode/sqlite3": "5.1.2",
"better-sqlite3": "8.0.1",
"lodash": "4.17.21",
"mysql": "2.18.1",
"passport-google-oauth2": "0.2.0",
"pg": "8.8.0",
"react": "^17.0.2",
"react-intl": "6.2.8",
"sqlite3": "5.1.2"
},
"strapi": {

8
examples/kitchensink-ts/package.json
View File

@ -1,7 +1,7 @@
{
"name": "kitchensink-ts",
"private": true,
"version": "4.7.0",
"version": "4.7.1",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
@ -10,9 +10,9 @@
"strapi": "strapi"
},
"dependencies": {
"@strapi/plugin-i18n": "4.7.0",
"@strapi/plugin-users-permissions": "4.7.0",
"@strapi/strapi": "4.7.0",
"@strapi/plugin-i18n": "4.7.1",
"@strapi/plugin-users-permissions": "4.7.1",
"@strapi/strapi": "4.7.1",
"better-sqlite3": "8.0.1"
},
"author": {

10
examples/kitchensink/package.json
View File

@ -1,7 +1,7 @@
{
"name": "kitchensink",
"private": true,
"version": "4.7.0",
"version": "4.7.1",
"description": "A Strapi application.",
"scripts": {
"develop": "strapi develop",
@ -12,10 +12,10 @@
"strapi": "strapi"
},
"dependencies": {
"@strapi/provider-email-mailgun": "4.7.0",
"@strapi/provider-upload-aws-s3": "4.7.0",
"@strapi/provider-upload-cloudinary": "4.7.0",
"@strapi/strapi": "4.7.0",
"@strapi/provider-email-mailgun": "4.7.1",
"@strapi/provider-upload-aws-s3": "4.7.1",
"@strapi/provider-upload-cloudinary": "4.7.1",
"@strapi/strapi": "4.7.1",
"lodash": "4.17.21",
"mysql": "2.18.1",
"passport-google-oauth2": "0.2.0",

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"version": "4.7.0",
"version": "4.7.1",
"packages": [
"packages/*",
"examples/*"

2
packages/admin-test-utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@strapi/admin-test-utils",
"version": "4.7.0",
"version": "4.7.1",
"private": true,
"description": "Test utilities for the Strapi administration panel",
"license": "MIT",

4
packages/cli/create-strapi-app/package.json
View File

@ -1,9 +1,9 @@
{
"name": "create-strapi-app",
"version": "4.7.0",
"version": "4.7.1",
"description": "Generate a new Strapi application.",
"dependencies": {
"@strapi/generate-new": "4.7.0",
"@strapi/generate-new": "4.7.1",
"commander": "8.3.0",
"inquirer": "8.2.5"
},

6
packages/cli/create-strapi-starter/package.json
View File

@ -1,6 +1,6 @@
{
"name": "create-strapi-starter",
"version": "4.7.0",
"version": "4.7.1",
"description": "Generate a new Strapi application.",
"keywords": [
"create-strapi-starter",
@ -38,9 +38,9 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@strapi/generate-new": "4.7.0",
"@strapi/generate-new": "4.7.1",
"chalk": "4.1.1",
"ci-info": "3.5.0",
"ci-info": "3.8.0",
"commander": "8.3.0",
"execa": "5.1.1",
"fs-extra": "10.0.0",

8
packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js
View File

@ -6,7 +6,7 @@ import styled, { keyframes } from 'styled-components';
import { pxToRem } from '@strapi/helper-plugin';
import { Clock, Refresh } from '@strapi/icons';
import { Link } from '@strapi/design-system/v2';
import { Box, Stack, Flex, Typography } from '@strapi/design-system';
import { Box, Flex, Typography } from '@strapi/design-system';
import { Content, IconBox, Overlay } from './Overlay';
const overlayContainer = document.createElement('div');
@ -40,8 +40,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
if (isOpen) {
return ReactDOM.createPortal(
<Overlay>
<Content spacing={6}>
<Stack spacing={2}>
<Content direction="column" alignItems="stretch" gap={6}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Flex justifyContent="center">
<Typography as="h1" variant="alpha">
{formatMessage(title)}
@ -52,7 +52,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
{formatMessage(description)}
</Typography>
</Flex>
</Stack>
</Flex>
<Flex justifyContent="center">
{displayedIcon === 'reload' && (
<IconBox padding={6} background="primary100" borderColor="primary200">

4
packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js
View File

@ -1,5 +1,5 @@
import styled from 'styled-components';
import { Box, Stack } from '@strapi/design-system';
import { Box, Flex } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
const Overlay = styled(Box)`
@ -21,7 +21,7 @@ const Overlay = styled(Box)`
}
`;
const Content = styled(Stack)`
const Content = styled(Flex)`
position: fixed;
top: 0;
right: 0;

6
packages/core/admin/admin/src/components/GuidedTour/Homepage/index.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { useGuidedTour, useTracking, LinkButton } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import { Stack, Flex, Box, Typography, Button } from '@strapi/design-system';
import { Flex, Box, Typography, Button } from '@strapi/design-system';
import { ArrowRight } from '@strapi/icons';
import StepperHomepage from './components/Stepper';
import layout from '../layout';
@ -47,7 +47,7 @@ const GuidedTourHomepage = () => {
paddingBottom={4}
background="neutral0"
>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<Typography variant="beta" as="h2">
{formatMessage({
id: 'app.components.GuidedTour.title',
@ -55,7 +55,7 @@ const GuidedTourHomepage = () => {
})}
</Typography>
<StepperHomepage sections={sections} currentSectionKey={activeSection} />
</Stack>
</Flex>
<Flex justifyContent="flex-end">
<Button variant="tertiary" onClick={handleSkip}>
{formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}

200
packages/core/admin/admin/src/components/GuidedTour/Homepage/tests/index.test.js
View File

@ -49,35 +49,35 @@ describe('GuidedTour Homepage', () => {
} = render(App);
expect(firstChild).toMatchInlineSnapshot(`
.c5 {
.c4 {
font-weight: 600;
font-size: 1.125rem;
line-height: 1.22;
color: #32324d;
}
.c10 {
.c9 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 500;
color: #ffffff;
}
.c11 {
.c10 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
color: #32324d;
}
.c23 {
.c22 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 500;
color: #666687;
}
.c28 {
.c27 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
@ -94,12 +94,12 @@ describe('GuidedTour Homepage', () => {
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c7 {
.c6 {
margin-right: 20px;
min-width: 1.875rem;
}
.c8 {
.c7 {
background: #4945ff;
padding: 8px;
border-radius: 50%;
@ -107,14 +107,14 @@ describe('GuidedTour Homepage', () => {
height: 1.875rem;
}
.c13 {
.c12 {
margin-right: 20px;
margin-top: 12px;
margin-bottom: 12px;
min-width: 1.875rem;
}
.c14 {
.c13 {
background: #7b79ff;
border-radius: 4px;
width: 0.125rem;
@ -122,11 +122,11 @@ describe('GuidedTour Homepage', () => {
min-height: 5.3125rem;
}
.c15 {
.c14 {
margin-top: 8px;
}
.c22 {
.c21 {
padding: 8px;
border-radius: 50%;
border-style: solid;
@ -136,7 +136,7 @@ describe('GuidedTour Homepage', () => {
height: 1.875rem;
}
.c24 {
.c23 {
background: #c0c0cf;
border-radius: 4px;
width: 0.125rem;
@ -156,9 +156,10 @@ describe('GuidedTour Homepage', () => {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c6 {
.c5 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -172,7 +173,7 @@ describe('GuidedTour Homepage', () => {
flex-direction: row;
}
.c9 {
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -190,7 +191,7 @@ describe('GuidedTour Homepage', () => {
justify-content: center;
}
.c12 {
.c11 {
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
@ -204,7 +205,7 @@ describe('GuidedTour Homepage', () => {
flex-direction: row;
}
.c25 {
.c24 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -222,16 +223,7 @@ describe('GuidedTour Homepage', () => {
justify-content: flex-end;
}
.c3 > * {
margin-top: 0;
margin-bottom: 0;
}
.c3 > * + * {
margin-top: 24px;
}
.c26 {
.c25 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -245,21 +237,21 @@ describe('GuidedTour Homepage', () => {
outline: none;
}
.c26 svg {
.c25 svg {
height: 12px;
width: 12px;
}
.c26 svg > g,
.c26 svg path {
.c25 svg > g,
.c25 svg path {
fill: #ffffff;
}
.c26[aria-disabled='true'] {
.c25[aria-disabled='true'] {
pointer-events: none;
}
.c26:after {
.c25:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -274,11 +266,11 @@ describe('GuidedTour Homepage', () => {
border: 2px solid transparent;
}
.c26:focus-visible {
.c25:focus-visible {
outline: none;
}
.c26:focus-visible:after {
.c25:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -289,7 +281,7 @@ describe('GuidedTour Homepage', () => {
border: 2px solid #4945ff;
}
.c27 {
.c26 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -303,7 +295,7 @@ describe('GuidedTour Homepage', () => {
background: #ffffff;
}
.c27 .c0 {
.c26 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -314,65 +306,65 @@ describe('GuidedTour Homepage', () => {
align-items: center;
}
.c27 .c4 {
.c26 .c3 {
color: #ffffff;
}
.c27[aria-disabled='true'] {
.c26[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c27[aria-disabled='true'] .c4 {
.c26[aria-disabled='true'] .c3 {
color: #666687;
}
.c27[aria-disabled='true'] svg > g,.c27[aria-disabled='true'] svg path {
.c26[aria-disabled='true'] svg > g,.c26[aria-disabled='true'] svg path {
fill: #666687;
}
.c27[aria-disabled='true']:active {
.c26[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c27[aria-disabled='true']:active .c4 {
.c26[aria-disabled='true']:active .c3 {
color: #666687;
}
.c27[aria-disabled='true']:active svg > g,.c27[aria-disabled='true']:active svg path {
.c26[aria-disabled='true']:active svg > g,.c26[aria-disabled='true']:active svg path {
fill: #666687;
}
.c27:hover {
.c26:hover {
background-color: #f6f6f9;
}
.c27:active {
.c26:active {
background-color: #eaeaef;
}
.c27 .c4 {
.c26 .c3 {
color: #32324d;
}
.c27 svg > g,
.c27 svg path {
.c26 svg > g,
.c26 svg path {
fill: #32324d;
}
.c21 {
.c20 {
padding-left: 8px;
}
.c19 {
.c18 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
color: #32324d;
}
.c16 {
.c15 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -386,21 +378,21 @@ describe('GuidedTour Homepage', () => {
outline: none;
}
.c16 svg {
.c15 svg {
height: 12px;
width: 12px;
}
.c16 svg > g,
.c16 svg path {
.c15 svg > g,
.c15 svg path {
fill: #ffffff;
}
.c16[aria-disabled='true'] {
.c15[aria-disabled='true'] {
pointer-events: none;
}
.c16:after {
.c15:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -415,11 +407,11 @@ describe('GuidedTour Homepage', () => {
border: 2px solid transparent;
}
.c16:focus-visible {
.c15:focus-visible {
outline: none;
}
.c16:focus-visible:after {
.c15:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -430,7 +422,7 @@ describe('GuidedTour Homepage', () => {
border: 2px solid #4945ff;
}
.c17 {
.c16 {
padding: 8px 16px;
background: #4945ff;
border: 1px solid #4945ff;
@ -443,7 +435,7 @@ describe('GuidedTour Homepage', () => {
text-decoration: none;
}
.c17 .c20 {
.c16 .c19 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -454,48 +446,48 @@ describe('GuidedTour Homepage', () => {
align-items: center;
}
.c17 .c18 {
.c16 .c17 {
color: #ffffff;
}
.c17[aria-disabled='true'] {
.c16[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c17[aria-disabled='true'] .c18 {
.c16[aria-disabled='true'] .c17 {
color: #666687;
}
.c17[aria-disabled='true'] svg > g,.c17[aria-disabled='true'] svg path {
.c16[aria-disabled='true'] svg > g,.c16[aria-disabled='true'] svg path {
fill: #666687;
}
.c17[aria-disabled='true']:active {
.c16[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c17[aria-disabled='true']:active .c18 {
.c16[aria-disabled='true']:active .c17 {
color: #666687;
}
.c17[aria-disabled='true']:active svg > g,.c17[aria-disabled='true']:active svg path {
.c16[aria-disabled='true']:active svg > g,.c16[aria-disabled='true']:active svg path {
fill: #666687;
}
.c17:hover {
.c16:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
.c17:active {
.c16:active {
border: 1px solid #4945ff;
background: #4945ff;
}
.c17 svg > g,
.c17 svg path {
.c16 svg > g,
.c16 svg path {
fill: #ffffff;
}
@ -503,10 +495,10 @@ describe('GuidedTour Homepage', () => {
class="c0 c1"
>
<div
class="c0 c2 c3"
class="c0 c2"
>
<h2
class="c4 c5"
class="c3 c4"
>
3 steps to get started
</h2>
@ -517,54 +509,54 @@ describe('GuidedTour Homepage', () => {
class="c0 "
>
<div
class="c0 c6"
class="c0 c5"
>
<div
class="c0 c7"
class="c0 c6"
>
<div
class="c0 c8 c9"
class="c0 c7 c8"
>
<span
class="c4 c10"
class="c3 c9"
>
1
</span>
</div>
</div>
<h3
class="c4 c11"
class="c3 c10"
>
🧠 Build the content structure
</h3>
</div>
<div
class="c0 c12"
class="c0 c11"
>
<div
class="c0 c13 c9"
class="c0 c12 c8"
>
<div
class="c0 c14"
class="c0 c13"
/>
</div>
<div
class="c0 c15"
class="c0 c14"
>
<a
aria-disabled="false"
class="c16 c17"
class="c15 c16"
href="/plugins/content-type-builder"
variant="default"
>
<span
class="c18 c19"
class="c17 c18"
>
Go to the Content type Builder
</span>
<div
aria-hidden="true"
class="c20 c21"
class="c19 c20"
>
<svg
fill="none"
@ -587,39 +579,39 @@ describe('GuidedTour Homepage', () => {
class="c0 "
>
<div
class="c0 c6"
class="c0 c5"
>
<div
class="c0 c7"
class="c0 c6"
>
<div
class="c0 c22 c9"
class="c0 c21 c8"
>
<span
class="c4 c23"
class="c3 c22"
>
2
</span>
</div>
</div>
<h3
class="c4 c11"
class="c3 c10"
>
⚡️ What would you like to share with the world?
</h3>
</div>
<div
class="c0 c12"
class="c0 c11"
>
<div
class="c0 c13 c9"
class="c0 c12 c8"
>
<div
class="c0 c24"
class="c0 c23"
/>
</div>
<div
class="c0 c15"
class="c0 c14"
/>
</div>
</div>
@ -627,50 +619,50 @@ describe('GuidedTour Homepage', () => {
class="c0 "
>
<div
class="c0 c6"
class="c0 c5"
>
<div
class="c0 c7"
class="c0 c6"
>
<div
class="c0 c22 c9"
class="c0 c21 c8"
>
<span
class="c4 c23"
class="c3 c22"
>
3
</span>
</div>
</div>
<h3
class="c4 c11"
class="c3 c10"
>
🚀 See content in action
</h3>
</div>
<div
class="c0 c12"
class="c0 c11"
>
<div
class="c0 c13 c9"
class="c0 c12 c8"
/>
<div
class="c0 c15"
class="c0 c14"
/>
</div>
</div>
</div>
</div>
<div
class="c0 c25"
class="c0 c24"
>
<button
aria-disabled="false"
class="c26 c27"
class="c25 c26"
type="button"
>
<span
class="c4 c28"
class="c3 c27"
>
Skip the tour
</span>

58
packages/core/admin/admin/src/components/GuidedTour/Modal/components/Content.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Stack, Box, Typography } from '@strapi/design-system';
import { Flex, Box, Typography } from '@strapi/design-system';
import { useIntl } from 'react-intl';
const LiStyled = styled.li`
@ -15,36 +15,48 @@ const Content = ({ id, defaultMessage }) => {
const { formatMessage } = useIntl();
return (
<Stack spacing={4} paddingBottom={6}>
<Flex direction="column" alignItems="stretch" gap={4} paddingBottom={6}>
{formatMessage(
{ id, defaultMessage },
{
documentationLink: (children) => (
<Typography
as="a"
textColor="primary600"
target="_blank"
rel="noopener noreferrer"
href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
>
{children}
</Typography>
),
b: (children) => <Typography fontWeight="semiBold">{children}</Typography>,
p: (children) => <Typography>{children}</Typography>,
light: (children) => <Typography textColor="neutral600">{children}</Typography>,
ul: (children) => (
<Box paddingLeft={6}>
<ul>{children}</ul>
</Box>
),
li: (children) => <LiStyled>{children}</LiStyled>,
documentationLink: DocumentationLink,
b: Bold,
p: Paragraph,
light: Light,
ul: List,
li: ListItem,
}
)}
</Stack>
</Flex>
);
};
const DocumentationLink = (children) => (
<Typography
as="a"
textColor="primary600"
target="_blank"
rel="noopener noreferrer"
href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
>
{children}
</Typography>
);
const Bold = (children) => <Typography fontWeight="semiBold">{children}</Typography>;
const Paragraph = (children) => <Typography>{children}</Typography>;
const Light = (children) => <Typography textColor="neutral600">{children}</Typography>;
const List = (children) => (
<Box paddingLeft={6}>
<ul>{children}</ul>
</Box>
);
const ListItem = (children) => <LiStyled>{children}</LiStyled>;
Content.propTypes = {
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,

10
packages/core/admin/admin/src/components/GuidedTour/Modal/components/Modal.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { pxToRem } from '@strapi/helper-plugin';
import { Portal, FocusTrap, Flex, Box, Stack, IconButton, Button } from '@strapi/design-system';
import { Portal, FocusTrap, Flex, Box, IconButton, Button } from '@strapi/design-system';
import { Cross } from '@strapi/icons';
const ModalWrapper = styled(Flex)`
@ -21,13 +21,15 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
<Portal>
<ModalWrapper onClick={onClose} padding={8} justifyContent="center">
<FocusTrap onEscape={onClose}>
<Stack
<Flex
direction="column"
alignItems="stretch"
background="neutral0"
width={pxToRem(660)}
shadow="popupShadow"
hasRadius
padding={4}
spacing={8}
gap={8}
role="dialog"
aria-modal
onClick={(e) => e.stopPropagation()}
@ -52,7 +54,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
</Button>
</Flex>
)}
</Stack>
</Flex>
</FocusTrap>
</ModalWrapper>
</Portal>

200
packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
View File

@ -48,7 +48,7 @@ describe('<GuidedTourModal />', () => {
expect(screen.getByText('🧠 Create a first Collection type')).toBeInTheDocument();
expect(document.body).toMatchInlineSnapshot(`
.c16 {
.c15 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
@ -56,14 +56,14 @@ describe('<GuidedTourModal />', () => {
color: #4945ff;
}
.c20 {
.c19 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 500;
color: #ffffff;
}
.c21 {
.c20 {
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
@ -71,13 +71,13 @@ describe('<GuidedTourModal />', () => {
color: #32324d;
}
.c25 {
.c24 {
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c27 {
.c26 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
@ -96,17 +96,17 @@ describe('<GuidedTourModal />', () => {
width: 41.25rem;
}
.c11 {
.c10 {
padding-right: 32px;
padding-left: 32px;
}
.c13 {
.c12 {
margin-right: 40px;
min-width: 1.875rem;
}
.c14 {
.c13 {
background: #7b79ff;
border-radius: 4px;
width: 0.125rem;
@ -114,12 +114,12 @@ describe('<GuidedTourModal />', () => {
min-height: 1.5rem;
}
.c18 {
.c17 {
padding-top: 12px;
padding-bottom: 12px;
}
.c19 {
.c18 {
background: #4945ff;
padding: 8px;
border-radius: 50%;
@ -127,11 +127,11 @@ describe('<GuidedTourModal />', () => {
height: 1.875rem;
}
.c23 {
.c22 {
padding-bottom: 24px;
}
.c28 {
.c27 {
padding-left: 8px;
}
@ -165,9 +165,10 @@ describe('<GuidedTourModal />', () => {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px;
}
.c8 {
.c7 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -185,7 +186,7 @@ describe('<GuidedTourModal />', () => {
justify-content: flex-end;
}
.c12 {
.c11 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
@ -199,7 +200,7 @@ describe('<GuidedTourModal />', () => {
flex-direction: row;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -213,7 +214,7 @@ describe('<GuidedTourModal />', () => {
flex-direction: row;
}
.c22 {
.c21 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -231,25 +232,22 @@ describe('<GuidedTourModal />', () => {
justify-content: center;
}
.c7 > * {
margin-top: 0;
margin-bottom: 0;
.c23 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c7 > * + * {
margin-top: 40px;
}
.c24 > * {
margin-top: 0;
margin-bottom: 0;
}
.c24 > * + * {
margin-top: 16px;
}
.c9 {
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -263,21 +261,21 @@ describe('<GuidedTourModal />', () => {
outline: none;
}
.c9 svg {
.c8 svg {
height: 12px;
width: 12px;
}
.c9 svg > g,
.c9 svg path {
.c8 svg > g,
.c8 svg path {
fill: #ffffff;
}
.c9[aria-disabled='true'] {
.c8[aria-disabled='true'] {
pointer-events: none;
}
.c9:after {
.c8:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -292,11 +290,11 @@ describe('<GuidedTourModal />', () => {
border: 2px solid transparent;
}
.c9:focus-visible {
.c8:focus-visible {
outline: none;
}
.c9:focus-visible:after {
.c8:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -319,7 +317,7 @@ describe('<GuidedTourModal />', () => {
width: 1px;
}
.c26 {
.c25 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -331,7 +329,7 @@ describe('<GuidedTourModal />', () => {
padding-right: 16px;
}
.c26 .c1 {
.c25 .c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -342,52 +340,52 @@ describe('<GuidedTourModal />', () => {
align-items: center;
}
.c26 .c15 {
.c25 .c14 {
color: #ffffff;
}
.c26[aria-disabled='true'] {
.c25[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c26[aria-disabled='true'] .c15 {
.c25[aria-disabled='true'] .c14 {
color: #666687;
}
.c26[aria-disabled='true'] svg > g,.c26[aria-disabled='true'] svg path {
.c25[aria-disabled='true'] svg > g,.c25[aria-disabled='true'] svg path {
fill: #666687;
}
.c26[aria-disabled='true']:active {
.c25[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c26[aria-disabled='true']:active .c15 {
.c25[aria-disabled='true']:active .c14 {
color: #666687;
}
.c26[aria-disabled='true']:active svg > g,.c26[aria-disabled='true']:active svg path {
.c25[aria-disabled='true']:active svg > g,.c25[aria-disabled='true']:active svg path {
fill: #666687;
}
.c26:hover {
.c25:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
.c26:active {
.c25:active {
border: 1px solid #4945ff;
background: #4945ff;
}
.c26 svg > g,
.c26 svg path {
.c25 svg > g,
.c25 svg path {
fill: #ffffff;
}
.c29 {
.c28 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -401,7 +399,7 @@ describe('<GuidedTourModal />', () => {
background: #ffffff;
}
.c29 .c1 {
.c28 .c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -412,54 +410,54 @@ describe('<GuidedTourModal />', () => {
align-items: center;
}
.c29 .c15 {
.c28 .c14 {
color: #ffffff;
}
.c29[aria-disabled='true'] {
.c28[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c29[aria-disabled='true'] .c15 {
.c28[aria-disabled='true'] .c14 {
color: #666687;
}
.c29[aria-disabled='true'] svg > g,.c29[aria-disabled='true'] svg path {
.c28[aria-disabled='true'] svg > g,.c28[aria-disabled='true'] svg path {
fill: #666687;
}
.c29[aria-disabled='true']:active {
.c28[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c29[aria-disabled='true']:active .c15 {
.c28[aria-disabled='true']:active .c14 {
color: #666687;
}
.c29[aria-disabled='true']:active svg > g,.c29[aria-disabled='true']:active svg path {
.c28[aria-disabled='true']:active svg > g,.c28[aria-disabled='true']:active svg path {
fill: #666687;
}
.c29:hover {
.c28:hover {
background-color: #f6f6f9;
}
.c29:active {
.c28:active {
background-color: #eaeaef;
}
.c29 .c15 {
.c28 .c14 {
color: #32324d;
}
.c29 svg > g,
.c29 svg path {
.c28 svg > g,
.c28 svg path {
fill: #32324d;
}
.c10 {
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -476,26 +474,26 @@ describe('<GuidedTourModal />', () => {
width: 2rem;
}
.c10 svg > g,
.c10 svg path {
.c9 svg > g,
.c9 svg path {
fill: #8e8ea9;
}
.c10:hover svg > g,
.c10:hover svg path {
.c9:hover svg > g,
.c9:hover svg path {
fill: #666687;
}
.c10:active svg > g,
.c10:active svg path {
.c9:active svg > g,
.c9:active svg path {
fill: #a5a5ba;
}
.c10[aria-disabled='true'] {
.c9[aria-disabled='true'] {
background-color: #eaeaef;
}
.c10[aria-disabled='true'] svg path {
.c9[aria-disabled='true'] svg path {
fill: #666687;
}
@ -540,15 +538,15 @@ describe('<GuidedTourModal />', () => {
<div>
<div
aria-modal="true"
class="c1 c5 c6 c7"
class="c1 c5 c6"
role="dialog"
>
<div
class="c1 c8"
class="c1 c7"
>
<button
aria-disabled="false"
class="c9 c10"
class="c8 c9"
type="button"
>
<span
@ -573,38 +571,38 @@ describe('<GuidedTourModal />', () => {
</button>
</div>
<div
class="c1 c11"
class="c1 c10"
>
<div
class="c1 c12"
class="c1 c11"
>
<div
class="c1 c13 c3"
class="c1 c12 c3"
>
<div
class="c1 c14"
class="c1 c13"
/>
</div>
<span
class="c15 c16"
class="c14 c15"
>
3 steps to get started
</span>
</div>
<div
class="c1 c17"
class="c1 c16"
>
<div
class="c1 c13 c17"
class="c1 c12 c16"
>
<div
class="c1 c18"
class="c1 c17"
>
<div
class="c1 c19 c3"
class="c1 c18 c3"
>
<span
class="c15 c20"
class="c14 c19"
>
3
</span>
@ -612,49 +610,49 @@ describe('<GuidedTourModal />', () => {
</div>
</div>
<h3
class="c15 c21"
class="c14 c20"
id="title"
>
🧠 Create a first Collection type
</h3>
</div>
<div
class="c1 c12"
class="c1 c11"
>
<div
class="c1 c13 c22"
class="c1 c12 c21"
/>
<div
class="c1 "
>
<div
class="c1 c23 c6 c24"
class="c1 c22 c23"
>
<span
class="c15 c25"
class="c14 c24"
>
Collection types help you manage several entries, Single types are suitable to manage only one entry.
</span>
<span
class="c15 c25"
class="c14 c24"
>
Ex: For a Blog website, Articles would be a Collection type whereas a Homepage would be a Single type.
</span>
</div>
<button
aria-disabled="false"
class="c9 c26"
class="c8 c25"
type="button"
>
<span
class="c15 c27"
class="c14 c26"
>
Build a Collection type
</span>
<div
aria-hidden="true"
class="c1 c28"
class="c1 c27"
>
<svg
fill="none"
@ -674,15 +672,15 @@ describe('<GuidedTourModal />', () => {
</div>
</div>
<div
class="c1 c8"
class="c1 c7"
>
<button
aria-disabled="false"
class="c9 c29"
class="c8 c28"
type="button"
>
<span
class="c15 c27"
class="c14 c26"
>
Skip the tour
</span>

6
packages/core/admin/admin/src/components/LeftMenu/index.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
import { Divider, FocusTrap, Box, Typography, Stack } from '@strapi/design-system';
import { Divider, FocusTrap, Box, Typography, Flex } from '@strapi/design-system';
import {
MainNav,
NavBrand,
@ -203,7 +203,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
hasRadius
>
<FocusTrap onEscape={handleToggleUserLinks}>
<Stack spacing={0}>
<Flex direction="column" alignItems="stretch" gap={0}>
<LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
<Typography>
{formatMessage({
@ -221,7 +221,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
</Typography>
<Exit />
</LinkUser>
</Stack>
</Flex>
</FocusTrap>
</LinkUserWrapper>
)}

10
packages/core/admin/admin/src/components/Notifications/index.js
View File

@ -1,7 +1,7 @@
import { NotificationsProvider } from '@strapi/helper-plugin';
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';
import { Stack } from '@strapi/design-system';
import { Flex } from '@strapi/design-system';
import Notification from './Notification';
import reducer, { initialState } from './reducer';
@ -17,11 +17,13 @@ const Notifications = ({ children }) => {
return (
<NotificationsProvider toggleNotification={displayNotification}>
<Stack
<Flex
left="50%"
marginLeft="-250px"
position="fixed"
spacing={2}
direction="column"
alignItems="stretch"
gap={2}
top={`${46 / 16}rem`}
width={`${500 / 16}rem`}
zIndex={10}
@ -31,7 +33,7 @@ const Notifications = ({ children }) => {
<Notification key={notification.id} dispatch={dispatch} notification={notification} />
);
})}
</Stack>
</Flex>
{children}
</NotificationsProvider>
);

12
packages/core/admin/admin/src/components/Notifications/tests/index.test.js
View File

@ -54,19 +54,11 @@ describe('<Notifications />', () => {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c2 > * {
margin-top: 0;
margin-bottom: 0;
}
.c2 > * + * {
margin-top: 8px;
gap: 8px;
}
<div
class="c0 c1 c2"
class="c0 c1"
/>
`);
});

13
packages/core/admin/admin/src/components/UpgradePlanModal/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { Portal, FocusTrap, IconButton, Box, Flex, Typography, Stack } from '@strapi/design-system';
import { Portal, FocusTrap, IconButton, Box, Flex, Typography } from '@strapi/design-system';
import { LinkButton } from '@strapi/design-system/v2';
import { ExternalLink, Cross } from '@strapi/icons';
import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
@ -41,8 +41,7 @@ const UpgradeContainer = styled(Flex)`
}
`;
const StackFlexStart = styled(Stack)`
align-items: flex-start;
const FlexStart = styled(Flex)`
max-width: ${400 / 16}rem;
z-index: 0;
`;
@ -75,14 +74,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
<CloseButtonContainer>
<IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
</CloseButtonContainer>
<StackFlexStart spacing={6}>
<FlexStart direction="column" alignItems="flex-start" gap={6}>
<Typography fontWeight="bold" textColor="primary600">
{formatMessage({
id: 'app.components.UpgradePlanModal.text-ce',
defaultMessage: 'COMMUNITY EDITION',
})}
</Typography>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Typography variant="alpha" as="h2" id="upgrade-plan">
{formatMessage({
id: 'app.components.UpgradePlanModal.limit-reached',
@ -96,7 +95,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
})}
</Typography>
</Stack>
</Flex>
<LinkButton
href="https://strapi.io/pricing-self-hosted"
isExternal
@ -107,7 +106,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
defaultMessage: 'Learn more',
})}
</LinkButton>
</StackFlexStart>
</FlexStart>
<img src={BigArrow} alt="upgrade-arrow" />
</UpgradeContainer>
</FocusTrap>

6
packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { PlusCircle } from '@strapi/icons';
import { Box, Stack, Flex, Typography } from '@strapi/design-system';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { getTrad } from '../../utils';
@ -36,7 +36,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
paddingBottom={9}
type="button"
>
<Stack spacing={2}>
<Flex direction="column" alignItems="flex-start" gap={2}>
<Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
<IconWrapper>
<PlusCircle />
@ -50,7 +50,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
})}
</Typography>
</Flex>
</Stack>
</Flex>
</Box>
{error?.id && (
<Typography textColor="danger600" variant="pi">

6
packages/core/admin/admin/src/content-manager/components/DragLayer/RelationDragPreview.js
View File

@ -6,7 +6,7 @@ import { Drag, Cross } from '@strapi/icons';
import { getTrad } from '../../utils';
import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
import { ChildrenWrapper, FlexWrapper } from '../RelationInput/components/RelationItem';
import { LinkEllipsis, DisconnectButton } from '../RelationInput';
export const RelationDragPreview = ({ status, displayedValue, width }) => {
@ -39,7 +39,7 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
borderColor="neutral200"
justifyContent="space-between"
>
<StackWrapper spacing={1} horizontal>
<FlexWrapper gap={1}>
<IconButton noBorder>
<Drag />
</IconButton>
@ -59,7 +59,7 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
</Status>
)}
</ChildrenWrapper>
</StackWrapper>
</FlexWrapper>
<Box paddingLeft={4}>
<DisconnectButton type="button">
<Icon width="12px" as={Cross} />

14
packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js
View File

@ -1,15 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import {
Dialog,
DialogBody,
DialogFooter,
Stack,
Flex,
Typography,
Button,
} from '@strapi/design-system';
import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
import { ExclamationMarkCircle, Trash } from '@strapi/icons';
import InjectionZoneList from '../../InjectionZoneList';
@ -28,7 +20,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
isOpen={isOpen}
>
<DialogBody icon={<ExclamationMarkCircle />}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Flex justifyContent="center">
<Typography id="confirm-description">
{formatMessage({
@ -40,7 +32,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
<Flex>
<InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
</Flex>
</Stack>
</Flex>
</DialogBody>
<DialogFooter
startAction={

14
packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js
View File

@ -1,15 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import {
Dialog,
DialogBody,
DialogFooter,
Stack,
Flex,
Typography,
Button,
} from '@strapi/design-system';
import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
import { ExclamationMarkCircle, Trash } from '@strapi/icons';
import InjectionZoneList from '../../InjectionZoneList';
import { getTrad } from '../../../utils';
@ -29,7 +21,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
isOpen={isOpen}
>
<DialogBody icon={<ExclamationMarkCircle />}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Flex justifyContent="center">
<Typography id="confirm-description">
{formatMessage({
@ -41,7 +33,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
<Flex>
<InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
</Flex>
</Stack>
</Flex>
</DialogBody>
<DialogFooter
startAction={

8
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js
View File

@ -8,7 +8,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box, Typography, Stack } from '@strapi/design-system';
import { Box, Typography, Flex } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { ComponentIcon } from '../../ComponentIcon';
@ -32,7 +32,7 @@ const ComponentBox = styled(Box)`
color: ${({ theme }) => theme.colors.primary600};
}
/* > Stack > ComponentIcon */
/* > Flex > ComponentIcon */
> div > div:first-child {
background: ${({ theme }) => theme.colors.primary200};
color: ${({ theme }) => theme.colors.primary600};
@ -43,13 +43,13 @@ const ComponentBox = styled(Box)`
export default function ComponentCard({ children, onClick }) {
return (
<ComponentBox as="button" type="button" onClick={onClick} hasRadius>
<Stack spacing={1} alignItems="center" justifyContent="center">
<Flex direction="column" gap={1} alignItems="center" justifyContent="center">
<ComponentIcon />
<Typography variant="pi" fontWeight="bold" textColor="neutral600">
{children}
</Typography>
</Stack>
</Flex>
</ComponentBox>
);
}

7
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js
View File

@ -12,7 +12,6 @@ import {
IconButton,
Box,
Flex,
Stack,
} from '@strapi/design-system';
import { useCMEditViewDataManager } from '@strapi/helper-plugin';
import { Trash, Drag } from '@strapi/icons';
@ -22,7 +21,7 @@ import { composeRefs, getTrad, ItemTypes } from '../../../utils';
import FieldComponent from '../../FieldComponent';
const ActionsStack = styled(Stack)`
const ActionsFlex = styled(Flex)`
/*
we need to remove the background from the button but we can't
wrap the element in styled because it breaks the forwardedAs which
@ -149,7 +148,7 @@ const DynamicZoneComponent = ({
const composedBoxRefs = composeRefs(boxRef, dropRef);
const accordionActions = !isFieldAllowed ? null : (
<ActionsStack horizontal spacing={0} expanded={isOpen}>
<ActionsFlex gap={0} expanded={isOpen}>
<IconButtonCustom
noBorder
label={formatMessage(
@ -179,7 +178,7 @@ const DynamicZoneComponent = ({
>
<Drag />
</IconButton>
</ActionsStack>
</ActionsFlex>
);
return (

6
packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js
View File

@ -2,7 +2,7 @@ import React, { memo, useMemo, useState } from 'react';
import get from 'lodash/get';
import isEqual from 'react-fast-compare';
import PropTypes from 'prop-types';
import { Box, Stack, VisuallyHidden } from '@strapi/design-system';
import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
@ -174,7 +174,7 @@ const DynamicZone = ({
const ariaDescriptionId = `${name}-item-instructions`;
return (
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
{dynamicDisplayedComponentsLength > 0 && (
<Box>
<DynamicZoneLabel
@ -228,7 +228,7 @@ const DynamicZone = ({
components={fieldSchema.components ?? []}
onClickAddComponent={handleAddComponent}
/>
</Stack>
</Flex>
);
};

6
packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
View File

@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
import { NotAllowedInput } from '@strapi/helper-plugin';
import { Trash } from '@strapi/icons';
import { Box, IconButton, Flex, Stack } from '@strapi/design-system';
import { Box, IconButton, Flex } from '@strapi/design-system';
import connect from './utils/connect';
import select from './utils/select';
@ -92,7 +92,7 @@ const FieldComponent = ({
/>
)}
</Flex>
<Stack spacing={1}>
<Flex direction="column" alignItems="stretch" gap={1}>
{!isRepeatable && !isInitialized && (
<ComponentInitializer
isReadOnly={isReadOnly}
@ -118,7 +118,7 @@ const FieldComponent = ({
name={name}
/>
)}
</Stack>
</Flex>
</Box>
);
};

6
packages/core/admin/admin/src/content-manager/components/NonRepeatableComponent/index.js
View File

@ -3,7 +3,7 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { Box, Grid, GridItem, Stack } from '@strapi/design-system';
import { Box, Grid, GridItem, Flex } from '@strapi/design-system';
import { useContentTypeLayout } from '../../hooks';
import FieldComponent from '../FieldComponent';
import Inputs from '../Inputs';
@ -29,7 +29,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
hasRadius={isNested}
borderColor={isNested ? 'neutral200' : ''}
>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" spacing={6}>
{fields.map((fieldRow, key) => {
return (
<Grid gap={4} key={key}>
@ -76,7 +76,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
</Grid>
);
})}
</Stack>
</Flex>
</Box>
);
};

12
packages/core/admin/admin/src/content-manager/components/RelationInput/components/Relation.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Stack, Flex } from '@strapi/design-system';
import { Flex } from '@strapi/design-system';
export const Relation = ({
children,
@ -20,9 +20,15 @@ export const Relation = ({
alignItems="end"
wrap="wrap"
>
<Stack basis={size <= 6 ? '100%' : '70%'} spacing={1} {...props}>
<Flex
direction="column"
alignItems="stretch"
basis={size <= 6 ? '100%' : '70%'}
gap={1}
{...props}
>
{search}
</Stack>
</Flex>
{loadMore}
</Flex>

8
packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { Box, Flex, Stack, IconButton } from '@strapi/design-system';
import { Box, Flex, IconButton } from '@strapi/design-system';
import { Drag } from '@strapi/icons';
import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
@ -12,7 +12,7 @@ import { composeRefs, ItemTypes } from '../../../utils';
import { RELATION_GUTTER } from '../constants';
export const StackWrapper = styled(Stack)`
export const FlexWrapper = styled(Flex)`
width: 100%;
/* Used to prevent endAction to be pushed out of container */
min-width: 0;
@ -94,7 +94,7 @@ export const RelationItem = ({
data-handler-id={handlerId}
{...props}
>
<StackWrapper spacing={1} horizontal>
<FlexWrapper gap={1}>
{canDrag ? (
<IconButton
forwardedAs="div"
@ -109,7 +109,7 @@ export const RelationItem = ({
</IconButton>
) : null}
<ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
</StackWrapper>
</FlexWrapper>
{endAction && <Box paddingLeft={4}>{endAction}</Box>}
</Flex>
)}

24
packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationItem.test.js.snap
View File

@ -46,18 +46,10 @@ exports[`Content-Manager || RelationInput || RelationItem should render and matc
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
gap: 4px;
}
.c4 > * {
margin-left: 0;
margin-right: 0;
}
.c4 > * + * {
margin-left: 4px;
}
.c7 {
.c6 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -69,16 +61,16 @@ exports[`Content-Manager || RelationInput || RelationItem should render and matc
width: 1px;
}
.c5 {
.c4 {
width: 100%;
min-width: 0;
}
.c5 > div[role='button'] {
.c4 > div[role='button'] {
cursor: all-scroll;
}
.c6 {
.c5 {
width: 100%;
min-width: 0;
}
@ -93,10 +85,10 @@ exports[`Content-Manager || RelationInput || RelationItem should render and matc
data-handler-id="T0"
>
<div
class="c3 c4 c5"
class="c3 c4"
>
<div
class="c2 c6"
class="c2 c5"
>
First relation
</div>
@ -104,7 +96,7 @@ exports[`Content-Manager || RelationInput || RelationItem should render and matc
</div>
</li>
<div
class="c7"
class="c6"
>
<p
aria-live="polite"

28
packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationList.test.js.snap
View File

@ -46,18 +46,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
gap: 4px;
}
.c5 > * {
margin-left: 0;
margin-right: 0;
}
.c5 > * + * {
margin-left: 4px;
}
.c8 {
.c7 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -69,16 +61,16 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
width: 1px;
}
.c6 {
.c5 {
width: 100%;
min-width: 0;
}
.c6 > div[role='button'] {
.c5 > div[role='button'] {
cursor: all-scroll;
}
.c7 {
.c6 {
width: 100%;
min-width: 0;
}
@ -128,10 +120,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
data-handler-id="T0"
>
<div
class="c4 c5 c6"
class="c4 c5"
>
<div
class="c3 c7"
class="c3 c6"
>
First relation
</div>
@ -147,10 +139,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
data-handler-id="T2"
>
<div
class="c4 c5 c6"
class="c4 c5"
>
<div
class="c3 c7"
class="c3 c6"
>
Second relation
</div>
@ -159,7 +151,7 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
</li>
</div>
<div
class="c8"
class="c7"
>
<p
aria-live="polite"

286
packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
View File

@ -1,33 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content-Manager || RelationInput should render and match snapshot 1`] = `
.c6 {
.c5 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
color: #32324d;
}
.c13 {
.c12 {
font-size: 0.75rem;
line-height: 1.33;
color: #4945ff;
}
.c27 {
.c26 {
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c30 {
.c29 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
color: #006096;
}
.c35 {
.c34 {
font-size: 0.875rem;
line-height: 1.43;
display: block;
@ -37,14 +37,14 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
color: #4945ff;
}
.c38 {
.c37 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
color: #2f6846;
}
.c40 {
.c39 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
@ -60,19 +60,19 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
flex-basis: 70%;
}
.c8 {
.c7 {
padding-right: 12px;
}
.c12 {
.c11 {
padding-right: 8px;
}
.c16 {
.c15 {
cursor: all-scroll;
}
.c17 {
.c16 {
background: #ffffff;
padding-top: 8px;
padding-right: 16px;
@ -83,14 +83,14 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 1px solid #dcdce4;
}
.c24 {
.c23 {
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
min-width: 0;
}
.c28 {
.c27 {
background: #eaf5ff;
padding-top: 4px;
padding-right: 8px;
@ -101,16 +101,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 1px solid #b8e1ff;
}
.c31 {
.c30 {
padding-left: 16px;
}
.c33 {
.c32 {
color: #666687;
width: 12px;
}
.c36 {
.c35 {
background: #eafbe7;
padding-top: 4px;
padding-right: 8px;
@ -121,7 +121,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 1px solid #c6f0c2;
}
.c39 {
.c38 {
padding-top: 8px;
}
@ -159,9 +159,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 4px;
}
.c7 {
.c6 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -175,7 +176,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
flex-direction: row;
}
.c18 {
.c17 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -193,22 +194,37 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
justify-content: space-between;
}
.c11 {
.c18 {
-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;
gap: 4px;
}
.c10 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c11[aria-disabled='true'] {
.c10[aria-disabled='true'] {
pointer-events: none;
}
.c11[aria-disabled='true'] svg path {
.c10[aria-disabled='true'] svg path {
fill: #666687;
}
.c11 svg {
.c10 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -216,11 +232,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
font-size: 0.625rem;
}
.c11 svg path {
.c10 svg path {
fill: #4945ff;
}
.c11:after {
.c10:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -235,11 +251,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent;
}
.c11:focus-visible {
.c10:focus-visible {
outline: none;
}
.c11:focus-visible:after {
.c10:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -250,29 +266,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c4 > * {
margin-top: 0;
margin-bottom: 0;
}
.c4 > * + * {
margin-top: 4px;
}
.c19 > * {
margin-left: 0;
margin-right: 0;
}
.c19 > * + * {
margin-left: 4px;
}
.c34 path {
.c33 path {
fill: #666687;
}
.c21 {
.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -286,21 +284,21 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
outline: none;
}
.c21 svg {
.c20 svg {
height: 12px;
width: 12px;
}
.c21 svg > g,
.c21 svg path {
.c20 svg > g,
.c20 svg path {
fill: #ffffff;
}
.c21[aria-disabled='true'] {
.c20[aria-disabled='true'] {
pointer-events: none;
}
.c21:after {
.c20:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -315,11 +313,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent;
}
.c21:focus-visible {
.c20:focus-visible {
outline: none;
}
.c21:focus-visible:after {
.c20:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -330,7 +328,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c15 {
.c14 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -342,7 +340,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
width: 1px;
}
.c25 {
.c24 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -358,31 +356,31 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
outline: none;
}
.c25 svg path {
.c24 svg path {
-webkit-transition: fill 150ms ease-out;
transition: fill 150ms ease-out;
fill: currentColor;
}
.c25 svg {
.c24 svg {
font-size: 0.625rem;
}
.c25 .c5 {
.c24 .c4 {
-webkit-transition: color 150ms ease-out;
transition: color 150ms ease-out;
color: currentColor;
}
.c25:hover {
.c24:hover {
color: #7b79ff;
}
.c25:active {
.c24:active {
color: #271fe0;
}
.c25:after {
.c24:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -397,11 +395,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent;
}
.c25:focus-visible {
.c24:focus-visible {
outline: none;
}
.c25:focus-visible:after {
.c24:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -412,7 +410,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c22 {
.c21 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -430,54 +428,54 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: none;
}
.c22 svg > g,
.c22 svg path {
.c21 svg > g,
.c21 svg path {
fill: #8e8ea9;
}
.c22:hover svg > g,
.c22:hover svg path {
.c21:hover svg > g,
.c21:hover svg path {
fill: #666687;
}
.c22:active svg > g,
.c22:active svg path {
.c21:active svg > g,
.c21:active svg path {
fill: #a5a5ba;
}
.c22[aria-disabled='true'] {
.c21[aria-disabled='true'] {
background-color: #eaeaef;
}
.c22[aria-disabled='true'] svg path {
.c21[aria-disabled='true'] svg path {
fill: #666687;
}
.c29 .c5 {
.c28 .c4 {
color: #0c75af;
}
.c37 .c5 {
.c36 .c4 {
color: #328048;
}
.c9 {
.c8 {
background: transparent;
border: none;
position: relative;
z-index: 1;
}
.c9 svg {
.c8 svg {
height: 0.6875rem;
width: 0.6875rem;
}
.c9 svg path {
.c8 svg path {
fill: #666687;
}
.c10 {
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -486,39 +484,39 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: none;
}
.c10 svg {
.c9 svg {
width: 0.5625rem;
}
.c20 {
.c19 {
width: 100%;
min-width: 0;
}
.c20 > div[role='button'] {
.c19 > div[role='button'] {
cursor: all-scroll;
}
.c23 {
.c22 {
width: 100%;
min-width: 0;
}
.c14 {
.c13 {
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
.c14:before,
.c14:after {
.c13:before,
.c13:after {
position: absolute;
width: 100%;
height: 4px;
z-index: 1;
}
.c14:before {
.c13:before {
content: '';
background: linear-gradient(rgba(3,3,5,0.2) 0%,rgba(0,0,0,0) 100%);
top: 0;
@ -527,7 +525,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
transition: opacity 0.2s ease-in-out;
}
.c14:after {
.c13:after {
content: '';
background: linear-gradient(0deg,rgba(3,3,5,0.2) 0%,rgba(0,0,0,0) 100%);
bottom: 0;
@ -536,23 +534,23 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
transition: opacity 0.2s ease-in-out;
}
.c26 {
.c25 {
display: block;
}
.c26 > span {
.c25 > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.c32 svg path {
.c31 svg path {
fill: #8e8ea9;
}
.c32:hover svg path,
.c32:focus svg path {
.c31:hover svg path,
.c31:focus svg path {
fill: #666687;
}
@ -563,14 +561,14 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
wrap="wrap"
>
<div
class="c2 c3 c4"
class="c2 c3"
>
<label
class="c5 c6"
class="c4 c5"
for="1"
>
<div
class="c7"
class="c6"
>
Some Relation
</div>
@ -629,7 +627,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
>
<div
aria-hidden="true"
class="c8 c9 c10"
class="c7 c8 c9"
>
<svg
fill="none"
@ -657,12 +655,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
<button
aria-disabled="false"
class="c7 c11"
class="c6 c10"
type="button"
>
<span
aria-hidden="true"
class="c12"
class="c11"
>
<svg
fill="none"
@ -680,24 +678,24 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</span>
<span
class="c5 c13"
class="c4 c12"
>
Load more
</span>
</button>
</div>
<div
class="c14"
class="c13"
>
<div
class="c15"
class="c14"
id="some-relation-1-item-instructions"
>
Press spacebar to grab and re-order
</div>
<div
aria-live="assertive"
class="c15"
class="c14"
/>
<div
style="position: relative; height: 162px; overflow: auto; will-change: transform; direction: ltr;"
@ -707,26 +705,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
>
<li
aria-describedby="some-relation-1-item-instructions"
class="c16"
class="c15"
style="position: absolute; left: 0px; top: 0px; height: 54px; width: 100%; bottom: 4px;"
>
<div
class="c17 c18"
class="c16 c17"
data-handler-id="T0"
draggable="true"
>
<div
class="c7 c19 c20"
class="c18 c19"
>
<div
aria-disabled="false"
class="c21 c22"
class="c20 c21"
role="button"
tabindex="0"
type="button"
>
<span
class="c15"
class="c14"
>
Drag
</span>
@ -770,21 +768,21 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c23"
class="c17 c22"
>
<div
class="c24"
class="c23"
>
<span>
<a
aria-current="page"
aria-describedby="0"
class="c25 c26 active"
class="c24 c25 active"
href="/"
tabindex="0"
>
<span
class="c5 c27"
class="c4 c26"
>
Relation 1
</span>
@ -792,10 +790,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span>
</div>
<div
class="c28 c29"
class="c27 c28"
>
<span
class="c5 c30"
class="c4 c29"
>
Draft
</span>
@ -803,16 +801,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
</div>
<div
class="c31"
class="c30"
>
<button
aria-label="Remove"
class="c32"
class="c31"
data-testid="remove-relation-1"
type="button"
>
<svg
class="c33 c34"
class="c32 c33"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -830,26 +828,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</li>
<li
aria-describedby="some-relation-1-item-instructions"
class="c16"
class="c15"
style="position: absolute; left: 0px; top: 54px; height: 54px; width: 100%; bottom: 4px;"
>
<div
class="c17 c18"
class="c16 c17"
data-handler-id="T2"
draggable="true"
>
<div
class="c7 c19 c20"
class="c18 c19"
>
<div
aria-disabled="false"
class="c21 c22"
class="c20 c21"
role="button"
tabindex="0"
type="button"
>
<span
class="c15"
class="c14"
>
Drag
</span>
@ -893,15 +891,15 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c23"
class="c17 c22"
>
<div
class="c24"
class="c23"
>
<span>
<span
aria-describedby="1"
class="c5 c35"
class="c4 c34"
tabindex="0"
>
Relation 2
@ -909,10 +907,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span>
</div>
<div
class="c36 c37"
class="c35 c36"
>
<span
class="c5 c38"
class="c4 c37"
>
Published
</span>
@ -920,16 +918,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
</div>
<div
class="c31"
class="c30"
>
<button
aria-label="Remove"
class="c32"
class="c31"
data-testid="remove-relation-2"
type="button"
>
<svg
class="c33 c34"
class="c32 c33"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -947,26 +945,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</li>
<li
aria-describedby="some-relation-1-item-instructions"
class="c16"
class="c15"
style="position: absolute; left: 0px; top: 108px; height: 54px; width: 100%; bottom: 4px;"
>
<div
class="c17 c18"
class="c16 c17"
data-handler-id="T4"
draggable="true"
>
<div
class="c7 c19 c20"
class="c18 c19"
>
<div
aria-disabled="false"
class="c21 c22"
class="c20 c21"
role="button"
tabindex="0"
type="button"
>
<span
class="c15"
class="c14"
>
Drag
</span>
@ -1010,15 +1008,15 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c23"
class="c17 c22"
>
<div
class="c24"
class="c23"
>
<span>
<span
aria-describedby="2"
class="c5 c35"
class="c4 c34"
tabindex="0"
>
Relation 3
@ -1028,16 +1026,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
</div>
<div
class="c31"
class="c30"
>
<button
aria-label="Remove"
class="c32"
class="c31"
data-testid="remove-relation-3"
type="button"
>
<svg
class="c33 c34"
class="c32 c33"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1057,10 +1055,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
</div>
<div
class="c39"
class="c38"
>
<p
class="c5 c40"
class="c4 c39"
id="1-hint"
>
this is a description
@ -1068,7 +1066,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div>
</div>
<div
class="c15"
class="c14"
>
<p
aria-live="polite"

18
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/Component.js
View File

@ -14,7 +14,7 @@ import {
AccordionContent,
Grid,
GridItem,
Stack,
Flex,
Box,
IconButton,
} from '@strapi/design-system';
@ -49,7 +49,7 @@ const CustomIconButton = styled(IconButton)`
}
`;
const ActionsStack = styled(Stack)`
const ActionsFlex = styled(Flex)`
& .drag-handle {
background: unset;
@ -138,7 +138,7 @@ const DraggedItem = ({
<AccordionToggle
action={
isReadOnly ? null : (
<ActionsStack horizontal spacing={0} expanded={isOpen}>
<ActionsFlex gap={0} expanded={isOpen}>
<CustomIconButton
expanded={isOpen}
noBorder
@ -169,14 +169,20 @@ const DraggedItem = ({
>
<Drag />
</IconButton>
</ActionsStack>
</ActionsFlex>
)
}
title={displayedValue}
togglePosition="left"
/>
<AccordionContent>
<Stack background="neutral100" padding={6} spacing={6}>
<Flex
direction="column"
alignItems="stretch"
background="neutral100"
padding={6}
gap={6}
>
{fields.map((fieldRow, key) => {
return (
// eslint-disable-next-line react/no-array-index-key
@ -224,7 +230,7 @@ const DraggedItem = ({
</Grid>
);
})}
</Stack>
</Flex>
</AccordionContent>
</Accordion>
)}

4
packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import CodeMirror from 'codemirror';
import 'codemirror/addon/display/placeholder';
import CodeMirror from 'codemirror5';
import 'codemirror5/addon/display/placeholder';
import PreviewWysiwyg from '../PreviewWysiwyg';
import { EditorStylesContainer } from './EditorStylesContainer';
import { EditorAndPreviewWrapper } from './WysiwygStyles';

10
packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
View File

@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { Typography, Box, Stack } from '@strapi/design-system';
import { Typography, Box, Flex } from '@strapi/design-system';
import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
import Editor from './Editor';
import WysiwygNav from './WysiwygNav';
@ -125,14 +125,14 @@ const Wysiwyg = ({
return (
<>
<Stack spacing={1}>
<Stack horizontal spacing={1}>
<Flex direction="column" alignItems="stretch" gap={1}>
<Flex gap={1}>
<Typography variant="pi" fontWeight="bold" textColor="neutral800">
{label}
{required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
</Typography>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Stack>
</Flex>
<EditorLayout
isExpandMode={isExpandMode}
@ -166,7 +166,7 @@ const Wysiwyg = ({
{!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
</EditorLayout>
<Hint hint={hint} name={name} error={error} />
</Stack>
</Flex>
{error && (
<Box paddingTop={1}>

98
packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/__snapshots__/index.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
.c6 {
.c4 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
@ -24,14 +24,14 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
color: #32324d;
}
.c7 {
.c5 {
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #dcdce4;
}
.c8 {
.c6 {
background: #f6f6f9;
padding: 8px;
}
@ -63,9 +63,10 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 4px;
}
.c3 {
.c2 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -77,9 +78,10 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
gap: 4px;
}
.c9 {
.c7 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -97,6 +99,34 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
justify-content: space-between;
}
.c8 {
-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;
}
.c9 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c31 {
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
@ -115,29 +145,11 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
justify-content: flex-end;
}
.c2 > * {
margin-top: 0;
margin-bottom: 0;
}
.c2 > * + * {
margin-top: 4px;
}
.c10 > * {
margin-top: 0;
margin-bottom: 0;
}
.c4 > * {
margin-left: 0;
margin-right: 0;
}
.c4 > * + * {
margin-left: 4px;
}
.c21 {
display: -webkit-box;
display: -webkit-flex;
@ -233,7 +245,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
align-items: center;
}
.c27 .c5 {
.c27 .c3 {
color: #ffffff;
}
@ -242,7 +254,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
background: #eaeaef;
}
.c27[aria-disabled='true'] .c5 {
.c27[aria-disabled='true'] .c3 {
color: #666687;
}
@ -255,7 +267,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
background: #eaeaef;
}
.c27[aria-disabled='true']:active .c5 {
.c27[aria-disabled='true']:active .c3 {
color: #666687;
}
@ -271,7 +283,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
background-color: #eaeaef;
}
.c27 .c5 {
.c27 .c3 {
color: #32324d;
}
@ -800,35 +812,35 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
}
<div
class="c0 c1 c2"
class="c0 c1"
>
<div
class="c0 c3 c4"
class="c0 c2"
>
<span
class="c5 c6"
class="c3 c4"
>
hello world
</span>
</div>
<div
class="c0 c7"
class="c0 c5"
>
<div
class="c0 c8"
class="c0 c6"
>
<div
class="c0 c9"
class="c0 c7"
>
<div
class="c0 c3"
class="c0 c8"
>
<div>
<div
class="c0 c1 c10"
class="c0 c9 c10"
>
<div
class="c0 c3 c11"
class="c0 c8 c11"
>
<button
aria-disabled="false"
@ -840,16 +852,16 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
type="button"
/>
<div
class="c0 c9 c13"
class="c0 c7 c13"
>
<div
class="c0 c3"
class="c0 c8"
>
<div
class="c0 c14"
>
<span
class="c5 c15"
class="c3 c15"
id="selectTitle-content"
>
Add a title
@ -857,7 +869,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
</div>
</div>
<div
class="c0 c3"
class="c0 c8"
>
<button
aria-hidden="true"
@ -887,7 +899,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
</div>
</div>
<div
class="c0 c3 c19 c20"
class="c0 c8 c19 c20"
>
<span>
<button
@ -1023,7 +1035,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
type="button"
>
<span
class="c5 c6"
class="c3 c4"
>
Preview mode
</span>
@ -1144,7 +1156,7 @@ exports[`Wysiwyg render and actions buttons should render the Wysiwyg 1`] = `
type="button"
>
<span
class="c5 c33"
class="c3 c33"
>
Expand
</span>

6
packages/core/admin/admin/src/content-manager/components/Wysiwyg/utils/continueList.js
View File

@ -1,4 +1,4 @@
import CodeMirror from 'codemirror';
import CodeMirror from 'codemirror5';
// Disabling eslint on purpose
/* eslint-disable */
@ -7,9 +7,9 @@ var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/,
emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/,
unorderedListRE = /[*+-]\s/;
/*
/*
functions coming from CodeMirror addons continuelist.js
===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js
===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js
we imported it because the way the addon ask to use markdown mode
since we have our own markdown preview system we couldn't use it directly

10
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Button, Box, Typography, Stack, Flex, SimpleMenu, MenuItem } from '@strapi/design-system';
import { Button, Box, Typography, Flex, SimpleMenu, MenuItem } from '@strapi/design-system';
import { Plus } from '@strapi/icons';
import { getTrad } from '../../../utils';
import RowsLayout from './RowsLayout';
@ -11,7 +11,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
const { formatMessage } = useIntl();
return (
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Flex justifyContent="space-between">
<div>
<Box>
@ -34,7 +34,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
<LinkToCTB />
</Flex>
<Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
{editLayout.map((row, index) => (
<RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
))}
@ -58,9 +58,9 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
</MenuItem>
))}
</SimpleMenu>
</Stack>
</Flex>
</Box>
</Stack>
</Flex>
);
};

6
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Box, Flex, Typography, Stack } from '@strapi/design-system';
import { Box, Flex, Typography } from '@strapi/design-system';
import { ComponentIcon } from '../../../components/ComponentIcon';
import useLayoutDnd from '../../../hooks/useLayoutDnd';
@ -33,7 +33,7 @@ const DynamicZoneList = ({ components }) => {
const { componentLayouts } = useLayoutDnd();
return (
<Stack spacing={2} horizontal overflow="scroll hidden" padding={3}>
<Flex gap={2} overflow="scroll hidden" padding={3}>
{components.map((componentUid) => (
<CustomLink
hasRadius
@ -58,7 +58,7 @@ const DynamicZoneList = ({ components }) => {
</Box>
</CustomLink>
))}
</Stack>
</Flex>
);
};

6
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js
View File

@ -22,7 +22,7 @@ import {
GridItem,
Select,
Option,
Stack,
Flex,
Divider,
} from '@strapi/design-system';
import { ArrowLeft, Check } from '@strapi/icons';
@ -264,7 +264,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
paddingLeft={7}
paddingRight={7}
>
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Typography variant="delta" as="h2">
{formatMessage({
id: getTrad('containers.SettingPage.settings'),
@ -328,7 +328,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
});
}}
/>
</Stack>
</Flex>
</Box>
</ContentLayout>
<ConfirmDialog

152
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
color: #666687;
}
.c24 {
.c23 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -182,6 +182,36 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c26 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c45 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.c49 {
@ -198,15 +228,6 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
flex-direction: row;
}
.c23 > * {
margin-top: 0;
margin-bottom: 0;
}
.c23 > * + * {
margin-top: 16px;
}
.c27 > * {
margin-top: 0;
margin-bottom: 0;
@ -216,15 +237,6 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
margin-top: 4px;
}
.c45 > * {
margin-top: 0;
margin-bottom: 0;
}
.c45 > * + * {
margin-top: 8px;
}
.c14 {
display: -webkit-box;
display: -webkit-flex;
@ -540,12 +552,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
margin: 0;
}
.c25 {
.c24 {
display: grid;
grid-template-columns: repeat(12,1fr);
}
.c26 {
.c25 {
grid-column: span 6;
max-width: 100%;
}
@ -859,13 +871,13 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
}
@media (max-width:68.75rem) {
.c26 {
.c25 {
grid-column: span 12;
}
}
@media (max-width:34.375rem) {
.c26 {
.c25 {
grid-column: span;
}
}
@ -985,25 +997,25 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
class="c1 c21"
>
<div
class="c1 c22 c23"
class="c1 c22"
>
<h2
class="c12 c24"
class="c12 c23"
>
Settings
</h2>
<div
class="c1 c25"
class="c1 c24"
>
<div
class="c26"
class="c25"
>
<div
class="c1 "
>
<div>
<div
class="c1 c22 c27"
class="c1 c26 c27"
>
<label
class="c12 c18"
@ -1092,12 +1104,12 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
/>
</div>
<h3
class="c12 c24"
class="c12 c23"
>
View
</h3>
<div
class="c1 c22 c23"
class="c1 c22"
>
<div
class="c1 c10"
@ -1160,10 +1172,10 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
class="c1 c44"
>
<div
class="c1 c22 c45"
class="c1 c45"
>
<div
class="c1 c25"
class="c1 c24"
>
<div
class="c46"
@ -1534,7 +1546,7 @@ exports[`EditSettingsView should add field 1`] = `
color: #666687;
}
.c24 {
.c23 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -1695,6 +1707,36 @@ exports[`EditSettingsView should add field 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c26 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c45 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.c49 {
@ -1711,15 +1753,6 @@ exports[`EditSettingsView should add field 1`] = `
flex-direction: row;
}
.c23 > * {
margin-top: 0;
margin-bottom: 0;
}
.c23 > * + * {
margin-top: 16px;
}
.c27 > * {
margin-top: 0;
margin-bottom: 0;
@ -1729,15 +1762,6 @@ exports[`EditSettingsView should add field 1`] = `
margin-top: 4px;
}
.c45 > * {
margin-top: 0;
margin-bottom: 0;
}
.c45 > * + * {
margin-top: 8px;
}
.c14 {
display: -webkit-box;
display: -webkit-flex;
@ -2053,12 +2077,12 @@ exports[`EditSettingsView should add field 1`] = `
margin: 0;
}
.c25 {
.c24 {
display: grid;
grid-template-columns: repeat(12,1fr);
}
.c26 {
.c25 {
grid-column: span 6;
max-width: 100%;
}
@ -2372,13 +2396,13 @@ exports[`EditSettingsView should add field 1`] = `
}
@media (max-width:68.75rem) {
.c26 {
.c25 {
grid-column: span 12;
}
}
@media (max-width:34.375rem) {
.c26 {
.c25 {
grid-column: span;
}
}
@ -2498,25 +2522,25 @@ exports[`EditSettingsView should add field 1`] = `
class="c1 c21"
>
<div
class="c1 c22 c23"
class="c1 c22"
>
<h2
class="c12 c24"
class="c12 c23"
>
Settings
</h2>
<div
class="c1 c25"
class="c1 c24"
>
<div
class="c26"
class="c25"
>
<div
class="c1 "
>
<div>
<div
class="c1 c22 c27"
class="c1 c26 c27"
>
<label
class="c12 c18"
@ -2605,12 +2629,12 @@ exports[`EditSettingsView should add field 1`] = `
/>
</div>
<h3
class="c12 c24"
class="c12 c23"
>
View
</h3>
<div
class="c1 c22 c23"
class="c1 c22"
>
<div
class="c1 c10"
@ -2673,10 +2697,10 @@ exports[`EditSettingsView should add field 1`] = `
class="c1 c44"
>
<div
class="c1 c22 c45"
class="c1 c45"
>
<div
class="c1 c25"
class="c1 c24"
>
<div
class="c46"

13
packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js
View File

@ -17,7 +17,6 @@ import {
DialogFooter,
Flex,
Typography,
Stack,
} from '@strapi/design-system';
import styled from 'styled-components';
import { getTrad } from '../../../utils';
@ -70,7 +69,7 @@ const Header = ({
if (isCreatingEntry && canCreate) {
primaryAction = (
<Stack horizontal spacing={2}>
<Flex gap={2}>
{hasDraftAndPublish && (
<Button disabled startIcon={<Check />} variant="secondary">
{formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@ -82,7 +81,7 @@ const Header = ({
defaultMessage: 'Save',
})}
</Button>
</Stack>
</Flex>
);
}
@ -168,7 +167,7 @@ const Header = ({
isOpen={showWarningUnpublish}
>
<DialogBody icon={<ExclamationMarkCircle />}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" spacing={2}>
<Flex justifyContent="center" style={{ textAlign: 'center' }}>
<Typography id="confirm-description">
{formatMessage(
@ -191,7 +190,7 @@ const Header = ({
})}
</Typography>
</Flex>
</Stack>
</Flex>
</DialogBody>
<DialogFooter
startAction={
@ -223,7 +222,7 @@ const Header = ({
isOpen={showPublishConfirmation}
>
<DialogBody icon={<ExclamationMarkCircle />}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<FlexTextAlign justifyContent="center">
<Typography id="confirm-description">
{draftCount}
@ -248,7 +247,7 @@ const Header = ({
})}
</Typography>
</FlexTextAlign>
</Stack>
</Flex>
</DialogBody>
<DialogFooter
startAction={

22
packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
View File

@ -117,13 +117,19 @@ describe('CONTENT MANAGER | EditView | Header', () => {
flex-direction: row;
}
.c11 > * {
margin-left: 0;
margin-right: 0;
}
.c11 > * + * {
margin-left: 8px;
.c11 {
-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;
gap: 8px;
}
.c12 {
@ -374,7 +380,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
</h1>
</div>
<div
class="c0 c8 c11"
class="c0 c11"
>
<button
aria-disabled="true"

18
packages/core/admin/admin/src/content-manager/pages/EditView/Information/index.js
View File

@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import propTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { useCMEditViewDataManager } from '@strapi/helper-plugin';
import { Box, Divider, Flex, Stack, Typography } from '@strapi/design-system';
import { Box, Divider, Flex, Typography } from '@strapi/design-system';
import { getTrad } from '../../../utils';
import getUnits from './utils/getUnits';
@ -49,7 +49,7 @@ const Information = () => {
const created = getFieldInfo('createdAt', 'createdBy');
return (
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Typography variant="sigma" textColor="neutral600" id="additional-information">
{formatMessage({
id: getTrad('containers.Edit.information'),
@ -61,8 +61,8 @@ const Information = () => {
<Divider />
</Box>
<Stack spacing={4}>
<Stack spacing={2} as="dl">
<Flex direction="column" alignItems="stretch" gap={4}>
<Flex direction="column" alignItems="stretch" gap={2} as="dl">
<KeyValuePair
label={formatMessage({
id: getTrad('containers.Edit.information.created'),
@ -78,9 +78,9 @@ const Information = () => {
})}
value={created.by}
/>
</Stack>
</Flex>
<Stack spacing={2} as="dl">
<Flex direction="column" alignItems="stretch" gap={2} as="dl">
<KeyValuePair
label={formatMessage({
id: getTrad('containers.Edit.information.lastUpdate'),
@ -96,9 +96,9 @@ const Information = () => {
})}
value={updated.by}
/>
</Stack>
</Stack>
</Stack>
</Flex>
</Flex>
</Flex>
);
};

18
packages/core/admin/admin/src/content-manager/pages/EditView/index.js
View File

@ -8,7 +8,7 @@ import {
LoadingIndicatorPage,
} from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import { ContentLayout, Box, Grid, GridItem, Main, Stack } from '@strapi/design-system';
import { ContentLayout, Box, Grid, GridItem, Main, Flex } from '@strapi/design-system';
import { Pencil, Layer } from '@strapi/icons';
import { InjectionZone } from '../../../shared/components';
import permissions from '../../../permissions';
@ -114,7 +114,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
<ContentLayout>
<Grid gap={4}>
<GridItem col={9} s={12}>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
{formattedContentTypeLayout.map((row, index) => {
if (isDynamicZone(row)) {
const {
@ -151,7 +151,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
paddingBottom={6}
borderColor="neutral150"
>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
{row.map((grid, gridRowIndex) => (
<GridRow
columns={grid}
@ -159,14 +159,14 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
key={gridRowIndex}
/>
))}
</Stack>
</Flex>
</Box>
);
})}
</Stack>
</Flex>
</GridItem>
<GridItem col={3} s={12}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<DraftAndPublishBadge />
<Box
as="aside"
@ -184,7 +184,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
<InjectionZone area="contentManager.editView.informations" />
</Box>
<Box as="aside" aria-labelledby="links">
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<InjectionZone area="contentManager.editView.right-links" slug={slug} />
{slug !== 'strapi::administrator' && (
<CheckPermissions permissions={ctbPermissions}>
@ -228,9 +228,9 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
onDeleteSucceeded={onDeleteSucceeded}
/>
)}
</Stack>
</Flex>
</Box>
</Stack>
</Flex>
</GridItem>
</Grid>
</ContentLayout>

6
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Flex, Typography, Stack } from '@strapi/design-system';
import { Flex, Typography } from '@strapi/design-system';
import { Pencil, Cross, Drag } from '@strapi/icons';
import ellipsisCardTitle from '../utils/ellipsisCardTitle';
@ -62,12 +62,12 @@ const CardPreview = ({ labelField, transparent, isSibling }) => {
transparent={transparent}
isSibling={isSibling}
>
<Stack horizontal spacing={3}>
<Flex gap={3}>
<DragButton alignItems="center">
<Drag />
</DragButton>
<Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
</Stack>
</Flex>
<Flex paddingLeft={3}>
<ActionBox alignItems="center">
<Pencil />

6
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useIntl } from 'react-intl';
import { Flex, Box, Typography, Stack } from '@strapi/design-system';
import { Flex, Box, Typography } from '@strapi/design-system';
import { Pencil, Cross, Drag } from '@strapi/icons';
import CardPreview from './CardPreview';
import ellipsisCardTitle from '../utils/ellipsisCardTitle';
@ -188,7 +188,7 @@ const DraggableCard = ({
onClick={handleClickEditRow}
isDragging={isDragging}
>
<Stack horizontal spacing={3}>
<Flex gap={3}>
<DragButton
as="span"
aria-label={formatMessage(
@ -205,7 +205,7 @@ const DraggableCard = ({
<Drag />
</DragButton>
<Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
</Stack>
</Flex>
<Flex paddingLeft={3}>
<ActionButton
ref={editButtonRef}

10
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js
View File

@ -8,8 +8,8 @@ import {
Select,
Option,
ToggleInput,
Stack,
Typography,
Flex,
} from '@strapi/design-system';
import { getTrad } from '../../../utils';
@ -18,7 +18,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
const { settings, metadatas } = modifiedData;
return (
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Typography variant="delta" as="h2">
{formatMessage({
id: getTrad('containers.SettingPage.settings'),
@ -26,7 +26,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
})}
</Typography>
<Stack horizontal justifyContent="space-between" spacing={4}>
<Flex justifyContent="space-between" gap={4}>
<Box width="100%">
<ToggleInput
label={formatMessage({
@ -92,7 +92,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
checked={settings.bulkable}
/>
</Box>
</Stack>
</Flex>
<Grid gap={4}>
<GridItem s={12} col={6}>
@ -152,7 +152,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
</Select>
</GridItem>
</Grid>
</Stack>
</Flex>
);
};

14
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js
View File

@ -2,15 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { PropTypes } from 'prop-types';
import { useIntl } from 'react-intl';
import {
Box,
Flex,
Stack,
Typography,
SimpleMenu,
MenuItem,
IconButton,
} from '@strapi/design-system';
import { Box, Flex, Typography, SimpleMenu, MenuItem, IconButton } from '@strapi/design-system';
import { Plus } from '@strapi/icons';
import DraggableCard from './DraggableCard';
import { getTrad } from '../../../utils';
@ -78,7 +70,7 @@ const SortDisplayedFields = ({
hasRadius
>
<ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
<Stack horizontal spacing={3}>
<Flex gap={3}>
{displayedFields.map((field, index) => (
<DraggableCard
key={field}
@ -92,7 +84,7 @@ const SortDisplayedFields = ({
setIsDraggingSibling={setIsDraggingSibling}
/>
))}
</Stack>
</Flex>
</ScrollableContainer>
<SelectContainer size="auto" paddingBottom={4}>
<SimpleMenu

234
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
color: #666687;
}
.c25 {
.c24 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -110,7 +110,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c27 {
.c26 {
width: 100%;
}
@ -216,6 +216,40 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.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;
gap: 16px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c28 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c35 {
@ -236,13 +270,19 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
justify-content: center;
}
.c24 > * {
margin-top: 0;
margin-bottom: 0;
}
.c24 > * + * {
margin-top: 16px;
.c61 {
-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;
gap: 12px;
}
.c29 > * {
@ -254,24 +294,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
margin-top: 4px;
}
.c26 > * {
margin-left: 0;
margin-right: 0;
}
.c26 > * + * {
margin-left: 16px;
}
.c61 > * {
margin-left: 0;
margin-right: 0;
}
.c61 > * + * {
margin-left: 12px;
}
.c15 {
display: -webkit-box;
display: -webkit-flex;
@ -632,7 +654,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
width: 100%;
}
.c28 {
.c27 {
max-width: 320px;
}
@ -923,24 +945,24 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
class="c0 c22"
>
<div
class="c0 c23 c24"
class="c0 c23"
>
<h2
class="c13 c25"
class="c13 c24"
>
Settings
</h2>
<div
class="c0 c11 c26"
class="c0 c25"
>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -1003,13 +1025,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
</div>
</div>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -1072,13 +1094,13 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
</div>
</div>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -1151,7 +1173,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -1240,7 +1262,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -1322,7 +1344,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -1409,7 +1431,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
class="c0 c57"
>
<h2
class="c13 c25"
class="c13 c24"
>
View
</h2>
@ -1422,7 +1444,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
size="1"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<div
class="c0 c62"
@ -1431,7 +1453,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
class="c0 c63 c11 c64"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<span
aria-label="Move id"
@ -1534,7 +1556,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
class="c0 c63 c11 c64"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<span
aria-label="Move address"
@ -1724,7 +1746,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
color: #666687;
}
.c25 {
.c24 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -1813,7 +1835,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c27 {
.c26 {
width: 100%;
}
@ -1919,6 +1941,40 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.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;
gap: 16px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c28 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c35 {
@ -1939,13 +1995,19 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
justify-content: center;
}
.c24 > * {
margin-top: 0;
margin-bottom: 0;
}
.c24 > * + * {
margin-top: 16px;
.c61 {
-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;
gap: 12px;
}
.c29 > * {
@ -1957,24 +2019,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
margin-top: 4px;
}
.c26 > * {
margin-left: 0;
margin-right: 0;
}
.c26 > * + * {
margin-left: 16px;
}
.c61 > * {
margin-left: 0;
margin-right: 0;
}
.c61 > * + * {
margin-left: 12px;
}
.c15 {
display: -webkit-box;
display: -webkit-flex;
@ -2335,7 +2379,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
width: 100%;
}
.c28 {
.c27 {
max-width: 320px;
}
@ -2625,24 +2669,24 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
class="c0 c22"
>
<div
class="c0 c23 c24"
class="c0 c23"
>
<h2
class="c13 c25"
class="c13 c24"
>
Settings
</h2>
<div
class="c0 c11 c26"
class="c0 c25"
>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -2705,13 +2749,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
</div>
</div>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -2774,13 +2818,13 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
</div>
</div>
<div
class="c0 c27"
class="c0 c26"
>
<div
class="c28"
class="c27"
>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<div
class="c0 c12"
@ -2853,7 +2897,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -2942,7 +2986,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -3024,7 +3068,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
>
<div>
<div
class="c0 c23 c29"
class="c0 c28 c29"
>
<label
class="c13 c19"
@ -3111,7 +3155,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
class="c0 c57"
>
<h2
class="c13 c25"
class="c13 c24"
>
View
</h2>
@ -3124,7 +3168,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
size="1"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<div
class="c0 c62"
@ -3133,7 +3177,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
class="c0 c63 c11 c64"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<span
aria-label="Move id"
@ -3236,7 +3280,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
class="c0 c63 c11 c64"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<span
aria-label="Move address"
@ -3339,7 +3383,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
class="c0 c63 c11 c64"
>
<div
class="c0 c12 c61"
class="c0 c61"
>
<span
aria-label="Move Cover"

16
packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
View File

@ -11,7 +11,6 @@ import {
Icon,
Portal,
PopoverPrimitives,
Stack,
Typography,
VisuallyHidden,
} from '@strapi/design-system';
@ -192,9 +191,16 @@ const Onboarding = () => {
</Flex>
</VideoLinkWrapper>
))}
<Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
<Flex
direction="column"
alignItems="stretch"
gap={2}
paddingLeft={5}
paddingTop={2}
paddingBottom={5}
>
{docLinks.map(({ label, href, icon }) => (
<Stack horizontal spacing={3} key={href}>
<Flex gap={3} key={href}>
<Icon as={icon} color="primary600" />
<TextLink
as="a"
@ -206,9 +212,9 @@ const Onboarding = () => {
>
{formatMessage(label)}
</TextLink>
</Stack>
</Flex>
))}
</Stack>
</Flex>
</FocusTrap>
</PopoverPrimitives.Content>
</Portal>

6
packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { Form, Link } from '@strapi/helper-plugin';
import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
import { Box, Flex, Main, Button, TextInput, Typography } from '@strapi/design-system';
import { Formik } from 'formik';
import UnauthenticatedLayout, {
Column,
@ -53,7 +53,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
)}
</Column>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<TextInput
error={
errors.email
@ -79,7 +79,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
defaultMessage: 'Send Email',
})}
</Button>
</Stack>
</Flex>
</Form>
)}
</Formik>

15
packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
View File

@ -1,16 +1,7 @@
import React, { useState } from 'react';
import { Form, Link } from '@strapi/helper-plugin';
import { EyeStriked, Eye } from '@strapi/icons';
import {
Box,
Stack,
Main,
Flex,
Button,
TextInput,
Checkbox,
Typography,
} from '@strapi/design-system';
import { Box, Main, Flex, Button, TextInput, Checkbox, Typography } from '@strapi/design-system';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
@ -75,7 +66,7 @@ const Login = ({ onSubmit, schema, children }) => {
)}
</Column>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<TextInput
error={
errors.email
@ -151,7 +142,7 @@ const Login = ({ onSubmit, schema, children }) => {
<Button fullWidth type="submit">
{formatMessage({ id: 'Auth.form.button.login', defaultMessage: 'Login' })}
</Button>
</Stack>
</Flex>
</Form>
)}
</Formik>

32
packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
View File

@ -117,6 +117,21 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c13 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c18 {
@ -155,15 +170,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
justify-content: center;
}
.c13 > * {
margin-top: 0;
margin-bottom: 0;
}
.c13 > * + * {
margin-top: 24px;
}
.c14 > * {
margin-top: 0;
margin-bottom: 0;
@ -649,12 +655,12 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
</div>
</div>
<div
class="c1 c12 c13"
class="c1 c12"
>
<div>
<div>
<div
class="c1 c12 c14"
class="c1 c13 c14"
>
<label
class="c8 c15"
@ -691,7 +697,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
<div>
<div>
<div
class="c1 c12 c14"
class="c1 c13 c14"
>
<label
class="c8 c15"
@ -749,7 +755,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
</div>
<div>
<div
class="c1 c12 c14"
class="c1 c13 c14"
>
<label
class="c8 c26 c27"

5
packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
View File

@ -17,7 +17,6 @@ import {
} from '@strapi/helper-plugin';
import {
Box,
Stack,
Main,
Flex,
Button,
@ -159,7 +158,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
</Typography>
</CenteredBox>
</Column>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" spacing={6}>
<Grid gap={4}>
<GridItem col={6}>
<TextInput
@ -314,7 +313,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
defaultMessage: "Let's start",
})}
</Button>
</Stack>
</Flex>
</Main>
</Form>
);

258
packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
View File

@ -65,25 +65,25 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
color: #666687;
}
.c26 {
.c25 {
font-size: 0.875rem;
line-height: 1.43;
color: #d02b20;
}
.c36 {
.c35 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
}
.c37 {
.c36 {
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c42 {
.c41 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
@ -123,7 +123,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
padding-bottom: 32px;
}
.c33 {
.c32 {
padding-right: 12px;
padding-left: 8px;
}
@ -174,7 +174,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
flex-direction: column;
}
.c28 {
.c27 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -192,21 +192,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
justify-content: space-between;
}
.c22 > * {
.c24 > * {
margin-top: 0;
margin-bottom: 0;
}
.c22 > * + * {
margin-top: 24px;
}
.c25 > * {
margin-top: 0;
margin-bottom: 0;
}
.c25 > * + * {
.c24 > * + * {
margin-top: 4px;
}
@ -268,7 +259,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
border: 2px solid #4945ff;
}
.c39 {
.c38 {
height: 18px;
min-width: 18px;
margin: 0;
@ -279,12 +270,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
cursor: pointer;
}
.c39:checked {
.c38:checked {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c39:checked:after {
.c38:checked:after {
content: '';
display: block;
position: relative;
@ -298,21 +289,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
transform: translateX(-50%) translateY(-50%);
}
.c39:checked:disabled:after {
.c38:checked:disabled:after {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
}
.c39:disabled {
.c38:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c39:indeterminate {
.c38:indeterminate {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c39:indeterminate:after {
.c38:indeterminate:after {
content: '';
display: block;
position: relative;
@ -327,12 +318,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
transform: translateX(-50%) translateY(-50%);
}
.c39:indeterminate:disabled {
.c38:indeterminate:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c39:indeterminate:disabled:after {
.c38:indeterminate:disabled:after {
background-color: #8e8ea9;
}
@ -409,7 +400,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
fill: #8e8ea9;
}
.c41 {
.c40 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -430,7 +421,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
width: 100%;
}
.c41 .c0 {
.c40 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -441,61 +432,105 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
align-items: center;
}
.c41 .c5 {
.c40 .c5 {
color: #ffffff;
}
.c41[aria-disabled='true'] {
.c40[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c41[aria-disabled='true'] .c5 {
.c40[aria-disabled='true'] .c5 {
color: #666687;
}
.c41[aria-disabled='true'] svg > g,.c41[aria-disabled='true'] svg path {
.c40[aria-disabled='true'] svg > g,.c40[aria-disabled='true'] svg path {
fill: #666687;
}
.c41[aria-disabled='true']:active {
.c40[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c41[aria-disabled='true']:active .c5 {
.c40[aria-disabled='true']:active .c5 {
color: #666687;
}
.c41[aria-disabled='true']:active svg > g,.c41[aria-disabled='true']:active svg path {
.c40[aria-disabled='true']:active svg > g,.c40[aria-disabled='true']:active svg path {
fill: #666687;
}
.c41:hover {
.c40:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
.c41:active {
.c40:active {
border: 1px solid #4945ff;
background: #4945ff;
}
.c41 svg > g,
.c41 svg path {
.c40 svg > g,
.c40 svg path {
fill: #ffffff;
}
.c27 {
.c26 {
line-height: 0;
}
.c29 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
padding-left: 16px;
padding-right: 16px;
padding-top: 0.65625rem;
color: #32324d;
font-weight: 400;
font-size: 0.875rem;
display: block;
width: 100%;
background: inherit;
}
.c29::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29[aria-disabled='true'] {
color: inherit;
}
.c29:focus {
outline: none;
box-shadow: none;
}
.c30 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
padding-left: 16px;
padding-right: 16px;
padding-right: 0;
padding-top: 0.65625rem;
color: #32324d;
font-weight: 400;
@ -534,51 +569,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
box-shadow: none;
}
.c31 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
padding-left: 16px;
padding-right: 0;
padding-top: 0.65625rem;
color: #32324d;
font-weight: 400;
font-size: 0.875rem;
display: block;
width: 100%;
background: inherit;
}
.c31::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c31::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c31:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c31::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c31[aria-disabled='true'] {
color: inherit;
}
.c31:focus {
outline: none;
box-shadow: none;
}
.c29 {
.c28 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
@ -590,12 +581,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
transition-duration: 0.2s;
}
.c29:focus-within {
.c28:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c34 {
.c33 {
border: none;
background: transparent;
font-size: 1.6rem;
@ -611,7 +602,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
align-items: center;
}
.c38 {
.c37 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -622,7 +613,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
align-items: flex-start;
}
.c38 * {
.c37 * {
cursor: pointer;
}
@ -642,13 +633,13 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
width: 6px;
}
.c23 {
.c22 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c24 {
.c23 {
grid-column: span 6;
max-width: 100%;
}
@ -672,12 +663,12 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
height: 4.5rem;
}
.c35 svg {
.c34 svg {
height: 1rem;
width: 1rem;
}
.c35 svg path {
.c34 svg path {
fill: #666687;
}
@ -685,22 +676,22 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
text-align: center;
}
.c40 {
.c39 {
color: #4945ff;
}
.c32::-ms-reveal {
.c31::-ms-reveal {
display: none;
}
@media (max-width:68.75rem) {
.c24 {
.c23 {
grid-column: span;
}
}
@media (max-width:34.375rem) {
.c24 {
.c23 {
grid-column: span;
}
}
@ -800,13 +791,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
</div>
<div
class="c0 c21 c22"
class="c0 c21"
spacing="6"
>
<div
class="c0 c23"
class="c0 c22"
>
<div
class="c24"
class="c23"
>
<div
class="c0 "
@ -814,7 +806,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c6"
@ -825,20 +817,20 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
Firstname
<span
class="c5 c26 c27"
class="c5 c25 c26"
>
*
</span>
</div>
</label>
<div
class="c0 c28 c29"
class="c0 c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c30"
class="c29"
id="2"
name="firstname"
value=""
@ -850,7 +842,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
</div>
<div
class="c24"
class="c23"
>
<div
class="c0 "
@ -858,7 +850,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c6"
@ -871,13 +863,13 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
</label>
<div
class="c0 c28 c29"
class="c0 c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c30"
class="c29"
id="4"
name="lastname"
value=""
@ -892,7 +884,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c6"
@ -903,20 +895,20 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
Email
<span
class="c5 c26 c27"
class="c5 c25 c26"
>
*
</span>
</div>
</label>
<div
class="c0 c28 c29"
class="c0 c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c30"
class="c29"
id="6"
name="email"
type="email"
@ -929,7 +921,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c6"
@ -940,32 +932,32 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
Password
<span
class="c5 c26 c27"
class="c5 c25 c26"
>
*
</span>
</div>
</label>
<div
class="c0 c28 c29"
class="c0 c27 c28"
>
<input
aria-describedby="8-hint"
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c31 c32"
class="c30 c31"
id="8"
name="password"
type="password"
value=""
/>
<div
class="c0 c33"
class="c0 c32"
>
<button
aria-label="Hide password"
class="c34 c35"
class="c33 c34"
type="button"
>
<svg
@ -984,7 +976,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
</div>
<p
class="c5 c36"
class="c5 c35"
id="8-hint"
>
Must be at least 8 characters, 1 uppercase, 1 lowercase & 1 number
@ -995,7 +987,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c6"
@ -1006,31 +998,31 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
Confirm Password
<span
class="c5 c26 c27"
class="c5 c25 c26"
>
*
</span>
</div>
</label>
<div
class="c0 c28 c29"
class="c0 c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c31 c32"
class="c30 c31"
id="10"
name="confirmPassword"
type="password"
value=""
/>
<div
class="c0 c33"
class="c0 c32"
>
<button
aria-label="Hide password"
class="c34 c35"
class="c33 c34"
type="button"
>
<svg
@ -1053,17 +1045,17 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
<div>
<div
class="c0 c21 c25"
class="c0 c21 c24"
>
<label
class="c5 c37 c38"
class="c5 c36 c37"
>
<div
class="c0 "
>
<input
aria-label="news"
class="c39"
class="c38"
id="12"
name="news"
type="checkbox"
@ -1074,7 +1066,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
Keep me updated about new features & upcoming improvements (by doing this you accept the
<a
class="c40"
class="c39"
href="https://strapi.io/terms"
rel="noreferrer"
target="_blank"
@ -1083,7 +1075,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</a>
and the
<a
class="c40"
class="c39"
href="https://strapi.io/privacy"
rel="noreferrer"
target="_blank"
@ -1097,11 +1089,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
</div>
<button
aria-disabled="false"
class="c3 c41"
class="c3 c40"
type="submit"
>
<span
class="c5 c42"
class="c5 c41"
>
Let's start
</span>

6
packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Formik } from 'formik';
import { Form, Link } from '@strapi/helper-plugin';
import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
import { Box, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
import { EyeStriked, Eye } from '@strapi/icons';
import UnauthenticatedLayout, {
Column,
@ -65,7 +65,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
)}
</Column>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<PasswordInput
name="password"
onChange={handleChange}
@ -157,7 +157,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
defaultMessage: 'Change password',
})}
</Button>
</Stack>
</Flex>
</Form>
)}
</Formik>

30
packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
View File

@ -144,6 +144,21 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c19 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c23 {
@ -182,15 +197,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
justify-content: center;
}
.c19 > * {
margin-top: 0;
margin-bottom: 0;
}
.c19 > * + * {
margin-top: 24px;
}
.c20 > * {
margin-top: 0;
margin-bottom: 0;
@ -673,12 +679,12 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
</div>
</div>
<div
class="c0 c18 c19"
class="c0 c18"
>
<div>
<div>
<div
class="c0 c18 c20"
class="c0 c19 c20"
>
<label
class="c5 c6"
@ -744,7 +750,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
<div>
<div>
<div
class="c0 c18 c20"
class="c0 c19 c20"
>
<label
class="c5 c6"

6
packages/core/admin/admin/src/pages/HomePage/ContentBlocks.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { ContentBox, useTracking } from '@strapi/helper-plugin';
import { Stack } from '@strapi/design-system';
import { Flex } from '@strapi/design-system';
import { InformationSquare, CodeSquare, PlaySquare, FeatherSquare } from '@strapi/icons';
import CloudBox from './CloudBox';
@ -19,7 +19,7 @@ const ContentBlocks = () => {
};
return (
<Stack spacing={5}>
<Flex direction="column" alignItems="stretch" gap={5}>
<CloudBox />
<BlockLink
href="https://strapi.io/resource-center"
@ -97,7 +97,7 @@ const ContentBlocks = () => {
iconBackground="alternative100"
/>
</BlockLink>
</Stack>
</Flex>
);
};

10
packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Typography, Stack, Box, Button } from '@strapi/design-system';
import { Typography, Box, Button, Flex } from '@strapi/design-system';
import { Link } from '@strapi/design-system/v2';
import { ArrowRight } from '@strapi/icons';
@ -10,17 +10,13 @@ const WordWrap = styled(Typography)`
word-break: break-word;
`;
const StackCustom = styled(Stack)`
align-items: flex-start;
`;
const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
const { formatMessage } = useIntl();
return (
<div>
<Box paddingLeft={6} paddingBottom={10}>
<StackCustom spacing={5}>
<Flex direction="column" alignItems="flex-start" gap={5}>
<Typography as="h1" variant="alpha">
{hasCreatedContentType
? formatMessage({
@ -60,7 +56,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
})}
</Button>
)}
</StackCustom>
</Flex>
</Box>
</div>
);

10
packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
View File

@ -7,7 +7,7 @@ import React from 'react';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { useAppInfos } from '@strapi/helper-plugin';
import { Typography, Box, Stack, Grid, GridItem } from '@strapi/design-system';
import { Typography, Box, Flex, Grid, GridItem } from '@strapi/design-system';
import { Link, LinkButton } from '@strapi/design-system/v2';
import { ExternalLink, Github, Discord, Reddit, Strapi, Twitter, Discourse } from '@strapi/icons';
@ -160,8 +160,8 @@ const SocialLinks = () => {
shadow="tableShadow"
>
<Box paddingBottom={7}>
<Stack spacing={5}>
<Stack spacing={3}>
<Flex direction="column" alignItems="stretch" gap={5}>
<Flex direction="column" alignItems="stretch" gap={3}>
<Typography variant="delta" as="h2" id="join-the-community">
{formatMessage({
id: 'app.components.HomePage.community',
@ -175,14 +175,14 @@ const SocialLinks = () => {
'Discuss with team members, contributors and developers on different channels',
})}
</Typography>
</Stack>
</Flex>
<Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
{formatMessage({
id: 'app.components.HomePage.roadmap',
defaultMessage: 'See our road map',
})}
</Link>
</Stack>
</Flex>
</Box>
<GridGap>
{socialLinksExtended.map(({ icon, link, name }) => {

6
packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { Typography, Icon, Divider, Stack } from '@strapi/design-system';
import { Typography, Icon, Divider, Flex } from '@strapi/design-system';
import { Github, Download, Star } from '@strapi/icons';
import { pxToRem } from '@strapi/helper-plugin';
@ -15,7 +15,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
const { formatMessage } = useIntl();
return (
<Stack horizontal spacing={1}>
<Flex gap={1}>
{!!githubStars && (
<>
<Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
@ -56,7 +56,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
{npmDownloads}
</Typography>
</p>
</Stack>
</Flex>
);
};

6
packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import pluralize from 'pluralize';
import { Box, Stack, Typography, Flex, Icon, Tooltip } from '@strapi/design-system';
import { Box, Typography, Flex, Icon, Tooltip } from '@strapi/design-system';
import { LinkButton } from '@strapi/design-system/v2';
import { ExternalLink, CheckCircle } from '@strapi/icons';
import { useTracking } from '@strapi/helper-plugin';
@ -117,7 +117,7 @@ const NpmPackageCard = ({
</Box>
</Box>
<Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
<Flex gap={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
<LinkButton
size="S"
href={npmPackageHref}
@ -146,7 +146,7 @@ const NpmPackageCard = ({
strapiPeerDepVersion={attributes.strapiVersion}
pluginName={attributes.name}
/>
</Stack>
</Flex>
</Flex>
);
};

6
packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box, Popover, Stack, FocusTrap } from '@strapi/design-system';
import { Box, Popover, Flex, FocusTrap } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import FilterSelect from './FilterSelect';
@ -19,7 +19,7 @@ const FiltersPopover = ({
return (
<Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
<FocusTrap onEscape={onToggle}>
<Stack spacing={1}>
<Flex direction="column" alignItems="stretch" gap={1}>
<Box>
<FilterSelect
message={formatMessage({
@ -73,7 +73,7 @@ const FiltersPopover = ({
/>
</Box>
)}
</Stack>
</Flex>
</FocusTrap>
</Popover>
);

157
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
View File

@ -66,14 +66,14 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
color: #666687;
}
.c83 {
.c82 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
color: #328048;
}
.c88 {
.c87 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 500;
@ -174,46 +174,46 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
padding-top: 24px;
}
.c78 {
.c77 {
color: #328048;
margin-left: 8px;
}
.c80 {
.c79 {
margin-left: 4px;
width: 24px;
height: auto;
}
.c81 {
.c80 {
padding-left: 16px;
}
.c82 {
.c81 {
color: #328048;
margin-right: 8px;
width: 12;
height: 12;
}
.c84 {
.c83 {
padding-top: 32px;
}
.c85 {
.c84 {
background: #ffffff;
padding: 24px;
border-radius: 4px;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c86 {
.c85 {
background: #f6ecfc;
padding: 12px;
border-radius: 4px;
}
.c90 {
.c89 {
color: #666687;
margin-left: 8px;
width: 12px;
@ -317,29 +317,26 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
justify-content: space-between;
}
.c60 {
-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;
gap: 4px;
}
.c39 > * {
margin-top: 0;
margin-bottom: 0;
}
.c60 > * {
margin-left: 0;
margin-right: 0;
}
.c60 > * + * {
margin-left: 4px;
}
.c75 > * {
margin-left: 0;
margin-right: 0;
}
.c75 > * + * {
margin-left: 8px;
}
.c62 path {
fill: #666687;
}
@ -348,7 +345,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
fill: #f29d41;
}
.c79 path {
.c78 path {
fill: #328048;
}
@ -498,7 +495,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
fill: #32324d;
}
.c77 {
.c76 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -512,7 +509,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
background: #f0f0ff;
}
.c77 .c0 {
.c76 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -523,60 +520,60 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
align-items: center;
}
.c77 .c8 {
.c76 .c8 {
color: #ffffff;
}
.c77[aria-disabled='true'] {
.c76[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c77[aria-disabled='true'] .c8 {
.c76[aria-disabled='true'] .c8 {
color: #666687;
}
.c77[aria-disabled='true'] svg > g,.c77[aria-disabled='true'] svg path {
.c76[aria-disabled='true'] svg > g,.c76[aria-disabled='true'] svg path {
fill: #666687;
}
.c77[aria-disabled='true']:active {
.c76[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c77[aria-disabled='true']:active .c8 {
.c76[aria-disabled='true']:active .c8 {
color: #666687;
}
.c77[aria-disabled='true']:active svg > g,.c77[aria-disabled='true']:active svg path {
.c76[aria-disabled='true']:active svg > g,.c76[aria-disabled='true']:active svg path {
fill: #666687;
}
.c77:hover {
.c76:hover {
background-color: #ffffff;
}
.c77:active {
.c76:active {
background-color: #ffffff;
border: 1px solid #4945ff;
}
.c77:active .c8 {
.c76:active .c8 {
color: #4945ff;
}
.c77:active svg > g,
.c77:active svg path {
.c76:active svg > g,
.c76:active svg path {
fill: #4945ff;
}
.c77 .c8 {
.c76 .c8 {
color: #271fe0;
}
.c77 svg > g,
.c77 svg path {
.c76 svg > g,
.c76 svg path {
fill: #271fe0;
}
@ -790,16 +787,16 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
cursor: not-allowed;
}
.c87 {
.c86 {
margin-right: 24px;
}
.c87 svg {
.c86 svg {
width: 2rem;
height: 2rem;
}
.c89 {
.c88 {
word-break: break-all;
}
@ -807,7 +804,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
padding-right: 8px;
}
.c76 {
.c75 {
padding-left: 8px;
}
@ -1321,7 +1318,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
src="https://dl.airtable.com/.attachments/eb4cd59876565af77c9c3e5966b59f10/2111bfc8/vl_strapi-comments.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1414,7 +1411,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1432,7 +1429,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1450,7 +1447,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</a>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -1507,7 +1504,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
src="https://dl.airtable.com/.attachments/e23a7231d12cce89cb4b05cbfe759d45/96f5f496/Screenshot2021-12-09at22.15.37.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1553,7 +1550,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
tabindex="0"
>
<svg
class="c0 c78 c79"
class="c0 c77 c78"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1583,7 +1580,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1601,7 +1598,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1625,7 +1622,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -1684,7 +1681,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
src="https://dl.airtable.com/.attachments/0b86f18e2606ed7f53bd54d536a1bea5/13a87f30/Artboard7copy.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1737,7 +1734,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1755,7 +1752,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1779,7 +1776,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
>
<button
aria-disabled="true"
class="c49 c77"
class="c49 c76"
disabled=""
type="button"
>
@ -1839,7 +1836,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
src="https://dl.airtable.com/.attachments/b6998ac52e8b0460b8a14ced8074b788/2a4d4a90/swagger.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1926,7 +1923,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
>
<img
alt="Made by Strapi"
class="c0 c80"
class="c0 c79"
src="IMAGE_MOCK"
/>
</div>
@ -1945,7 +1942,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1963,7 +1960,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1980,10 +1977,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</a>
<div
class="c0 c81"
class="c0 c80"
>
<svg
class="c0 c82 c79"
class="c0 c81 c78"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1996,7 +1993,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
/>
</svg>
<span
class="c8 c83"
class="c8 c82"
>
Installed
</span>
@ -2028,7 +2025,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
src="https://dl.airtable.com/.attachments/5ffd1782a2fabf423ccd6f56c562f31a/b8f8598f/transformer-logo.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2081,7 +2078,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -2099,7 +2096,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -2123,7 +2120,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
>
<button
aria-disabled="true"
class="c49 c77"
class="c49 c76"
disabled=""
type="button"
>
@ -2165,7 +2162,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</div>
</div>
<div
class="c0 c84"
class="c0 c83"
>
<a
href="https://strapi.canny.io/plugin-requests"
@ -2174,10 +2171,10 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
target="_blank"
>
<div
class="c0 c85 c7"
class="c0 c84 c7"
>
<div
class="c0 c86 c7 c87"
class="c0 c85 c7 c86"
>
<svg
fill="none"
@ -2199,18 +2196,18 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
</svg>
</div>
<div
class="c0 c38 c39"
class="c0 c38"
>
<div
class="c0 c7"
>
<span
class="c8 c88 c89"
class="c8 c87 c88"
>
Documentation
</span>
<svg
class="c0 c90 c62"
class="c0 c89 c62"
fill="none"
height="1em"
viewBox="0 0 24 24"

157
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
View File

@ -66,14 +66,14 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
color: #666687;
}
.c83 {
.c82 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
color: #328048;
}
.c88 {
.c87 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 500;
@ -174,46 +174,46 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
padding-top: 24px;
}
.c78 {
.c77 {
color: #328048;
margin-left: 8px;
}
.c80 {
.c79 {
margin-left: 4px;
width: 24px;
height: auto;
}
.c81 {
.c80 {
padding-left: 16px;
}
.c82 {
.c81 {
color: #328048;
margin-right: 8px;
width: 12;
height: 12;
}
.c84 {
.c83 {
padding-top: 32px;
}
.c85 {
.c84 {
background: #ffffff;
padding: 24px;
border-radius: 4px;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c86 {
.c85 {
background: #f6ecfc;
padding: 12px;
border-radius: 4px;
}
.c90 {
.c89 {
color: #666687;
margin-left: 8px;
width: 12px;
@ -317,29 +317,26 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
justify-content: space-between;
}
.c60 {
-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;
gap: 4px;
}
.c39 > * {
margin-top: 0;
margin-bottom: 0;
}
.c60 > * {
margin-left: 0;
margin-right: 0;
}
.c60 > * + * {
margin-left: 4px;
}
.c75 > * {
margin-left: 0;
margin-right: 0;
}
.c75 > * + * {
margin-left: 8px;
}
.c62 path {
fill: #666687;
}
@ -348,7 +345,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
fill: #f29d41;
}
.c79 path {
.c78 path {
fill: #328048;
}
@ -498,7 +495,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
fill: #32324d;
}
.c77 {
.c76 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -512,7 +509,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
background: #f0f0ff;
}
.c77 .c0 {
.c76 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -523,60 +520,60 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
align-items: center;
}
.c77 .c8 {
.c76 .c8 {
color: #ffffff;
}
.c77[aria-disabled='true'] {
.c76[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c77[aria-disabled='true'] .c8 {
.c76[aria-disabled='true'] .c8 {
color: #666687;
}
.c77[aria-disabled='true'] svg > g,.c77[aria-disabled='true'] svg path {
.c76[aria-disabled='true'] svg > g,.c76[aria-disabled='true'] svg path {
fill: #666687;
}
.c77[aria-disabled='true']:active {
.c76[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c77[aria-disabled='true']:active .c8 {
.c76[aria-disabled='true']:active .c8 {
color: #666687;
}
.c77[aria-disabled='true']:active svg > g,.c77[aria-disabled='true']:active svg path {
.c76[aria-disabled='true']:active svg > g,.c76[aria-disabled='true']:active svg path {
fill: #666687;
}
.c77:hover {
.c76:hover {
background-color: #ffffff;
}
.c77:active {
.c76:active {
background-color: #ffffff;
border: 1px solid #4945ff;
}
.c77:active .c8 {
.c76:active .c8 {
color: #4945ff;
}
.c77:active svg > g,
.c77:active svg path {
.c76:active svg > g,
.c76:active svg path {
fill: #4945ff;
}
.c77 .c8 {
.c76 .c8 {
color: #271fe0;
}
.c77 svg > g,
.c77 svg path {
.c76 svg > g,
.c76 svg path {
fill: #271fe0;
}
@ -790,16 +787,16 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
cursor: not-allowed;
}
.c87 {
.c86 {
margin-right: 24px;
}
.c87 svg {
.c86 svg {
width: 2rem;
height: 2rem;
}
.c89 {
.c88 {
word-break: break-all;
}
@ -807,7 +804,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
padding-right: 8px;
}
.c76 {
.c75 {
padding-left: 8px;
}
@ -1321,7 +1318,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
src="https://dl.airtable.com/.attachments/eb4cd59876565af77c9c3e5966b59f10/2111bfc8/vl_strapi-comments.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1414,7 +1411,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1432,7 +1429,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1450,7 +1447,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</a>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -1507,7 +1504,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
src="https://dl.airtable.com/.attachments/e23a7231d12cce89cb4b05cbfe759d45/96f5f496/Screenshot2021-12-09at22.15.37.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1553,7 +1550,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
tabindex="0"
>
<svg
class="c0 c78 c79"
class="c0 c77 c78"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1583,7 +1580,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1601,7 +1598,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1619,7 +1616,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</a>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -1676,7 +1673,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
src="https://dl.airtable.com/.attachments/0b86f18e2606ed7f53bd54d536a1bea5/13a87f30/Artboard7copy.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1729,7 +1726,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1747,7 +1744,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1765,7 +1762,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</a>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -1822,7 +1819,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
src="https://dl.airtable.com/.attachments/b6998ac52e8b0460b8a14ced8074b788/2a4d4a90/swagger.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1909,7 +1906,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
>
<img
alt="Made by Strapi"
class="c0 c80"
class="c0 c79"
src="IMAGE_MOCK"
/>
</div>
@ -1928,7 +1925,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -1946,7 +1943,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -1963,10 +1960,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</a>
<div
class="c0 c81"
class="c0 c80"
>
<svg
class="c0 c82 c79"
class="c0 c81 c78"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1979,7 +1976,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
/>
</svg>
<span
class="c8 c83"
class="c8 c82"
>
Installed
</span>
@ -2011,7 +2008,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
src="https://dl.airtable.com/.attachments/5ffd1782a2fabf423ccd6f56c562f31a/b8f8598f/transformer-logo.png"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2064,7 +2061,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c74 c7 c75"
class="c0 c74 c36"
style="align-self: flex-end;"
>
<a
@ -2082,7 +2079,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</span>
<div
aria-hidden="true"
class="c13 c76"
class="c13 c75"
>
<svg
fill="none"
@ -2100,7 +2097,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</a>
<button
aria-disabled="false"
class="c49 c77"
class="c49 c76"
type="button"
>
<div
@ -2139,7 +2136,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</div>
</div>
<div
class="c0 c84"
class="c0 c83"
>
<a
href="https://strapi.canny.io/plugin-requests"
@ -2148,10 +2145,10 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
target="_blank"
>
<div
class="c0 c85 c7"
class="c0 c84 c7"
>
<div
class="c0 c86 c7 c87"
class="c0 c85 c7 c86"
>
<svg
fill="none"
@ -2173,18 +2170,18 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
</svg>
</div>
<div
class="c0 c38 c39"
class="c0 c38"
>
<div
class="c0 c7"
>
<span
class="c8 c88 c89"
class="c8 c87 c88"
>
Documentation
</span>
<svg
class="c0 c90 c62"
class="c0 c89 c62"
fill="none"
height="1em"
viewBox="0 0 24 24"

199
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
View File

@ -66,14 +66,14 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
color: #666687;
}
.c82 {
.c81 {
font-size: 0.875rem;
line-height: 1.43;
font-weight: 600;
color: #328048;
}
.c87 {
.c86 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 500;
@ -154,11 +154,11 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
color: #666687;
}
.c74 {
.c73 {
color: #f29d41;
}
.c76 {
.c75 {
background: #dcdce4;
}
@ -180,35 +180,35 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
height: auto;
}
.c79 {
.c78 {
padding-left: 16px;
}
.c80 {
.c79 {
color: #328048;
margin-right: 8px;
width: 12;
height: 12;
}
.c83 {
.c82 {
padding-top: 32px;
}
.c84 {
.c83 {
background: #ffffff;
padding: 24px;
border-radius: 4px;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c85 {
.c84 {
background: #f6ecfc;
padding: 12px;
border-radius: 4px;
}
.c89 {
.c88 {
color: #666687;
margin-left: 8px;
width: 12px;
@ -312,38 +312,35 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
justify-content: space-between;
}
.c60 {
-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;
gap: 4px;
}
.c39 > * {
margin-top: 0;
margin-bottom: 0;
}
.c60 > * {
margin-left: 0;
margin-right: 0;
}
.c60 > * + * {
margin-left: 4px;
}
.c71 > * {
margin-left: 0;
margin-right: 0;
}
.c71 > * + * {
margin-left: 8px;
}
.c62 path {
fill: #666687;
}
.c75 path {
.c74 path {
fill: #f29d41;
}
.c81 path {
.c80 path {
fill: #328048;
}
@ -493,7 +490,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
fill: #32324d;
}
.c73 {
.c72 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -507,7 +504,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
background: #f0f0ff;
}
.c73 .c0 {
.c72 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -518,60 +515,60 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
align-items: center;
}
.c73 .c8 {
.c72 .c8 {
color: #ffffff;
}
.c73[aria-disabled='true'] {
.c72[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c73[aria-disabled='true'] .c8 {
.c72[aria-disabled='true'] .c8 {
color: #666687;
}
.c73[aria-disabled='true'] svg > g,.c73[aria-disabled='true'] svg path {
.c72[aria-disabled='true'] svg > g,.c72[aria-disabled='true'] svg path {
fill: #666687;
}
.c73[aria-disabled='true']:active {
.c72[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c73[aria-disabled='true']:active .c8 {
.c72[aria-disabled='true']:active .c8 {
color: #666687;
}
.c73[aria-disabled='true']:active svg > g,.c73[aria-disabled='true']:active svg path {
.c72[aria-disabled='true']:active svg > g,.c72[aria-disabled='true']:active svg path {
fill: #666687;
}
.c73:hover {
.c72:hover {
background-color: #ffffff;
}
.c73:active {
.c72:active {
background-color: #ffffff;
border: 1px solid #4945ff;
}
.c73:active .c8 {
.c72:active .c8 {
color: #4945ff;
}
.c73:active svg > g,
.c73:active svg path {
.c72:active svg > g,
.c72:active svg path {
fill: #4945ff;
}
.c73 .c8 {
.c72 .c8 {
color: #271fe0;
}
.c73 svg > g,
.c73 svg path {
.c72 svg > g,
.c72 svg path {
fill: #271fe0;
}
@ -709,7 +706,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
width: 100%;
}
.c77 {
.c76 {
height: 1px;
border: none;
-webkit-flex-shrink: 0;
@ -785,16 +782,16 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
cursor: not-allowed;
}
.c86 {
.c85 {
margin-right: 24px;
}
.c86 svg {
.c85 svg {
width: 2rem;
height: 2rem;
}
.c88 {
.c87 {
word-break: break-all;
}
@ -802,7 +799,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
padding-right: 8px;
}
.c72 {
.c71 {
padding-left: 8px;
}
@ -948,7 +945,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
fill: #32324d;
}
.c78 {
.c77 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
@ -1316,7 +1313,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/04be9ade6077d029a9d4108cd2f47c8e/f5fe8d67/amazonSES.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=0561c26f91b25e21"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1382,7 +1379,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -1400,7 +1397,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -1418,7 +1415,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -1475,7 +1472,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/e24c0ef99b1e952cbf0c8cbeed8cc24f/da30ba27/Amazon-S3-Logo.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=953eaf833eba09a2"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1541,7 +1538,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -1559,7 +1556,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -1577,7 +1574,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -1634,7 +1631,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/74df39c3715a78589be1cbff69009dc2/14734e59/cloudinary.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=d82f74e2c1563864"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1652,7 +1649,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</svg>
<svg
aria-hidden="true"
class="c0 c74 c75"
class="c0 c73 c74"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1674,7 +1671,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
</p>
<hr
class="c0 c76 c77 c78"
class="c0 c75 c76 c77"
/>
<svg
aria-hidden="true"
@ -1740,7 +1737,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -1758,7 +1755,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -1775,10 +1772,10 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</a>
<div
class="c0 c79"
class="c0 c78"
>
<svg
class="c0 c80 c81"
class="c0 c79 c80"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1791,7 +1788,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
/>
</svg>
<span
class="c8 c82"
class="c8 c81"
>
Installed
</span>
@ -1823,7 +1820,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/6707fcab8f5530214160bacf6f4369ec/9ed22aaf/typeplaceholderversion1.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=35d9e0bb75e4528a"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -1841,7 +1838,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</svg>
<svg
aria-hidden="true"
class="c0 c74 c75"
class="c0 c73 c74"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1863,7 +1860,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
</p>
<hr
class="c0 c76 c77 c78"
class="c0 c75 c76 c77"
/>
<svg
aria-hidden="true"
@ -1929,7 +1926,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -1947,7 +1944,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -1965,7 +1962,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2022,7 +2019,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/73118ab0aea4d9eae66edc18a1db4982/808842ba/mailgun-logo-5388F66106-seeklogo_com.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=2e2e9ecb19e752ca"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2088,7 +2085,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -2106,7 +2103,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -2124,7 +2121,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2181,7 +2178,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/73bea518f68fc312ec15a4a988da3bbc/4c024fea/Nodemailer.jpeg?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=a5dec98be44fa4e6"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2247,7 +2244,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -2265,7 +2262,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -2283,7 +2280,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2340,7 +2337,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/f1e20497044cc6035f43b94f46bd5381/c78cbd9f/rackspace-logo.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=641682ec9adc2d1c"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2406,7 +2403,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -2424,7 +2421,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -2442,7 +2439,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2499,7 +2496,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/c09bfc173321ee79a972a10735ed6cf7/4e0a5321/sendgrid-logo-7574E52082-seeklogo_com.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=1ff0a128488e143f"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2565,7 +2562,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -2583,7 +2580,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -2601,7 +2598,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2658,7 +2655,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
src="https://dl.airtable.com/.attachments/0f14c78742105dffd36d6e253612f992/2f0e8605/sendmail-logo-png-transparent.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=65d4bd3786c6b0a2"
/>
<div
class="c0 c7 c60"
class="c0 c60"
>
<svg
aria-hidden="true"
@ -2724,7 +2721,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c70 c7 c71"
class="c0 c70 c36"
style="align-self: flex-end;"
>
<a
@ -2742,7 +2739,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</span>
<div
aria-hidden="true"
class="c13 c72"
class="c13 c71"
>
<svg
fill="none"
@ -2760,7 +2757,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</a>
<button
aria-disabled="false"
class="c49 c73"
class="c49 c72"
type="button"
>
<div
@ -2799,7 +2796,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</div>
</div>
<div
class="c0 c83"
class="c0 c82"
>
<a
href="https://strapi.canny.io/plugin-requests"
@ -2808,10 +2805,10 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
target="_blank"
>
<div
class="c0 c84 c7"
class="c0 c83 c7"
>
<div
class="c0 c85 c7 c86"
class="c0 c84 c7 c85"
>
<svg
fill="none"
@ -2833,18 +2830,18 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
</svg>
</div>
<div
class="c0 c38 c39"
class="c0 c38"
>
<div
class="c0 c7"
>
<span
class="c8 c87 c88"
class="c8 c86 c87"
>
Documentation
</span>
<svg
class="c0 c89 c62"
class="c0 c88 c62"
fill="none"
height="1em"
viewBox="0 0 24 24"

22
packages/core/admin/admin/src/pages/ProfilePage/index.js
View File

@ -26,7 +26,7 @@ import {
Button,
Grid,
GridItem,
Stack,
Flex,
useNotifyAT,
Select,
Option,
@ -208,7 +208,7 @@ const ProfilePage = () => {
/>
<Box paddingBottom={10}>
<ContentLayout>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<Box
background="neutral0"
hasRadius
@ -218,7 +218,7 @@ const ProfilePage = () => {
paddingLeft={7}
paddingRight={7}
>
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Typography variant="delta" as="h2">
{formatMessage({
id: 'global.profile',
@ -278,7 +278,7 @@ const ProfilePage = () => {
/>
</GridItem>
</Grid>
</Stack>
</Flex>
</Box>
<Box
background="neutral0"
@ -289,7 +289,7 @@ const ProfilePage = () => {
paddingLeft={7}
paddingRight={7}
>
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Typography variant="delta" as="h2">
{formatMessage({
id: 'global.change-password',
@ -427,7 +427,7 @@ const ProfilePage = () => {
/>
</GridItem>
</Grid>
</Stack>
</Flex>
</Box>
<Box
background="neutral0"
@ -438,8 +438,8 @@ const ProfilePage = () => {
paddingLeft={7}
paddingRight={7}
>
<Stack spacing={4}>
<Stack spacing={1}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Flex direction="column" alignItems="stretch" gap={1}>
<Typography variant="delta" as="h2">
{formatMessage({
id: 'Settings.profile.form.section.experience.title',
@ -469,7 +469,7 @@ const ProfilePage = () => {
}
)}
</Typography>
</Stack>
</Flex>
<Grid gap={5}>
<GridItem s={12} col={6}>
<Select
@ -553,9 +553,9 @@ const ProfilePage = () => {
</Select>
</GridItem>
</Grid>
</Stack>
</Flex>
</Box>
</Stack>
</Flex>
</ContentLayout>
</Box>
</Form>

197
packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
color: #32324d;
}
.c18 {
.c17 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -28,13 +28,13 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
color: #d02b20;
}
.c31 {
.c32 {
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c37 {
.c38 {
font-size: 0.875rem;
line-height: 1.43;
display: block;
@ -44,7 +44,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
color: #32324d;
}
.c41 {
.c42 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
@ -71,7 +71,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
padding-bottom: 56px;
}
.c16 {
.c15 {
background: #ffffff;
padding-top: 24px;
padding-right: 32px;
@ -86,12 +86,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
padding-left: 8px;
}
.c36 {
.c37 {
padding-right: 16px;
padding-left: 16px;
}
.c39 {
.c40 {
padding-left: 12px;
}
@ -139,24 +139,51 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c15 > * {
margin-top: 0;
margin-bottom: 0;
.c16 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c15 > * + * {
margin-top: 24px;
.c20 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c17 > * {
margin-top: 0;
margin-bottom: 0;
}
.c17 > * + * {
margin-top: 16px;
.c31 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 4px;
}
.c21 > * {
@ -423,7 +450,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
align-items: center;
}
.c33 {
.c34 {
position: relative;
border: 1px solid #dcdce4;
padding-right: 12px;
@ -439,28 +466,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
transition-duration: 0.2s;
}
.c33:focus-within {
.c34:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c38 {
.c39 {
background: transparent;
border: none;
position: relative;
z-index: 1;
}
.c38 svg {
.c39 svg {
height: 0.6875rem;
width: 0.6875rem;
}
.c38 svg path {
.c39 svg path {
fill: #666687;
}
.c40 {
.c41 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -469,11 +496,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
border: none;
}
.c40 svg {
.c41 svg {
width: 0.375rem;
}
.c34 {
.c35 {
position: absolute;
left: 0;
right: 0;
@ -484,25 +511,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
border: none;
}
.c34:focus {
.c35:focus {
outline: none;
}
.c34[aria-disabled='true'] {
.c35[aria-disabled='true'] {
cursor: not-allowed;
}
.c35 {
.c36 {
width: 100%;
}
.c19 {
.c18 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}
.c20 {
.c19 {
grid-column: span 6;
max-width: 100%;
}
@ -511,7 +538,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
outline: none;
}
.c32 {
.c33 {
color: #4945ff;
}
@ -529,13 +556,13 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
}
@media (max-width:68.75rem) {
.c20 {
.c19 {
grid-column: span 12;
}
}
@media (max-width:34.375rem) {
.c20 {
.c19 {
grid-column: span;
}
}
@ -608,24 +635,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
class="c1 c13"
>
<div
class="c1 c14 c15"
class="c1 c14"
>
<div
class="c1 c16"
class="c1 c15"
>
<div
class="c1 c14 c17"
class="c1 c16"
>
<h2
class="c5 c18"
class="c5 c17"
>
Profile
</h2>
<div
class="c1 c19"
class="c1 c18"
>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -633,7 +660,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -671,7 +698,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -679,7 +706,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -712,7 +739,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -720,7 +747,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -758,7 +785,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -766,7 +793,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -802,21 +829,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c1 c16"
class="c1 c15"
>
<div
class="c1 c14 c17"
class="c1 c16"
>
<h2
class="c5 c18"
class="c5 c17"
>
Change password
</h2>
<div
class="c1 c19"
class="c1 c18"
>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -824,7 +851,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -879,10 +906,10 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c1 c19"
class="c1 c18"
>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -890,7 +917,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -945,7 +972,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c20"
class="c19"
>
<div
class="c1 "
@ -953,7 +980,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -1011,25 +1038,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c1 c16"
class="c1 c15"
>
<div
class="c1 c14 c17"
class="c1 c16"
>
<div
class="c1 c14 c21"
class="c1 c31"
>
<h2
class="c5 c18"
class="c5 c17"
>
Experience
</h2>
<span
class="c5 c31"
class="c5 c32"
>
Preference changes will apply only to you. More information is available
<a
class="c32"
class="c33"
href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
rel="noopener noreferrer"
target="_blank"
@ -1040,17 +1067,17 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</span>
</div>
<div
class="c1 c19"
class="c1 c18"
>
<div
class="c20"
class="c19"
>
<div
class="c1 "
>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -1063,7 +1090,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</label>
<div
class="c1 c4 c33"
class="c1 c4 c34"
>
<button
aria-describedby="7-hint"
@ -1071,21 +1098,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="7 7-label 7-content"
class="c34"
class="c35"
id="7"
type="button"
/>
<div
class="c1 c3 c35"
class="c1 c3 c36"
>
<div
class="c1 c4"
>
<div
class="c1 c36"
class="c1 c37"
>
<span
class="c5 c37"
class="c5 c38"
id="7-content"
>
Select
@ -1098,7 +1125,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<button
aria-disabled="false"
aria-label="Clear the interface language selected"
class="c1 c38"
class="c1 c39"
title="Clear the interface language selected"
type="button"
>
@ -1117,7 +1144,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</button>
<button
aria-hidden="true"
class="c1 c39 c38 c40"
class="c1 c40 c39 c41"
tabindex="-1"
title="Carret Down Button"
type="button"
@ -1141,7 +1168,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<p
class="c5 c41"
class="c5 c42"
id="7-hint"
>
This will only display your own interface in the chosen language.
@ -1151,14 +1178,14 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c20"
class="c19"
>
<div
class="c1 "
>
<div>
<div
class="c1 c14 c21"
class="c1 c20 c21"
>
<label
class="c5 c11"
@ -1171,7 +1198,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</label>
<div
class="c1 c4 c33"
class="c1 c4 c34"
>
<button
aria-describedby="9-hint"
@ -1179,21 +1206,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="9 9-label 9-content"
class="c34"
class="c35"
id="9"
type="button"
/>
<div
class="c1 c3 c35"
class="c1 c3 c36"
>
<div
class="c1 c4"
>
<div
class="c1 c36"
class="c1 c37"
>
<span
class="c5 c37"
class="c5 c38"
id="9-content"
>
Light mode
@ -1205,7 +1232,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
>
<button
aria-hidden="true"
class="c1 c39 c38 c40"
class="c1 c40 c39 c41"
tabindex="-1"
title="Carret Down Button"
type="button"
@ -1229,7 +1256,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<p
class="c5 c41"
class="c5 c42"
id="9-hint"
>
Displays your interface in the chosen mode.

6
packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js
View File

@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { Link } from '@strapi/helper-plugin';
import { ArrowLeft, Check } from '@strapi/icons';
import { Button, HeaderLayout, Stack } from '@strapi/design-system';
import { Button, HeaderLayout, Flex } from '@strapi/design-system';
import Regenerate from '../Regenerate';
const FormHead = ({
@ -29,7 +29,7 @@ const FormHead = ({
title={token?.name || formatMessage(title)}
primaryAction={
canEditInputs ? (
<Stack horizontal spacing={2}>
<Flex gap={2}>
{canRegenerate && token?.id && (
<Regenerate
backUrl={regenerateUrl}
@ -49,7 +49,7 @@ const FormHead = ({
defaultMessage: 'Save',
})}
</Button>
</Stack>
</Flex>
) : (
canRegenerate &&
token?.id && (

10
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { Typography, Stack, GridItem } from '@strapi/design-system';
import { Typography, Flex, GridItem } from '@strapi/design-system';
import BoundRoute from '../BoundRoute';
import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@ -22,16 +22,16 @@ const ActionBoundRoutes = () => {
style={{ minHeight: '100%' }}
>
{selectedAction ? (
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
{routes[actionSection]?.map((route) => {
return route.config.auth?.scope?.includes(selectedAction) ||
route.handler === selectedAction ? (
<BoundRoute key={route.handler} route={route} />
) : null;
})}
</Stack>
</Flex>
) : (
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Typography variant="delta" as="h3">
{formatMessage({
id: 'Settings.apiTokens.createPage.permissions.header.title',
@ -45,7 +45,7 @@ const ActionBoundRoutes = () => {
"Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
})}
</Typography>
</Stack>
</Flex>
)}
</GridItem>
);

10
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { Stack, Box, Typography } from '@strapi/design-system';
import { Flex, Box, Typography } from '@strapi/design-system';
import map from 'lodash/map';
import tail from 'lodash/tail';
import { useIntl } from 'react-intl';
@ -21,7 +21,7 @@ function BoundRoute({ route }) {
const colors = getMethodColor(route.method);
return (
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Typography variant="delta" as="h3">
{formatMessage({
id: 'Settings.apiTokens.createPage.BoundRoute.title',
@ -33,7 +33,7 @@ function BoundRoute({ route }) {
.{action}
</Typography>
</Typography>
<Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
<Flex hasRadius background="neutral0" borderColor="neutral200" gap={0}>
<MethodBox background={colors.background} borderColor={colors.border} padding={2}>
<Typography fontWeight="bold" textColor={colors.text}>
{method}
@ -46,8 +46,8 @@ function BoundRoute({ route }) {
</Typography>
))}
</Box>
</Stack>
</Stack>
</Flex>
</Flex>
);
}

6
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js
View File

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

6
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Permissions/index.js
View File

@ -1,6 +1,6 @@
import React, { memo } from 'react';
import { useIntl } from 'react-intl';
import { Typography, Stack, Grid, GridItem } from '@strapi/design-system';
import { Typography, Flex, Grid, GridItem } from '@strapi/design-system';
import ContentTypesSection from '../ContenTypesSection';
import ActionBoundRoutes from '../ActionBoundRoutes';
import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@ -14,7 +14,7 @@ const Permissions = ({ ...props }) => {
return (
<Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
<GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Typography variant="delta" as="h2">
{formatMessage({
id: 'Settings.apiTokens.createPage.permissions.title',
@ -27,7 +27,7 @@ const Permissions = ({ ...props }) => {
defaultMessage: 'Only actions bound by a route are listed below.',
})}
</Typography>
</Stack>
</Flex>
{data?.permissions && <ContentTypesSection section={data?.permissions} {...props} />}
</GridItem>
<ActionBoundRoutes />

6
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js
View File

@ -11,7 +11,7 @@ import {
useRBAC,
useFetchClient,
} from '@strapi/helper-plugin';
import { Main, ContentLayout, Stack } from '@strapi/design-system';
import { Main, ContentLayout, Flex } from '@strapi/design-system';
import { Formik } from 'formik';
import { useRouteMatch, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
@ -302,7 +302,7 @@ const ApiTokenCreateView = () => {
/>
<ContentLayout>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
{Boolean(apiToken?.name) && (
<TokenBox token={apiToken?.accessKey} tokenType={API_TOKEN_TYPE} />
)}
@ -323,7 +323,7 @@ const ApiTokenCreateView = () => {
values?.type === 'full-access'
}
/>
</Stack>
</Flex>
</ContentLayout>
</Form>
);

641
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

26
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
View File

@ -239,6 +239,21 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
justify-content: space-between;
}
.c43 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.c45 {
-webkit-align-items: center;
-webkit-box-align: center;
@ -266,15 +281,6 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
margin-top: 4px;
}
.c43 > * {
margin-top: 0;
margin-bottom: 0;
}
.c43 > * + * {
margin-top: 8px;
}
.c16 > * {
margin-left: 0;
margin-right: 0;
@ -891,7 +897,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
for="logo-upload"
>
<div
class="c0 c1 c43"
class="c0 c43"
>
<div
class="c0 c44 c45"

5
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js
View File

@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
import styled from 'styled-components';
import {
Box,
Stack,
Flex,
Icon,
Typography,
@ -81,7 +80,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
<Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
<Field name="logo-upload" error={fileError}>
<label htmlFor="logo-upload">
<Stack spacing={2}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Flex
paddingTop={9}
paddingBottom={7}
@ -147,7 +146,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
</Box>
</Flex>
<FieldError />
</Stack>
</Flex>
</label>
</Field>
</Box>

174
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/tests/__snapshots__/AddLogoDialog.test.js.snap
View File

@ -17,21 +17,21 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
color: #666687;
}
.c19 {
.c18 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
color: #32324d;
}
.c23 {
.c22 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
color: #32324d;
}
.c25 {
.c24 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
@ -57,7 +57,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
padding-left: 40px;
}
.c14 {
.c13 {
background: #f6f6f9;
padding-top: 48px;
padding-bottom: 32px;
@ -68,22 +68,22 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
position: relative;
}
.c16 {
.c15 {
color: #4945ff;
width: 3.75rem;
height: 3.75rem;
}
.c18 {
.c17 {
padding-top: 12px;
padding-bottom: 20px;
}
.c24 {
.c23 {
padding-top: 24px;
}
.c26 {
.c25 {
background: #f6f6f9;
padding-top: 16px;
padding-right: 20px;
@ -103,9 +103,10 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.c15 {
.c14 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -123,7 +124,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
justify-content: center;
}
.c28 {
.c27 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -141,7 +142,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
justify-content: space-between;
}
.c29 {
.c28 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -155,20 +156,11 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
flex-direction: row;
}
.c13 > * {
margin-top: 0;
margin-bottom: 0;
}
.c13 > * + * {
margin-top: 8px;
}
.c17 path {
.c16 path {
fill: #4945ff;
}
.c21 {
.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -182,21 +174,21 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
outline: none;
}
.c21 svg {
.c20 svg {
height: 12px;
width: 12px;
}
.c21 svg > g,
.c21 svg path {
.c20 svg > g,
.c20 svg path {
fill: #ffffff;
}
.c21[aria-disabled='true'] {
.c20[aria-disabled='true'] {
pointer-events: none;
}
.c21:after {
.c20:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -211,11 +203,11 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
border: 2px solid transparent;
}
.c21:focus-visible {
.c20:focus-visible {
outline: none;
}
.c21:focus-visible:after {
.c20:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -226,7 +218,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
border: 2px solid #4945ff;
}
.c32 {
.c31 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -238,7 +230,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
width: 1px;
}
.c22 {
.c21 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -250,7 +242,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
padding-right: 16px;
}
.c22 .c0 {
.c21 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -261,52 +253,52 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
align-items: center;
}
.c22 .c5 {
.c21 .c5 {
color: #ffffff;
}
.c22[aria-disabled='true'] {
.c21[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c22[aria-disabled='true'] .c5 {
.c21[aria-disabled='true'] .c5 {
color: #666687;
}
.c22[aria-disabled='true'] svg > g,.c22[aria-disabled='true'] svg path {
.c21[aria-disabled='true'] svg > g,.c21[aria-disabled='true'] svg path {
fill: #666687;
}
.c22[aria-disabled='true']:active {
.c21[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c22[aria-disabled='true']:active .c5 {
.c21[aria-disabled='true']:active .c5 {
color: #666687;
}
.c22[aria-disabled='true']:active svg > g,.c22[aria-disabled='true']:active svg path {
.c21[aria-disabled='true']:active svg > g,.c21[aria-disabled='true']:active svg path {
fill: #666687;
}
.c22:hover {
.c21:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
.c22:active {
.c21:active {
border: 1px solid #4945ff;
background: #4945ff;
}
.c22 svg > g,
.c22 svg path {
.c21 svg > g,
.c21 svg path {
fill: #ffffff;
}
.c31 {
.c30 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -320,7 +312,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
background: #ffffff;
}
.c31 .c0 {
.c30 .c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -331,50 +323,50 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
align-items: center;
}
.c31 .c5 {
.c30 .c5 {
color: #ffffff;
}
.c31[aria-disabled='true'] {
.c30[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c31[aria-disabled='true'] .c5 {
.c30[aria-disabled='true'] .c5 {
color: #666687;
}
.c31[aria-disabled='true'] svg > g,.c31[aria-disabled='true'] svg path {
.c30[aria-disabled='true'] svg > g,.c30[aria-disabled='true'] svg path {
fill: #666687;
}
.c31[aria-disabled='true']:active {
.c30[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c31[aria-disabled='true']:active .c5 {
.c30[aria-disabled='true']:active .c5 {
color: #666687;
}
.c31[aria-disabled='true']:active svg > g,.c31[aria-disabled='true']:active svg path {
.c30[aria-disabled='true']:active svg > g,.c30[aria-disabled='true']:active svg path {
fill: #666687;
}
.c31:hover {
.c30:hover {
background-color: #f6f6f9;
}
.c31:active {
.c30:active {
background-color: #eaeaef;
}
.c31 .c5 {
.c30 .c5 {
color: #32324d;
}
.c31 svg > g,
.c31 svg path {
.c30 svg > g,
.c30 svg path {
fill: #32324d;
}
@ -387,12 +379,12 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
margin: 0;
}
.c27 {
.c26 {
border-radius: 0 0 4px 4px;
border-top: 1px solid #eaeaef;
}
.c30 > * + * {
.c29 > * + * {
margin-left: 8px;
}
@ -408,7 +400,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
cursor: not-allowed;
}
.c20 {
.c19 {
opacity: 0;
position: absolute;
top: 0;
@ -487,14 +479,14 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
for="logo-upload"
>
<div
class="c0 c12 c13"
class="c0 c12"
>
<div
class="c0 c14 c15"
class="c0 c13 c14"
>
<svg
aria-hidden="true"
class="c0 c16 c17"
class="c0 c15 c16"
fill="none"
height="1em"
viewBox="0 0 24 20"
@ -511,17 +503,17 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
/>
</svg>
<div
class="c0 c18"
class="c0 c17"
>
<span
class="c5 c19"
class="c5 c18"
>
Drag and Drop here or
</span>
</div>
<input
accept="image/jpeg,image/png,image/svg+xml"
class="c20"
class="c19"
cursor="pointer"
id="logo-upload"
name="files"
@ -530,20 +522,20 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
/>
<button
aria-disabled="false"
class="c21 c22"
class="c20 c21"
type="button"
>
<span
class="c5 c23"
class="c5 c22"
>
Browse files
</span>
</button>
<div
class="c0 c24"
class="c0 c23"
>
<span
class="c5 c25"
class="c5 c24"
>
Max dimension: 750x750, Max size: 100KB
</span>
@ -555,28 +547,28 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
</div>
</form>
<div
class="c0 c26 c27"
class="c0 c25 c26"
>
<div
class="c0 c28"
class="c0 c27"
>
<div
class="c0 c29 c30"
class="c0 c28 c29"
>
<button
aria-disabled="false"
class="c21 c31"
class="c20 c30"
type="button"
>
<span
class="c5 c23"
class="c5 c22"
>
Cancel
</span>
</button>
</div>
<div
class="c0 c29 c30"
class="c0 c28 c29"
/>
</div>
</div>
@ -584,7 +576,7 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from computer tab and
</div>
</div>
<div
class="c32"
class="c31"
>
<p
aria-live="polite"
@ -660,20 +652,6 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
padding-left: 20px;
}
.c12 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
@ -706,6 +684,20 @@ exports[`ApplicationInfosPage | AddLogoDialog shoud render from url tab and matc
flex-direction: row;
}
.c12 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c13 > * {
margin-top: 0;
margin-bottom: 0;

13
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
View File

@ -19,7 +19,6 @@ import {
Layout,
Link,
Main,
Stack,
Typography,
} from '@strapi/design-system';
import { ExternalLink, Check } from '@strapi/icons';
@ -114,9 +113,11 @@ const ApplicationInfosPage = () => {
}
/>
<ContentLayout>
<Stack spacing={6}>
<Stack
spacing={4}
<Flex direction="column" alignItems="stretch" gap={6}>
<Flex
direction="column"
alignItems="stretch"
gap={4}
hasRadius
background="neutral0"
shadow="tableShadow"
@ -198,7 +199,7 @@ const ApplicationInfosPage = () => {
</GridItem>
<AdminSeatInfo />
</Grid>
</Stack>
</Flex>
{canRead && data && (
<CustomizationInfos
canUpdate={canUpdate}
@ -206,7 +207,7 @@ const ApplicationInfosPage = () => {
projectSettingsStored={data}
/>
)}
</Stack>
</Flex>
</ContentLayout>
</form>
</Main>

10
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js
View File

@ -1,6 +1,6 @@
import React, { memo, useMemo } from 'react';
import PropTypes from 'prop-types';
import { BaseCheckbox, Box, Stack, Typography } from '@strapi/design-system';
import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
import styled from 'styled-components';
import get from 'lodash/get';
import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants';
@ -9,9 +9,7 @@ import { usePermissionsDataManager } from '../../../../../../../hooks';
import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
import { findDisplayedActions, getCheckboxesState } from './utils';
const CenteredStack = styled(Stack)`
align-items: center;
justify-content: center;
const CenteredStack = styled(Flex)`
width: ${cellWidth};
flex-shrink: 0;
`;
@ -30,7 +28,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
return (
<Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
<Stack horizontal spacing={0}>
<Flex alignItems="center" justifyContent="center" gap={0}>
{displayedActions.map(({ label, actionId }) => {
return (
<CenteredStack key={actionId} spacing={3}>
@ -64,7 +62,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
</CenteredStack>
);
})}
</Stack>
</Flex>
</Box>
);
};

5
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js
View File

@ -4,7 +4,6 @@ import {
Grid,
GridItem,
Flex,
Stack,
Typography,
Textarea,
TextInput,
@ -18,7 +17,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
return (
<Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
<Stack spacing={4}>
<Flex direction="column" alignItems="stretch" gap={4}>
<Flex justifyContent="space-between">
<Box>
<Box>
@ -84,7 +83,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
</Textarea>
</GridItem>
</Grid>
</Stack>
</Flex>
</Box>
);
};

10
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
View File

@ -8,7 +8,7 @@ import {
SettingsPageTitle,
Link,
} from '@strapi/helper-plugin';
import { Box, Button, ContentLayout, HeaderLayout, Main, Stack } from '@strapi/design-system';
import { Box, Button, ContentLayout, HeaderLayout, Main, Flex } from '@strapi/design-system';
import { Formik } from 'formik';
import { ArrowLeft } from '@strapi/icons';
import get from 'lodash/get';
@ -104,7 +104,7 @@ const EditPage = () => {
<form onSubmit={handleSubmit}>
<HeaderLayout
primaryAction={
<Stack horizontal spacing={2}>
<Flex gap={2}>
<Button
disabled={role.code === 'strapi-super-admin'}
onClick={handleSubmit}
@ -116,7 +116,7 @@ const EditPage = () => {
defaultMessage: 'Save',
})}
</Button>
</Stack>
</Flex>
}
title={formatMessage({
id: 'Settings.roles.edit.title',
@ -136,7 +136,7 @@ const EditPage = () => {
}
/>
<ContentLayout>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<RoleForm
isLoading={isRoleLoading}
disabled={isFormDisabled}
@ -160,7 +160,7 @@ const EditPage = () => {
<LoadingIndicatorPage />
</Box>
)}
</Stack>
</Flex>
</ContentLayout>
</form>
)}

150
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
View File

@ -21,13 +21,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
color: #666687;
}
.c22 {
.c21 {
font-size: 0.75rem;
line-height: 1.33;
color: #8e8ea9;
}
.c24 {
.c23 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
@ -51,7 +51,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
padding-left: 56px;
}
.c20 {
.c19 {
background: #ffffff;
padding: 24px;
border-radius: 4px;
@ -90,6 +90,21 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
flex-direction: row;
}
.c12 {
-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;
gap: 8px;
}
.c18 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
@ -102,6 +117,36 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c20 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c26 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c33 {
@ -122,24 +167,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
justify-content: space-around;
}
.c19 > * {
margin-top: 0;
margin-bottom: 0;
}
.c19 > * + * {
margin-top: 24px;
}
.c21 > * {
margin-top: 0;
margin-bottom: 0;
}
.c21 > * + * {
margin-top: 16px;
}
.c27 > * {
margin-top: 0;
margin-bottom: 0;
@ -149,15 +176,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
margin-top: 4px;
}
.c12 > * {
margin-left: 0;
margin-right: 0;
}
.c12 > * + * {
margin-left: 8px;
}
.c13 {
display: -webkit-box;
display: -webkit-flex;
@ -296,7 +314,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
fill: #ffffff;
}
.c23 {
.c22 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -310,7 +328,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
background: #f0f0ff;
}
.c23 .c1 {
.c22 .c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -321,60 +339,60 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
align-items: center;
}
.c23 .c10 {
.c22 .c10 {
color: #ffffff;
}
.c23[aria-disabled='true'] {
.c22[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c23[aria-disabled='true'] .c10 {
.c22[aria-disabled='true'] .c10 {
color: #666687;
}
.c23[aria-disabled='true'] svg > g,.c23[aria-disabled='true'] svg path {
.c22[aria-disabled='true'] svg > g,.c22[aria-disabled='true'] svg path {
fill: #666687;
}
.c23[aria-disabled='true']:active {
.c22[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c23[aria-disabled='true']:active .c10 {
.c22[aria-disabled='true']:active .c10 {
color: #666687;
}
.c23[aria-disabled='true']:active svg > g,.c23[aria-disabled='true']:active svg path {
.c22[aria-disabled='true']:active svg > g,.c22[aria-disabled='true']:active svg path {
fill: #666687;
}
.c23:hover {
.c22:hover {
background-color: #ffffff;
}
.c23:active {
.c22:active {
background-color: #ffffff;
border: 1px solid #4945ff;
}
.c23:active .c10 {
.c22:active .c10 {
color: #4945ff;
}
.c23:active svg > g,
.c23:active svg path {
.c22:active svg > g,
.c22:active svg path {
fill: #4945ff;
}
.c23 .c10 {
.c22 .c10 {
color: #271fe0;
}
.c23 svg > g,
.c23 svg path {
.c22 svg > g,
.c22 svg path {
fill: #271fe0;
}
@ -445,13 +463,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
will-change: transform;
}
.c25 {
.c24 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c26 {
.c25 {
grid-column: span 6;
max-width: 100%;
}
@ -628,13 +646,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
}
@media (max-width:68.75rem) {
.c26 {
.c25 {
grid-column: span;
}
}
@media (max-width:34.375rem) {
.c26 {
.c25 {
grid-column: span;
}
}
@ -699,7 +717,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
</h1>
</div>
<div
class="c1 c9 c12"
class="c1 c12"
>
<button
aria-disabled="false"
@ -725,13 +743,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
class="c1 c17"
>
<div
class="c1 c18 c19"
class="c1 c18"
>
<div
class="c1 c20"
class="c1 c19"
>
<div
class="c1 c18 c21"
class="c1 c20"
>
<div
class="c1 c8"
@ -750,28 +768,28 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
class="c1 "
>
<span
class="c10 c22"
class="c10 c21"
/>
</div>
</div>
<button
aria-disabled="true"
class="c13 c23"
class="c13 c22"
disabled=""
type="button"
>
<span
class="c10 c24"
class="c10 c23"
>
NaN users with this role
</span>
</button>
</div>
<div
class="c1 c25"
class="c1 c24"
>
<div
class="c26"
class="c25"
>
<div
class="c1 "
@ -779,10 +797,10 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c18 c27"
class="c1 c26 c27"
>
<label
class="c10 c24"
class="c10 c23"
for="1"
>
<div
@ -810,7 +828,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c26"
class="c25"
>
<div
class="c1 "
@ -820,13 +838,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
>
<div>
<div
class="c1 c18 c27"
class="c1 c26 c27"
>
<div
class="c1 c9"
>
<label
class="c10 c24"
class="c10 c23"
for="3"
>
<div
@ -856,7 +874,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="c1 c20"
class="c1 c19"
>
<div
class="c1 c33 c34"

6
packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js
View File

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

6
packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js
View File

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

377
packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
color: #32324d;
}
.c23 {
.c22 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
@ -65,7 +65,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
padding-left: 56px;
}
.c21 {
.c20 {
background: #ffffff;
padding-top: 24px;
padding-right: 32px;
@ -116,6 +116,21 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
flex-direction: row;
}
.c12 {
-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;
gap: 8px;
}
.c19 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
@ -128,26 +143,38 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c21 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c25 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c20 > * {
margin-top: 0;
margin-bottom: 0;
}
.c20 > * + * {
margin-top: 24px;
}
.c22 > * {
margin-top: 0;
margin-bottom: 0;
}
.c22 > * + * {
margin-top: 16px;
}
.c26 > * {
margin-top: 0;
margin-bottom: 0;
@ -157,15 +184,6 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
margin-top: 4px;
}
.c12 > * {
margin-left: 0;
margin-right: 0;
}
.c12 > * + * {
margin-left: 8px;
}
.c13 {
display: -webkit-box;
display: -webkit-flex;
@ -446,13 +464,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
width: 100%;
}
.c24 {
.c23 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}
.c25 {
.c24 {
grid-column: span 6;
max-width: 100%;
}
@ -625,13 +643,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
}
@media (max-width:68.75rem) {
.c25 {
.c24 {
grid-column: span;
}
}
@media (max-width:34.375rem) {
.c25 {
.c24 {
grid-column: span 12;
}
}
@ -699,7 +717,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</h1>
</div>
<div
class="c1 c9 c12"
class="c1 c12"
>
<button
aria-disabled="false"
@ -737,24 +755,24 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
class="c1 c18"
>
<div
class="c1 c19 c20"
class="c1 c19"
>
<div
class="c1 c21"
class="c1 c20"
>
<div
class="c1 c19 c22"
class="c1 c21"
>
<h2
class="c10 c23"
class="c10 c22"
>
Details
</h2>
<div
class="c1 c24"
class="c1 c23"
>
<div
class="c25"
class="c24"
>
<div
class="c1 "
@ -762,7 +780,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
<div>
<div>
<div
class="c1 c19 c26"
class="c1 c25 c26"
>
<label
class="c10 c17"
@ -798,7 +816,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</div>
</div>
<div
class="c25"
class="c24"
>
<div
class="c1 "
@ -808,7 +826,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
>
<div>
<div
class="c1 c19 c26"
class="c1 c25 c26"
>
<div
class="c1 c9"
@ -841,14 +859,14 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</div>
</div>
<div
class="c25"
class="c24"
>
<div
class="c1 "
>
<div>
<div
class="c1 c19 c26"
class="c1 c25 c26"
>
<label
class="c10 c17"
@ -977,33 +995,33 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
color: #32324d;
}
.c26 {
.c25 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 500;
color: #32324d;
}
.c28 {
.c27 {
font-size: 0.875rem;
line-height: 1.43;
color: #666687;
}
.c31 {
.c30 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
color: #32324d;
}
.c34 {
.c35 {
font-size: 0.875rem;
line-height: 1.43;
color: #d02b20;
}
.c45 {
.c46 {
font-size: 0.875rem;
line-height: 1.43;
display: block;
@ -1013,7 +1031,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
color: #666687;
}
.c49 {
.c50 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
@ -1040,20 +1058,20 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
padding-bottom: 8px;
}
.c22 {
.c21 {
background: #ffffff;
padding: 24px;
border-radius: 4px;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c23 {
.c22 {
background: #f6f6f9;
padding: 12px;
border-radius: 4px;
}
.c29 {
.c28 {
background: #ffffff;
padding-top: 24px;
padding-right: 32px;
@ -1063,12 +1081,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c44 {
.c45 {
padding-right: 16px;
padding-left: 16px;
}
.c46 {
.c47 {
padding-left: 12px;
}
@ -1104,6 +1122,21 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
flex-direction: row;
}
.c12 {
-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;
gap: 8px;
}
.c20 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
@ -1116,44 +1149,62 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.c24 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 4px;
}
.c29 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.c33 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c21 > * {
.c34 > * {
margin-top: 0;
margin-bottom: 0;
}
.c21 > * + * {
margin-top: 24px;
}
.c25 > * {
margin-top: 0;
margin-bottom: 0;
}
.c25 > * + * {
.c34 > * + * {
margin-top: 4px;
}
.c30 > * {
margin-top: 0;
margin-bottom: 0;
}
.c30 > * + * {
margin-top: 16px;
}
.c12 > * {
margin-left: 0;
margin-right: 0;
}
.c12 > * + * {
margin-left: 8px;
}
.c13 {
display: -webkit-box;
display: -webkit-flex;
@ -1212,7 +1263,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
border: 2px solid #4945ff;
}
.c50 {
.c51 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -1228,7 +1279,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
height: 100%;
}
.c51 .c1 {
.c52 .c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1239,15 +1290,15 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
align-items: center;
}
.c51 .c10 {
.c52 .c10 {
color: #ffffff;
}
.c51[aria-disabled='true'] .c10 {
.c52[aria-disabled='true'] .c10 {
color: #666687;
}
.c51[aria-disabled='true']:active .c10 {
.c52[aria-disabled='true']:active .c10 {
color: #666687;
}
@ -1391,11 +1442,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
fill: #ffffff;
}
.c35 {
.c36 {
line-height: 0;
}
.c37 {
.c38 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
@ -1410,36 +1461,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
background: inherit;
}
.c37::-webkit-input-placeholder {
.c38::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c37::-moz-placeholder {
.c38::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c37:-ms-input-placeholder {
.c38:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c37::placeholder {
.c38::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c37[aria-disabled='true'] {
.c38[aria-disabled='true'] {
color: inherit;
}
.c37:focus {
.c38:focus {
outline: none;
box-shadow: none;
}
.c36 {
.c37 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
@ -1451,12 +1502,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
transition-duration: 0.2s;
}
.c36:focus-within {
.c37:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c41 {
.c42 {
position: relative;
border: 1px solid #dcdce4;
padding-right: 12px;
@ -1474,28 +1525,28 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
transition-duration: 0.2s;
}
.c41:focus-within {
.c42:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c47 {
.c48 {
background: transparent;
border: none;
position: relative;
z-index: 1;
}
.c47 svg {
.c48 svg {
height: 0.6875rem;
width: 0.6875rem;
}
.c47 svg path {
.c48 svg path {
fill: #666687;
}
.c48 {
.c49 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1505,11 +1556,11 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
cursor: not-allowed;
}
.c48 svg {
.c49 svg {
width: 0.375rem;
}
.c42 {
.c43 {
position: absolute;
left: 0;
right: 0;
@ -1520,25 +1571,25 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
border: none;
}
.c42:focus {
.c43:focus {
outline: none;
}
.c42[aria-disabled='true'] {
.c43[aria-disabled='true'] {
cursor: not-allowed;
}
.c43 {
.c44 {
width: 100%;
}
.c32 {
.c31 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}
.c33 {
.c32 {
grid-column: span 6;
max-width: 100%;
}
@ -1547,7 +1598,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
outline: none;
}
.c39 {
.c40 {
border: 1px solid #dcdce4;
border-radius: 4px;
padding-left: 16px;
@ -1563,12 +1614,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
transition-duration: 0.2s;
}
.c39:focus-within {
.c40:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c40 {
.c41 {
display: block;
width: 100%;
font-weight: 400;
@ -1579,36 +1630,36 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
background: inherit;
}
.c40::-webkit-input-placeholder {
.c41::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c40::-moz-placeholder {
.c41::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c40:-ms-input-placeholder {
.c41:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c40::placeholder {
.c41::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c40:focus-within {
.c41:focus-within {
outline: none;
}
.c38 textarea {
.c39 textarea {
height: 5rem;
line-height: 1.25rem;
}
.c38 textarea::-webkit-input-placeholder {
.c39 textarea::-webkit-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
@ -1616,7 +1667,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
opacity: 1;
}
.c38 textarea::-moz-placeholder {
.c39 textarea::-moz-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
@ -1624,7 +1675,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
opacity: 1;
}
.c38 textarea:-ms-input-placeholder {
.c39 textarea:-ms-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
@ -1632,7 +1683,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
opacity: 1;
}
.c38 textarea::placeholder {
.c39 textarea::placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
@ -1640,16 +1691,16 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
opacity: 1;
}
.c24 {
.c23 {
margin-right: 24px;
}
.c24 svg {
.c23 svg {
width: 2rem;
height: 2rem;
}
.c27 {
.c26 {
word-break: break-all;
}
@ -1724,13 +1775,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
}
@media (max-width:68.75rem) {
.c33 {
.c32 {
grid-column: span;
}
}
@media (max-width:34.375rem) {
.c33 {
.c32 {
grid-column: span 12;
}
}
@ -1798,7 +1849,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</h1>
</div>
<div
class="c1 c9 c12"
class="c1 c12"
>
<button
aria-disabled="false"
@ -1867,13 +1918,13 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
class="c1 c19"
>
<div
class="c1 c20 c21"
class="c1 c20"
>
<div
class="c1 c22 c9"
class="c1 c21 c9"
>
<div
class="c1 c23 c9 c24"
class="c1 c22 c9 c23"
>
<svg
fill="none"
@ -1889,40 +1940,40 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</svg>
</div>
<div
class="c1 c20 c25"
class="c1 c24"
>
<div
class="c1 c9"
>
<span
class="c10 c26 c27"
class="c10 c25 c26"
>
This token isn’t accessible anymore.
</span>
</div>
<span
class="c10 c28"
class="c10 c27"
>
For security reasons, you can only see your token once.
</span>
</div>
</div>
<div
class="c1 c29"
class="c1 c28"
>
<div
class="c1 c20 c30"
class="c1 c29"
>
<h2
class="c10 c31"
class="c10 c30"
>
Details
</h2>
<div
class="c1 c32"
class="c1 c31"
>
<div
class="c33"
class="c32"
>
<div
class="c1 "
@ -1930,7 +1981,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
<div>
<div>
<div
class="c1 c20 c25"
class="c1 c33 c34"
>
<label
class="c10 c17"
@ -1941,20 +1992,20 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
>
Name
<span
class="c10 c34 c35"
class="c10 c35 c36"
>
*
</span>
</div>
</label>
<div
class="c1 c8 c36"
class="c1 c8 c37"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c37"
class="c38"
id="8"
name="name"
value="My super token"
@ -1966,17 +2017,17 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</div>
</div>
<div
class="c33"
class="c32"
>
<div
class="c1 "
>
<div
class="c38"
class="c39"
>
<div>
<div
class="c1 c20 c25"
class="c1 c33 c34"
>
<div
class="c1 c9"
@ -1993,12 +2044,12 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</label>
</div>
<div
class="c39"
class="c40"
>
<textarea
aria-invalid="false"
aria-required="false"
class="c40"
class="c41"
id="10"
name="description"
>
@ -2011,14 +2062,14 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</div>
</div>
<div
class="c33"
class="c32"
>
<div
class="c1 "
>
<div>
<div
class="c1 c20 c25"
class="c1 c33 c34"
>
<label
class="c10 c17"
@ -2029,14 +2080,14 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
>
Token duration
<span
class="c10 c34 c35"
class="c10 c35 c36"
>
*
</span>
</div>
</label>
<div
class="c1 c9 c41"
class="c1 c9 c42"
disabled=""
>
<button
@ -2044,22 +2095,22 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="12 12-label 12-content"
class="c42"
class="c43"
id="12"
name="lifespan"
type="button"
/>
<div
class="c1 c8 c43"
class="c1 c8 c44"
>
<div
class="c1 c9"
>
<div
class="c1 c44"
class="c1 c45"
>
<span
class="c10 c45"
class="c10 c46"
id="12-content"
>
Select
@ -2071,7 +2122,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
>
<button
aria-hidden="true"
class="c1 c46 c47 c48"
class="c1 c47 c48 c49"
disabled=""
tabindex="-1"
title="Carret Down Button"
@ -2098,7 +2149,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</div>
</div>
<span
class="c10 c49"
class="c10 c50"
>
Expiration date: Unlimited
</span>
@ -2112,7 +2163,7 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
</form>
</main>
<div
class="c50"
class="c51"
>
<p
aria-live="polite"

14
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
View File

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

10
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js
View File

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

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js
View File

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

5
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js
View File

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

18
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js
View File

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

14
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js
View File

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

325
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
View File

@ -1,3 +1,4 @@
/* eslint-disable no-nested-ternary */
/**
*
* ListView
@ -26,7 +27,6 @@ import {
ActionLayout,
EmptyStateLayout,
Flex,
Stack,
IconButton,
BaseCheckbox,
Table,
@ -303,178 +303,171 @@ const ListView = () => {
<Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
<LoadingIndicatorPage />
</Box>
) : (
<>
{rowsCount > 0 ? (
<Table
colCount={5}
rowCount={rowsCount + 1}
footer={
<TFooter
onClick={() => (canCreate ? handleGoTo('create') : {})}
icon={<Plus />}
>
{formatMessage({
id: 'Settings.webhooks.list.button.add',
defaultMessage: 'Create new webhook',
) : rowsCount > 0 ? (
<Table
colCount={5}
rowCount={rowsCount + 1}
footer={
<TFooter onClick={() => (canCreate ? handleGoTo('create') : {})} icon={<Plus />}>
{formatMessage({
id: 'Settings.webhooks.list.button.add',
defaultMessage: 'Create new webhook',
})}
</TFooter>
}
>
<Thead>
<Tr>
<Th>
<BaseCheckbox
aria-label={formatMessage({
id: 'global.select-all-entries',
defaultMessage: 'Select all entries',
})}
</TFooter>
}
>
<Thead>
<Tr>
<Th>
<BaseCheckbox
aria-label={formatMessage({
id: 'global.select-all-entries',
defaultMessage: 'Select all entries',
indeterminate={
webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount
}
value={webhooksToDeleteLength === rowsCount}
onValueChange={handleSelectAllCheckbox}
/>
</Th>
<Th width="20%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'global.name',
defaultMessage: 'Name',
})}
</Typography>
</Th>
<Th width="60%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'Settings.webhooks.form.url',
defaultMessage: 'URL',
})}
</Typography>
</Th>
<Th width="20%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'Settings.webhooks.list.th.status',
defaultMessage: 'Status',
})}
</Typography>
</Th>
<Th>
<VisuallyHidden>
{formatMessage({
id: 'Settings.webhooks.list.th.actions',
defaultMessage: 'Actions',
})}
</VisuallyHidden>
</Th>
</Tr>
</Thead>
<Tbody>
{webhooks.map((webhook) => (
<Tr
key={webhook.id}
{...onRowClick({
fn: () => handleGoTo(webhook.id),
condition: canUpdate,
})}
>
<Td {...stopPropagation}>
<BaseCheckbox
aria-label={`${formatMessage({
id: 'global.select',
defaultMessage: 'Select',
})} ${webhook.name}`}
value={webhooksToDelete?.includes(webhook.id)}
onValueChange={(value) => handleSelectOneCheckbox(value, webhook.id)}
id="select"
name="select"
/>
</Td>
<Td>
<Typography fontWeight="semiBold" textColor="neutral800">
{webhook.name}
</Typography>
</Td>
<Td>
<Typography textColor="neutral800">{webhook.url}</Typography>
</Td>
<Td>
<Flex {...stopPropagation}>
<Switch
onLabel={formatMessage({
id: 'global.enabled',
defaultMessage: 'Enabled',
})}
indeterminate={
webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount
}
value={webhooksToDeleteLength === rowsCount}
onValueChange={handleSelectAllCheckbox}
/>
</Th>
<Th width="20%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'global.name',
defaultMessage: 'Name',
offLabel={formatMessage({
id: 'global.disabled',
defaultMessage: 'Disabled',
})}
</Typography>
</Th>
<Th width="60%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'Settings.webhooks.form.url',
defaultMessage: 'URL',
})}
</Typography>
</Th>
<Th width="20%">
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
label={`${webhook.name} ${formatMessage({
id: 'Settings.webhooks.list.th.status',
defaultMessage: 'Status',
})}
</Typography>
</Th>
<Th>
<VisuallyHidden>
{formatMessage({
id: 'Settings.webhooks.list.th.actions',
defaultMessage: 'Actions',
})}
</VisuallyHidden>
</Th>
</Tr>
</Thead>
<Tbody>
{webhooks.map((webhook) => (
<Tr
key={webhook.id}
{...onRowClick({
fn: () => handleGoTo(webhook.id),
condition: canUpdate,
})}
>
<Td {...stopPropagation}>
<BaseCheckbox
aria-label={`${formatMessage({
id: 'global.select',
defaultMessage: 'Select',
})} ${webhook.name}`}
value={webhooksToDelete?.includes(webhook.id)}
onValueChange={(value) => handleSelectOneCheckbox(value, webhook.id)}
id="select"
name="select"
})}`}
selected={webhook.isEnabled}
onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
visibleLabels
/>
</Flex>
</Td>
<Td>
<Flex gap={1} {...stopPropagation}>
{canUpdate && (
<IconButton
onClick={() => {
handleGoTo(webhook.id);
}}
label={formatMessage({
id: 'Settings.webhooks.events.update',
defaultMessage: 'Update',
})}
icon={<Pencil />}
noBorder
/>
</Td>
<Td>
<Typography fontWeight="semiBold" textColor="neutral800">
{webhook.name}
</Typography>
</Td>
<Td>
<Typography textColor="neutral800">{webhook.url}</Typography>
</Td>
<Td>
<Flex {...stopPropagation}>
<Switch
onLabel={formatMessage({
id: 'global.enabled',
defaultMessage: 'Enabled',
})}
offLabel={formatMessage({
id: 'global.disabled',
defaultMessage: 'Disabled',
})}
label={`${webhook.name} ${formatMessage({
id: 'Settings.webhooks.list.th.status',
defaultMessage: 'Status',
})}`}
selected={webhook.isEnabled}
onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
visibleLabels
/>
</Flex>
</Td>
<Td>
<Stack horizontal spacing={1} {...stopPropagation}>
{canUpdate && (
<IconButton
onClick={() => {
handleGoTo(webhook.id);
}}
label={formatMessage({
id: 'Settings.webhooks.events.update',
defaultMessage: 'Update',
})}
icon={<Pencil />}
noBorder
/>
)}
{canDelete && (
<IconButton
onClick={() => handleDeleteClick(webhook.id)}
label={formatMessage({
id: 'global.delete',
defaultMessage: 'Delete',
})}
icon={<Trash />}
noBorder
id={`delete-${webhook.id}`}
/>
)}
</Stack>
</Td>
</Tr>
))}
</Tbody>
</Table>
) : (
<EmptyStateLayout
icon={<EmptyDocuments width="160px" />}
content={formatMessage({
id: 'Settings.webhooks.list.empty.description',
defaultMessage: 'No webhooks found',
)}
{canDelete && (
<IconButton
onClick={() => handleDeleteClick(webhook.id)}
label={formatMessage({
id: 'global.delete',
defaultMessage: 'Delete',
})}
icon={<Trash />}
noBorder
id={`delete-${webhook.id}`}
/>
)}
</Flex>
</Td>
</Tr>
))}
</Tbody>
</Table>
) : (
<EmptyStateLayout
icon={<EmptyDocuments width="160px" />}
content={formatMessage({
id: 'Settings.webhooks.list.empty.description',
defaultMessage: 'No webhooks found',
})}
action={
<Button
variant="secondary"
startIcon={<Plus />}
onClick={() => (canCreate ? handleGoTo('create') : {})}
>
{formatMessage({
id: 'Settings.webhooks.list.button.add',
defaultMessage: 'Create new webhook',
})}
action={
<Button
variant="secondary"
startIcon={<Plus />}
onClick={() => (canCreate ? handleGoTo('create') : {})}
>
{formatMessage({
id: 'Settings.webhooks.list.button.add',
defaultMessage: 'Create new webhook',
})}
</Button>
}
/>
)}
</>
</Button>
}
/>
)}
</ContentLayout>
</Main>

24
packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
View File

@ -193,13 +193,19 @@ describe('Admin | containers | ListView', () => {
flex-direction: row;
}
.c39 > * {
margin-left: 0;
margin-right: 0;
}
.c39 > * + * {
margin-left: 4px;
.c39 {
-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;
gap: 4px;
}
.c40 {
@ -996,7 +1002,7 @@ describe('Admin | containers | ListView', () => {
>
<div
aria-hidden="true"
class="c6 c39"
class="c39"
role="button"
>
<span>
@ -1159,7 +1165,7 @@ describe('Admin | containers | ListView', () => {
>
<div
aria-hidden="true"
class="c6 c39"
class="c39"
role="button"
>
<span>

5
packages/core/admin/admin/src/pages/UseCasePage/index.js
View File

@ -9,7 +9,6 @@ import {
Main,
Flex,
Box,
Stack,
Typography,
Select,
Option,
@ -124,7 +123,7 @@ const UseCasePage = () => {
</TypographyCenter>
</Box>
</Flex>
<Stack spacing={6}>
<Flex direction="column" alignItems="stretch" gap={6}>
<Select
id="usecase"
data-testid="usecase"
@ -155,7 +154,7 @@ const UseCasePage = () => {
<Button type="submit" size="L" fullWidth disabled={!role}>
{formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
</Button>
</Stack>
</Flex>
</form>
</LayoutContent>
<Flex justifyContent="center">

Some files were not shown because too many files have changed in this diff Show More