yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-18 19:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename Row by Flex

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-10-22 08:37:30 +02:00
parent 5ac69ecbe5
commit d6c36b8f2a
94 changed files with 393 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import Reload from '@strapi/icons/Reload';
import { Link } from '@strapi/parts/Link';
import { Box } from '@strapi/parts/Box';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { H1, H2 } from '@strapi/parts/Text';
import PropTypes from 'prop-types';
import Overlay from './Overlay';
@ -44,7 +44,7 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
return ReactDOM.createPortal(
<Overlay>
<Box>
<Row>
<Flex>
{displayedIcon === 'reload' && (
<Box paddingRight={3} style={{ alignSelf: 'baseline' }}>
<LoaderReload width="4rem" height="4rem" />
@ -58,7 +58,7 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
<Stack size={2}>
<H1>{formatMessage(title)}</H1>
<H2 textColor="neutral600">{formatMessage(description)}</H2>
<Row>
<Flex>
{elapsed < 15 && (
<Link
href="https://strapi.io/documentation"
@ -71,9 +71,9 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
Read the documentation
</Link>
)}
</Row>
</Flex>
</Stack>
</Row>
</Flex>
</Box>
</Overlay>,
overlayContainer

4
packages/core/admin/admin/src/components/Notifications/Wrapper.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
const Wrapper = styled(Row)`
const Wrapper = styled(Flex)`
position: fixed;
top: 46px;
right: 0;

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

@ -7,7 +7,7 @@ import { FocusTrap } from '@strapi/parts/FocusTrap';
import { IconButton } from '@strapi/parts/IconButton';
import { LinkButton } from '@strapi/parts/LinkButton';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text, H1 } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
import ExternalLink from '@strapi/icons/ExternalLink';
@ -24,7 +24,7 @@ const UpgradeWrapper = styled.div`
padding: 0 ${({ theme }) => theme.spaces[8]};
`;
const UpgradeContainer = styled(Row)`
const UpgradeContainer = styled(Flex)`
position: relative;
max-width: ${830 / 16}rem;
height: ${415 / 16}rem;

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

@ -6,7 +6,7 @@ import AddIcon from '@strapi/icons/AddIconCircle';
import { Box } from '@strapi/parts/Box';
import { BaseButton } from '@strapi/parts/BaseButton';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { pxToRem } from '@strapi/helper-plugin';
import { getTrad } from '../../utils';
@ -40,19 +40,19 @@ const ComponentInitializer = ({ isReadOnly, onClick }) => {
paddingBottom={9}
>
<Stack size={2}>
<Row justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
<Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
<IconButton disabled={isReadOnly} onClick={onClick}>
<AddIcon />
</IconButton>
</Row>
<Row justifyContent="center">
</Flex>
<Flex justifyContent="center">
<Text textColor="primary600" small bold>
{formatMessage({
id: getTrad('components.empty-repeatable'),
defaultMessage: 'No entry yet. Click on the button below to add one.',
})}
</Text>
</Row>
</Flex>
</Stack>
</Box>
);

4
packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { TableLabel } from '@strapi/parts/Text';
const Wrapper = styled(Row)`
const Wrapper = styled(Flex)`
position: relative;
border-radius: 50%;
width: 26px;

6
packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js
View File

@ -5,7 +5,7 @@ import { IconButton } from '@strapi/parts/IconButton';
import { Text } from '@strapi/parts/Text';
import { Box } from '@strapi/parts/Box';
import { Badge } from '@strapi/parts/Badge';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Popover } from '@strapi/parts/Popover';
import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
import styled from 'styled-components';
@ -43,7 +43,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
const handleTogglePopover = () => setVisible(prev => !prev);
return (
<Row {...stopPropagation}>
<Flex {...stopPropagation}>
<RelationCountBadge>{value.count}</RelationCountBadge>
<Box paddingLeft={2}>
<Text textColor="neutral800">
@ -82,7 +82,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
)}
</ActionWrapper>
)}
</Row>
</Flex>
);
};

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@ -26,17 +26,17 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
>
<DialogBody icon={<AlertWarningIcon />}>
<Stack size={2}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text id="confirm-description">
{formatMessage({
id: 'components.popUpWarning.message',
defaultMessage: 'Are you sure you want to delete this?',
})}
</Text>
</Row>
<Row>
</Flex>
<Flex>
<InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
</Row>
</Flex>
</Stack>
</DialogBody>
<DialogFooter

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@ -27,17 +27,17 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
>
<DialogBody icon={<AlertWarningIcon />}>
<Stack size={2}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text id="confirm-description">
{formatMessage({
id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
defaultMessage: 'Are you sure you want to delete these entries?',
})}
</Text>
</Row>
<Row>
</Flex>
<Flex>
<InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
</Row>
</Flex>
</Stack>
</DialogBody>
<DialogFooter

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

@ -4,7 +4,7 @@ import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton';
import { Tbody, Td, Tr } from '@strapi/parts/Table';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import DeleteIcon from '@strapi/icons/DeleteIcon';
import Duplicate from '@strapi/icons/Duplicate';
import EditIcon from '@strapi/icons/EditIcon';
@ -92,7 +92,7 @@ const TableRows = ({
{withBulkActions && (
<Td>
<Row justifyContent="end" {...stopPropagation}>
<Flex justifyContent="end" {...stopPropagation}>
<IconButton
onClick={() => {
trackUsage('willEditEntryFromButton');
@ -146,7 +146,7 @@ const TableRows = ({
/>
</Box>
)}
</Row>
</Flex>
</Td>
)}
</Tr>

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

@ -11,7 +11,7 @@ import styled from 'styled-components';
import AddIcon from '@strapi/icons/AddIconCircle';
import { BaseButton } from '@strapi/parts/BaseButton';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text, ButtonText } from '@strapi/parts/Text';
import { getTrad } from '../../../../utils';
@ -117,20 +117,20 @@ const AddComponentButton = ({
return (
<>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}>
<StyledButton type="button" onClick={onClick} disabled={isDisabled} hasError={hasError}>
<Row>
<Flex>
<BoxFullHeight aria-hidden paddingRight={2}>
<StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
</BoxFullHeight>
<ButtonText textColor={hasError && !isOpen ? 'danger600' : 'neutral500'} small>
{buttonLabel}
</ButtonText>
</Row>
</Flex>
</StyledButton>
</Box>
</Row>
</Flex>
</>
);
};

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

@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
const StyledBox = styled(Box)`
width: ${({ theme }) => theme.spaces[2]};
@ -10,9 +10,9 @@ const StyledBox = styled(Box)`
const Rectangle = () => {
return (
<Row justifyContent="center">
<Flex justifyContent="center">
<StyledBox background="primary200" />
</Row>
</Flex>
);
};

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

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { getTrad } from '../../../../utils';
import { useContentTypeLayout } from '../../../../hooks';
@ -70,14 +70,14 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
borderColor="neutral150"
hasRadius
>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text bold textColor="neutral600">
{formatMessage({
id: getTrad('components.DynamicZone.ComponentPicker-label'),
defaultMessage: 'Pick one component',
})}
</Text>
</Row>
</Flex>
<Box paddingTop={2}>
<KeyboardNavigable attributeName="data-strapi-accordion-toggle">
{dynamicComponentCategories.map(({ category, components }, index) => {

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

@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { pxToRem } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Typography } from '@strapi/parts/Text';
const StyledBox = styled(Box)`
@ -22,18 +22,18 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents }) => {
const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
return (
<Row justifyContent="center">
<Flex justifyContent="center">
<Box>
<StyledBox padding={3} background="neutral0" shadow="filterShadow" color="neutral500">
<Row>
<Flex>
<Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
{intlLabel}&nbsp;({numberOfComponents})
</Typography>
{labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
</Row>
</Flex>
</StyledBox>
</Box>
</Row>
</Flex>
);
};

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
const LabelAction = styled(Box)`
@ -18,13 +18,13 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
return (
<Box paddingBottom={1}>
<Row>
<Flex>
<Text textColor="neutral800" htmlFor={id || name} small bold as="label">
{label}
{showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
</Text>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Row>
</Flex>
</Box>
);
};

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

@ -8,7 +8,7 @@ import { NotAllowedInput } from '@strapi/helper-plugin';
import DeleteIcon from '@strapi/icons/DeleteIcon';
import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { getTrad } from '../../utils';
import ComponentInitializer from '../ComponentInitializer';
@ -59,7 +59,7 @@ const FieldComponent = ({
return (
<Box>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
{intlLabel && (
<Label
intlLabel={intlLabel}
@ -83,7 +83,7 @@ const FieldComponent = ({
}}
/>
)}
</Row>
</Flex>
<Stack size={1}>
{!isRepeatable && !isInitialized && (
<ComponentInitializer
@ -155,4 +155,7 @@ FieldComponent.propTypes = {
const Memoized = memo(FieldComponent, isEqual);
export default connect(Memoized, select);
export default connect(
Memoized,
select
);

6
packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js
View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { Text } from '@strapi/parts/Text';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
const LabelAction = styled(Box)`
svg path {
@ -22,12 +22,12 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
: name;
return (
<Row>
<Flex>
<Text textColor="neutral800" htmlFor={id || name} small bold as="label">
{label}
</Text>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Row>
</Flex>
);
};

6
packages/core/admin/admin/src/content-manager/components/InputUID/endActionStyle.js
View File

@ -1,6 +1,6 @@
import styled, { keyframes } from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { FieldAction } from '@strapi/parts/Field';
export const EndActionWrapper = styled(Box)`
@ -23,7 +23,7 @@ export const FieldActionWrapper = styled(FieldAction)`
}
`;
export const TextValidation = styled(Row)`
export const TextValidation = styled(Flex)`
position: absolute;
right: ${({ theme }) => theme.spaces[6]};
width: 100px;
@ -49,6 +49,6 @@ const rotation = keyframes`
}
`;
export const LoadingWrapper = styled(Row)`
export const LoadingWrapper = styled(Flex)`
animation: ${rotation} 2s infinite linear;
`;

6
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import AddIcon from '@strapi/icons/AddIcon';
import { pxToRem } from '@strapi/helper-plugin';
@ -37,7 +37,7 @@ const Button = ({ disabled, onClick }) => {
paddingBottom={2}
onClick={onClick}
>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text textColor="primary600" bold>
<StyledIcon />
{formatMessage({
@ -45,7 +45,7 @@ const Button = ({ disabled, onClick }) => {
defaultMessage: 'Add an entry',
})}
</Text>
</Row>
</Flex>
</StyledButton>
);
};

14
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { IconButton } from '@strapi/parts/IconButton';
import DeleteIcon from '@strapi/icons/DeleteIcon';
@ -46,9 +46,9 @@ const DragPreview = ({ displayedValue }) => {
background="neutral0"
style={{ width: '20vw' }}
>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<ToggleButton type="button">
<Row>
<Flex>
<DropdownIconWrapper background="neutral200">
<DropdownIcon />
</DropdownIconWrapper>
@ -57,17 +57,17 @@ const DragPreview = ({ displayedValue }) => {
{displayedValue}
</Text>
</Box>
</Row>
</Flex>
</ToggleButton>
<Box paddingLeft={3}>
<Row>
<Flex>
<IconButton icon={<DeleteIcon />} />
<Box paddingLeft={2}>
<IconButton icon={<DragHandle />} />
</Box>
</Row>
</Flex>
</Box>
</Row>
</Flex>
</Box>
);
};

4
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
const StyledBox = styled(Box)`
border: 1px dashed ${({ theme }) => theme.colors.primary500};
@ -11,7 +11,7 @@ const Preview = () => {
return (
<StyledBox padding={8} background="primary100">
<Box>
<Row />
<Flex />
</Box>
</StyledBox>
);

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

@ -8,7 +8,7 @@ import toString from 'lodash/toString';
import styled from 'styled-components';
import { Accordion, AccordionToggle, AccordionContent } from '@strapi/parts/Accordion';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { IconButton } from '@strapi/parts/IconButton';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Stack } from '@strapi/parts/Stack';
@ -166,7 +166,7 @@ const DraggedItem = ({
togglePosition="left"
action={
isReadOnly ? null : (
<Row>
<Flex>
<IconButton
onClick={() => {
removeRepeatableField(componentFieldName);
@ -188,7 +188,7 @@ const DraggedItem = ({
icon={<DragHandle />}
/>
</Box>
</Row>
</Flex>
)
}
/>

10
packages/core/admin/admin/src/content-manager/components/SelectMany/ListItem.js
View File

@ -8,7 +8,7 @@ import has from 'lodash/has';
import isEmpty from 'lodash/isEmpty';
import { IconButton } from '@strapi/parts/IconButton';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Link } from '@strapi/parts/Link';
import BaseMinus from '@strapi/icons/Minus';
@ -69,8 +69,8 @@ function ListItem({
const { pathname } = useLocation();
return (
<Row as="li" alignItems="center">
<Row style={{ flex: 1 }} alignItems="center">
<Flex as="li" alignItems="center">
<Flex style={{ flex: 1 }} alignItems="center">
{hasDraftAndPublish && (
<Box paddingLeft={1} paddingRight={2}>
<StyledBullet isDraft={isDraft} title={title} />
@ -86,9 +86,9 @@ function ListItem({
) : (
<Text small>{value || data.id}</Text>
)}
</Row>
</Flex>
<Minus onClick={onRemove} icon={<BaseMinus />} label="Remove" style={{ cursor }} />
</Row>
</Flex>
);
}

6
packages/core/admin/admin/src/content-manager/components/SelectOne/SingleValue.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { pxToRem } from '@strapi/helper-plugin';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import get from 'lodash/get';
import has from 'lodash/has';
@ -39,10 +39,10 @@ const SingleValue = props => {
return (
<Component {...props}>
<Row>
<Flex>
<StyledBullet title={title} isDraft={isDraft} />
<Text ellipsis>{props.data.label || '-'}</Text>
</Row>
</Flex>
</Component>
);
}

10
packages/core/admin/admin/src/content-manager/components/SelectWrapper/Label.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
const LabelAction = styled(Box)`
@ -17,16 +17,16 @@ const Label = ({ intlLabel, id, labelAction, link, name, numberOfEntries, isSing
const label = intlLabel?.id ? formatMessage(intlLabel) : name;
return (
<Row justifyContent="space-between">
<Row>
<Flex justifyContent="space-between">
<Flex>
<Text textColor="neutral800" htmlFor={id || name} small bold as="label">
{label}
{!isSingle && <>&nbsp;({numberOfEntries})</>}
</Text>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Row>
</Flex>
{link}
</Row>
</Flex>
);
};

6
packages/core/admin/admin/src/content-manager/components/SelectWrapper/Option.js
View File

@ -4,7 +4,7 @@ import { components } from 'react-select';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { get, has, isEmpty } from 'lodash';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { pxToRem } from '@strapi/helper-plugin';
import { getTrad } from '../../utils';
@ -38,10 +38,10 @@ const Option = props => {
return (
<Component {...props}>
<Row>
<Flex>
<StyledBullet title={title} isDraft={isDraft} />
<Text ellipsis>{props.label || '-'}</Text>
</Row>
</Flex>
</Component>
);
}

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { FocusTrap } from '@strapi/parts/FocusTrap';
import { Portal } from '@strapi/parts/Portal';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import Collapse from '@strapi/icons/Collapse';
import PreviewWysiwyg from '../PreviewWysiwyg';
@ -75,7 +75,7 @@ const WysiwygExpand = ({
</WysiwygContainer>
<PreviewWrapper>
<PreviewHeader padding={2} background="neutral100">
<Row justifyContent="flex-end" alignItems="flex-end">
<Flex justifyContent="flex-end" alignItems="flex-end">
<ExpandButton id="collapse" onClick={() => onToggleExpand('collapse')}>
<Text>
{formatMessage({
@ -85,7 +85,7 @@ const WysiwygExpand = ({
</Text>
<Collapse />
</ExpandButton>
</Row>
</Flex>
</PreviewHeader>
<PreviewContainer>
<PreviewWysiwyg data={value} />

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

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import Expand from '@strapi/icons/Expand';
import { ExpandButton } from './WysiwygStyles';
@ -12,7 +12,7 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
return (
<Box padding={2} background="neutral100" hasRadius>
<Row justifyContent="flex-end" alignItems="flex-end">
<Flex justifyContent="flex-end" alignItems="flex-end">
<ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
<Text>
{formatMessage({
@ -22,7 +22,7 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
</Text>
<Expand />
</ExpandButton>
</Row>
</Flex>
</Box>
);
};

22
packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
View File

@ -6,7 +6,7 @@ import { Button } from '@strapi/parts/Button';
import { IconButtonGroup } from '@strapi/parts/IconButton';
import { Option, Select } from '@strapi/parts/Select';
import { Popover } from '@strapi/parts/Popover';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import Bold from '@strapi/icons/Bold';
import Italic from '@strapi/icons/Italic';
import Underline from '@strapi/icons/Underline';
@ -40,8 +40,8 @@ const WysiwygNav = ({
if (isPreviewMode) {
return (
<Box padding={2} background="neutral100">
<Row justifyContent="space-between">
<Row>
<Flex justifyContent="space-between">
<Flex>
<Select
disabled
id="selectTitle"
@ -76,7 +76,7 @@ const WysiwygNav = ({
</MainButtons>
<MoreButton disabled ref={buttonMoreRef} id="more" label="more" icon={<More />} />
</Row>
</Flex>
<Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
{formatMessage({
@ -84,15 +84,15 @@ const WysiwygNav = ({
defaultMessage: 'Markdown mode',
})}
</Button>
</Row>
</Flex>
</Box>
);
}
return (
<Box padding={2} background="neutral100">
<Row justifyContent="space-between">
<Row>
<Flex justifyContent="space-between">
<Flex>
<Select
id="selectTitle"
placeholder={selectPlaceholder}
@ -140,7 +140,7 @@ const WysiwygNav = ({
/>
{visiblePopover && (
<Popover centered source={buttonMoreRef} spacing={4} id="popover">
<Row>
<Flex>
<IconButtonGroupMargin>
<CustomIconButton
onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)}
@ -195,10 +195,10 @@ const WysiwygNav = ({
icon={<Quote />}
/>
</IconButtonGroup>
</Row>
</Flex>
</Popover>
)}
</Row>
</Flex>
{!noPreviewMode && onTogglePreviewMode && (
<Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
@ -208,7 +208,7 @@ const WysiwygNav = ({
})}
</Button>
)}
</Row>
</Flex>
</Box>
);
};

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

@ -4,7 +4,7 @@ import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { ButtonText, P } from '@strapi/parts/Text';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import Editor from './Editor';
import WysiwygNav from './WysiwygNav';
import WysiwygFooter from './WysiwygFooter';
@ -125,10 +125,10 @@ const Wysiwyg = ({
return (
<>
<Row>
<Flex>
<ButtonText>{label}</ButtonText>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Row>
</Flex>
<WysiwygWrapper hasRadius error={error}>
<WysiwygNav
editorRef={editorRef}

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import Bullet from '@strapi/icons/Bullet';
import { pxToRem } from '@strapi/helper-plugin';
@ -55,7 +55,7 @@ const DraftAndPublishBadge = ({ hasDraftAndPublish, isPublished }) => {
paddingRight={5}
{...colorProps.box}
>
<Box as={Row}>
<Box as={Flex}>
<CustomBullet $bulletColor={colorProps.bulletColor} />
<Box paddingLeft={3}>
<Text textColor={colorProps.textColor}>
@ -88,5 +88,8 @@ DraftAndPublishBadge.propTypes = {
isPublished: PropTypes.bool.isRequired,
};
export default connect(DraftAndPublishBadge, select);
export default connect(
DraftAndPublishBadge,
select
);
export { DraftAndPublishBadge };

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

@ -10,7 +10,7 @@ import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button';
import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
import { Link } from '@strapi/parts/Link';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@ -103,7 +103,7 @@ const Header = ({
/* eslint-enable indent */
primaryAction = (
<Row>
<Flex>
{shouldShowPublishButton && (
<Button
disabled={didChangeData}
@ -123,7 +123,7 @@ const Header = ({
})}
</Button>
</Box>
</Row>
</Flex>
);
}
@ -181,7 +181,7 @@ const Header = ({
>
<DialogBody icon={<AlertWarningIcon />}>
<Stack size={2}>
<Row justifyContent="center" style={{ textAlign: 'center' }}>
<Flex justifyContent="center" style={{ textAlign: 'center' }}>
<Text id="confirm-description">
{formatMessage(
{
@ -194,15 +194,15 @@ const Header = ({
}
)}
</Text>
</Row>
<Row justifyContent="center" style={{ textAlign: 'center' }}>
</Flex>
<Flex justifyContent="center" style={{ textAlign: 'center' }}>
<Text id="confirm-description">
{formatMessage({
id: getTrad('popUpWarning.warning.unpublish-question'),
defaultMessage: 'Are you sure you want to unpublish it?',
})}
</Text>
</Row>
</Flex>
</Stack>
</DialogBody>
<DialogFooter
@ -236,7 +236,7 @@ const Header = ({
>
<DialogBody icon={<AlertWarningIcon />}>
<Stack size={2}>
<Row justifyContent="center" style={{ textAlign: 'center' }}>
<Flex justifyContent="center" style={{ textAlign: 'center' }}>
<Text id="confirm-description">
{draftRelationsCountRef.current}
{formatMessage(
@ -252,15 +252,15 @@ const Header = ({
}
)}
</Text>
</Row>
<Row justifyContent="center" style={{ textAlign: 'center' }}>
</Flex>
<Flex justifyContent="center" style={{ textAlign: 'center' }}>
<Text id="confirm-description">
{formatMessage({
id: getTrad('popUpWarning.warning.publish-question'),
defaultMessage: 'Do you still want to publish it?',
})}
</Text>
</Row>
</Flex>
</Stack>
</DialogBody>
<DialogFooter

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

@ -4,7 +4,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box';
import { Divider } from '@strapi/parts/Divider';
import { TableLabel, Text } from '@strapi/parts/Text';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { getTrad } from '../../../utils';
import getUnits from './utils/getUnits';
@ -38,7 +38,7 @@ const Informations = () => {
<Divider />
</Box>
<Stack size={4}>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<Text bold>
{formatMessage({
id: getTrad('containers.Edit.information.lastUpdate'),
@ -46,8 +46,8 @@ const Informations = () => {
})}
</Text>
<Text>{formatRelativeTime(value, unit, { numeric: 'auto' })}</Text>
</Row>
<Row justifyContent="space-between">
</Flex>
<Flex justifyContent="space-between">
<Text bold>
{formatMessage({
id: getTrad('containers.Edit.information.by'),
@ -55,7 +55,7 @@ const Informations = () => {
})}
</Text>
<Text>{isCreatingEntry ? '-' : updatedBy}</Text>
</Row>
</Flex>
</Stack>
</Box>
);

10
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 { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { ButtonText } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
import EditIcon from '@strapi/icons/EditIcon';
@ -9,7 +9,7 @@ import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
import Drag from '@strapi/icons/Drag';
import ellipsisCardTitle from '../utils/ellipsisCardTitle';
const ActionBox = styled(Row)`
const ActionBox = styled(Flex)`
height: ${({ theme }) => theme.spaces[7]};
&:last-child {
@ -28,7 +28,7 @@ const DragButton = styled(ActionBox)`
}
`;
const FieldContainer = styled(Row)`
const FieldContainer = styled(Flex)`
display: inline-flex;
max-height: ${32 / 16}rem;
background-color: ${({ theme }) => theme.colors.primary100};
@ -68,14 +68,14 @@ const CardPreview = ({ labelField }) => {
</DragButton>
<ButtonText>{cardEllipsisTitle}</ButtonText>
</Stack>
<Row paddingLeft={3}>
<Flex paddingLeft={3}>
<ActionBox alignItems="center">
<EditIcon />
</ActionBox>
<ActionBox alignItems="center">
<CloseAlertIcon />
</ActionBox>
</Row>
</Flex>
</FieldContainer>
);
};

8
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 { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Box } from '@strapi/parts/Box';
import { ButtonText } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
@ -35,7 +35,7 @@ const DragButton = styled(ActionButton)`
}
`;
const FieldContainer = styled(Row)`
const FieldContainer = styled(Flex)`
max-height: ${32 / 16}rem;
cursor: pointer;
opacity: ${({ isDragging }) => (isDragging ? 0 : 1)};
@ -157,7 +157,7 @@ const DraggableCard = ({
</DragButton>
<ButtonText>{cardEllipsisTitle}</ButtonText>
</Stack>
<Row paddingLeft={3}>
<Flex paddingLeft={3}>
<ActionButton
ref={editButtonRef}
onClick={e => {
@ -189,7 +189,7 @@ const DraggableCard = ({
>
<CloseAlertIcon />
</ActionButton>
</Row>
</Flex>
</FieldContainer>
</FieldWrapper>
);

4
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
View File

@ -6,7 +6,7 @@ import styled from 'styled-components';
import { ModalLayout, ModalHeader, ModalFooter, ModalBody } from '@strapi/parts/ModalLayout';
import { ButtonText } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { TextInput } from '@strapi/parts/TextInput';
import { ToggleInput } from '@strapi/parts/ToggleInput';
@ -44,7 +44,7 @@ const iconByTypes = {
uid: <Uid />,
};
const HeaderContainer = styled(Row)`
const HeaderContainer = styled(Flex)`
svg {
width: ${32 / 16}rem;
height: ${24 / 16}rem;

8
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.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 { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Select, Option } from '@strapi/parts/Select';
import { ToggleInput } from '@strapi/parts/ToggleInput';
@ -10,7 +10,7 @@ import { Box } from '@strapi/parts/Box';
import { H3 } from '@strapi/parts/Text';
import { getTrad } from '../../../utils';
const RowGap = styled(Row)`
const FlexGap = styled(Flex)`
gap: ${({ theme }) => theme.spaces[4]};
`;
@ -28,7 +28,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
})}
</H3>
</Box>
<RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
<FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
<ToggleInput
label={formatMessage({
id: getTrad('form.Input.search'),
@ -86,7 +86,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
name="settings.bulkable"
checked={settings.bulkable}
/>
</RowGap>
</FlexGap>
<Grid gap={4}>
<GridItem s={12} col={6}>
<Select

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

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { PropTypes } from 'prop-types';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { H3 } from '@strapi/parts/Text';
import { SimpleMenu, MenuItem } from '@strapi/parts/SimpleMenu';
@ -12,16 +12,16 @@ import AddIcon from '@strapi/icons/AddIcon';
import DraggableCard from './DraggableCard';
import { getTrad } from '../../../utils';
const Flex = styled(Box)`
const FlexWrapper = styled(Box)`
flex: ${({ size }) => size};
`;
const ScrollableContainer = styled(Flex)`
const ScrollableContainer = styled(FlexWrapper)`
overflow-x: scroll;
overflow-y: hidden;
`;
const SelectContainer = styled(Flex)`
const SelectContainer = styled(FlexWrapper)`
max-width: ${32 / 16}rem;
`;
@ -46,7 +46,7 @@ const SortDisplayedFields = ({
})}
</H3>
</Box>
<Row
<Flex
paddingTop={4}
paddingLeft={4}
paddingRight={4}
@ -88,7 +88,7 @@ const SortDisplayedFields = ({
))}
</SimpleMenu>
</SelectContainer>
</Row>
</Flex>
</>
);
};

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

@ -1,16 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
const PaginationFooter = ({ pagination }) => {
return (
<Box paddingTop={6}>
<Row alignItems="flex-end" justifyContent="space-between">
<Flex alignItems="flex-end" justifyContent="space-between">
<PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
<PaginationURLQuery pagination={pagination} />
</Row>
</Flex>
</Box>
);
};

6
packages/core/admin/admin/src/layouts/AppLayout/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { SkipToContent } from '@strapi/parts/Main';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@ -18,10 +18,10 @@ const AppLayout = ({ children, sideNav }) => {
<SkipToContent>
{formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
</SkipToContent>
<Row alignItems="flex-start">
<Flex alignItems="flex-start">
{sideNav}
<FlexBox>{children}</FlexBox>
</Row>
</Flex>
</Box>
);
};

8
packages/core/admin/admin/src/layouts/UnauthenticatedLayout/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import LocaleToggle from './LocaleToggle';
const Wrapper = styled(Box)`
@ -10,7 +10,7 @@ const Wrapper = styled(Box)`
width: 552px;
`;
export const Column = styled(Row)`
export const Column = styled(Flex)`
flex-direction: column;
`;
@ -35,11 +35,11 @@ LayoutContent.propTypes = {
const UnauthenticatedLayout = ({ children }) => {
return (
<div>
<Row as="header" justifyContent="flex-end">
<Flex as="header" justifyContent="flex-end">
<Box paddingTop={6} paddingRight={8}>
<LocaleToggle />
</Box>
</Row>
</Flex>
<Box paddingTop={11} paddingBottom={11}>
{children}
</Box>

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

@ -5,7 +5,7 @@ import { Form } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box';
import { Stack } from '@strapi/parts/Stack';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { Button } from '@strapi/parts/Button';
import { TextInput } from '@strapi/parts/TextInput';
@ -86,13 +86,13 @@ const ForgotPassword = ({ onSubmit, schema }) => {
)}
</Formik>
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/login">
{formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
</Link>
</Box>
</Row>
</Flex>
</Main>
</UnauthenticatedLayout>
);

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

@ -2,7 +2,7 @@ import React from 'react';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { H1, Text } from '@strapi/parts/Text';
import UnauthenticatedLayout, {
@ -45,13 +45,13 @@ const ForgotPasswordSuccess = () => {
</Box>
</Column>
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/login">
{formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}
</Link>
</Box>
</Row>
</Flex>
</Main>
</UnauthenticatedLayout>
);

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

@ -4,7 +4,7 @@ import Show from '@strapi/icons/Show';
import { Box } from '@strapi/parts/Box';
import { Stack } from '@strapi/parts/Stack';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { Button } from '@strapi/parts/Button';
import { TextInput } from '@strapi/parts/TextInput';
@ -145,7 +145,7 @@ const Login = ({ onSubmit, schema, children }) => {
</Formik>
{children}
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/forgot-password">
{formatMessage({
@ -154,7 +154,7 @@ const Login = ({ onSubmit, schema, children }) => {
})}
</Link>
</Box>
</Row>
</Flex>
</Main>
);
};

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

@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
import { useQuery } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { H1, Text } from '@strapi/parts/Text';
import UnauthenticatedLayout, {
@ -45,13 +45,13 @@ const Oops = () => {
</Box>
</Column>
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/login">
{formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}
</Link>
</Box>
</Row>
</Flex>
</Main>
</UnauthenticatedLayout>
);

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

@ -6,7 +6,7 @@ import omit from 'lodash/omit';
import { Box } from '@strapi/parts/Box';
import { Stack } from '@strapi/parts/Stack';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { Button } from '@strapi/parts/Button';
import { TextInput } from '@strapi/parts/TextInput';
@ -318,14 +318,14 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
</Formik>
{!noSignin && (
<Box paddingTop={4}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Link label="Auth.link.signin" to="/auth/login">
{formatMessage({
id: 'Auth.link.signin.account',
defaultMessage: 'Already have an account?',
})}
</Link>
</Row>
</Flex>
</Box>
)}
</LayoutContent>

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

@ -5,7 +5,7 @@ import { Form } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box';
import { Stack } from '@strapi/parts/Stack';
import { Main } from '@strapi/parts/Main';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Link } from '@strapi/parts/Link';
import { Button } from '@strapi/parts/Button';
import { TextInput } from '@strapi/parts/TextInput';
@ -158,13 +158,13 @@ const ForgotPassword = ({ onSubmit, schema }) => {
)}
</Formik>
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/login">
{formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
</Link>
</Box>
</Row>
</Flex>
</Main>
</UnauthenticatedLayout>
);

4
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
const CollapseLabel = styled(Row)`
const CollapseLabel = styled(Flex)`
padding-right: ${({ theme }) => theme.spaces[2]};
overflow: hidden;
flex: 1;

12
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { TableLabel } from '@strapi/parts/Text';
import { MultiSelectNested } from '@strapi/parts/Select';
import upperFirst from 'lodash/upperFirst';
@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { rowHeight } from '../../Permissions/utils/constants';
const RowWrapper = styled(Row)`
const FlexWrapper = styled(Flex)`
height: ${rowHeight};
`;
@ -56,8 +56,8 @@ const ActionRow = ({
};
return (
<RowWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
<Row paddingLeft={6} style={{ width: 180 }}>
<FlexWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
<Flex paddingLeft={6} style={{ width: 180 }}>
<TableLabel textColor="neutral600">
{formatMessage({
id: 'Settings.permissions.conditions.can',
@ -87,7 +87,7 @@ const ActionRow = ({
defaultMessage: 'When',
})}
</TableLabel>
</Row>
</Flex>
<Box style={{ maxWidth: 430, width: '100%' }}>
<MultiSelectNested
id={name}
@ -98,7 +98,7 @@ const ActionRow = ({
disabled={isFormDisabled}
/>
</Box>
</RowWrapper>
</FlexWrapper>
);
};

8
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js
View File

@ -4,7 +4,7 @@ import Down from '@strapi/icons/Down';
import Up from '@strapi/icons/Up';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import get from 'lodash/get';
import omit from 'lodash/omit';
import { useIntl } from 'react-intl';
@ -65,7 +65,7 @@ const BoxWrapper = styled.div`
}
`;
const Cell = styled(Row)`
const Cell = styled(Flex)`
width: ${cellWidth};
position: relative;
`;
@ -164,7 +164,7 @@ const Collapse = ({
<Chevron paddingLeft={2}>{isActive ? <Up /> : <Down />}</Chevron>
</RowLabelWithCheckbox>
<Row style={{ flex: 1 }}>
<Flex style={{ flex: 1 }}>
{checkboxesActions.map(
({
actionId,
@ -232,7 +232,7 @@ const Collapse = ({
);
}
)}
</Row>
</Flex>
{isModalOpen && (
<ConditionsModal
headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}

14
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import get from 'lodash/get';
import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
import { usePermissionsDataManager } from '../../../../../../../../../hooks';
@ -17,12 +17,12 @@ import CarretIcon from '../CarretIcon';
import SubActionRow from '../SubActionRow';
import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState';
const Cell = styled(Row)`
const Cell = styled(Flex)`
width: ${cellWidth};
position: relative;
`;
const Wrapper = styled(Row)`
const Wrapper = styled(Flex)`
height: ${rowHeight};
flex: 1;
@ -100,7 +100,7 @@ const ActionRow = ({
isActive={isActive}
background={isOdd ? 'neutral100' : 'neutral0'}
>
<Row>
<Flex>
<RowLabelWithCheckbox
onChange={handleChangeLeftRowCheckbox}
onClick={handleClick}
@ -114,7 +114,7 @@ const ActionRow = ({
{required && <RequiredSign />}
<CarretIcon $isActive={isActive} />
</RowLabelWithCheckbox>
<Row>
<Flex>
{propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => {
if (!isActionRelatedToCurrentProperty) {
return <HiddenAction key={label} />;
@ -189,8 +189,8 @@ const ActionRow = ({
</Cell>
);
})}
</Row>
</Row>
</Flex>
</Flex>
</Wrapper>
{isActive && (
<SubActionRow

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

@ -2,15 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { TableLabel } from '@strapi/parts/Text';
import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
const HeaderLabel = styled(Row)`
const HeaderLabel = styled(Flex)`
width: ${cellWidth};
flex-shrink: 0;
`;
const PropertyLabelWrapper = styled(Row)`
const PropertyLabelWrapper = styled(Flex)`
width: ${firstRowWidth};
height: ${rowHeight};
flex-shrink: 0;
@ -27,7 +27,7 @@ const Header = ({ headers, label }) => {
);
return (
<Row>
<Flex>
<PropertyLabelWrapper alignItems="center" paddingLeft={6}>
<TableLabel textColor="neutral500">{translatedLabel}</TableLabel>
</PropertyLabelWrapper>
@ -47,7 +47,7 @@ const Header = ({ headers, label }) => {
</HeaderLabel>
);
})}
</Row>
</Flex>
);
};

16
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
View File

@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
import { usePermissionsDataManager } from '../../../../../../../../../hooks';
@ -19,12 +19,12 @@ import { getCheckboxState } from '../../../utils';
import { activeStyle } from '../../utils';
import CarretIcon from '../CarretIcon';
const Cell = styled(Row)`
const Cell = styled(Flex)`
width: ${cellWidth};
position: relative;
`;
const RowWrapper = styled(Row)`
const RowWrapper = styled(Flex)`
height: ${rowHeight};
`;
@ -37,7 +37,7 @@ const LeftBorderTimeline = styled(Box)`
isVisible ? `4px solid ${theme.colors.primary200}` : '4px solid transparent'};
`;
const RowStyle = styled(Row)`
const RowStyle = styled(Flex)`
padding-left: ${({ theme }) => theme.spaces[4]};
width: ${({ level }) => 145 - level * 36}px;
@ -111,7 +111,7 @@ const SubActionRow = ({
<LeftBorderTimeline key={value} isVisible={isVisible}>
<RowWrapper>
<Curve color="primary200" />
<Row style={{ flex: 1 }}>
<Flex style={{ flex: 1 }}>
<RowStyle level={recursiveLevel} isActive={isActive} isCollapsable={isArrayType}>
<CollapseLabel
alignItems="center"
@ -131,7 +131,7 @@ const SubActionRow = ({
<CarretIcon $isActive={isActive} />
</CollapseLabel>
</RowStyle>
<Row style={{ flex: 1 }}>
<Flex style={{ flex: 1 }}>
{propertyActions.map(
({ actionId, label: propertyLabel, isActionRelatedToCurrentProperty }) => {
if (!isActionRelatedToCurrentProperty) {
@ -213,8 +213,8 @@ const SubActionRow = ({
);
}
)}
</Row>
</Row>
</Flex>
</Flex>
</RowWrapper>
{displayedRecursiveChildren && isActive && (
<Box paddingBottom={2}>

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

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Box } from '@strapi/parts/Box';
import { Checkbox } from '@strapi/parts/Checkbox';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { TableLabel } from '@strapi/parts/Text';
import { useIntl } from 'react-intl';
import get from 'lodash/get';
@ -74,7 +74,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
return (
<>
<Box>
<Row justifyContent="space-between" alignItems="center">
<Flex justifyContent="space-between" alignItems="center">
<Box paddingRight={4}>
<TableLabel textColor="neutral600">{subCategoryName}</TableLabel>
</Box>
@ -98,8 +98,8 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
{formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
</Checkbox>
</Box>
</Row>
<Row paddingTop={6} paddingBottom={6}>
</Flex>
<Flex paddingTop={6} paddingBottom={6}>
<Grid gap={2} style={{ flex: 1 }}>
{formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
return (
@ -133,7 +133,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
hasConditions={doesButtonHasCondition}
onClick={handleToggleModalIsOpen}
/>
</Row>
</Flex>
</Box>
{isModalOpen && (
<ConditionsModal

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

@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '@strapi/parts/Box';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Text } from '@strapi/parts/Text';
import { Textarea } from '@strapi/parts/Textarea';
@ -17,7 +17,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
<>
<Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
<Stack size={4}>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<Box>
<Box>
<Text bold>
@ -50,7 +50,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
{ number: role.usersCount }
)}
</Button>
</Row>
</Flex>
<Grid gap={4}>
<GridItem col={6}>
<TextInput

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
View File

@ -2,7 +2,7 @@ import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import upperFirst from 'lodash/upperFirst';
import { useIntl } from 'react-intl';
@ -24,7 +24,7 @@ const RowLabelWithCheckbox = ({
const { formatMessage } = useIntl();
return (
<Row alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
<Flex alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
<Box paddingRight={2}>
<BaseCheckbox
name={checkboxName}
@ -63,7 +63,7 @@ const RowLabelWithCheckbox = ({
<Text ellipsis>{upperFirst(label)}</Text>
{children}
</CollapseLabel>
</Row>
</Flex>
);
};

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Td, Tr } from '@strapi/parts/Table';
import { Text } from '@strapi/parts/Text';
import { IconButton } from '@strapi/parts/IconButton';
@ -36,7 +36,7 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
<Text textColor="neutral800">{usersCountText}</Text>
</Td>
<Td>
<Row justifyContent="flex-end" {...stopPropagation}>
<Flex justifyContent="flex-end" {...stopPropagation}>
{icons.map((icon, i) =>
icon ? (
<Box key={icon.label} paddingLeft={i === 0 ? 0 : 1}>
@ -44,7 +44,7 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
</Box>
) : null
)}
</Row>
</Flex>
</Td>
</Tr>
);

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Tbody, Td, Tr } from '@strapi/parts/Table';
import EditIcon from '@strapi/icons/EditIcon';
@ -72,7 +72,7 @@ const TableRows = ({
{withBulkActions && (
<Td>
<Row justifyContent="end">
<Flex justifyContent="end">
<IconButton
onClick={() => push(`${pathname}/${data.id}`)}
label={formatMessage(
@ -96,7 +96,7 @@ const TableRows = ({
/>
</Box>
)}
</Row>
</Flex>
</Td>
)}
</Tr>

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js
View File

@ -1,16 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
const PaginationFooter = ({ pagination }) => {
return (
<Box paddingTop={6}>
<Row alignItems="flex-end" justifyContent="space-between">
<Flex alignItems="flex-end" justifyContent="space-between">
<PageSizeURLQuery />
<PaginationURLQuery pagination={pagination} />
</Row>
</Flex>
</Box>
);
};

6
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Status } from '@strapi/helper-plugin';
@ -41,10 +41,10 @@ const tableHeaders = [
// eslint-disable-next-line react/prop-types
cellFormatter: ({ isActive }) => {
return (
<Row>
<Flex>
<Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
<Text textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Text>
</Row>
</Flex>
);
},
},

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

@ -4,7 +4,7 @@ import AddIcon from '@strapi/icons/AddIcon';
import { Box } from '@strapi/parts/Box';
import { FieldLabel } from '@strapi/parts/Field';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { TextInput } from '@strapi/parts/TextInput';
import { TextButton } from '@strapi/parts/TextButton';
@ -52,7 +52,7 @@ const HeadersInput = () => {
/>
</GridItem>
<GridItem col={6}>
<Row alignItems="flex-end">
<Flex alignItems="flex-end">
<Box style={{ flex: 1 }}>
<Field
as={TextInput}
@ -71,7 +71,7 @@ const HeadersInput = () => {
}
/>
</Box>
<Row
<Flex
paddingLeft={2}
style={{ alignSelf: 'center' }}
paddingTop={errors.headers?.[i]?.value ? 0 : 5}
@ -86,8 +86,8 @@ const HeadersInput = () => {
{ number: i + 1 }
)}
/>
</Row>
</Row>
</Flex>
</Flex>
</GridItem>
</React.Fragment>
))}

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

@ -5,7 +5,7 @@ import ClearField from '@strapi/icons/ClearField';
import Close from '@strapi/icons/Close';
import LoadingIcon from '@strapi/icons/LoadingIcon';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
import { Grid, GridItem } from '@strapi/parts/Grid';
@ -75,20 +75,20 @@ const Message = ({ statusCode, message }) => {
if (statusCode >= 200 && statusCode < 300) {
return (
<Row justifyContent="flex-end">
<Flex justifyContent="flex-end">
<Text>
{formatMessage({
id: 'Settings.webhooks.trigger.success.label',
defaultMessage: 'success',
})}
</Text>
</Row>
</Flex>
);
}
if (statusCode >= 300) {
return (
<Row justifyContent="flex-end" title={message}>
<Flex justifyContent="flex-end" title={message}>
<Text
// ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
style={{
@ -99,7 +99,7 @@ const Message = ({ statusCode, message }) => {
>
{message}
</Text>
</Row>
</Flex>
);
}
@ -118,7 +118,7 @@ const CancelButton = ({ onCancel }) => {
const { formatMessage } = useIntl();
return (
<Row justifyContent="flex-end">
<Flex justifyContent="flex-end">
<button onClick={onCancel} type="button">
<Stack horizontal size={2} style={{ alignItems: 'center' }}>
<Text textColor="neutral400">
@ -127,7 +127,7 @@ const CancelButton = ({ onCancel }) => {
<Icon as={ClearField} color="neutral400" />
</Stack>
</button>
</Row>
</Flex>
);
};

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

@ -20,7 +20,7 @@ import {
} from '@strapi/helper-plugin';
import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { IconButton } from '@strapi/parts/IconButton';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
@ -395,7 +395,7 @@ const ListView = () => {
<Text textColor="neutral800">{webhook.url}</Text>
</Td>
<Td>
<Row {...stopPropagation}>
<Flex {...stopPropagation}>
<Switch
onLabel={formatMessage({
id: 'Settings.webhooks.enabled',
@ -413,7 +413,7 @@ const ListView = () => {
onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
visibleLabels
/>
</Row>
</Flex>
</Td>
<Td>
<Stack horizontal size={1} {...stopPropagation}>

6
packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Divider } from '@strapi/parts/Divider';
import { Stack } from '@strapi/parts/Stack';
import { TableLabel } from '@strapi/parts/Text';
@ -34,7 +34,7 @@ const Login = loginProps => {
<BaseLogin {...loginProps}>
<Box paddingTop={7}>
<Stack size={7}>
<Row>
<Flex>
<DividerFull />
<Box paddingLeft={3} paddingRight={3}>
<TableLabel textColor="neutral600">
@ -42,7 +42,7 @@ const Login = loginProps => {
</TableLabel>
</Box>
<DividerFull />
</Row>
</Flex>
<SSOProviders providers={providers} displayAllProviders={false} />
</Stack>
</Box>

4
packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Tooltip } from '@strapi/parts/Tooltip';
import styled from 'styled-components';
@ -23,7 +23,7 @@ const SSOButton = styled.a`
color: ${({ theme }) => theme.colors.neutral600};
`;
const SSOProvidersWrapper = styled(Row)`
const SSOProvidersWrapper = styled(Flex)`
& a:not(:first-child):not(:last-child) {
margin: 0 ${({ theme }) => theme.spaces[2]};
}

14
packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
View File

@ -3,7 +3,7 @@ import { Redirect, useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { Divider } from '@strapi/parts/Divider';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button';
import { Link } from '@strapi/parts/Link';
@ -55,31 +55,31 @@ const Providers = () => {
</Column>
<Stack size={7}>
{isLoading ? (
<Row justifyContent="center">
<Flex justifyContent="center">
<Loader>{formatMessage({ id: 'Auth.login.sso.loading' })}</Loader>
</Row>
</Flex>
) : (
<SSOProviders providers={providers} />
)}
<Row>
<Flex>
<DividerFull />
<Box paddingLeft={3} paddingRight={3}>
<TableLabel textColor="neutral600">{formatMessage({ id: 'or' })}</TableLabel>
</Box>
<DividerFull />
</Row>
</Flex>
<Button fullWidth size="L" onClick={handleClick}>
{formatMessage({ id: 'Auth.form.button.login.strapi' })}
</Button>
</Stack>
</LayoutContent>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box paddingTop={4}>
<Link to="/auth/forgot-password">
<Text small>{formatMessage({ id: 'Auth.link.forgot-password' })}</Text>
</Link>
</Box>
</Row>
</Flex>
</Main>
</UnauthenticatedLayout>
);

6
packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
View File

@ -16,7 +16,7 @@ import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { Main } from '@strapi/parts/Main';
import { Link } from '@strapi/parts/Link';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Text } from '@strapi/parts/Text';
import { TextInput } from '@strapi/parts/TextInput';
@ -173,7 +173,7 @@ const CreatePage = () => {
<Stack size={6}>
<Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
<Stack size={4}>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<Box>
<Box>
<Text bold>
@ -202,7 +202,7 @@ const CreatePage = () => {
{ number: 0 }
)}
</UsersRoleNumber>
</Row>
</Flex>
<Grid gap={4}>
<GridItem col={6}>
<TextInput

6
packages/core/content-type-builder/admin/src/components/ListRow/index.js
View File

@ -4,7 +4,7 @@ import { get } from 'lodash';
import upperFirst from 'lodash/upperFirst';
import { useIntl } from 'react-intl';
import { IconButton } from '@strapi/parts/IconButton';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Text } from '@strapi/parts/Text';
import EditIcon from '@strapi/icons/EditIcon';
@ -257,7 +257,7 @@ function ListRow({
</td>
<td>
{isInDevelopmentMode && (
<Row justifyContent="flex-end" {...stopPropagation}>
<Flex justifyContent="flex-end" {...stopPropagation}>
{configurable ? (
<Stack horizontal size={1}>
{!isMorph && (
@ -292,7 +292,7 @@ function ListRow({
// ! TODO ASK DESIGN TO PUT LOCK ICON INSIDE DS
<FontAwesomeIcon icon="lock" />
)}
</Row>
</Flex>
)}
</td>
</BoxWrapper>

6
packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Box } from '@strapi/parts/Box';
import { Text } from '@strapi/parts/Text';
import styled from 'styled-components';
@ -35,7 +35,7 @@ const ButtonBox = styled(Box)`
const NestedTFooter = ({ children, icon, color, ...props }) => {
return (
<ButtonBox paddingBottom={4} paddingTop={4} as="button" type="button" {...props}>
<Row>
<Flex>
<IconBox color={color} aria-hidden background={`${color}200`}>
{icon}
</IconBox>
@ -44,7 +44,7 @@ const NestedTFooter = ({ children, icon, color, ...props }) => {
{children}
</Text>
</Box>
</Row>
</Flex>
</ButtonBox>
);
};

6
packages/core/content-type-builder/admin/src/pages/ListView/index.js
View File

@ -10,7 +10,7 @@ import CheckIcon from '@strapi/icons/CheckIcon';
import EditIcon from '@strapi/icons/EditIcon';
import { Button } from '@strapi/parts/Button';
import { Link } from '@strapi/parts/Link';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Box } from '@strapi/parts/Box';
import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
@ -263,7 +263,7 @@ const ListView = () => {
/>
<ContentLayout>
<Stack size={4}>
<Row justifyContent="flex-end">
<Flex justifyContent="flex-end">
<Stack horizontal size={2}>
{/* <LinkToCMSettingsView
key="link-to-cm-settings-view"
@ -287,7 +287,7 @@ const ListView = () => {
{formatMessage({ id: getTrad('button.attributes.add.another') })}
</Button>
</Stack>
</Row>
</Flex>
<Box background="neutral0" shadow="filterShadow" hasRadius>
<List
items={attributes}

6
packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@ -37,14 +37,14 @@ const ConfirmDialog = ({
>
<DialogBody icon={iconBody}>
<Stack size={2}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text id="confirm-description">
{formatMessage({
id: bodyText.id,
defaultMessage: bodyText.defaultMessage,
})}
</Text>
</Row>
</Flex>
</Stack>
</DialogBody>
<DialogFooter

14
packages/core/helper-plugin/lib/src/components/ContentBox/index.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Text } from '@strapi/parts/Text';
import customEllipsis from '../../utils/customEllipsis';
const IconWrapper = styled(Row)`
const IconWrapper = styled(Flex)`
margin-right: ${({ theme }) => theme.spaces[6]};
svg {
width: ${32 / 16}rem;
@ -22,20 +22,20 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
}
return (
<Row shadow="tableShadow" hasRadius padding={6} background="neutral0">
<Flex shadow="tableShadow" hasRadius padding={6} background="neutral0">
<IconWrapper background={iconBackground} hasRadius padding={3}>
{icon}
</IconWrapper>
<Stack size={endAction ? '' : 1}>
<Row>
<Stack size={endAction ? 0 : 1}>
<Flex>
<Text small bold>
{title}
</Text>
{endAction}
</Row>
</Flex>
<Text textColor="neutral600">{subtitle}</Text>
</Stack>
</Row>
</Flex>
);
};

12
packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
View File

@ -5,7 +5,7 @@ import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Main } from '@strapi/parts/Main';
import { Button } from '@strapi/parts/Button';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
import { Tbody, Td, Tr } from '@strapi/parts/Table';
@ -192,7 +192,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
})}
{withBulkActions && (
<Td>
<Row justifyContent="end">
<Flex justifyContent="end">
<IconButton
onClick={() => console.log(`${pathname}/${data.id}`)}
label={`Edit ${data.firstname} ${data.lastname}`}
@ -207,7 +207,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
icon={<DeleteIcon />}
/>
</Box>
</Row>
</Flex>
</Td>
)}
</Tr>
@ -303,7 +303,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
})}
{withBulkActions && (
<Td>
<Row justifyContent="end">
<Flex justifyContent="end">
<IconButton
onClick={() => console.log(`${pathname}/${data.id}`)}
label={`Edit ${data.firstname} ${data.lastname}`}
@ -318,7 +318,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
icon={<DeleteIcon />}
/>
</Box>
</Row>
</Flex>
</Td>
)}
</Tr>
@ -350,7 +350,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
isOpen={isOpen}
>
<DialogBody>
<Row justifyContent="center">Are you sure?</Row>
<Flex justifyContent="center">Are you sure?</Flex>
</DialogBody>
<DialogFooter
startAction={

8
packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
View File

@ -1,7 +1,7 @@
import React, { Children, cloneElement, useState } from 'react';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Button } from '@strapi/parts/Button';
import { Subtitle } from '@strapi/parts/Text';
import { Table as TableCompo } from '@strapi/parts/Table';
@ -13,7 +13,7 @@ import ConfirmDialog from '../ConfirmDialog';
import EmptyBodyTable from '../EmptyBodyTable';
import TableHead from './TableHead';
const BlockActions = styled(Row)`
const BlockActions = styled(Flex)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[2]};
}
@ -127,7 +127,7 @@ const Table = ({
{entriesToDelete.length > 0 && (
<Box>
<Box paddingBottom={4}>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<BlockActions>
<Subtitle textColor="neutral600">
{formatMessage(
@ -147,7 +147,7 @@ const Table = ({
{formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' })}
</Button>
</BlockActions>
</Row>
</Flex>
</Box>
</Box>
)}

6
packages/core/helper-plugin/lib/src/components/EmptyBodyTable/index.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Tbody, Tr, Td } from '@strapi/parts/Table';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Loader } from '@strapi/parts/Loader';
import PropTypes from 'prop-types';
import EmptyStateLayout from '../EmptyStateLayout';
@ -12,11 +12,11 @@ const EmptyBodyTable = ({ colSpan, isLoading, ...rest }) => {
<Tbody>
<Tr>
<Td colSpan={colSpan}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Box padding={11} background="neutral0">
<Loader>Loading content...</Loader>
</Box>
</Row>
</Flex>
</Td>
</Tr>
</Tbody>

10
packages/core/helper-plugin/lib/src/components/FilterListURLQuery/FilterListURLQuery.stories.mdx
View File

@ -2,7 +2,11 @@
import { useEffect } from 'react';
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Button, Box, Main, Row, Stack } from '@strapi/parts';
import { Button } from '@strapi/parts/Button';
import { Box } from '@strapi/parts/Box';
import { Main } from '@strapi/parts/Main';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import useQueryParams from '../../hooks/useQueryParams';
import FilterListURLQuery from './index';
@ -34,7 +38,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
return (
<Main>
<Stack size={6}>
<Row paddingTop={6}>
<Flex paddingTop={6}>
<FilterListURLQuery
filtersSchema={[
{
@ -54,7 +58,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
},
]}
/>
</Row>
</Flex>
<Box>
<Button onClick={handleResetFilters}>Reset filters</Button>
</Box>

6
packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
View File

@ -2,7 +2,7 @@
import { useEffect, useState, useRef } from 'react';
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Button, Box, Main, Row, Stack } from '@strapi/parts';
import { Button, Box, Main, Flex, Stack } from '@strapi/parts';
import useQueryParams from '../../hooks/useQueryParams';
import FilterListURLQuery from '../FilterListURLQuery';
import FilterPopoverURLQuery from './index';
@ -54,7 +54,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
return (
<Main>
<Stack size={6}>
<Row paddingTop={6}>
<Flex paddingTop={6}>
<Button variant="tertiary" onClick={handleToggle} size="S" ref={buttonRef}>
Filters
</Button>
@ -65,7 +65,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
source={buttonRef}
/>
<FilterListURLQuery filtersSchema={filtersSchema} />
</Row>
</Flex>
</Stack>
</Main>
);

4
packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { Loader } from '@strapi/parts/Loader';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Wrapper = styled(Row)`
const Wrapper = styled(Flex)`
height: 100vh;
`;

6
packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
View File

@ -7,7 +7,7 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Select, Option } from '@strapi/parts/Select';
import { Text } from '@strapi/parts/Text';
import PropTypes from 'prop-types';
@ -32,7 +32,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
const pageSize = query?.pageSize || '10';
return (
<Row>
<Flex>
<Select
size="S"
aria-label={formatMessage({
@ -55,7 +55,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
})}
</Text>
</Box>
</Row>
</Flex>
);
};

31
packages/core/helper-plugin/lib/src/components/Status/Status.stories.mdx
View File

@ -1,7 +1,8 @@
<!--- Status.stories.mdx --->
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Row, Text } from '@strapi/parts';
import { Flex } from '@strapi/parts/Flex';
import { Text } from '@strapi/parts/Text';
import Status from './index';
<Meta title="components/Status" />
@ -14,33 +15,33 @@ This component is used in order to display the status.
<Canvas>
<Story name="base">
<Row>
<Flex>
<Status variant="primary" />
<Text>primary</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="alternative" />
<Text>alternative</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="danger" />
<Text>danger</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="neutral" />
<Text>neutral</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="secondary" />
<Text>secondary</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="success" />
<Text>success</Text>
</Row>
<Row>
</Flex>
<Flex>
<Status variant="warning" />
<Text>warning</Text>
</Row>
</Flex>
</Story>
</Canvas>

11
packages/core/helper-plugin/lib/src/icons/SortIcon/SortIcon.stories.mdx
View File

@ -1,7 +1,8 @@
<!--- SortIcon.stories.mdx --->
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Row, Text } from '@strapi/parts';
import { Text } from '@strapi/parts/Text';
import { Flex } from '@strapi/parts/Flex';
import { FilterDropdown } from '@strapi/icons';
import SortIcon from './index';
@ -15,13 +16,13 @@ This component is used in order to display the SortIcon.
<Canvas>
<Story name="base">
<Row>
<Flex>
<SortIcon />
<Text>Arrow down</Text>
</Row>
<Row>
</Flex>
<Flex>
<SortIcon isUp />
<Text>Arrow up</Text>
</Row>
</Flex>
</Story>
</Canvas>

6
packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/components.js
View File

@ -1,6 +1,6 @@
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Badge } from '@strapi/parts/Badge';
export const RelativeBox = styled(Box)`
@ -30,12 +30,12 @@ export const Wrapper = styled.div`
}
`;
export const ActionRow = styled(Row)`
export const ActionRow = styled(Flex)`
height: ${52 / 16}rem;
background-color: ${({ blurry }) => (blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};
`;
export const CroppingActionRow = styled(Row)`
export const CroppingActionRow = styled(Flex)`
z-index: 1;
height: ${52 / 16}rem;
position: absolute;

7
packages/core/upload/admin/src/components/PaginationFooter/index.js
View File

@ -1,15 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box, Row } from '@strapi/parts';
import { Box } from '@strapi/parts/Box';
import { Flex } from '@strapi/parts/Flex';
import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
export const PaginationFooter = ({ pagination }) => {
return (
<Box paddingTop={6}>
<Row alignItems="flex-end" justifyContent="space-between">
<Flex alignItems="flex-end" justifyContent="space-between">
<PageSizeURLQuery />
<PaginationURLQuery pagination={pagination} />
</Row>
</Flex>
</Box>
);
};

8
packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
View File

@ -3,7 +3,7 @@ import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { H3 } from '@strapi/parts/Text';
import { ModalFooter } from '@strapi/parts/ModalLayout';
import { Button } from '@strapi/parts/Button';
@ -13,7 +13,7 @@ import { getTrad } from '../../../utils';
import { typeFromMime } from '../../../utils/typeFromMime';
import { AssetSource } from '../../../constants';
const Wrapper = styled(Row)`
const Wrapper = styled(Flex)`
flex-direction: column;
`;
@ -76,7 +76,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
background="neutral100"
position="relative"
>
<Row justifyContent="center">
<Flex justifyContent="center">
<Wrapper>
<IconWrapper>
<AddAssetIcon aria-hidden />
@ -117,7 +117,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
</Button>
</Box>
</Wrapper>
</Row>
</Flex>
</MediaBox>
</label>
</Box>

6
packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
View File

@ -4,7 +4,7 @@ import { ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
import { ButtonText, Text } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import { useIntl } from 'react-intl';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
@ -69,7 +69,7 @@ export const PendingAssetStep = ({
<ModalBody>
<Stack size={7}>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<Stack size={0}>
<Text small bold textColor="neutral800">
{formatMessage(
@ -93,7 +93,7 @@ export const PendingAssetStep = ({
defaultMessage: 'Upload new asset',
})}
</Button>
</Row>
</Flex>
<KeyboardNavigable tagName="article">
<Grid gap={4}>
{assets.map(asset => {

4
packages/core/upload/admin/src/components/UploadProgress/index.js
View File

@ -4,11 +4,11 @@ import styled from 'styled-components';
import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
import { Text } from '@strapi/parts/Text';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { ProgressBar } from '@strapi/parts/ProgressBar';
import { useIntl } from 'react-intl';
const BoxWrapper = styled(Row)`
const BoxWrapper = styled(Flex)`
width: 100%;
height: 100%;
flex-direction: column;

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

@ -10,7 +10,7 @@ import {
} from '@strapi/helper-plugin';
import CheckIcon from '@strapi/icons/CheckIcon';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { ToggleInput } from '@strapi/parts/ToggleInput';
import { H3 } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
@ -154,14 +154,14 @@ export const SettingsPage = () => {
<Stack size={12}>
<Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
<Stack size={4}>
<Row>
<Flex>
<H3 as="h2">
{formatMessage({
id: getTrad('settings.section.image.label'),
defaultMessage: 'Image',
})}
</H3>
</Row>
</Flex>
<Grid gap={6}>
<GridItem col={6} s={12}>
<ToggleInput

6
packages/plugins/documentation/admin/src/pages/PluginPage/index.js
View File

@ -20,7 +20,7 @@ import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
import { Main } from '@strapi/parts/Main';
import { IconButton } from '@strapi/parts/IconButton';
import { Text, TableLabel } from '@strapi/parts/Text';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Table, Tr, Thead, Th, Tbody, Td } from '@strapi/parts/Table';
import DeleteIcon from '@strapi/icons/DeleteIcon';
@ -128,7 +128,7 @@ const PluginPage = () => {
<Text>{doc.generatedDate}</Text>
</Td>
<Td>
<Row justifyContent="end" {...stopPropagation}>
<Flex justifyContent="end" {...stopPropagation}>
<IconButton
onClick={openDocVersion}
noBorder
@ -171,7 +171,7 @@ const PluginPage = () => {
/>
)}
</CheckPermissions>
</Row>
</Flex>
</Td>
</Tr>
))}

10
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js
View File

@ -8,7 +8,7 @@ import { Select, Option } from '@strapi/parts/Select';
import { Button } from '@strapi/parts/Button';
import { Box } from '@strapi/parts/Box';
import { Typography, Text } from '@strapi/parts/Text';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Stack } from '@strapi/parts/Stack';
import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
import Duplicate from '@strapi/icons/Duplicate';
@ -104,19 +104,19 @@ const Content = ({ appLocales, currentLocale, localizations, readPermissions })
type="button"
onClick={handleToggle}
>
<Row>
<Flex>
<Duplicate width="12px" height="12px" />
{formatMessage({
id: getTrad('CMEditViewCopyLocale.copy-text'),
defaultMessage: 'Fill in from another locale',
})}
</Row>
</Flex>
</StyledTypography>
{isOpen && (
<Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
<DialogBody icon={<AlertWarningIcon />}>
<Stack size={2}>
<Row justifyContent="center">
<Flex justifyContent="center">
<Text id="confirm-description" style={{ textAlign: 'center' }}>
{formatMessage({
id: getTrad('CMEditViewCopyLocale.ModalConfirm.content'),
@ -124,7 +124,7 @@ const Content = ({ appLocales, currentLocale, localizations, readPermissions })
'Your current content will be erased and filled by the content of the selected locale:',
})}
</Text>
</Row>
</Flex>
<Box>
<Select
label={formatMessage({

10
packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { useSelector } from 'react-redux';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Box } from '@strapi/parts/Box';
import { Tooltip } from '@strapi/parts/Tooltip';
import { Text } from '@strapi/parts/Text';
@ -93,7 +93,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
const localesNames = localesArray.join(', ');
return (
<Row {...stopPropagation}>
<Flex {...stopPropagation}>
<Tooltip
label={formatMessage({
id: getTrad('CMListView.popover.display-locales.label'),
@ -101,7 +101,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
})}
>
<Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
<Row>
<Flex>
<Text
style={{ maxWidth: '252px', cursor: 'pointer' }}
data-for={elId}
@ -126,10 +126,10 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
</Popover>
)}
</ActionWrapper>
</Row>
</Flex>
</Button>
</Tooltip>
</Row>
</Flex>
);
};

6
packages/plugins/i18n/admin/src/components/ModalCreate/index.js
View File

@ -7,7 +7,7 @@ import { Button } from '@strapi/parts/Button';
import { ButtonText, H2 } from '@strapi/parts/Text';
import { Divider } from '@strapi/parts/Divider';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import CheckIcon from '@strapi/icons/CheckIcon';
import { useIntl } from 'react-intl';
import { Formik } from 'formik';
@ -66,7 +66,7 @@ const ModalCreate = ({ onClose }) => {
id="tabs"
variant="simple"
>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<H2>
{formatMessage({
id: getTrad('Settings.locales.modal.title'),
@ -87,7 +87,7 @@ const ModalCreate = ({ onClose }) => {
})}
</Tab>
</Tabs>
</Row>
</Flex>
<Divider />

6
packages/plugins/i18n/admin/src/components/ModalEdit/index.js
View File

@ -6,7 +6,7 @@ import { Formik } from 'formik';
import CheckIcon from '@strapi/icons/CheckIcon';
import { ModalLayout, ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
import { TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/parts/Tabs';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button';
import { Divider } from '@strapi/parts/Divider';
@ -56,7 +56,7 @@ const ModalEdit = ({ locale, onClose }) => {
id="tabs"
variant="simple"
>
<Row justifyContent="space-between">
<Flex justifyContent="space-between">
<H2>
{formatMessage({
id: getTrad('Settings.locales.modal.title'),
@ -77,7 +77,7 @@ const ModalEdit = ({ locale, onClose }) => {
})}
</Tab>
</Tabs>
</Row>
</Flex>
<Divider />

10
packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import { Box } from '@strapi/parts/Box';
import { Checkbox } from '@strapi/parts/Checkbox';
import { Row } from '@strapi/parts/Row';
import { Flex } from '@strapi/parts/Flex';
import { TableLabel } from '@strapi/parts/Text';
import { Grid, GridItem } from '@strapi/parts/Grid';
import CogIcon from '@strapi/icons/Cog';
@ -59,7 +59,7 @@ const SubCategory = ({ subCategory }) => {
return (
<Box>
<Row justifyContent="space-between" alignItems="center">
<Flex justifyContent="space-between" alignItems="center">
<Box paddingRight={4}>
<TableLabel textColor="neutral600">{subCategory.label}</TableLabel>
</Box>
@ -75,8 +75,8 @@ const SubCategory = ({ subCategory }) => {
{formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
</Checkbox>
</Box>
</Row>
<Row paddingTop={6} paddingBottom={6}>
</Flex>
<Flex paddingTop={6} paddingBottom={6}>
<Grid gap={2} style={{ flex: 1 }}>
{subCategory.actions.map(action => {
const name = `${action.name}.enabled`;
@ -104,7 +104,7 @@ const SubCategory = ({ subCategory }) => {
);
})}
</Grid>
</Row>
</Flex>
</Box>
);
};

5
packages/plugins/users-permissions/admin/src/components/Permissions/index.js
View File

@ -1,6 +1,7 @@
import React, { memo, useCallback, useReducer } from 'react';
import { Accordion, AccordionToggle, AccordionContent } from '@strapi/parts/Accordion';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box';
import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
import formatPluginName from '../../utils/formatPluginName';
import PermissionRow from './PermissionRow';
@ -41,7 +42,9 @@ const Permissions = () => {
variant={index % 2 ? 'primary' : 'secondary'}
/>
<AccordionContent>
<PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
<Box background="neutral0">
<PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
</Box>
</AccordionContent>
</Accordion>
))}

9
packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js
View File

@ -1,6 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IconButton, Tbody, Text, Tr, Td, Row } from '@strapi/parts';
import { IconButton } from '@strapi/parts/IconButton';
import { Text } from '@strapi/parts/Text';
import { Flex } from '@strapi/parts/Flex';
import { Tbody, Tr, Td } from '@strapi/parts/Table';
import { EditIcon, DeleteIcon } from '@strapi/icons';
import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
@ -44,7 +47,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
</Text>
</Td>
<Td>
<Row justifyContent="end" {...stopPropagation}>
<Flex justifyContent="end" {...stopPropagation}>
<CheckPermissions permissions={permissions.updateRole}>
<IconButton
onClick={() => handleClickEdit(role.id)}
@ -69,7 +72,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
/>
</CheckPermissions>
)}
</Row>
</Flex>
</Td>
</Tr>
))}