CM: Replace custom State and Badge components with Status

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 <State isPublished={isPublished} />;
+          return (
+            <StyledStatus showBullet={false} variant={variant} size="S">
+              <Typography fontWeight="bold" textColor={`${variant}700`}>
+                {formatMessage({
+                  id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+                  defaultMessage: isPublished ? 'Published' : 'Draft',
+                })}
+              </Typography>
+            </StyledStatus>
+          );
         },
       },
     ];

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 (
                 <RelationItem
@@ -315,15 +315,11 @@ const RelationInput = ({
                   </BoxEllipsis>
 
                   {publicationState && (
-                    <Badge
-                      borderSize={1}
-                      borderColor={`${badgeColor}200`}
-                      backgroundColor={`${badgeColor}100`}
-                      textColor={`${badgeColor}700`}
-                      shrink={0}
-                    >
-                      {publicationStateTranslations[publicationState]}
-                    </Badge>
+                    <Status variant={statusColor} showBullet={false} size="S">
+                      <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+                        {publicationStateTranslations[publicationState]}
+                      </Typography>
+                    </Status>
                   )}
                 </RelationItem>
               );

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`] =
                     </span>
                   </div>
                   <div
-                    class="c32 c25"
+                    class="c32 c33"
                   >
                     <span
-                      class="c33"
+                      class="c34"
                     >
                       Published
                     </span>
@@ -774,18 +757,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
       </div>
     </div>
     <div
-      class="c34"
+      class="c35"
     >
       <p
-        class="c35"
+        class="c36"
         id="1-hint"
       >
         this is a description
       </p>
     </div>
   </div>
   <div
-    class="c36"
+    class="c37"
   >
     <p
       aria-live="polite"