bump DS 1.4.1 - update required state for Field

This commit is contained in:
Julie Plantey 2022-12-19 15:27:02 +01:00
parent 26374dc15a
commit 372fc1cf2d
10 changed files with 37 additions and 91 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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)`
svg path {
fill: ${({ theme }) => theme.colors.neutral500};
}
`;
const Label = ({ intlLabel, labelAction, name, required }) => {
const Label = ({ intlLabel, name }) => {
const { formatMessage } = useIntl();
const label = intlLabel?.id
? formatMessage(
@ -21,19 +12,12 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
)
: name;
return (
<Flex>
<FieldLabel required={required}>{label}</FieldLabel>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Flex>
);
return <FieldLabel>{label}</FieldLabel>;
};
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;

View File

@ -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
intlLabel={this.props.intlLabel}
labelAction={this.props.labelAction}
name={this.props.name}
required={this.props.required}
/>
<Label intlLabel={this.props.intlLabel} name={this.props.name} />
<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,

View File

@ -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}>
{label}
</FieldLabel>
<FieldLabel action={labelAction}>{label}</FieldLabel>
<ReactSelect
// position fixed doesn't update position on scroll
// react select doesn't update menu position on options change

View File

@ -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",

View File

@ -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">
{label}
</FieldLabel>
<FieldLabel id="datetime-label">{label}</FieldLabel>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Flex>
)}

View File

@ -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/icons": "1.4.0",
"@strapi/design-system": "1.4.1",
"@strapi/icons": "1.4.1",
"@testing-library/react": "12.1.4",
"@testing-library/react-hooks": "8.0.1",
"cross-env": "^7.0.3",

View File

@ -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}>
{formatMessage(intlLabel)}
</FieldLabel>
<FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
<ColorPickerToggle
ref={colorPickerButtonRef}
aria-label={formatMessage({

View File

@ -5809,10 +5809,10 @@
regenerator-runtime "^0.13.7"
resolve-from "^5.0.0"
"@strapi/design-system@1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.4.0.tgz#1e4932278cdd6b4e9fc0add25686abe9032e6e3a"
integrity sha512-K0qqnQL+Pu+Q059cVy2WYburTQeRimJfVDMNM1aPuSf9HeKcjDDYoeNxYSO5GZmucnAGkXUK1mYpaW0vzMkhmQ==
"@strapi/design-system@1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.4.1.tgz#f2daa634eaa4f22ac29e6b2b86791187aaa9887e"
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":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.4.0.tgz#1dd5b639eac800fc7c7630d6870dfb20dfd0fa14"
integrity sha512-Ywzet8obDRAJuLKPw4mNcF4owZt7UeGu/+mGLQEmIUij03li8wTSHIZPa/Yd7/0SXI/cozqoFW2PwBQ8zdR1/w==
"@strapi/icons@1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.4.1.tgz#121a2f68f65ac1b29031b7ab1e9774e17dbaeead"
integrity sha512-bwVM5NVXUJEUbbeelOVEslDIbGdZAGSwFSdV6Erb2Cwp3gtYB5Hfu4bRbVPeSwRWsd3IseC0USDpOQ3PzLK1qg==
"@stylelint/postcss-css-in-js@^0.37.2":
version "0.37.3"