Added fullWidth prop to EuiButton (elastic#1665)

and .. Added `.eui-fullWidth` utility class
Shigawire · Mar 14, 2019 · 378b589 · 378b589
1 parent 9ec53f7
commit 378b589
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@
 - Added `footerLink` and `showToolTips` to `EuiNavDrawer` and added `EuiNavDrawerGroup` ([#1701](https://github.com/elastic/eui/pull/1701))
 - Allow `EuiListGroupItem` to pass a custom element as the `icon` ([#1726](https://github.com/elastic/eui/pull/1726))
 - Added `toInitials` string service ([#1729](https://github.com/elastic/eui/pull/1729))
+- 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))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
@@ -11,16 +11,21 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldNumber,
-
+  EuiRange,
+  EuiSwitch,
 } from '../../../../src/components';
 
+import makeId from '../../../../src/components/form/form_row/make_id';
+
 export default class extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       isPopoverOpen: false,
       isSwitchChecked: true,
+      isPopover2Open: false,
+      isSwitch2Checked: true,
     };
   }
 
@@ -42,6 +47,24 @@ export default class extends Component {
     });
   }
 
+  onSwitch2Change = () => {
+    this.setState({
+      isSwitch2Checked: !this.state.isSwitch2Checked,
+    });
+  }
+
+  onButton2Click = () => {
+    this.setState({
+      isPopover2Open: !this.state.isPopover2Open,
+    });
+  }
+
+  closePopover2 = () => {
+    this.setState({
+      isPopover2Open: false,
+    });
+  }
+
   render() {
     const button = (
       <EuiButton
@@ -50,7 +73,7 @@ export default class extends Component {
         iconType="arrowDown"
         onClick={this.onButtonClick}
       >
-        Form in a popover
+        Inline form in a popover
       </EuiButton>
     );
 
@@ -76,18 +99,77 @@ export default class extends Component {
       </EuiForm>
     );
 
-    return (
-      <EuiPopover
-        id="inlineFormPopover"
-        ownFocus
-        button={button}
-        isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover.bind(this)}
+    const button2 = (
+      <EuiButton
+        iconSide="right"
+        fill
+        iconType="arrowDown"
+        onClick={this.onButton2Click}
       >
-        <div style={{ width: 500 }}>
-          {formSample}
-        </div>
-      </EuiPopover>
+        Vertical form in a popover
+      </EuiButton>
+    );
+
+    const formSample2 = (
+      <EuiForm>
+        <EuiFormRow>
+          <EuiSwitch
+            id={makeId()}
+            name="popswitch"
+            label="Isn't this popover form cool?"
+            checked={this.state.isSwitch2Checked}
+            onChange={this.onSwitch2Change}
+          />
+        </EuiFormRow>
+
+        <EuiFormRow
+          label="A text field"
+        >
+          <EuiFieldText name="popfirst" />
+        </EuiFormRow>
+
+        <EuiFormRow
+          label="Range"
+          helpText="Some help text for the range"
+        >
+          <EuiRange
+            min={0}
+            max={100}
+            name="poprange"
+          />
+        </EuiFormRow>
+        <EuiButton fullWidth>Save</EuiButton>
+      </EuiForm>
+    );
+
+    return (
+      <div>
+        <EuiPopover
+          id="inlineFormPopover"
+          ownFocus
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+        >
+          <div style={{ width: 500 }}>
+            {formSample}
+          </div>
+        </EuiPopover>
+
+        &emsp;
+
+        <EuiPopover
+          id="formPopover"
+          ownFocus
+          button={button2}
+          isOpen={this.state.isPopover2Open}
+          closePopover={this.closePopover2.bind(this)}
+        >
+          <div style={{ width: '300px' }}>
+            {formSample2}
+          </div>
+        </EuiPopover>
+      </div>
     );
   }
 }
diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -22,7 +22,6 @@ import {
   EuiNavDrawer,
   EuiHorizontalRule,
   EuiShowFor,
-  EuiFocusTrap,
   EuiButton
 } from '../../../../src/components';
 
@@ -354,70 +353,68 @@ export default class extends Component {
     if (this.state.isFullScreen) {
 
       fullScreenDisplay = (
-        <EuiFocusTrap>
-          <div style={{ position: 'fixed', top: 0, left: 0, height: '100%', width: '100%' }} onKeyDown={this.onKeyDown}>
-            <EuiHeader>
-              <EuiHeaderSection grow={false}>
-                <EuiShowFor sizes={['xs', 's']}>
-                  <EuiHeaderSectionItem border="right">
-                    {this.renderMenuTrigger()}
-                  </EuiHeaderSectionItem>
-                </EuiShowFor>
-                <EuiHeaderSectionItem border="right">{this.renderLogo()}</EuiHeaderSectionItem>
+        <div style={{ position: 'fixed', top: 0, left: 0, height: '100%', width: '100%' }} onKeyDown={this.onKeyDown}>
+          <EuiHeader>
+            <EuiHeaderSection grow={false}>
+              <EuiShowFor sizes={['xs', 's']}>
                 <EuiHeaderSectionItem border="right">
-                  <HeaderSpacesMenu />
+                  {this.renderMenuTrigger()}
                 </EuiHeaderSectionItem>
-              </EuiHeaderSection>
+              </EuiShowFor>
+              <EuiHeaderSectionItem border="right">{this.renderLogo()}</EuiHeaderSectionItem>
+              <EuiHeaderSectionItem border="right">
+                <HeaderSpacesMenu />
+              </EuiHeaderSectionItem>
+            </EuiHeaderSection>
 
-              {this.renderBreadcrumbs()}
+            {this.renderBreadcrumbs()}
 
-              <EuiHeaderSection side="right">
-                <EuiHeaderSectionItem>
-                  <HeaderUserMenu />
-                </EuiHeaderSectionItem>
-              </EuiHeaderSection>
-            </EuiHeader>
-            <EuiNavDrawer ref={this.setNavDrawerRef}>
-              <EuiNavDrawerGroup listItems={this.topLinks} />
-              <EuiHorizontalRule margin="none" />
-              <EuiNavDrawerGroup listItems={this.exploreLinks} />
-              <EuiHorizontalRule margin="none" />
-              <EuiNavDrawerGroup listItems={this.solutionsLinks} />
-              <EuiHorizontalRule margin="none" />
-              <EuiNavDrawerGroup listItems={this.adminLinks}/>
-            </EuiNavDrawer>
-            <EuiPage className="euiNavDrawerPage">
-              <EuiPageBody className="euiNavDrawerPage__pageBody">
-                <EuiPageHeader>
-                  <EuiPageHeaderSection>
-                    <EuiTitle size="l">
-                      <h1>Page title</h1>
+            <EuiHeaderSection side="right">
+              <EuiHeaderSectionItem>
+                <HeaderUserMenu />
+              </EuiHeaderSectionItem>
+            </EuiHeaderSection>
+          </EuiHeader>
+          <EuiNavDrawer ref={this.setNavDrawerRef}>
+            <EuiNavDrawerGroup listItems={this.topLinks} />
+            <EuiHorizontalRule margin="none" />
+            <EuiNavDrawerGroup listItems={this.exploreLinks} />
+            <EuiHorizontalRule margin="none" />
+            <EuiNavDrawerGroup listItems={this.solutionsLinks} />
+            <EuiHorizontalRule margin="none" />
+            <EuiNavDrawerGroup listItems={this.adminLinks}/>
+          </EuiNavDrawer>
+          <EuiPage className="euiNavDrawerPage">
+            <EuiPageBody className="euiNavDrawerPage__pageBody">
+              <EuiPageHeader>
+                <EuiPageHeaderSection>
+                  <EuiTitle size="l">
+                    <h1>Page title</h1>
+                  </EuiTitle>
+                </EuiPageHeaderSection>
+              </EuiPageHeader>
+              <EuiPageContent>
+                <EuiPageContentHeader>
+                  <EuiPageContentHeaderSection>
+                    <EuiTitle>
+                      <h2>Content title</h2>
                     </EuiTitle>
-                  </EuiPageHeaderSection>
-                </EuiPageHeader>
-                <EuiPageContent>
-                  <EuiPageContentHeader>
-                    <EuiPageContentHeaderSection>
-                      <EuiTitle>
-                        <h2>Content title</h2>
-                      </EuiTitle>
-                    </EuiPageContentHeaderSection>
-                  </EuiPageContentHeader>
-                  <EuiPageContentBody>
-                    <EuiButton
-                      fill
-                      onClick={this.toggleFullScreen}
-                      iconType="exit"
-                      aria-label="Exit fullscreen demo"
-                    >
-                      Exit fullscreen demo
-                    </EuiButton>
-                  </EuiPageContentBody>
-                </EuiPageContent>
-              </EuiPageBody>
-            </EuiPage>
-          </div>
-        </EuiFocusTrap>
+                  </EuiPageContentHeaderSection>
+                </EuiPageContentHeader>
+                <EuiPageContentBody>
+                  <EuiButton
+                    fill
+                    onClick={this.toggleFullScreen}
+                    iconType="exit"
+                    aria-label="Exit fullscreen demo"
+                  >
+                    Exit fullscreen demo
+                  </EuiButton>
+                </EuiPageContentBody>
+              </EuiPageContent>
+            </EuiPageBody>
+          </EuiPage>
+        </div>
       );
     }
     return (

diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/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>

diff --git a/src/components/button/__snapshots__/button.test.js.snap b/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"

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -155,3 +155,8 @@ $buttonTypes: (
     }
   }
 }
+
+.euiButton--fullWidth {
+  display: block;
+  width: 100%;
+}
diff --git a/src/components/button/button.js b/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,

diff --git a/src/components/button/button.test.js b/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(

diff --git a/src/components/button/index.d.ts b/src/components/button/index.d.ts
@@ -33,6 +33,7 @@ declare module '@elastic/eui' {
     size?: ButtonSize;
     isLoading?: boolean;
     isDisabled?: boolean;
+    fullWidth?: boolean;
     contentProps?: HTMLAttributes<HTMLSpanElement>;
     textProps?: HTMLAttributes<HTMLSpanElement>;
   }

diff --git a/src/global_styling/utility/_utility.scss b/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;}