@patternfly/patternfly 4.198.0 → 4.199.0

package/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...) {

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

package/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",