New icons, new sizes for EmptyButton and HRs, un-responsive FlexGroups (

#126) * Adds a few new icons. * Adds `xs` size to our empty buttons (I don't want this applied to regular buttons, which is why I didn't add it there). * Adds `xs` margin to horizontal rules. * Adds a responsive prop to `EuiFlexGroup` which disables responsiveness (useful when you use flexgroup more for alignment rather than gridding). Added the prop to a few places that make sense.
elastic · Nov 8, 2017 · b0e113b · b0e113b
1 parent 22afbed
commit b0e113b
Show file tree

Hide file tree

Showing 23 changed files with 212 additions and 31 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -9,6 +9,7 @@ import {
 import {
   EuiSideNav,
   EuiIcon,
+  EuiButtonEmpty,
   EuiSideNavItem,
   EuiSideNavTitle,
   EuiFieldSearch,
@@ -62,20 +63,22 @@ export class GuidePageChrome extends Component {
     );
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           {homeLink}
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <button
+            <EuiButtonEmpty
+              size="xs"
               onClick={this.props.onToggleTheme}
               className="euiLink"
+              iconSide="right"
+              color="text"
+              iconType="invert"
             >
-              Theme
-            </button>
-          </EuiText>
+              Flip theme
+          </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -163,20 +166,21 @@ export class GuidePageChrome extends Component {
       <div>
         {this.renderIdentity()}
 
+        <EuiSpacer size="m" />
+
+        <EuiFieldSearch
+          placeholder="Search..."
+          value={this.state.search}
+          onChange={this.onSearchChange}
+        />
+
         <EuiSpacer size="m" />
 
         <EuiSideNav
           mobileTitle="Navigate components"
           toggleOpenOnMobile={this.toggleOpenOnMobile.bind(this)}
           isOpenOnMobile={this.state.isSideNavOpenOnMobile}
         >
-          <EuiFieldSearch
-            placeholder="Search..."
-            value={this.state.search}
-            onChange={this.onSearchChange}
-          />
-
-          <EuiSpacer size="m" />
 
           <EuiSideNavTitle>
             Components

diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
@@ -21,6 +21,15 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -80,6 +89,16 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="danger"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -143,6 +162,16 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="text"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -208,6 +237,17 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="danger"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+      isDisabled
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty

diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
@@ -52,6 +52,10 @@ import FlexItemPanel from './flex_item_panel';
 const flexItemPanelSource = require('!!raw-loader!./flex_item_panel');
 const flexItemPanelHtml = renderToHtml(FlexItemPanel);
 
+import FlexGroupResponsive from './flex_responsive';
+const flexItemResponsiveSource = require('!!raw-loader!./flex_responsive');
+const flexItemResonsiveHtml = renderToHtml(FlexGroupResponsive);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <EuiCallOut
@@ -253,5 +257,27 @@ export default props => (
         <div className="guideDemo__highlightGrid"><FlexGutter /></div>
       }
     />
+
+    <GuideSection
+      title="FlexGroups can turn off responsive layouts"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: flexGutterSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flexGutterHtml,
+      }]}
+      text={
+        <p>
+          By default <EuiCode>EuiFlexGroup</EuiCode> is responsive. However, often
+          you only want to use groups for alignment and margins, rather than layouts.
+          Simply apply the <EuiCode>responsive={`{false}`}</EuiCode> prop
+          to retain a single row layout for the group.
+        </p>
+      }
+      demo={
+        <div className="guideDemo__highlightGrid"><FlexGroupResponsive /></div>
+      }
+    />
   </GuidePage>
 );
diff --git a/src-docs/src/views/flex/flex_responsive.js b/src-docs/src/views/flex/flex_responsive.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}><EuiIcon type="faceSad" /></EuiFlexItem>
+      <EuiFlexItem grow={false}>On mobile, the icon will show above this text.</EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
+    <EuiFlexGroup responsive={false} alignItems="center">
+      <EuiFlexItem grow={false}><EuiIcon type="faceHappy" /></EuiFlexItem>
+      <EuiFlexItem grow={false}>On mobile, the icon will stay to the left of this text.</EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);
diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
@@ -6,16 +6,17 @@ import {
 
 export default () => (
   <div>
-    <p>Small</p>
+    <p>xs</p>
+    <EuiHorizontalRule margin="xs" />
+    <p>s</p>
     <EuiHorizontalRule margin="s" />
-    <p>Medium</p>
+    <p>m</p>
     <EuiHorizontalRule margin="m" />
-    <p>Large</p>
+    <p>l (default)</p>
     <EuiHorizontalRule margin="l" />
-    <p>XLarge</p>
+    <p>xl</p>
     <EuiHorizontalRule margin="xl" />
-    <p>XXLarge</p>
+    <p>xxl</p>
     <EuiHorizontalRule margin="xxl" />
   </div>
 );
-
diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -36,13 +36,16 @@ const iconTypes = [
   'gear',
   'grid',
   'help',
+  'invert',
   'link',
   'list',
   'listAdd',
   'lock',
   'mapMarker',
+  'minusInCircle',
   'node',
   'pencil',
+  'pin',
   'plusInCircle',
   'search',
   'shard',

diff --git a/src-docs/src/views/side_nav/side_nav_complicated.js b/src-docs/src/views/side_nav/side_nav_complicated.js
@@ -39,7 +39,11 @@ export default class extends Component {
         {/* Elasticsearch section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoElasticSearch" />
             </EuiFlexItem>
@@ -82,7 +86,11 @@ export default class extends Component {
         {/* Kibana section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoKibana" />
             </EuiFlexItem>
@@ -153,7 +161,11 @@ export default class extends Component {
         {/* Logstash section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoLogstash" />
             </EuiFlexItem>

diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiAccordion is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter"
+    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
@@ -18,7 +18,7 @@ exports[`EuiAccordion is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"

diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
@@ -15,6 +15,11 @@
     height: $euiButtonHeightSmall;
   }
 
+  &.euiButtonEmpty--xSmall {
+    height: $euiSizeL;
+    font-size: $euiFontSizeS;
+  }
+
   &.euiButtonEmpty--iconRight {
     .euiButtonEmpty__content {
       @include euiButtonContent($isReverse: true);

diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
@@ -18,6 +18,7 @@ const colorToClassNameMap = {
 export const COLORS = Object.keys(colorToClassNameMap);
 
 const sizeToClassNameMap = {
+  xs: 'euiButtonEmpty--xSmall',
   s: 'euiButtonEmpty--small',
   l: 'euiButtonEmpty--large',
 };

diff --git a/src/components/flex/__snapshots__/flex_group.test.js.snap b/src/components/flex/__snapshots__/flex_group.test.js.snap
@@ -3,7 +3,7 @@
 exports[`EuiFlexGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexGroup euiFlexGroup--gutterLarge testClass1 testClass2"
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
@@ -57,7 +57,7 @@
 
 
 @include screenXSmall {
-  .euiFlexGroup {
+  .euiFlexGroup--responsive {
     flex-wrap: wrap;
   }
 }
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
@@ -17,7 +17,7 @@
 
 // On mobile we force them to stack and act the same.
 @include screenXSmall {
-  .euiFlexItem {
+  .euiFlexGroup--responsive .euiFlexItem {
     width: 100% !important;
     flex-basis: 100% !important;
     margin-left: 0 !important;

diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.js
@@ -31,12 +31,15 @@ const justifyContentToClassNameMap = {
 
 export const JUSTIFY_CONTENTS = Object.keys(justifyContentToClassNameMap);
 
-export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, justifyContent, ...rest }) => {
+export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, responsive, justifyContent, ...rest }) => {
   const classes = classNames(
     'euiFlexGroup',
     gutterSizeToClassNameMap[gutterSize],
     alignItemsToClassNameMap[alignItems],
     justifyContentToClassNameMap[justifyContent],
+    {
+      'euiFlexGroup--responsive': responsive,
+    },
     className
   );
 
@@ -53,6 +56,7 @@ export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, just
 EuiFlexGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  responsive: PropTypes.bool,
   gutterSize: PropTypes.oneOf(GUTTER_SIZES),
   alignItems: PropTypes.oneOf(ALIGN_ITEMS),
   justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS),
@@ -61,5 +65,6 @@ EuiFlexGroup.propTypes = {
 EuiFlexGroup.defaultProps = {
   gutterSize: 'l',
   alignItems: 'stretch',
+  responsive: true,
   justifyContent: 'flexStart',
 };
diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
@@ -32,7 +32,7 @@ exports[`EuiHeaderAlert is rendered 1`] = `
     class="euiHeaderAlert__text"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"

diff --git a/src/components/horizontal_rule/_horizontal_rule.scss b/src/components/horizontal_rule/_horizontal_rule.scss
@@ -21,8 +21,9 @@
 }
 
 $ruleMargins: (
-  marginSmall: $euiSizeS,
-  marginMedium: $euiSizeM,
+  marginXSmall: $euiSizeS,
+  marginSmall: $euiSizeM,
+  marginMedium: $euiSize,
   marginLarge: $euiSizeL,
   marginXLarge: $euiSizeXL,
   marginXXLarge: $euiSizeXXL,