yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-20 05:52:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error state

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-24 11:17:50 +01:00 committed by Convly
parent 1f2e5c23c0
commit 24d6883e59
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js
View File

@ -74,8 +74,9 @@ const SingleSignOn = () => {
<BaselineAlignment top size="3px" />
<FormBloc isLoading={showLoader}>
{Object.keys(form).map(key => {
let type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
let description =
// TODO: at some point it would be great to handle this in the upcoming input layout
const type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
const description =
key === 'defaultRole' && !canReadRoles
? form[key].notAllowedDescription
: form[key].description;

7
packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
const Field = styled.div`
height: 34px;
@ -10,6 +10,11 @@ const Field = styled.div`
padding-top: 2px;
border-radius: 2px;
background-color: ${({ theme }) => theme.main.colors.mediumGrey};
${({ error }) =>
error &&
css`
border: 1px solid ${({ theme }) => theme.main.colors.lightOrange};
`}
`;
export default Field;

16
packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js
View File

@ -6,7 +6,7 @@ import EyeSlashed from '../../svgs/EyeSlashed';
import BaselineAlignment from '../BaselineAlignment';
import Field from './Field';
const NotAllowedInput = ({ label, description, spacerHeight }) => {
const NotAllowedInput = ({ label, description, error, spacerHeight }) => {
const { formatMessage } = useIntl();
const formatMessageRef = useRef(formatMessage);
const text = useMemo(
@ -19,7 +19,7 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
<Text fontWeight="semiBold" lineHeight="18px">
{label}
</Text>
<Field>
<Field error={error}>
<Padded left right size="sm">
<Flex>
<Padded right size="sm">
@ -32,15 +32,21 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
</Flex>
</Padded>
</Field>
{description ? (
{!error && description && (
<BaselineAlignment top size="9px">
<Text fontSize="md" color="grey" lineHeight="18px" ellipsis>
{description}
</Text>
</BaselineAlignment>
) : (
<BaselineAlignment top size={spacerHeight} />
)}
{error && (
<BaselineAlignment top size="9px">
<Text fontSize="md" color="lightOrange" lineHeight="18px" ellipsis>
{error}
</Text>
</BaselineAlignment>
)}
{!error && !description && <BaselineAlignment top size={spacerHeight} />}
</BaselineAlignment>
);
};