mirror of
https://github.com/strapi/strapi.git
synced 2025-11-02 02:44:55 +00:00
bump DS 1.4.1 - update required state for Field
This commit is contained in:
parent
26374dc15a
commit
372fc1cf2d
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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({
|
||||
|
||||
16
yarn.lock
16
yarn.lock
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user