Added fullWidth prop to EuiButton

src-docs/src/views/form_layouts/inline_popover.js

@@ -138,6 +138,7 @@ export default class extends Component {
             name="poprange"
           />
         </EuiFormRow>
+        <EuiButton fullWidth>Save</EuiButton>
       </EuiForm>
     );
 

src/components/button/__snapshots__/button.test.js.snap

@@ -124,6 +124,21 @@ exports[`EuiButton props fill is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props fullWidth is rendered 1`] = `
+<button
+  class="euiButton euiButton--primary euiButton--fullWidth"
+  type="button"
+>
+  <span
+    class="euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButton props href secures the rel attribute when the target is _blank 1`] = `
 <a
   class="euiButton euiButton--primary"

src/components/button/_button.scss

@@ -155,3 +155,8 @@ $buttonTypes: (
     }
   }
 }
+
+.euiButton--fullWidth {
+  display: block;
+  width: 100%;
+}

src/components/button/button.js

@@ -55,6 +55,7 @@ export const EuiButton = ({
   buttonRef,
   contentProps,
   textProps,
+  fullWidth,
   ...rest
 }) => {
 
@@ -69,6 +70,7 @@ export const EuiButton = ({
     className,
     {
       'euiButton--fill': fill,
+      'euiButton--fullWidth': fullWidth,
     },
   );
 
@@ -162,6 +164,11 @@ EuiButton.propTypes = {
    */
   color: PropTypes.oneOf(COLORS),
   size: PropTypes.oneOf(SIZES),
+
+  /**
+   * Expands button to fill the width of the parent
+   */
+  fullWidth: PropTypes.bool,
   isDisabled: PropTypes.bool,
   href: PropTypes.string,
   target: PropTypes.string,

src/components/button/button.test.js

@@ -64,6 +64,17 @@ describe('EuiButton', () => {
       });
     });
 
+    describe('fullWidth', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiButton fullWidth />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+
     describe('iconType', () => {
       it('is rendered', () => {
         const component = render(

src/components/button/index.d.ts

@@ -34,6 +34,7 @@ declare module '@elastic/eui' {
     size?: ButtonSize;
     isLoading?: boolean;
     isDisabled?: boolean;
+    fullWidth?: boolean;
     contentProps?: HTMLAttributes<HTMLSpanElement>;
     textProps?: HTMLAttributes<HTMLSpanElement>;
   }