Add form as a prop for button kit (#1801)

* Add form as a prop for buttons.
Allows forms to be connected to a button that is created outside of the form

* Add form prop to react buttons and add spec to check form prop

* Add examples to the playbook kit docs for button form element in rails and react

* Add spec test & optional type to form

Co-authored-by: Stephen Cassidy <stephen.cassidy@powerhrg.com>
Co-authored-by: Stephen Marshall <smarshall1980@gmail.com>

playbook/app/pb_kits/playbook/pb_button/_button.jsx

@@ -15,6 +15,7 @@ type ButtonPropTypes = {
   data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
+  form?: string,
   fullWidth?: boolean,
   icon?: string,
   id?: string,
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    form = null
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -119,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
           {...dataProps}
           className={css}
           disabled={disabled}
+          form={form}
           id={id}
           onClick={onClick}
           role="button"

playbook/app/pb_kits/playbook/pb_button/button.rb

@@ -21,6 +21,7 @@ class Button < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: ["sm", "md", "lg", nil],
                   default: nil
+      prop :form, default: nil
 
       def options
         {
@@ -32,6 +33,7 @@ def options
           role: "button",
           type: type,
           value: value,
+          form: form,
         }.compact
       end
 

playbook/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>

playbook/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>

playbook/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonForm = (props) => (
+  <div>
+    <Button
+        form="form-id"
+        text="Button with Form Attribute"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonForm

playbook/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
+  - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -17,3 +18,4 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
+  - button_form: Button Form Attribute

playbook/app/pb_kits/playbook/pb_button/docs/index.js

@@ -6,3 +6,4 @@ export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
+export { default as ButtonForm } from './_button_form.jsx'

playbook/spec/pb_kits/playbook/kits/button_spec.rb

@@ -23,6 +23,7 @@
   it { is_expected.to define_prop(:link) }
   it { is_expected.to define_prop(:type) }
   it { is_expected.to define_prop(:value) }
+  it { is_expected.to define_prop(:form).with_default(nil) }
 
   describe "#tag" do
     it "returns 'button' when link is not provided" do
@@ -57,6 +58,11 @@
         expect(subject.new(value: "123").options).to include(:value)
         expect(subject.new.options).to_not include(:value)
       end
+
+      it "form", :aggregate_failures do
+        expect(subject.new(form: "form-id").options).to include(:form)
+        expect(subject.new.options).to_not include(:form)
+      end
     end
   end