feat: Fix invalid "pId" attribute in AddButton (Bootstrap-4) (#2046)

* 🚑 AddButton 'pId' removal/fix

* 🎨 minor style fix in DescriptionField

* ☔ update tests

Author: Xtremilicious

packages/bootstrap-4/src/AddButton/AddButton.tsx

@@ -2,11 +2,11 @@ import React from "react";
 
 import { AddButtonProps } from "@rjsf/core";
 import Button from "react-bootstrap/Button";
-import { AiOutlinePlus } from "react-icons/ai";
+import { BsPlus } from "react-icons/bs";
 
 const AddButton: React.FC<AddButtonProps> = props => (
   <Button {...props} color="primary" style={{width: "100%"}} className="ml-1">
-    <AiOutlinePlus/>
+    <BsPlus/>
   </Button>
 );
 

packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx

@@ -7,7 +7,7 @@ export interface DescriptionFieldProps extends Partial<FieldProps> {
 
 const DescriptionField = ({ description }: Partial<FieldProps>) => {
   if (description) {
-    return <div><div className="mb-5">{description}</div></div>;
+    return <div><div className="mb-3">{description}</div></div>;
   }
 
   return null;

packages/bootstrap-4/test/__snapshots__/AddButton.test.tsx.snap

@@ -16,28 +16,26 @@ exports[`AddButton simple 1`] = `
   <svg
     fill="currentColor"
     height="1em"
-    pId="10297"
     stroke="currentColor"
     strokeWidth="0"
     style={
       Object {
         "color": undefined,
       }
     }
-    t="1551322312294"
-    version="1.1"
-    viewBox="0 0 1024 1024"
+    viewBox="0 0 16 16"
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <defs />
     <path
-      d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"
-      pId="10298"
+      clipRule="evenodd"
+      d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z"
+      fillRule="evenodd"
     />
     <path
-      d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"
-      pId="10299"
+      clipRule="evenodd"
+      d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z"
+      fillRule="evenodd"
     />
   </svg>
 </button>

packages/bootstrap-4/test/__snapshots__/Array.test.tsx.snap

@@ -47,28 +47,26 @@ exports[`array fields array 1`] = `
                     <svg
                       fill="currentColor"
                       height="1em"
-                      pId="10297"
                       stroke="currentColor"
                       strokeWidth="0"
                       style={
                         Object {
                           "color": undefined,
                         }
                       }
-                      t="1551322312294"
-                      version="1.1"
-                      viewBox="0 0 1024 1024"
+                      viewBox="0 0 16 16"
                       width="1em"
                       xmlns="http://www.w3.org/2000/svg"
                     >
-                      <defs />
                       <path
-                        d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"
-                        pId="10298"
+                        clipRule="evenodd"
+                        d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z"
+                        fillRule="evenodd"
                       />
                       <path
-                        d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"
-                        pId="10299"
+                        clipRule="evenodd"
+                        d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z"
+                        fillRule="evenodd"
                       />
                     </svg>
                   </button>

packages/bootstrap-4/test/__snapshots__/ArrayFieldTemplate.test.tsx.snap

@@ -39,28 +39,26 @@ exports[`ArrayFieldTemplate simple 1`] = `
                 <svg
                   fill="currentColor"
                   height="1em"
-                  pId="10297"
                   stroke="currentColor"
                   strokeWidth="0"
                   style={
                     Object {
                       "color": undefined,
                     }
                   }
-                  t="1551322312294"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
+                  viewBox="0 0 16 16"
                   width="1em"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <defs />
                   <path
-                    d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"
-                    pId="10298"
+                    clipRule="evenodd"
+                    d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z"
+                    fillRule="evenodd"
                   />
                   <path
-                    d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"
-                    pId="10299"
+                    clipRule="evenodd"
+                    d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z"
+                    fillRule="evenodd"
                   />
                 </svg>
               </button>

packages/bootstrap-4/test/__snapshots__/DescriptionField.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DescriptionField should return h2 element when description is being passed as props 1`] = `
 <div>
   <div
-    className="mb-5"
+    className="mb-3"
   >
     SOME THING
   </div>