From 0a4a4be27f06af563a80ddfde0905be64e786667 Mon Sep 17 00:00:00 2001
From: Kerry Money <kmoney@positivedevelopment.com>
Date: Tue, 8 Dec 2020 12:34:45 -0500
Subject: [PATCH 1/5] [EuiButtonGroup] pass a type of button when rendering a
 button for button group button

---
 src/components/button/button.tsx              |  1 +
 .../__snapshots__/button_group.test.tsx.snap  | 58 +++++++++++++++++++
 .../button_group/button_group_button.tsx      |  4 ++
 3 files changed, 63 insertions(+)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7a07d67cf99..9d2ec795af1 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -119,6 +119,7 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    */
   contentProps?: EuiButtonContentType;
   style?: CSSProperties;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonDisplayProps = EuiButtonProps &
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 0db6d7464d8..0dff8d66119 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -37,6 +38,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -57,6 +59,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -143,6 +146,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -180,6 +184,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -199,6 +204,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -219,6 +225,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -305,6 +312,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -342,6 +350,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -361,6 +370,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -381,6 +391,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -467,6 +478,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -504,6 +516,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -523,6 +536,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -543,6 +557,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -629,6 +644,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -666,6 +682,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -685,6 +702,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -705,6 +723,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -791,6 +810,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -828,6 +848,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -847,6 +868,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -867,6 +889,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -953,6 +976,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -990,6 +1014,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1009,6 +1034,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1029,6 +1055,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1115,6 +1142,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1152,6 +1180,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1171,6 +1200,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1191,6 +1221,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1277,6 +1308,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1314,6 +1346,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1333,6 +1366,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1353,6 +1387,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1439,6 +1474,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1478,6 +1514,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       data-test-subj="test subject string"
       disabled=""
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1498,6 +1535,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1518,6 +1556,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1557,6 +1596,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       data-test-subj="test subject string"
       disabled=""
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1577,6 +1617,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1597,6 +1638,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1634,6 +1676,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1653,6 +1696,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1673,6 +1717,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1759,6 +1804,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1796,6 +1842,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1815,6 +1862,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1835,6 +1883,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1921,6 +1970,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2008,6 +2058,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2045,6 +2096,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2064,6 +2116,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       aria-pressed="true"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2084,6 +2137,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2123,6 +2177,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2142,6 +2197,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2162,6 +2218,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2250,6 +2307,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index dea959ed661..4975e47a697 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -56,6 +56,8 @@ type Props = EuiButtonGroupOptionProps & {
    * Inherit from EuiButtonGroup
    */
   onChange: EuiButtonGroupProps['onChange'];
+
+  buttonType?: 'button' | 'submit' | 'reset';
 };
 
 export const EuiButtonGroupButton: FunctionComponent<Props> = ({
@@ -70,6 +72,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
   size,
   value,
   type = 'button',
+  buttonType = 'button',
   ...rest
 }) => {
   // Force element to be a button if disabled
@@ -100,6 +103,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
       ...elementProps,
       id,
       isSelected,
+      type: buttonType,
       onClick: () => onChange(id),
     };
   }

From 9fa7e7fa360be954d97a40bda00b73a0d15091ec Mon Sep 17 00:00:00 2001
From: Kerry Money <kmoney@positivedevelopment.com>
Date: Tue, 8 Dec 2020 13:09:53 -0500
Subject: [PATCH 2/5] [EuiButtonGroup]: add some autodoc comments to new props

---
 src/components/button/button.tsx                           | 3 +++
 src/components/button/button_group/button_group.tsx        | 5 +++++
 src/components/button/button_group/button_group_button.tsx | 2 --
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 9d2ec795af1..f189362adfc 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -119,6 +119,9 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    */
   contentProps?: EuiButtonContentType;
   style?: CSSProperties;
+  /**
+   * The type of the underlying HTML button
+   */
   type?: 'button' | 'submit' | 'reset';
 }
 
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 6702a364b1c..a5217541d05 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -42,6 +42,11 @@ export interface EuiButtonGroupOptionProps
    * The value of the radio input.
    */
   value?: any;
+
+  /**
+   * The type of the underlying HTML button
+   */
+  buttonType?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonGroupProps = CommonProps & {
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index 4975e47a697..814138d8e12 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -56,8 +56,6 @@ type Props = EuiButtonGroupOptionProps & {
    * Inherit from EuiButtonGroup
    */
   onChange: EuiButtonGroupProps['onChange'];
-
-  buttonType?: 'button' | 'submit' | 'reset';
 };
 
 export const EuiButtonGroupButton: FunctionComponent<Props> = ({

From 5947e1ebde3c9fce328ea27b9dc370b8e6841222 Mon Sep 17 00:00:00 2001
From: Kerry Money <kmoney@positivedevelopment.com>
Date: Tue, 8 Dec 2020 13:17:54 -0500
Subject: [PATCH 3/5] [EuiButtonGroup]: add changes to change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afb055cb2a2..d2856c19556 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335))
 - Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351))
 - Fixed propagation of `esc` key presses closing parent popovers ([#4336](https://github.com/elastic/eui/pull/4336))
+- Fixed autosubmit bug in button `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` and `EuiButton` ([#4368](https://github.com/elastic/eui/pull/4368)).
 
 
 **Theme: Amsterdam**

From 0157521562d16ac37306f58233b15d28a43dc3cf Mon Sep 17 00:00:00 2001
From: Kerry Money <kmoney@positivedevelopment.com>
Date: Tue, 8 Dec 2020 17:45:04 -0500
Subject: [PATCH 4/5] [EuiButtonGroup]: PR feedback: change the type attribute
 to element; add type attribute to button content instead of in both button
 and button group option

---
 src/components/button/button.tsx                     |  4 ----
 src/components/button/button_content.tsx             |  5 +++++
 src/components/button/button_group/button_group.tsx  |  7 +------
 .../button/button_group/button_group_button.tsx      | 12 ++++++------
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index f189362adfc..7a07d67cf99 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -119,10 +119,6 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    */
   contentProps?: EuiButtonContentType;
   style?: CSSProperties;
-  /**
-   * The type of the underlying HTML button
-   */
-  type?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonDisplayProps = EuiButtonProps &
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 525f1b8dc17..2fc3e5a61c0 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -58,6 +58,11 @@ export interface EuiButtonContentProps extends CommonProps {
       ref?: Ref<HTMLSpanElement>;
       'data-text'?: string;
     };
+
+  /**
+   * The type of the underlying HTML button
+   */
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export const EuiButtonContent: FunctionComponent<
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index a5217541d05..5cd3d59a463 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -42,11 +42,6 @@ export interface EuiButtonGroupOptionProps
    * The value of the radio input.
    */
   value?: any;
-
-  /**
-   * The type of the underlying HTML button
-   */
-  buttonType?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonGroupProps = CommonProps & {
@@ -184,7 +179,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               name={nameIfSingle}
               isDisabled={isDisabled}
               {...(option as EuiButtonGroupOptionProps)}
-              type={typeIsSingle ? 'label' : 'button'}
+              element={typeIsSingle ? 'label' : 'button'}
               isSelected={
                 typeIsSingle
                   ? option.id === idSelected
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index 814138d8e12..de7e477d8a5 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -27,7 +27,7 @@ type Props = EuiButtonGroupOptionProps & {
   /**
    * Element to display based on single or multi
    */
-  type: 'button' | 'label';
+  element: 'button' | 'label';
   /**
    * Styles the selected button to look selected (usually with `fill`)
    */
@@ -69,16 +69,16 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
   onChange,
   size,
   value,
+  element = 'button',
   type = 'button',
-  buttonType = 'button',
   ...rest
 }) => {
   // Force element to be a button if disabled
-  const element = isDisabled ? 'button' : type;
+  const el = isDisabled ? 'button' : element;
 
   let elementProps = {};
   let singleInput;
-  if (element === 'label') {
+  if (el === 'label') {
     elementProps = {
       ...elementProps,
       htmlFor: id,
@@ -101,7 +101,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
       ...elementProps,
       id,
       isSelected,
-      type: buttonType,
+      type,
       onClick: () => onChange(id),
     };
   }
@@ -125,7 +125,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     <EuiButtonDisplay
       baseClassName="euiButtonGroupButton"
       className={buttonClasses}
-      element={element}
+      element={el}
       fill={size !== 'compressed' && isSelected}
       isDisabled={isDisabled}
       size={size === 'compressed' ? 's' : size}

From ef5f08c16e2de7c91e93110cea0affa7847e9fa6 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 9 Dec 2020 10:40:47 -0500
Subject: [PATCH 5/5] Move `type` back to EuiButtonGroupOption

And added a test for changing it
---
 CHANGELOG.md                                  |  3 +-
 src/components/button/button_content.tsx      |  5 --
 .../__snapshots__/button_group.test.tsx.snap  | 56 +++++++++----------
 .../button/button_group/button_group.test.tsx | 10 +++-
 .../button/button_group/button_group.tsx      |  4 ++
 5 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2856c19556..a916542cf50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,8 +12,7 @@
 - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335))
 - Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351))
 - Fixed propagation of `esc` key presses closing parent popovers ([#4336](https://github.com/elastic/eui/pull/4336))
-- Fixed autosubmit bug in button `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` and `EuiButton` ([#4368](https://github.com/elastic/eui/pull/4368)).
-
+- Fixed form submit bug in `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` ([#4368](https://github.com/elastic/eui/pull/4368))
 
 **Theme: Amsterdam**
 
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 2fc3e5a61c0..525f1b8dc17 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -58,11 +58,6 @@ export interface EuiButtonContentProps extends CommonProps {
       ref?: Ref<HTMLSpanElement>;
       'data-text'?: string;
     };
-
-  /**
-   * The type of the underlying HTML button
-   */
-  type?: 'button' | 'submit' | 'reset';
 }
 
 export const EuiButtonContent: FunctionComponent<
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 0dff8d66119..0d2dba2a90b 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -146,7 +146,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -225,7 +225,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -312,7 +312,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -391,7 +391,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -478,7 +478,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -557,7 +557,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -644,7 +644,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -723,7 +723,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -810,7 +810,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -889,7 +889,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -976,7 +976,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1055,7 +1055,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1142,7 +1142,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1221,7 +1221,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1308,7 +1308,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1387,7 +1387,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1474,7 +1474,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1556,7 +1556,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1638,7 +1638,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1717,7 +1717,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1804,7 +1804,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1883,7 +1883,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1970,7 +1970,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2058,7 +2058,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2137,7 +2137,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2218,7 +2218,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2307,7 +2307,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
-      type="button"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 0bfa03159f4..9c84d2f464e 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -21,7 +21,12 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps as commonProps } from '../../../test';
 
-import { EuiButtonGroup, EuiButtonGroupProps } from './button_group';
+import {
+  EuiButtonGroup,
+  EuiButtonGroupOptionProps,
+  EuiButtonGroupProps,
+} from './button_group';
+
 import { COLORS } from '../button';
 
 const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
@@ -30,7 +35,7 @@ const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
   'compressed',
 ];
 
-const options = [
+const options: EuiButtonGroupOptionProps[] = [
   {
     id: 'button00',
     label: 'Option one',
@@ -47,6 +52,7 @@ const options = [
     label: 'Option three',
     iconType: 'bolt',
     isDisabled: true,
+    type: 'submit',
   },
 ];
 
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 5cd3d59a463..8ec71fd9f6a 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -42,6 +42,10 @@ export interface EuiButtonGroupOptionProps
    * The value of the radio input.
    */
   value?: any;
+  /**
+   * The type of the underlying HTML button
+   */
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonGroupProps = CommonProps & {