Skip to content

Commit c2ae0de

Browse files
rvsiarvsia
committed
feat(blueprint): update blueprint to version 4
1 parent c08a478 commit c2ae0de

10 files changed

Lines changed: 153 additions & 92 deletions

File tree

‎packages/blueprint-component-mapper/demo/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<!-- Style dependencies -->
8-
<link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
8+
<link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
99
<!-- Blueprint stylesheets -->
10-
<link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
11-
<link href="https://unpkg.com/@blueprintjs/datetime@^3.10.0/lib/css/blueprint-datetime.css" rel="stylesheet" />
10+
<link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
11+
<link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
12+
<link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
1213
<title>Data driven forms</title>
1314
</head>
1415
<body>

‎packages/blueprint-component-mapper/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929
"javascript"
3030
],
3131
"devDependencies": {
32-
"@blueprintjs/core": "^3.26.1",
33-
"@blueprintjs/datetime": "^3.17.0",
34-
"@blueprintjs/select": "^3.12.3"
32+
"@blueprintjs/core": "^4.2.1",
33+
"@blueprintjs/datetime": "^4.1.4",
34+
"@blueprintjs/select": "^4.1.4"
3535
},
3636
"peerDependencies": {
37-
"@blueprintjs/core": "^3.26.1",
38-
"@blueprintjs/datetime": "^3.17.0",
39-
"@blueprintjs/select": "^3.12.3",
37+
"@blueprintjs/core": "^4.2.1",
38+
"@blueprintjs/datetime": "^4.1.4",
39+
"@blueprintjs/select": "^4.1.4",
4040
"react": "^16.13.1 || ^17.0.2 || ^18.0.0",
4141
"react-dom": "^16.13.1 || ^17.0.2 || ^18.0.0"
4242
},

‎packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const List = ({ value, optionClick, noOptionsTitle, filterValue, filterValueText
3232
const { menu } = useStyles();
3333

3434
return (
35-
<Menu {...MenuProps} className={clsx('bp3-elevation-1', menu, MenuProps.className)}>
35+
<Menu {...MenuProps} className={clsx('bp4-elevation-1', menu, MenuProps.className)}>
3636
{value.length < 1 && <MenuItem text={filterValue ? filterValueText : noOptionsTitle} disabled {...MenuItemProps} />}
3737
{value.length > 0 &&
3838
value.map(({ value, label, MenuItemProps: ItemMenuItemProps }) => (

‎packages/blueprint-component-mapper/src/form-template/form-template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ InnerButton.propTypes = {
6565
};
6666

6767
const BlueprintFormTemplate = ({ requiredLabelInfo, ...props }) => (
68-
<BlueprintContext.Provider value={{ required: requiredLabelInfo || <span className="bp3-text-muted">(required)</span> }}>
68+
<BlueprintContext.Provider value={{ required: requiredLabelInfo || <span className="bp4-text-muted">(required)</span> }}>
6969
<FormTemplate FormWrapper={Form} Button={InnerButton} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
7070
</BlueprintContext.Provider>
7171
);

‎packages/blueprint-component-mapper/src/tests/components.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,10 @@ describe('formFields generated tests', () => {
177177

178178
if (component === componentTypes.RADIO) {
179179
options.forEach((opt) => {
180-
expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
180+
expect(screen.getByText(opt.label)).toHaveClass('bp4-disabled');
181181
});
182182
} else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
183-
expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
183+
expect(container.getElementsByClassName('bp4-disabled')).toHaveLength(1);
184184
} else {
185185
expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
186186
}
@@ -196,10 +196,10 @@ describe('formFields generated tests', () => {
196196

197197
if (component === componentTypes.RADIO) {
198198
options.forEach((opt) => {
199-
expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
199+
expect(screen.getByText(opt.label)).toHaveClass('bp4-disabled');
200200
});
201201
} else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
202-
expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
202+
expect(container.getElementsByClassName('bp4-disabled')).toHaveLength(1);
203203
} else {
204204
expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
205205
}

‎packages/blueprint-component-mapper/src/tests/dual-list-select.test.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ describe('DualListSelect', () => {
192192
it('sort options', async () => {
193193
const { container } = render(<FormRenderer {...initialProps} />);
194194

195-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
195+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
196196
'cats',
197197
'cats_1',
198198
'cats_2',
@@ -203,7 +203,7 @@ describe('DualListSelect', () => {
203203

204204
await userEvent.click(screen.getByTitle('Sort options'));
205205

206-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
206+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
207207
'zebras',
208208
'pigeons',
209209
'cats_2',
@@ -214,7 +214,7 @@ describe('DualListSelect', () => {
214214

215215
await userEvent.click(screen.getByTitle('Sort options'));
216216

217-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
217+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
218218
'cats',
219219
'cats_1',
220220
'cats_2',
@@ -229,7 +229,7 @@ describe('DualListSelect', () => {
229229
<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />
230230
);
231231

232-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
232+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
233233
'No available options',
234234
'cats',
235235
'cats_1',
@@ -240,7 +240,7 @@ describe('DualListSelect', () => {
240240

241241
await userEvent.click(screen.getByTitle('Sort value'));
242242

243-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
243+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
244244
'No available options',
245245
'zebras',
246246
'pigeons',
@@ -251,7 +251,7 @@ describe('DualListSelect', () => {
251251

252252
await userEvent.click(screen.getByTitle('Sort value'));
253253

254-
expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
254+
expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
255255
'No available options',
256256
'cats',
257257
'cats_1',

‎packages/blueprint-component-mapper/src/tests/select.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('<Select />', () => {
6060

6161
expect(screen.getByText('select')).toBeInTheDocument();
6262
expect(screen.getByText('option 1')).toBeInTheDocument();
63-
expect(screen.getByLabelText('Remove')).toHaveClass('bp3-tag-remove');
63+
expect(screen.getByLabelText('Remove')).toHaveClass('bp4-tag-remove');
6464
});
6565

6666
it('multi on change - undefined', () => {

‎packages/react-renderer-demo/src/pages/provided-mappers/blueprint-component-mapper.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ This field will show the error immediately.
3838

3939
## isRequired customization
4040

41-
Blueprint components do not use asterisks for indicating that fields are required, instead of it, it uses `(required)` string. This message can be customized via `requiredLabelInfo` prop passed to the default `formTemplate`. By default this message is set to `<span className="bp3-text-muted">(required)</span>`. Notice the className, that provides default Blueprint styles.
41+
Blueprint components do not use asterisks for indicating that fields are required, instead of it, it uses `(required)` string. This message can be customized via `requiredLabelInfo` prop passed to the default `formTemplate`. By default this message is set to `<span className="bp4-text-muted">(required)</span>`. Notice the className, that provides default Blueprint styles.
4242

4343
```jsx
4444
import { FormTemplate } from '@data-driven-forms/blueprint-component-mapper';
4545

4646
const FormTemplateWrapper = (props) => (
4747
<FormTemplate
4848
{...props}
49-
requiredLabelInfo={<span className="bp3-text-muted">(povinné)</span>}
49+
requiredLabelInfo={<span className="bp4-text-muted">(povinné)</span>}
5050
/>
5151
) // Czech translation
5252
```
@@ -70,7 +70,7 @@ const FormTemplate = ({ formFields }) => {
7070
return (
7171
<form onSubmit={handleSubmit}>
7272
<BlueprintContext.Provider
73-
value={{ required: { <span className="bp3-text-muted">(required)</span> }}}
73+
value={{ required: { <span className="bp4-text-muted">(required)</span> }}}
7474
>
7575
{formFields}
7676
</BlueprintContext.Provider>

‎packages/react-renderer-demo/src/stackblitz-templates/blueprint-templates.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ export const html = `
22
<html>
33
<head>
44
<!-- Style dependencies -->
5-
<link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
5+
<link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
66
<!-- Blueprint stylesheets -->
7-
<link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" />
8-
<link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
9-
<link href="https://unpkg.com/@blueprintjs/datetime@^3.10.0/lib/css/blueprint-datetime.css" rel="stylesheet" />
7+
<link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
8+
<link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
9+
<link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
1010
</head>
1111
<body>
1212
<div id="root"></div>

0 commit comments

Comments
 (0)