Skip to content

Commit 50b6d74

Browse files
antpawantpaw
authored
Improve visual styling of error validation boxes (#4641)
* improve visual styling of error validation boxes * update chakra package * update chakra tests * fixup! update chakra package * refactor: enhance MultiSchemaFieldTemplate with Chakra UI components
1 parent 7db41ed commit 50b6d74

File tree

13 files changed

+730
-898
lines changed

13 files changed

+730
-898
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ should change the heading of the (upcoming) version to include a major version b
2626
## @rjsf/chakra-ui
2727

2828
- Added `MultiSchemaFieldTemplate`
29+
- Improve visual styling of error validation boxes
30+
- Update `chakra-ui/react` package to `^3.19.1`
2931

3032
## @rjsf/core
3133

‎package-lock.json

Lines changed: 560 additions & 636 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/chakra-ui/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,11 @@
8181
],
8282
"license": "Apache-2.0",
8383
"devDependencies": {
84-
"@chakra-ui/cli": "^3.16.1",
85-
"@chakra-ui/react": "^3.16.1",
84+
"@chakra-ui/cli": "^3.19.1",
85+
"@chakra-ui/react": "^3.19.1",
8686
"@emotion/eslint-plugin": "^11.12.0",
8787
"@emotion/jest": "^11.13.0",
8888
"@emotion/react": "^11.14.0",
89-
"@emotion/styled": "^11.14.0",
9089
"@rjsf/core": "^6.0.0-beta.10",
9190
"@rjsf/snapshot-tests": "^6.0.0-beta.10",
9291
"@rjsf/utils": "^6.0.0-beta.10",

‎packages/chakra-ui/src/ErrorList/ErrorList.tsx

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
2-
import { ListIndicator, ListItem, ListRoot } from '@chakra-ui/react';
3-
import { TriangleAlert } from 'lucide-react';
2+
import { ListItem, ListRoot } from '@chakra-ui/react';
43

54
import { Alert } from '../components/ui/alert';
65

@@ -10,21 +9,10 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
109
}: ErrorListProps<T, S, F>) {
1110
const { translateString } = registry;
1211
return (
13-
<Alert
14-
flexDirection='column'
15-
alignItems='flex-start'
16-
gap={3}
17-
status='error'
18-
title={translateString(TranslatableString.ErrorsLabel)}
19-
>
20-
<ListRoot>
12+
<Alert status='error' title={translateString(TranslatableString.ErrorsLabel)} mb={3}>
13+
<ListRoot listStylePosition='inside'>
2114
{errors.map((error, i) => (
22-
<ListItem key={i}>
23-
<ListIndicator asChild color='red.500'>
24-
<TriangleAlert />
25-
</ListIndicator>
26-
{error.stack}
27-
</ListItem>
15+
<ListItem key={i}>{error.stack}</ListItem>
2816
))}
2917
</ListRoot>
3018
</Alert>

‎packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
2-
import { ListItem, ListRoot, Text } from '@chakra-ui/react';
2+
import { Fieldset } from '@chakra-ui/react';
33

44
/** The `FieldErrorTemplate` component renders the errors local to the particular field
55
*
@@ -16,15 +16,11 @@ export default function FieldErrorTemplate<
1616
}
1717
const id = errorId<T>(idSchema);
1818

19-
return (
20-
<ListRoot>
21-
{errors.map((error, i: number) => {
22-
return (
23-
<ListItem key={i}>
24-
<Text id={id}>{error}</Text>
25-
</ListItem>
26-
);
27-
})}
28-
</ListRoot>
29-
);
19+
return errors.map((error, i: number) => {
20+
return (
21+
<Fieldset.ErrorText mt={0} key={i} id={id}>
22+
{error}
23+
</Fieldset.ErrorText>
24+
);
25+
});
3026
}

‎packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function FieldTemplate<
6565
{displayLabel && rawDescription ? <Fieldset.Legend mt={2}>{description}</Fieldset.Legend> : null}
6666
{help}
6767
<Fieldset.Content>{children}</Fieldset.Content>
68-
{errors && <Fieldset.ErrorText>{errors}</Fieldset.ErrorText>}
68+
{errors}
6969
</Fieldset.Root>
7070
</WrapIfAdditionalTemplate>
7171
);

‎packages/chakra-ui/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Box, Card } from '@chakra-ui/react';
12
import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
23

34
export default function MultiSchemaFieldTemplate<
@@ -8,9 +9,11 @@ export default function MultiSchemaFieldTemplate<
89
const { optionSchemaField, selector } = props;
910

1011
return (
11-
<div>
12-
<div>{selector}</div>
13-
{optionSchemaField}
14-
</div>
12+
<Card.Root mb={2}>
13+
<Card.Body pb={2}>
14+
<Box mb={4}>{selector}</Box>
15+
{optionSchemaField}
16+
</Card.Body>
17+
</Card.Root>
1518
);
1619
}

‎packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -64,27 +64,29 @@ export default function ObjectFieldTemplate<
6464
registry={registry}
6565
/>
6666
)}
67-
<Grid gap={description ? 2 : 6} mb={4}>
68-
{properties.map((element, index) =>
69-
element.hidden ? (
70-
element.content
71-
) : (
72-
<GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
73-
),
74-
)}
75-
{canExpand<T, S, F>(schema, uiSchema, formData) && (
76-
<GridItem justifySelf='flex-end'>
77-
<AddButton
78-
id={buttonId<T>(idSchema, 'add')}
79-
className='rjsf-object-property-expand'
80-
onClick={onAddClick(schema)}
81-
disabled={disabled || readonly}
82-
uiSchema={uiSchema}
83-
registry={registry}
84-
/>
85-
</GridItem>
86-
)}
87-
</Grid>
67+
{properties.length > 0 && (
68+
<Grid gap={description ? 2 : 6} mb={4}>
69+
{properties.map((element, index) =>
70+
element.hidden ? (
71+
element.content
72+
) : (
73+
<GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
74+
),
75+
)}
76+
{canExpand<T, S, F>(schema, uiSchema, formData) && (
77+
<GridItem justifySelf='flex-end'>
78+
<AddButton
79+
id={buttonId<T>(idSchema, 'add')}
80+
className='rjsf-object-property-expand'
81+
onClick={onAddClick(schema)}
82+
disabled={disabled || readonly}
83+
uiSchema={uiSchema}
84+
registry={registry}
85+
/>
86+
</GridItem>
87+
)}
88+
</Grid>
89+
)}
8890
</>
8991
);
9092
}

‎packages/chakra-ui/src/components/ui/alert.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, ReactElement, ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { Alert as ChakraAlert } from '@chakra-ui/react';
33

44
import { CloseButton } from './close-button';
@@ -10,7 +10,6 @@ import { CloseButton } from './close-button';
1010
* @param {ReactNode} [props.startElement] - The element to display at the start of the alert.
1111
* @param {ReactNode} [props.endElement] - The element to display at the end of the alert.
1212
* @param {ReactNode} [props.title] - The title of the alert.
13-
* @param {ReactElement} [props.icon] - The icon to display in the alert.
1413
* @param {boolean} [props.closable] - Whether to show the close button.
1514
* @param {function} [props.onClose] - The function to call when the close button is clicked.
1615
*
@@ -20,16 +19,15 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
2019
startElement?: ReactNode;
2120
endElement?: ReactNode;
2221
title?: ReactNode;
23-
icon?: ReactElement;
2422
closable?: boolean;
2523
onClose?: () => void;
2624
}
2725

2826
export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
29-
const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
27+
const { title, children, closable, onClose, startElement, endElement, ...rest } = props;
3028
return (
3129
<ChakraAlert.Root ref={ref} {...rest}>
32-
{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
30+
{startElement || <ChakraAlert.Indicator />}
3331
{children ? (
3432
<ChakraAlert.Content>
3533
<ChakraAlert.Title>{title}</ChakraAlert.Title>

0 commit comments

Comments
 (0)