bump DS 1.4.1 - update required state for Field

packages/core/admin/admin/src/content-manager/components/InputJSON/FieldError.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-
-export const FieldError = ({ id, error, name }) => {
-  const { formatMessage } = useIntl();
-  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <Typography
-      as="p"
-      variant="pi"
-      id={`${id || name}-error`}
-      textColor="danger600"
-      data-strapi-field-error
-    >
-      {errorMessage}
-    </Typography>
-  );
-};
-
-FieldError.defaultProps = {
-  id: undefined,
-  error: undefined,
-};
-
-FieldError.propTypes = {
-  error: PropTypes.string,
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-};
-
-export default FieldError;

packages/core/admin/admin/src/content-manager/components/InputJSON/FieldWrapper.js

@@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Field } from '@strapi/design-system/Field';
 
-const FieldWrapper = ({ name, hint, error, children }) => {
+const FieldWrapper = ({ name, hint, error, children, required }) => {
   const { formatMessage } = useIntl();
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+    <Field
+      name={name}
+      hint={hint && formatMessage(hint)}
+      error={errorMessage}
+      id={name}
+      required={required}
+    >
       {children}
     </Field>
   );
@@ -17,6 +23,7 @@ const FieldWrapper = ({ name, hint, error, children }) => {
 FieldWrapper.defaultProps = {
   hint: undefined,
   error: '',
+  required: false,
 };
 
 FieldWrapper.propTypes = {
@@ -27,6 +34,7 @@ FieldWrapper.propTypes = {
   }),
   error: PropTypes.string,
   children: PropTypes.node.isRequired,
+  required: PropTypes.bool,
 };
 
 export default FieldWrapper;

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

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { FieldLabel } from '@strapi/design-system/Field';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-const LabelAction = styled(Box)`
+const Label = ({ intlLabel, name }) => {
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const Label = ({ intlLabel, labelAction, name, required }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -21,19 +12,12 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
       )
     : name;
 
-  return (
+  return <FieldLabel>{label}</FieldLabel>;
-    <Flex>
-      <FieldLabel required={required}>{label}</FieldLabel>
-      {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-    </Flex>
-  );
 };
 
 Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
-  labelAction: undefined,
-  required: false,
 };
 
 Label.propTypes = {
@@ -43,9 +27,7 @@ Label.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
-  labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
 };
 
 export default Label;

packages/core/admin/admin/src/content-manager/components/InputJSON/index.js

@@ -157,14 +157,14 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+      <FieldWrapper
+        name={this.props.name}
+        hint={this.props.description}
+        error={this.props.error}
+        required={this.props.required}
+      >
         <Stack spacing={1}>
-          <Label
+          <Label intlLabel={this.props.intlLabel} name={this.props.name} />
-            intlLabel={this.props.intlLabel}
-            labelAction={this.props.labelAction}
-            name={this.props.name}
-            required={this.props.required}
-          />
           <StyledBox error={this.props.error}>
             <EditorWrapper disabled={this.props.disabled}>
               <textarea
@@ -189,7 +189,6 @@ InputJSON.defaultProps = {
   id: undefined,
   error: undefined,
   intlLabel: undefined,
-  labelAction: undefined,
   onChange() {},
   value: null,
   required: false,
@@ -209,7 +208,6 @@ InputJSON.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
-  labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.any,

packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -226,15 +226,13 @@ const RelationInput = ({
   }, [previewRelationsLength, relations]);
 
   return (
-    <Field error={error} name={name} hint={description} id={id}>
+    <Field error={error} name={name} hint={description} id={id} required={required}>
       <Relation
         totalNumberOfRelations={totalNumberOfRelations}
         size={size}
         search={
           <>
-            <FieldLabel action={labelAction} required={required}>
+            <FieldLabel action={labelAction}>{label}</FieldLabel>
-              {label}
-            </FieldLabel>
             <ReactSelect
               // position fixed doesn't update position on scroll
               // react select doesn't update menu position on options change

packages/core/admin/package.json

@@ -52,9 +52,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@strapi/babel-plugin-switch-ee-ce": "4.5.4",
-    "@strapi/design-system": "1.4.0",
+    "@strapi/design-system": "1.4.1",
     "@strapi/helper-plugin": "4.5.4",
-    "@strapi/icons": "1.4.0",
+    "@strapi/icons": "1.4.1",
     "@strapi/permissions": "4.5.4",
     "@strapi/typescript-utils": "4.5.4",
     "@strapi/utils": "4.5.4",

packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

@@ -131,13 +131,12 @@ const DateTimePicker = ({
       aria-labelledby="datetime-label"
       hint={hint}
       error={error}
+      required={required}
     >
       <Stack spacing={1}>
         {label && (
           <Flex>
-            <FieldLabel required={required} id="datetime-label">
+            <FieldLabel id="datetime-label">{label}</FieldLabel>
-              {label}
-            </FieldLabel>
             {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
           </Flex>
         )}

packages/core/helper-plugin/package.json

@@ -69,8 +69,8 @@
     "@storybook/builder-webpack5": "6.5.9",
     "@storybook/manager-webpack5": "6.4.10",
     "@storybook/react": "^6.5.10",
-    "@strapi/design-system": "1.4.0",
+    "@strapi/design-system": "1.4.1",
-    "@strapi/icons": "1.4.0",
+    "@strapi/icons": "1.4.1",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
     "cross-env": "^7.0.3",

packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerInput/index.js

@@ -101,11 +101,10 @@ const ColorPickerInput = ({
       // GenericInput calls formatMessage and returns a string for the error
       error={error}
       hint={description && formatMessage(description)}
+      required={required}
     >
       <Stack spacing={1}>
-        <FieldLabel action={labelAction} required={required}>
+        <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
-          {formatMessage(intlLabel)}
-        </FieldLabel>
         <ColorPickerToggle
           ref={colorPickerButtonRef}
           aria-label={formatMessage({

yarn.lock

@@ -5809,10 +5809,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@strapi/design-system@1.4.0":
+"@strapi/design-system@1.4.1":
-  version "1.4.0"
+  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.4.0.tgz#1e4932278cdd6b4e9fc0add25686abe9032e6e3a"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.4.1.tgz#f2daa634eaa4f22ac29e6b2b86791187aaa9887e"
-  integrity sha512-K0qqnQL+Pu+Q059cVy2WYburTQeRimJfVDMNM1aPuSf9HeKcjDDYoeNxYSO5GZmucnAGkXUK1mYpaW0vzMkhmQ==
+  integrity sha512-olDi71FFQFU9luSC0yvIwB0i77Y/JIvt9HyLcUhK/rsRyiaiNzplAe5hi5aaphhJv++9rML2nSiwgfX/V4a5ZA==
   dependencies:
     "@floating-ui/react-dom" "^1.0.0"
     "@internationalized/number" "^3.1.1"
@@ -5842,10 +5842,10 @@
   optionalDependencies:
     typescript "^4.6.2"
 
-"@strapi/icons@1.4.0":
+"@strapi/icons@1.4.1":
-  version "1.4.0"
+  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.4.0.tgz#1dd5b639eac800fc7c7630d6870dfb20dfd0fa14"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.4.1.tgz#121a2f68f65ac1b29031b7ab1e9774e17dbaeead"
-  integrity sha512-Ywzet8obDRAJuLKPw4mNcF4owZt7UeGu/+mGLQEmIUij03li8wTSHIZPa/Yd7/0SXI/cozqoFW2PwBQ8zdR1/w==
+  integrity sha512-bwVM5NVXUJEUbbeelOVEslDIbGdZAGSwFSdV6Erb2Cwp3gtYB5Hfu4bRbVPeSwRWsd3IseC0USDpOQ3PzLK1qg==
 
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.3"