Responsive refactors and addition of helpers (#909)

CHANGELOG.md

@@ -10,6 +10,12 @@
 - Added more color options to `EuiButtonIcon` ([#907](https://github.com/elastic/eui/pull/907))
 - Added icon for EMS (Elastic Map Service) (`emsApp`) ([#914](https://github.com/elastic/eui/pull/914))
 - Added support for `href`, `target`, and `rel` properties for `EuiContextMenu` items ([#911](https://github.com/elastic/eui/pull/911))
+- Added responsive helpers in the form of `EuiShowFor` and `EuiHideFor` components and corresponding CSS classes. ([#909](https://github.com/elastic/eui/pull/909))
+
+**Deprecations**
+
+- Replaced `$breakpoints` in favor of better named `$euiBreakpoints` ([#909](https://github.com/elastic/eui/pull/909))
+- Replaced the following mixin `screenXSmall()`, `screenSmall()`, `screenMedium()`, `screenLarge()`, `screenSmallMediumLarge()` in favor of a single `euiBreakpoint()`. ([#909](https://github.com/elastic/eui/pull/909))
 
 **Bug fixes**
 

src-docs/src/components/guide_components.scss

@@ -174,7 +174,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 @import "guide_section/index";
 @import "guide_rule/index";
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
 
   .guideBody {
     background: none;

src-docs/src/routes.js

@@ -174,6 +174,9 @@ import { PortalExample }
 import { ProgressExample }
   from './views/progress/progress_example';
 
+  import { ResponsiveExample }
+    from './views/responsive/responsive_example';
+
 import { SearchBarExample }
   from './views/search_bar/search_bar_example';
 
@@ -341,6 +344,7 @@ const navigation = [{
   name: 'Utilities',
   items: [
     AccessibilityExample,
+    ResponsiveExample,
     DelayHideExample,
     ErrorBoundaryExample,
     HighlightExample,

src-docs/src/views/responsive/responsive.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+  EuiCode,
+  EuiHideFor,
+  EuiShowFor,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiHideFor sizes={['xs']}>
+      Hiding from <EuiCode>xs</EuiCode> screens only
+    </EuiHideFor>
+    <br/>
+    <EuiHideFor sizes={['xs','s']}>
+      Hiding from <EuiCode>xs, s</EuiCode> screens
+    </EuiHideFor>
+    <br/>
+    <EuiHideFor sizes={['xs','s','m', 'l']}>
+      Hiding from <EuiCode>xs, s, m, l</EuiCode> screens
+    </EuiHideFor>
+    <br/>
+    <EuiHideFor sizes={['xl']}>
+      Hiding from <EuiCode>xl</EuiCode> screens only
+    </EuiHideFor>
+
+    <br/>
+    <br/>
+
+    <EuiShowFor sizes={['xs']}>
+      Showing for <EuiCode>xs</EuiCode> screens only
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['xs','s']}>
+      Showing for <EuiCode>xs, s</EuiCode> screens
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['xs','s','m', 'l']}>
+      Showing for <EuiCode>xs, s, m, l</EuiCode> screens
+    </EuiShowFor>
+    <br/>
+    <EuiShowFor sizes={['xl']}>
+      Showing for <EuiCode>xl</EuiCode> screen only
+    </EuiShowFor>
+  </div>
+);

src-docs/src/views/responsive/responsive_example.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+import sizes from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_responsive.scss';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiShowFor,
+  EuiHideFor,
+  EuiCodeBlock,
+} from '../../../../src/components';
+
+import Responsive from './responsive';
+const responsiveSource = require('!!raw-loader!./responsive');
+const responsiveHtml = renderToHtml(Responsive);
+
+function renderSizes(size, index) {
+  let code = `'${size}': ${sizes.euiBreakpoints[size]}px`;
+
+  if (index < sizes.euiBreakpointKeys.length - 1) {
+    code += ` (to ${(sizes.euiBreakpoints[sizes.euiBreakpointKeys[index+1]] - 1)}px)`;
+  } else {
+  code += ` +`;
+  }
+
+  return (
+    <div key={index}>
+      {code}
+    </div>
+  )
+}
+
+export const ResponsiveExample = {
+  title: 'Responsive',
+  sections: [{
+    title: 'EuiShowFor and EuiHideFor',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: responsiveSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: responsiveHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Pass an array of named breakpoints to either
+          the <EuiCode>EuiShowFor</EuiCode> or <EuiCode>EuiHideFor</EuiCode> components
+          to make them responsive.
+        </p>
+
+        <p>
+          The sizing correlates with our <EuiCode>$euiBreakpoints</EuiCode> SASS map. The named
+          breakpoint starts at the pixel value provided and ends before the next one.
+        </p>
+
+        <EuiCodeBlock language="scss" paddingSize="s">
+          {sizes.euiBreakpointKeys.map(function (size, index) {
+            return renderSizes(size, index);
+          })}
+        </EuiCodeBlock>
+      </div>
+    ),
+    props: { EuiShowFor, EuiHideFor },
+    demo: <Responsive />,
+  }],
+};

src-docs/src/views/utility_classes/utility_classes.js

@@ -93,5 +93,30 @@ export default () => (
 
     <EuiCode className="eui-displayInlineBlock">.eui-displayInlineBlock</EuiCode>
 
+    <h4>Responsive</h4>
+
+    <EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-hideFor--s">.eui-hideFor--s</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-hideFor--m">.eui-hideFor--m</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-hideFor--l">.eui-hideFor--l</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-hideFor--xl">.eui-hideFor--xl</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-showFor--xs">.eui-showFor--xs</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-showFor--s">.eui-showFor--s</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-showFor--m">.eui-showFor--m</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-showFor--l">.eui-showFor--l</EuiCode>
+    <EuiSpacer />
+    <EuiCode className="eui-showFor--xl">.eui-showFor--xl</EuiCode>
+
+
   </EuiText>
 );

src/components/breadcrumbs/_breadcrumbs.scss

@@ -30,7 +30,7 @@
 
 .euiBreadcrumbs--responsive {
   // Laptop
-  @include screenMedium {
+  @include euiBreakpoint('l') {
     .euiBreadcrumbSeparator,
     .euiBreadcrumb {
       display: none;
@@ -43,7 +43,7 @@
   }
 
   // Tablets
-  @include screenSmall {
+  @include euiBreakpoint('m') {
     .euiBreadcrumbSeparator,
     .euiBreadcrumb {
       display: none;
@@ -56,7 +56,7 @@
   }
 
   // Mobile
-  @include screenXSmall {
+  @include euiBreakpoint('xs','s') {
     .euiBreadcrumbSeparator,
     .euiBreadcrumb {
       display: none;

src/components/button/button_group/_button_group.scss

@@ -60,7 +60,7 @@
     border-bottom-right-radius: $euiBorderRadius;
   }
 
-  @include screenXSmall(){
+  @include euiBreakpoint('xs','s'){
     flex: 1;
     min-width: 0;
 

src/components/date_picker/_date_picker.scss

@@ -586,7 +586,7 @@
 }
 
 // We drop the time picker on mobile. They can still type in the time directly.
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .react-datepicker__time-container {
     display: none;
   }

src/components/flex/_flex_group.scss

@@ -96,7 +96,7 @@ $gutterTypes: (
   flex-wrap: wrap;
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiFlexGroup--responsive {
     flex-wrap: wrap;
     margin-left: 0;

src/components/flex/_flex_item.scss

@@ -22,7 +22,7 @@
 }
 
 // On mobile we force them to stack and act the same.
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiFlexGroup--responsive > .euiFlexItem,
   .euiFlexGrid > .euiFlexItem {
     width: 100% !important;

src/components/flyout/_flyout.scss

@@ -21,15 +21,15 @@ $euiFlyoutBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // m
  */
 $flyoutSizes: (
   "small": (
-    min: map-get($breakpoints, "small") * .5, /* 1 */
+    min: map-get($euiBreakpoints, "m") * .5, /* 1 */
     width: 25vw
   ),
   "medium": (
-    min:  map-get($breakpoints, "small") * .7, /* 1 */
+    min:  map-get($euiBreakpoints, "m") * .7, /* 1 */
     width: 50vw
   ),
   "large": (
-    min:  map-get($breakpoints, "small") * .9, /* 1 */
+    min:  map-get($euiBreakpoints, "m") * .9, /* 1 */
     width: 75vw
   )
 );
@@ -52,7 +52,7 @@ $flyoutSizes: (
   }
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiFlyout:not(.euiFlyout--small) {  /* 2 */
     left: 0;
     min-width: 0;

src/components/form/described_form_group/_described_form_group.scss

@@ -39,7 +39,7 @@
     }
   }
 
-  @include screenXSmall {
+  @include euiBreakpoint('xs','s') {
     .euiDescribedFormGroup__fields {
       padding-top: 0;
 

src/components/header/_header_logo.scss

@@ -28,7 +28,7 @@
     padding-left: $euiSize;
     font-weight: $euiFontWeightLight;
 
-    @include screenXSmall() {
+    @include euiBreakpoint('xs','s') {
       @include euiTitle("xxs");
       font-weight: $euiFontWeightLight;
     }

src/components/header/header_links/_header_links.scss

@@ -11,7 +11,7 @@
   white-space: nowrap;
   overflow: hidden;
 
-  @include screenXSmall(){
+  @include euiBreakpoint('xs','s'){
     display: none;
   }
 }
@@ -21,7 +21,7 @@
   position: absolute !important; // override popover relative
   right: 0;
 
-  @include screenXSmall(){
+  @include euiBreakpoint('xs','s'){
     display: block !important;
   }
 }

src/components/index.js

@@ -307,3 +307,9 @@ export {
   EuiIconTip,
   EuiToolTip,
 } from './tool_tip';
+
+export {
+  EuiHideFor,
+  EuiShowFor,
+} from './responsive';
+

src/components/modal/_modal.scss

@@ -84,7 +84,7 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
 }
 
 // On mobile we fix modals as a takeover.
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiModal {
     position: fixed;
     width: calc(100vw + 2px);

src/components/page/page_body/_page_body.scss

@@ -5,7 +5,7 @@
   min-height: 400px; // Temporary till we have a better doc system.
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiPageBody {
     flex-direction: column;
   }

src/components/page/page_content/_page_content.scss

@@ -13,7 +13,7 @@
 }
 
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiPageContent {
     border-radius: 0;
     border: none;

src/components/page/page_content/_page_content_header.scss

@@ -6,7 +6,7 @@
   align-items: center;
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiPageContentHeader {
     flex-direction: column;
   }

src/components/page/page_content/_page_content_header_section.scss

@@ -5,7 +5,7 @@
   }
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
 
   .euiPageContentHeaderSection {
     width: 100%;

src/components/page/page_header/_page_header.scss

@@ -6,7 +6,7 @@
   align-items: center;
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiPageHeader {
     flex-direction: column;
     padding: 0 $euiSize;

src/components/page/page_header/_page_header_section.scss

@@ -4,7 +4,7 @@
     margin-left: $euiSizeXL;
   }
 }
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
 
   .euiPageHeaderSection {
     width: 100%;

src/components/page/page_side_bar/_page_side_bar.scss

@@ -7,7 +7,7 @@
   margin-right: $euiSizeL;
 }
 
-@include screenXSmall {
+@include euiBreakpoint('xs','s') {
   .euiPageSideBar {
     width: 100%;
   }