Merge pull request #1245 from rvsia/updateBlueprintJS

Richard Všianský · web-flow · commit 8cef5b6bbdfe · 2022-05-04T11:03:28.000+02:00
feat(blueprint): update blueprint to version 4
diff --git a/packages/blueprint-component-mapper/demo/index.html b/packages/blueprint-component-mapper/demo/index.html
@@ -5,10 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- Style dependencies -->
-  <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
+  <link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
   <!-- Blueprint stylesheets -->
-  <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
-  <link href="https://unpkg.com/@blueprintjs/datetime@^3.10.0/lib/css/blueprint-datetime.css" rel="stylesheet" />
+  <link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
+  <link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
+  <link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
   <title>Data driven forms</title>
 </head>
 <body>
diff --git a/packages/blueprint-component-mapper/package.json b/packages/blueprint-component-mapper/package.json
@@ -29,14 +29,14 @@
     "javascript"
   ],
   "devDependencies": {
-    "@blueprintjs/core": "^3.26.1",
-    "@blueprintjs/datetime": "^3.17.0",
-    "@blueprintjs/select": "^3.12.3"
+    "@blueprintjs/core": "^4.2.1",
+    "@blueprintjs/datetime": "^4.1.4",
+    "@blueprintjs/select": "^4.1.4"
   },
   "peerDependencies": {
-    "@blueprintjs/core": "^3.26.1",
-    "@blueprintjs/datetime": "^3.17.0",
-    "@blueprintjs/select": "^3.12.3",
+    "@blueprintjs/core": "^4.2.1",
+    "@blueprintjs/datetime": "^4.1.4",
+    "@blueprintjs/select": "^4.1.4",
     "react": "^16.13.1 || ^17.0.2 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.2 || ^18.0.0"
   },
diff --git a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js
@@ -32,7 +32,7 @@ const List = ({ value, optionClick, noOptionsTitle, filterValue, filterValueText
   const { menu } = useStyles();
 
   return (
-    <Menu {...MenuProps} className={clsx('bp3-elevation-1', menu, MenuProps.className)}>
+    <Menu {...MenuProps} className={clsx('bp4-elevation-1', menu, MenuProps.className)}>
       {value.length < 1 && <MenuItem text={filterValue ? filterValueText : noOptionsTitle} disabled {...MenuItemProps} />}
       {value.length > 0 &&
         value.map(({ value, label, MenuItemProps: ItemMenuItemProps }) => (
diff --git a/packages/blueprint-component-mapper/src/form-template/form-template.js b/packages/blueprint-component-mapper/src/form-template/form-template.js
@@ -65,7 +65,7 @@ InnerButton.propTypes = {
 };
 
 const BlueprintFormTemplate = ({ requiredLabelInfo, ...props }) => (
-  <BlueprintContext.Provider value={{ required: requiredLabelInfo || <span className="bp3-text-muted">(required)</span> }}>
+  <BlueprintContext.Provider value={{ required: requiredLabelInfo || <span className="bp4-text-muted">(required)</span> }}>
     <FormTemplate FormWrapper={Form} Button={InnerButton} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
   </BlueprintContext.Provider>
 );
diff --git a/packages/blueprint-component-mapper/src/tests/components.test.js b/packages/blueprint-component-mapper/src/tests/components.test.js
@@ -177,10 +177,10 @@ describe('formFields generated tests', () => {
 
           if (component === componentTypes.RADIO) {
             options.forEach((opt) => {
-              expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
+              expect(screen.getByText(opt.label)).toHaveClass('bp4-disabled');
             });
           } else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
-            expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
+            expect(container.getElementsByClassName('bp4-disabled')).toHaveLength(1);
           } else {
             expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
           }
@@ -196,10 +196,10 @@ describe('formFields generated tests', () => {
 
           if (component === componentTypes.RADIO) {
             options.forEach((opt) => {
-              expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
+              expect(screen.getByText(opt.label)).toHaveClass('bp4-disabled');
             });
           } else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
-            expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
+            expect(container.getElementsByClassName('bp4-disabled')).toHaveLength(1);
           } else {
             expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
           }
diff --git a/packages/blueprint-component-mapper/src/tests/dual-list-select.test.js b/packages/blueprint-component-mapper/src/tests/dual-list-select.test.js
@@ -192,7 +192,7 @@ describe('DualListSelect', () => {
   it('sort options', async () => {
     const { container } = render(<FormRenderer {...initialProps} />);
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'cats',
       'cats_1',
       'cats_2',
@@ -203,7 +203,7 @@ describe('DualListSelect', () => {
 
     await userEvent.click(screen.getByTitle('Sort options'));
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'zebras',
       'pigeons',
       'cats_2',
@@ -214,7 +214,7 @@ describe('DualListSelect', () => {
 
     await userEvent.click(screen.getByTitle('Sort options'));
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'cats',
       'cats_1',
       'cats_2',
@@ -229,7 +229,7 @@ describe('DualListSelect', () => {
       <FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />
     );
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'No available options',
       'cats',
       'cats_1',
@@ -240,7 +240,7 @@ describe('DualListSelect', () => {
 
     await userEvent.click(screen.getByTitle('Sort value'));
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'No available options',
       'zebras',
       'pigeons',
@@ -251,7 +251,7 @@ describe('DualListSelect', () => {
 
     await userEvent.click(screen.getByTitle('Sort value'));
 
-    expect([...container.getElementsByClassName('bp3-menu-item')].map((el) => el.text)).toEqual([
+    expect([...container.getElementsByClassName('bp4-menu-item')].map((el) => el.text)).toEqual([
       'No available options',
       'cats',
       'cats_1',
diff --git a/packages/blueprint-component-mapper/src/tests/select.test.js b/packages/blueprint-component-mapper/src/tests/select.test.js
@@ -60,7 +60,7 @@ describe('<Select />', () => {
 
     expect(screen.getByText('select')).toBeInTheDocument();
     expect(screen.getByText('option 1')).toBeInTheDocument();
-    expect(screen.getByLabelText('Remove')).toHaveClass('bp3-tag-remove');
+    expect(screen.getByLabelText('Remove')).toHaveClass('bp4-tag-remove');
   });
 
   it('multi on change - undefined', () => {
diff --git a/packages/react-renderer-demo/src/pages/provided-mappers/blueprint-component-mapper.md b/packages/react-renderer-demo/src/pages/provided-mappers/blueprint-component-mapper.md
@@ -38,15 +38,15 @@ This field will show the error immediately.
 
 ## isRequired customization
 
-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.
+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.
 
 ```jsx
 import { FormTemplate } from '@data-driven-forms/blueprint-component-mapper';
 
 const FormTemplateWrapper = (props) => (
     <FormTemplate
         {...props}
-        requiredLabelInfo={<span className="bp3-text-muted">(povinné)</span>}
+        requiredLabelInfo={<span className="bp4-text-muted">(povinné)</span>}
     />
 ) // Czech translation
 ```
@@ -70,7 +70,7 @@ const FormTemplate = ({ formFields }) => {
     return (
         <form onSubmit={handleSubmit}>
             <BlueprintContext.Provider
-                value={{ required: { <span className="bp3-text-muted">(required)</span> }}}
+                value={{ required: { <span className="bp4-text-muted">(required)</span> }}}
             >
                 {formFields}
             </BlueprintContext.Provider>
diff --git a/packages/react-renderer-demo/src/stackblitz-templates/blueprint-templates.js b/packages/react-renderer-demo/src/stackblitz-templates/blueprint-templates.js
@@ -2,11 +2,11 @@ export const html = `
 <html>
   <head>
     <!-- Style dependencies -->
-    <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
+    <link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
     <!-- Blueprint stylesheets -->
-    <link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" />
-    <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
-    <link href="https://unpkg.com/@blueprintjs/datetime@^3.10.0/lib/css/blueprint-datetime.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/yarn.lock b/yarn.lock
