diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index 4a5422c13b1..1c41eb7eda7 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -3,15 +3,22 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
import { useSelector } from 'react-redux';
-import isEmpty from 'lodash/isEmpty';
+import styled from 'styled-components';
+
+import { Status } from '@strapi/design-system/Status';
+import { Typography } from '@strapi/design-system/Typography';
+
import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
import { getTrad } from '../../utils';
-import State from '../State';
import TableRows from './TableRows';
import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
import ConfirmDialogDelete from './ConfirmDialogDelete';
+const StyledStatus = styled(Status)`
+ width: min-content;
+`;
+
const DynamicTable = ({
canCreate,
canDelete,
@@ -87,9 +94,19 @@ const DynamicTable = ({
sortable: true,
},
cellFormatter(cellData) {
- const isPublished = !isEmpty(cellData.publishedAt);
+ const isPublished = cellData.publishedAt;
+ const variant = isPublished ? 'success' : 'secondary';
- return ;
+ return (
+
+
+ {formatMessage({
+ id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+ defaultMessage: isPublished ? 'Published' : 'Draft',
+ })}
+
+
+ );
},
},
];
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index 78b9496371d..268a172950b 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
import { FixedSizeList as List } from 'react-window';
import { ReactSelect } from '@strapi/helper-plugin';
-import { Badge } from '@strapi/design-system/Badge';
+import { Status } from '@strapi/design-system/Status';
import { Box } from '@strapi/design-system/Box';
import { Link } from '@strapi/design-system/Link';
import { Icon } from '@strapi/design-system/Icon';
@@ -281,7 +281,7 @@ const RelationInput = ({
>
{({ data, index, style }) => {
const { publicationState, href, mainField, id } = data[index];
- const badgeColor = publicationState === 'draft' ? 'secondary' : 'success';
+ const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
return (
{publicationState && (
-
- {publicationStateTranslations[publicationState]}
-
+
+
+ {publicationStateTranslations[publicationState]}
+
+
)}
);
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
index a706af1c16a..fd83951650f 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content-Manager || RelationInput should render and match snapshot 1`] = `
-.c36 {
+.c37 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@@ -97,6 +97,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
margin-top: 4px;
}
+.c26 {
+ font-weight: 600;
+ color: #006096;
+ font-size: 0.875rem;
+ line-height: 1.43;
+}
+
.c31 {
color: #4945ff;
display: block;
@@ -107,6 +114,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
line-height: 1.43;
}
+.c34 {
+ font-weight: 600;
+ color: #2f6846;
+ font-size: 0.875rem;
+ line-height: 1.43;
+}
+
.c7 {
padding-right: 12px;
}
@@ -122,7 +136,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
padding-left: 16px;
}
-.c34 {
+.c35 {
padding-top: 8px;
}
@@ -156,7 +170,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
line-height: 1.33;
}
-.c35 {
+.c36 {
color: #666687;
font-size: 0.75rem;
line-height: 1.33;
@@ -193,63 +207,32 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
.c24 {
background: #eaf5ff;
- padding: 4px;
+ padding-top: 4px;
+ padding-right: 8px;
+ padding-bottom: 4px;
+ padding-left: 8px;
border-radius: 4px;
border-color: #b8e1ff;
border: 1px solid #b8e1ff;
- min-width: 20px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
}
.c32 {
background: #eafbe7;
- padding: 4px;
+ padding-top: 4px;
+ padding-right: 8px;
+ padding-bottom: 4px;
+ padding-left: 8px;
border-radius: 4px;
border-color: #c6f0c2;
border: 1px solid #c6f0c2;
- min-width: 20px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
}
-.c25 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.c26 {
- color: #006096;
- font-weight: 600;
- font-size: 0.6875rem;
- line-height: 1.45;
- text-transform: uppercase;
+.c25 .sc-URNzB {
+ color: #0c75af;
}
-.c33 {
- color: #2f6846;
- font-weight: 600;
- font-size: 0.6875rem;
- line-height: 1.45;
- text-transform: uppercase;
+.c33 .sc-URNzB {
+ color: #328048;
}
.c23 {
@@ -684,10 +667,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
Published
@@ -774,10 +757,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
this is a description
@@ -785,7 +768,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
{
- const { formatMessage } = useIntl();
- const content = formatMessage({
- id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
- });
- const background = isPublished ? 'success100' : 'secondary100';
- const textColor = isPublished ? 'success700' : 'secondary700';
-
- return (
-
-
- {content}
-
-
- );
-};
-
-State.propTypes = {
- isPublished: PropTypes.bool.isRequired,
-};
-
-export default State;