Added fullWidth prop to EuiButton (#1665)

and .. Added `.eui-fullWidth` utility class

CHANGELOG.md

@@ -4,6 +4,8 @@
 - Converted `EuiFlexGrid`, `EuiFlexGroup`, `EuiFlexItem`, `EuiDescriptionList`, `EuiDescriptionListTitle`, and `EuiDescriptionListDescription` to TypeScript ([#1365](https://github.com/elastic/eui/pull/1365))
 - Converted `EuiAvatar` to Typescript ([#1654](https://github.com/elastic/eui/pull/1654))
 - Added missing `anchorClassName` prop to `EuiToolTip` definition ([#1657](https://github.com/elastic/eui/pull/1657))
+- Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665))
+- Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665))
 
 ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1)
 

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-docs/src/views/utility_classes/utility_classes.js

@@ -147,6 +147,10 @@ export default () => (
 
     <EuiCode className="eui-displayInlineBlock">.eui-displayInlineBlock</EuiCode>
 
+    <EuiSpacer />
+
+    <EuiCode className="eui-fullWidth">.eui-fullWidth (similar to eui-displayBlock but adds 100% width)</EuiCode>
+
     <h4>Responsive</h4>
 
     <EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>

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>;
   }

src/global_styling/utility/_utility.scss

@@ -12,6 +12,11 @@
 .eui-displayInline {display: inline !important;}
 .eui-displayInlineBlock {display: inline-block !important;}
 
+.eui-fullWidth {
+  display: block !important;
+  width: 100% !important;
+}
+
 // Text
 .eui-textCenter {text-align: center !important;}
 .eui-textLeft {text-align: left !important;}