error and description state

packages/core/helper-plugin/lib/src/components/ReactSelect/utils/getSelectStyles.js

@@ -16,7 +16,6 @@ const getSelectStyles = (theme, error) => {
         boxShadowColor = theme.colors.primary600;
       } else if (error) {
         borderColor = theme.colors.danger600;
-        boxShadowColor = theme.colors.danger600;
       }
 
       if (state.isDisabled) {

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

@@ -5,7 +5,7 @@ import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box';
 import { BaseLink } from '@strapi/design-system/BaseLink';
 import { Icon } from '@strapi/design-system/Icon';
-import { FieldLabel } from '@strapi/design-system/Field';
+import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/Field';
 import { TextButton } from '@strapi/design-system/TextButton';
 
 import Cross from '@strapi/icons/Cross';
@@ -18,6 +18,8 @@ import { RelationList } from './components/RelationList';
 import ReactSelect from '../ReactSelect';
 
 export const RelationInput = ({
+  description,
+  error,
   id,
   name,
   label,
@@ -33,12 +35,13 @@ export const RelationInput = ({
   placeholder,
 }) => {
   return (
-    <Box>
+    <Field error={error} name={name} hint={description} id={id}>
       <Relation
         search={
           <>
-            <FieldLabel htmlFor={id}>{label}</FieldLabel>
+            <FieldLabel>{label}</FieldLabel>
             <ReactSelect
+              error={error}
               inputId={id}
               isSearchable
               isClear
@@ -86,8 +89,12 @@ export const RelationInput = ({
               );
             })}
         </RelationList>
+        <Box paddingTop={2}>
+          <FieldHint />
+          <FieldError />
+        </Box>
       </Relation>
-    </Box>
+    </Field>
   );
 };
 
@@ -123,9 +130,7 @@ RelationInput.defaultProps = {
 };
 
 RelationInput.propTypes = {
-  // eslint-disable-next-line react/no-unused-prop-types
   error: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
   description: PropTypes.string,
   // eslint-disable-next-line react/no-unused-prop-types
   disabled: PropTypes.bool,

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

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
 
 export const Relation = ({ children, loadMore, search, ...props }) => {
   return (
@@ -21,8 +22,7 @@ export const Relation = ({ children, loadMore, search, ...props }) => {
         </Stack>
         {loadMore}
       </Flex>
-
-      {children}
+      <Box>{children}</Box>
     </Stack>
   );
 };