feat: Fix invalid "pId" attribute in AddButton (Bootstrap-4) (rjsf-team#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>