loadingMessage prop, label structure + loading style improvements

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js

@@ -9,6 +9,7 @@ import { BaseLink } from '@strapi/design-system/BaseLink';
 import { Icon } from '@strapi/design-system/Icon';
 import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/Field';
 import { TextButton } from '@strapi/design-system/TextButton';
+import { Typography } from '@strapi/design-system/Typography';
 import { Loader } from '@strapi/design-system/Loader';
 
 import Cross from '@strapi/icons/Cross';
@@ -21,10 +22,10 @@ import { Option } from './components/Option';
 
 import ReactSelect from '../ReactSelect';
 
-const BoxEllipsis = styled(Box)`
+const RelationItemCenterChildren = styled(RelationItem)`
-  white-space: nowrap;
+  div {
-  overflow: hidden;
+    justify-content: center;
-  text-overflow: ellipsis;
+  }
 `;
 
 export const RelationInput = ({
@@ -36,6 +37,7 @@ export const RelationInput = ({
   label,
   labelLoadMore,
   listHeight,
+  loadingMessage,
   relations,
   onRelationClose,
   onRelationAdd,
@@ -65,13 +67,7 @@ export const RelationInput = ({
               inputId={id}
               isSearchable
               isClear
-              loadingMessage={() =>
+              loadingMessage={() => <Loader small>{formatMessage(loadingMessage)}</Loader>}
-                // To fix: use getTrad utils from CM once component is migrated into CM components
-                formatMessage({
-                  id: 'content-manager.DynamicTable.relation-search-loading',
-                  defaultMessage: 'Entries are loading',
-                })
-              }
               onChange={onRelationAdd}
               onInputChange={onSearch}
               onMenuClose={onRelationOpen}
@@ -109,15 +105,19 @@ export const RelationInput = ({
                     </button>
                   }
                 >
-                  <BoxEllipsis paddingTop={1} paddingBottom={1} paddingRight={4}>
+                  <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
                     {href ? (
                       <BaseLink disabled={disabled} href={href}>
+                        <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
                           {mainField}
+                        </Typography>
                       </BaseLink>
                     ) : (
-                      mainField
+                      <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
+                        {mainField}
+                      </Typography>
                     )}
-                  </BoxEllipsis>
+                  </Box>
 
                   {publicationState && (
                     <Badge
@@ -134,14 +134,9 @@ export const RelationInput = ({
               );
             })}
           {relations.isLoading && (
-            <RelationItem>
+            <RelationItemCenterChildren>
-              <Loader small>
+              <Loader small>{formatMessage(loadingMessage)}</Loader>
-                {formatMessage({
+            </RelationItemCenterChildren>
-                  id: 'content-manager.DynamicTable.relation-loading',
-                  defaultMessage: 'Relations are loading',
-                })}
-              </Loader>
-            </RelationItem>
           )}
         </RelationList>
         <Box paddingTop={2}>
@@ -203,6 +198,10 @@ RelationInput.propTypes = {
   label: PropTypes.string.isRequired,
   labelLoadMore: PropTypes.string.isRequired,
   listHeight: PropTypes.string,
+  loadingMessage: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }).isRequired,
   name: PropTypes.string.isRequired,
   onRelationAdd: PropTypes.func.isRequired,
   onRelationOpen: PropTypes.func.isRequired,

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx

@@ -25,6 +25,7 @@ WIP
         label="Relations"
         labelLoadMore="Load More"
         listHeight="200px"
+        loadingMessage={{ id: 'translation-key', defaultMessage: 'Relations are loading' }}
         name="options"
         publicationStateTranslations={{ draft: 'Draft', published: 'Published' }}
         searchResults={{
@@ -59,13 +60,15 @@ WIP
                 {
                   id: 1,
                   href: '/',
-                  mainField: 'Relation 1 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
+                  mainField:
+                    'Relation 1 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
                   publicationState: 'draft',
                 },
                 {
                   id: 2,
                   href: '',
-                  mainField: 'Relation 2 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
+                  mainField:
+                    'Relation 2 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
                   publicationState: 'published',
                 },
                 {
@@ -89,7 +92,7 @@ WIP
               ],
             ],
           },
-          isLoading: true,
+          isLoading: false,
           isSuccess: true,
         }}
       />

packages/core/helper-plugin/lib/src/components/RelationInput/components/RelationItem.js

@@ -3,21 +3,13 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
 
-const TypographyWrapper = styled(Typography)`
+const ChildrenWrapper = styled(Flex)`
   width: 100%;
   // Used to prevent endAction to be pushed out of container
   min-width: 0;
 `;
 
-const ChildrenWrapper = styled(Flex)`
-  div > a {
-    color: currentColor;
-    text-decoration: none;
-  }
-`;
-
 export const RelationItem = ({ children, disabled, endAction, ...props }) => {
   return (
     <Flex
@@ -33,11 +25,7 @@ export const RelationItem = ({ children, disabled, endAction, ...props }) => {
       as="li"
       {...props}
     >
-      <TypographyWrapper textColor={disabled ? 'neutral600' : 'primary600'} as="div">
+      <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
-        <ChildrenWrapper justifyContent="space-between" color="currentColor">
-          {children}
-        </ChildrenWrapper>
-      </TypographyWrapper>
       {endAction && <Box paddingLeft={4}>{endAction}</Box>}
     </Flex>
   );

packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/__snapshots__/RelationItem.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RelationItem should render and match snapshot 1`] = `
-.c6 {
+.c3 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -24,10 +24,6 @@ exports[`RelationItem should render and match snapshot 1`] = `
   border: 1px solid #dcdce4;
 }
 
-.c4 {
-  width: 100%;
-}
-
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -47,19 +43,8 @@ exports[`RelationItem should render and match snapshot 1`] = `
 }
 
 .c2 {
-  color: #4945ff;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c3 {
   width: 100%;
-}
+  min-width: 0;
-
-.c5 div > a {
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
 }
 
 <div>
@@ -67,18 +52,13 @@ exports[`RelationItem should render and match snapshot 1`] = `
     class="c0 c1"
   >
     <div
-      class="c2 c3"
+      class="c1 c2"
-    >
-      <div
-        class="c4 c1 c5"
-        width="100%"
     >
       First relation
     </div>
-    </div>
   </li>
   <div
-    class="c6"
+    class="c3"
   >
     <p
       aria-live="polite"

packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/__snapshots__/RelationList.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RelationList should render and match snapshot 1`] = `
-.c9 {
+.c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -24,10 +24,6 @@ exports[`RelationList should render and match snapshot 1`] = `
   border: 1px solid #dcdce4;
 }
 
-.c7 {
-  width: 100%;
-}
-
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -47,19 +43,8 @@ exports[`RelationList should render and match snapshot 1`] = `
 }
 
 .c5 {
-  color: #4945ff;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c6 {
   width: 100%;
-}
+  min-width: 0;
-
-.c8 div > a {
-  color: currentColor;
-  -webkit-text-decoration: none;
-  text-decoration: none;
 }
 
 .c1 {
@@ -121,20 +106,15 @@ exports[`RelationList should render and match snapshot 1`] = `
         class="c3 c4"
       >
         <div
-          class="c5 c6"
+          class="c4 c5"
-        >
-          <div
-            class="c7 c4 c8"
-            width="100%"
         >
           First relation
         </div>
-        </div>
       </li>
     </ol>
   </div>
   <div
-    class="c9"
+    class="c6"
   >
     <p
       aria-live="polite"