add formField.checkBox.pad as an option to be handeled in formField (#…

…6300)

* add formField.checkBox.pad as an option to be handeled in formField

* clean up logic

* add unit test

Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local>
Co-authored-by: Eric Soderberg <eric.soderberg@hpe.com>

src/js/components/FormField/FormField.js

@@ -227,6 +227,10 @@ const FormField = forwardRef(
             return cloneElement(child, {
               plain: true,
               focusIndicator: false,
+              pad:
+                'CheckBox'.indexOf(child.type.displayName) !== -1
+                  ? formFieldTheme?.checkBox?.pad
+                  : undefined,
             });
           }
           return child;

src/js/components/FormField/__tests__/FormField-test.js

@@ -9,6 +9,7 @@ import 'regenerator-runtime/runtime';
 import { Alert, New, StatusInfo } from 'grommet-icons';
 import { Grommet } from '../../Grommet';
 import { Form } from '../../Form';
+import { CheckBox } from '../../CheckBox';
 import { FormField } from '..';
 import { TextInput } from '../../TextInput';
 
@@ -420,4 +421,30 @@ describe('FormField', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('checkbox pad is defined in formfield', () => {
+    const { container } = render(
+      <Grommet
+        theme={{
+          formField: {
+            checkBox: {
+              pad: {
+                horizontal: 'small',
+                vertical: 'xsmall',
+              },
+            },
+          },
+        }}
+      >
+        <Form>
+          <FormField label="label">
+            <CheckBox label="checkbox with pad" />
+          </FormField>
+          <CheckBox label="checkbox without pad" />
+        </Form>
+      </Grommet>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });

src/js/components/FormField/__tests__/__snapshots__/FormField-test.js.snap

@@ -132,6 +132,273 @@ exports[`FormField abut with margin 1`] = `
 </div>
 `;
 
+exports[`FormField checkbox pad is defined in formfield 1`] = `
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-bottom: 12px;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  border-bottom: solid 1px rgba(0,0,0,0.33);
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-right: 12px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: solid 2px rgba(0,0,0,0.15);
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 24px;
+  width: 24px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  cursor: pointer;
+}
+
+.c4:hover input:not([disabled]) + div,
+.c4:hover input:not([disabled]) + span {
+  border-color: #000000;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.c9:hover input:not([disabled]) + div,
+.c9:hover input:not([disabled]) + span {
+  border-color: #000000;
+}
+
+.c7 {
+  opacity: 0;
+  -moz-appearance: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.c7:checked + span > span {
+  left: calc( 48px - 24px );
+  background: #7D4CDB;
+}
+
+.c6 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c2 {
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 6px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c3 {
+    border-bottom: solid 1px rgba(0,0,0,0.33);
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c3 {
+    padding: 6px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c5 {
+    margin-right: 6px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c8 {
+    border: solid 2px rgba(0,0,0,0.15);
+  }
+}
+
+<div
+  class="c0"
+>
+  <form>
+    <div
+      class="c1 "
+    >
+      <label
+        class="c2"
+      >
+        label
+      </label>
+      <div
+        class="c3 FormField__FormFieldContentBox-sc-m9hood-1"
+      >
+        <label
+          class="c4"
+          label="checkbox with pad"
+        >
+          <div
+            class="c5 c6"
+          >
+            <input
+              class="c7"
+              type="checkbox"
+            />
+            <div
+              class="c8 "
+            />
+          </div>
+          <span>
+            checkbox with pad
+          </span>
+        </label>
+      </div>
+    </div>
+    <label
+      class="c9"
+      label="checkbox without pad"
+    >
+      <div
+        class="c5 c6"
+      >
+        <input
+          class="c7"
+          type="checkbox"
+        />
+        <div
+          class="c8 "
+        />
+      </div>
+      <span>
+        checkbox without pad
+      </span>
+    </label>
+  </form>
+</div>
+`;
+
 exports[`FormField contentProps 1`] = `
 .c0 {
   font-size: 18px;

src/js/themes/base.d.ts

@@ -782,6 +782,9 @@ export interface ThemeType {
       margin?: MarginType;
       pad?: PadType;
     };
+    checkBox: {
+      pad: PadType;
+    };
     disabled?: {
       background?: BackgroundType;
       border?: {

src/js/themes/base.js

@@ -875,6 +875,9 @@ export const generate = (baseSpacing = 24, scale = 6) => {
         position: 'inner',
         side: 'bottom',
       },
+      // checkBox: {
+      //   pad: undefined,
+      // },
       content: {
         // margin: undefined,
         pad: 'small',