feat(global/page): adds height breakpoints for sticky top and bottom …

…modifiers (#4905)
patternfly · Jun 17, 2022 · e1ce9f1 · e1ce9f1
1 parent 4d53d62
commit e1ce9f1
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 24 deletions.
diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss
@@ -198,6 +198,13 @@
   --pf-global--breakpoint--xl: #{$pf-global--breakpoint--xl};
   --pf-global--breakpoint--2xl: #{$pf-global--breakpoint--2xl};
 
+  // Vertical breakpoints
+  --pf-global--height-breakpoint--sm: #{$pf-global--height-breakpoint--sm};
+  --pf-global--height-breakpoint--md: #{$pf-global--height-breakpoint--md};
+  --pf-global--height-breakpoint--lg: #{$pf-global--height-breakpoint--lg};
+  --pf-global--height-breakpoint--xl: #{$pf-global--height-breakpoint--xl};
+  --pf-global--height-breakpoint--2xl: #{$pf-global--height-breakpoint--2xl};
+
   // Links
   --pf-global--link--Color: #{$pf-global--link--Color};
   --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};

diff --git a/src/patternfly/components/Page/examples/Page.md b/src/patternfly/components/Page/examples/Page.md
@@ -260,8 +260,8 @@ This component provides the basic chrome for a page, including sidebar, header,
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
 | `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
-| `.pf-m-sticky-top` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container. |
-| `.pf-m-sticky-bottom` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container. |
+| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
+| `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
 | `.pf-m-shadow-bottom` | `.pf-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
 | `.pf-m-shadow-top` | `.pf-c-page__main-*` | Modifies a section/group to have a top shadow. |
 | `.pf-m-overflow-scroll` | `.pf-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |
diff --git a/src/patternfly/components/Page/page.scss b/src/patternfly/components/Page/page.scss
@@ -1,4 +1,5 @@
 $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 // URL.com/guidelines#layout
 .pf-c-page {
@@ -477,20 +478,6 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
 .pf-c-page__main-subnav {
   flex-shrink: 0;
 
-  &.pf-m-sticky-top {
-    position: sticky;
-    top: 0;
-    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
-    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
-  }
-
-  &.pf-m-sticky-bottom {
-    position: sticky;
-    bottom: 0;
-    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
-    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
-  }
-
   &.pf-m-overflow-scroll {
     position: relative;
     flex-shrink: 1;
@@ -506,6 +493,28 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
     z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
   }
+
+  // Responsive height modifiers for sticky top/bottom
+  @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
+    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+
+    @include pf-apply-height-breakpoint($breakpoint) {
+
+      &.pf-m-sticky-top#{$breakpoint-name} {
+        position: sticky;
+        top: 0;
+        z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+        box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+      }
+
+      &.pf-m-sticky-bottom#{$breakpoint-name} {
+        position: sticky;
+        bottom: 0;
+        z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+        box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+      }
+    }
+  }
 }
 
 // Main & Drawer

diff --git a/src/patternfly/demos/Page/examples/Page.md b/src/patternfly/demos/Page/examples/Page.md
@@ -30,6 +30,15 @@ wrapperTag: div
 }}
 ```
 
+### Sticky breadcrumb on medium
+```hbs isFullscreen isBeta
+{{> page-template
+      page-template--id="page-demo-sticky-top-breadcrumb"
+      page-template-gallery--IsLongGallery="true"
+      page-template-breadcrumb--modifier="pf-m-sticky-top-on-md-height"
+}}
+```
+
 ### Sticky section group
 ```hbs isFullscreen
 {{> page-template

diff --git a/src/patternfly/sass-utilities/functions.scss b/src/patternfly/sass-utilities/functions.scss
@@ -21,13 +21,20 @@
   @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$viewBox} 512'%3E%3Cpath fill='%23#{$color}' d='#{$svg-coordinates}'/%3E%3C/svg%3E");
 }
 
-// Return breakpoint value if it exists
+// Return (width) breakpoint value if it exists
 @function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-global--breakpoint-name-map) {
   $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);
 
   @return #{$breakpoint-value};
 }
 
+// Return height breakpoint value if it exists
+@function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-global--height-breakpoint-name-map) {
+  $height-breakpoint-value: if(map-has-key($height-breakpoint-map, #{$height-breakpoint}), map-get($height-breakpoint-map, #{$height-breakpoint}), false);
+
+  @return #{$height-breakpoint-value};
+}
+
 // Build breakpoint map
 // Based on $pf-global--breakpoint-name-map
 @function build-breakpoint-map($map-items...) {
@@ -57,6 +64,35 @@
   @return $map;
 }
 
+// Build height breakpoint map
+// Based on $pf-global--height-breakpoint-name-map
+@function build-height-breakpoint-map($map-items...) {
+  $map: ();
+
+  @if length($map-items) == 0 {
+    $map: ("base": null);
+    $map: map-merge($map, $pf-global--height-breakpoint-name-map);
+  }
+
+  @else {
+    @each $breakpoint in $map-items {
+      @if not map-has-key($pf-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
+        $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
+      }
+
+      @else if $breakpoint == "base" {
+        $map: map-merge($map, ($breakpoint: null));
+      }
+
+      @else {
+        $map: map-merge($map, ($breakpoint: map-get($pf-global--height-breakpoint-name-map, #{$breakpoint})));
+      }
+    }
+  }
+
+  @return $map;
+}
+
 // Build spacer map
 // Based on $pf-global--spacer-map
 @function build-spacer-map($map-items...) {

diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss
@@ -35,6 +35,43 @@
   }
 }
 
+// Media query used to create responsive classes
+@mixin pf-height-media-query($point) {
+  @if $point == "" or not $point or $point == "base" {
+    @content;
+  }
+
+  @else if $point == "sm" {
+    @media screen and (min-height: $pf-global--height-breakpoint--sm) {
+      @content;
+    }
+  }
+
+  @else if $point == "md" {
+    @media screen and (min-height: $pf-global--height-breakpoint--md) {
+      @content;
+    }
+  }
+
+  @else if $point == "lg" {
+    @media screen and (min-height: $pf-global--height-breakpoint--lg) {
+      @content;
+    }
+  }
+
+  @else if $point == "xl" {
+    @media screen and (min-height: $pf-global--height-breakpoint--xl) {
+      @content;
+    }
+  }
+
+  @else if $point == "2xl" {
+    @media screen and (min-height: $pf-global--height-breakpoint--2xl) {
+      @content;
+    }
+  }
+}
+
 // Create single prop / value classes, optionally add responsive suffix
 // @group mixins
 // @moduleType mixin
@@ -53,13 +90,14 @@
 
 // non-responsive, base only                @include pf-utility-builder($sass-map)
 // responsive, including all breakpoints    @include pf-utility-builder($sass-map, $pf-global--breakpoint-list)
+// responsive height breakpoints            @include pf-utility-builder($sass-map, $pf-global--height-breakpoint-list, 'height')
 
 // ## Passing individual utilities values
 // ===============================================================================================
 // Example individual utility:
 // @include pf-utility-builder(flex-fill flex "1 1 auto", $pf-global--breakpoint-list);
 
-@mixin pf-utility-builder($props, $breakpoints: null) {
+@mixin pf-utility-builder($props, $breakpoints: null, $direction: "width") {
   // if $class-name is a map
 
   // stylelint-disable
@@ -78,13 +116,27 @@
       @each $breakpoint in $breakpoints {
         $suffix: -on-#{$breakpoint};
 
-        @include pf-media-query($breakpoint) {
-          @each $class, $val in $props {
-            $property: nth($val, 1);
-            $value: #{nth($val, 2) !important};
+        @if $direction == 'height' {
+          @include pf-height-media-query($breakpoint) {
+            @each $class, $val in $props {
+              $property: nth($val, 1);
+              $value: #{nth($val, 2) !important};
+
+              .pf-u-#{$class}#{$suffix}-height {
+                #{$property}: #{$value};
+              }
+            }
+          }
+        }
+        @else if $direction == 'width' {
+          @include pf-media-query($breakpoint) {
+            @each $class, $val in $props {
+              $property: nth($val, 1);
+              $value: #{nth($val, 2) !important};
 
-            .pf-u-#{$class}#{$suffix} {
-              #{$property}: #{$value};
+              .pf-u-#{$class}#{$suffix} {
+                #{$property}: #{$value};
+              }
             }
           }
         }
@@ -114,6 +166,7 @@
     }
   }
 }
+
 // stylelint-enable
 
 @mixin pf-u-screen-reader {
@@ -198,6 +251,21 @@
   }
 }
 
+// Apply height media query if value is passed
+@mixin pf-apply-height-breakpoint($breakpoint) {
+  @if ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
+    @content;
+  }
+
+  @else {
+    $breakpoint: pf-height-breakpoint-value($breakpoint);
+
+    @media (min-height: $breakpoint) {
+      @content;
+    }
+  }
+}
+
 @mixin pf-emit-properties($map) {
   @each $prop, $value in $map {
     #{$value}: #{$prop};

diff --git a/src/patternfly/sass-utilities/scss-variables.scss b/src/patternfly/sass-utilities/scss-variables.scss
@@ -167,6 +167,13 @@ $pf-global--breakpoint--lg: 992px !default;
 $pf-global--breakpoint--xl: 1200px !default;
 $pf-global--breakpoint--2xl: 1450px !default;
 
+// Height breakpoints
+$pf-global--height-breakpoint--sm: 0 !default;
+$pf-global--height-breakpoint--md: 40rem !default; // 640px
+$pf-global--height-breakpoint--lg: 48rem !default; // 768px
+$pf-global--height-breakpoint--xl: 60rem !default; // 960px
+$pf-global--height-breakpoint--2xl: 80rem !default; // 1280px
+
 // Borders
 $pf-global--BorderWidth--sm:     1px !default;
 $pf-global--BorderWidth--md:     2px !default;
@@ -285,6 +292,15 @@ $pf-global--breakpoint-name-map: (
   "2xl": $pf-global--breakpoint--2xl
 );
 
+// Global breakpoint name map - used for %pf-hidden-visible
+$pf-global--height-breakpoint-name-map: (
+  "sm": $pf-global--height-breakpoint--sm,
+  "md": $pf-global--height-breakpoint--md,
+  "lg": $pf-global--height-breakpoint--lg,
+  "xl": $pf-global--height-breakpoint--xl,
+  "2xl": $pf-global--height-breakpoint--2xl
+);
+
 // Spacer properties
 $pf-global--spacer-properties-map: (
   "m":  "margin",