@patternfly/patternfly 6.5.0-prerelease.9 → 6.5.0-prerelease.90

package/sass-utilities/functions.scss

@@ -3,10 +3,13 @@
 @use '../sass-utilities/scss-variables' as *;
 @use '../sass-utilities/init' as *;
 @use 'sass:math';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
 
 // Transform px to rems
 @function pf-strip-unit($num) {
-  @if type-of($num) == 'number' and not unitless($num) {
+  @if meta.type-of($num) == 'number' and not math.is-unitless($num) {
     @return math.div($num, ($num * 0 + 1));
   }
 
@@ -29,16 +32,20 @@
 
 // Return (width) breakpoint value if it exists
 @function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v6-global--breakpoint-name-map) {
-  $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);
-
-  @return #{$breakpoint-value};
+  @if map.has-key($breakpoint-map, #{$breakpoint}) {
+    @return #{map.get($breakpoint-map, #{$breakpoint})};
+  } @else {
+    @return false;
+  }
 }
 
 // Return height breakpoint value if it exists
 @function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-v6-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};
+  @if map.has-key($height-breakpoint-map, #{$height-breakpoint}) {
+    @return #{map.get($height-breakpoint-map, #{$height-breakpoint})};
+  } @else {
+    @return false;
+  }
 }
 
 // Build breakpoint map
@@ -46,17 +53,17 @@
 @function build-breakpoint-map($map-items...) {
   $map: ();
 
-  @if length($map-items) == 0 {
+  @if list.length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v6-global--breakpoint-name-map);
+    $map: map.merge($map, $pf-v6-global--breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v6-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
-        $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
+      @if not map.has-key($pf-v6-global--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));
+        $map: map.merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--breakpoint-name-map, #{$breakpoint})));
+        $map: map.merge($map, ($breakpoint: map.get($pf-v6-global--breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -69,17 +76,17 @@
 @function build-height-breakpoint-map($map-items...) {
   $map: ();
 
-  @if length($map-items) == 0 {
+  @if list.length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v6-global--height-breakpoint-name-map);
+    $map: map.merge($map, $pf-v6-global--height-breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v6-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
-        $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
+      @if not map.has-key($pf-v6-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));
+        $map: map.merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--height-breakpoint-name-map, #{$breakpoint})));
+        $map: map.merge($map, ($breakpoint: map.get($pf-v6-global--height-breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -93,17 +100,17 @@
 @function build-spacer-map($map-items...) {
   $map: ();
 
-  @if length($map-items) == 0 {
+  @if list.length($map-items) == 0 {
     $map: ("none": 0);
-    $map: map-merge($map, $pf-v6-global--spacer-map);
-    $map: map-remove($map, "auto", "0");
+    $map: map.merge($map, $pf-v6-global--spacer-map);
+    $map: map.remove($map, "auto", "0");
   }
 
   @each $spacer in $map-items {
     @if $spacer == "none" {
-      $map: map-merge($map, ($spacer: 0));
+      $map: map.merge($map, ($spacer: 0));
     } @else {
-      $map: map-merge($map, ($spacer: map-get($pf-v6-global--spacer-map, #{$spacer})));
+      $map: map.merge($map, ($spacer: map.get($pf-v6-global--spacer-map, #{$spacer})));
     }
   }
 
@@ -116,7 +123,7 @@
   $new-map: ();
 
   @each $size, $value in $map {
-    $new-map: map-merge($new-map, (map-get($map, $size): --#{$namespace}--#{$size}));
+    $new-map: map.merge($new-map, (map.get($map, $size): --#{$namespace}--#{$size}));
   }
 
   @return $new-map;

package/sass-utilities/mixins.scss

@@ -2,6 +2,8 @@
 @use '../sass-utilities/init' as *;
 @use '../sass-utilities/scss-variables' as *;
 @use '../sass-utilities/namespaces-components' as *;
+@use 'sass:list';
+@use 'sass:meta';
 
 // Media query used to create responsive classes
 @mixin pf-v6-media-query($point) {
@@ -85,10 +87,10 @@
   // if $class-name is a map
 
   // stylelint-disable
-  @if type-of($props) == map {
+  @if meta.type-of($props) == map {
     @each $class, $val in $props {
-      $property: nth($val, 1);
-      $value: #{nth($val, 2)} !important;
+      $property: list.nth($val, 1);
+      $value: #{list.nth($val, 2)} !important;
 
       .#{$pf-prefix}u-#{$class} {
         #{$property}: #{$value};
@@ -103,8 +105,8 @@
         @if $direction == 'height' {
           @include pf-v6-height-media-query($breakpoint) {
             @each $class, $val in $props {
-              $property: nth($val, 1);
-              $value: #{nth($val, 2)} !important;
+              $property: list.nth($val, 1);
+              $value: #{list.nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix}-height {
                 #{$property}: #{$value};
@@ -115,8 +117,8 @@
         @else if ($direction == 'width') {
           @include pf-v6-media-query($breakpoint) {
             @each $class, $val in $props {
-              $property: nth($val, 1);
-              $value: #{nth($val, 2)} !important;
+              $property: list.nth($val, 1);
+              $value: #{list.nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix} {
                 #{$property}: #{$value};
@@ -127,10 +129,10 @@
       }
     }
   }
-  @else if type-of($props) == list {
-    $class: nth($props, 1);
-    $property: nth($props, 2);
-    $value: nth($props, 3) !important;
+  @else if meta.type-of($props) == list {
+    $class: list.nth($props, 1);
+    $property: list.nth($props, 2);
+    $value: list.nth($props, 3) !important;
 
     .#{$pf-prefix}u-#{$class} {
       #{$property}: #{$value};
@@ -179,10 +181,10 @@
 @mixin pf-v6-line-clamp($line-clamp-val: 1) {
   // stylelint-disable
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: #{$line-clamp-val};
   // stylelint-enable
-  overflow: hidden;
 }
 
 @mixin pf-v6-overflow-hide-scroll {
@@ -194,7 +196,7 @@
   -ms-overflow-style: -ms-autohiding-scrollbar; // auto hides scrollbars in Edge
 }
 
-@mixin pf-v6-hidden-visible($val: "block") {
+@mixin pf-v6-hidden-visible($val: "block", $ifIncludeHeight: false) {
   // stylelint-disable-next-line
   --#{$pf-prefix}hidden-visible--visible--Display: #{$val};
 
@@ -216,6 +218,21 @@
     --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--hidden--Display);
   }
 
+  // only apply height breakpoints if $ifIncludeHeight is true
+  @if $ifIncludeHeight {
+    @each $size, $bp in $pf-v6-global--height-breakpoint-name-map {
+      @media screen and (min-height: $bp) {
+        &.pf-m-hidden-on-#{$size}-height {
+          --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--hidden--Display);
+        }
+
+        &.pf-m-visible-on-#{$size}-height {
+          --#{$pf-prefix}hidden-visible--Display: var(--#{$pf-prefix}hidden-visible--visible--Display);
+        }
+      }
+    }
+  }
+
   @each $size, $bp in $pf-v6-global--breakpoint-name-map {
     @media screen and (min-width: $bp) {
       &.pf-m-hidden-on-#{$size} {
@@ -305,14 +322,14 @@
 
     // Build variable list
     @if $breakpoint != "base" {
-      $list: append($list, $css-var + "-on-" + $breakpoint);
+      $list: list.append($list, $css-var + "-on-" + $breakpoint);
     } @else {
-      $list: append($list, $css-var);
+      $list: list.append($list, $css-var);
     }
 
     // Construct variable stack
     @each $list-item in $list {
-      @if length($variable-list) == 0 {
+      @if list.length($variable-list) == 0 {
         $variable-list: var(#{$list-item});
       } @else {
         $variable-list: var(#{$list-item}, $variable-list);
@@ -340,7 +357,7 @@
     // Build variable list
     // stylelint-disable scss/at-if-no-null
     @if $breakpoint-value {
-      $list: append($list, $css-var + "-on-" + $breakpoint);
+      $list: list.append($list, $css-var + "-on-" + $breakpoint);
     }
     // stylelint-enable
   }
@@ -391,7 +408,11 @@
 //   background: red;
 // }
 @mixin pf-v6-rtl($hasWhere: true) {
-  $sel: if($hasWhere,':where',':is');
+  $sel: ':is';
+
+  @if $hasWhere {
+    $sel: ':where';
+  }
 
   @at-root #{$sel}(.#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
     @content;
@@ -400,7 +421,11 @@
 
 // Used to create the LTR selector for LTR specific styles
 @mixin pf-v6-ltr($hasWhere: true) {
-  $sel: if($hasWhere,':where',':is');
+  $sel: ':is';
+
+  @if $hasWhere {
+    $sel: ':where';
+  }
 
   @at-root #{$sel}(.#{$pf-prefix}m-dir-ltr, [dir="ltr"]) #{&} {
     @content;
@@ -439,11 +464,17 @@
 
 // Declares a global inverse multiplier var used for returning the inverse of a number. Defined within blocks that reference the global var in calc() functions to conditionally return the default or inverse value of a number.
 @mixin pf-v6-set-inverse($val: true) {
-  --#{$pf-global}--inverse--multiplier: #{if($val, -1, 1)};
+  @if $val {
+    --#{$pf-global}--inverse--multiplier: -1;
+  } @else {
+    --#{$pf-global}--inverse--multiplier: 1;
+  }
 }
 
 @mixin pf-root($selector, $isClass: true) {
-  $selector: if($isClass, "." + $selector, $selector);
+  @if $isClass {
+    $selector: "." + $selector;
+  }
   #{$selector} {
     @content
   }
@@ -468,9 +499,9 @@
     // collapse
     @if $collapse {
       --#{$button}__icon--TransitionDelay: 0s;
-      --#{$button}__icon--ScaleX: 1;
+      --#{$button}__icon--ScaleX: var(--#{$button}--m-hamburger__icon--m-collapse--ScaleX);
       --#{$button}--hover__icon--TransitionDelay: 0s;
-      --#{$button}--hover__icon--ScaleX: 1;
+      --#{$button}--hover__icon--ScaleX: var(--#{$button}--m-hamburger__icon--m-collapse--ScaleX);
 
     // expand
     } @else {

package/sass-utilities/namespaces-components.scss

@@ -63,6 +63,9 @@ $code-block: #{$pf-prefix} + 'c-code-block';
 // Code Editor
 $code-editor: #{$pf-prefix} + 'c-code-editor';
 
+// Compass
+$compass: #{$pf-prefix} + 'c-compass';
+
 // Content
 $content: #{$pf-prefix} + 'c-content';
 
@@ -107,6 +110,9 @@ $form-control: #{$pf-prefix} + 'c-form-control';
 // Helper Text
 $helper-text: #{$pf-prefix} + 'c-helper-text';
 
+// Hero
+$hero: #{$pf-prefix} + 'c-hero';
+
 // Hint
 $hint: #{$pf-prefix} + 'c-hint';
 

package/sass-utilities/scss-variables.scss

@@ -41,6 +41,9 @@ $pf-v6-global--height-breakpoint--lg: 48rem !default; // 768px
 $pf-v6-global--height-breakpoint--xl: 60rem !default; // 960px
 $pf-v6-global--height-breakpoint--2xl: 80rem !default; // 1280px
 
+// Semantic breakpoints
+$pf-v6-global--breakpoint--dock--desktop: $pf-v6-global--breakpoint--lg !default;
+
 // Global breakpoint map - used for @pf-grid-item-modifiers
 $pf-v6-global--breakpoint-map: (
   "": null,