@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

package/components/Divider/divider.scss

@@ -1,98 +1,80 @@
 // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
+// * Divider horizontal
 @mixin pf-v5-c-divider--m-horizontal {
-  --#{$divider}--Display: var(--#{$divider}--m-horizontal--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-horizontal--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-horizontal--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-horizontal--after--Height);
-
-  width: 100%; // update to var breaking change
-  height: auto; // update to var breaking change
-
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--after--FlexBasis) - calc(var(--#{$divider}--after--Inset) * 2)
-      ); // update at breaking change
-  }
+  flex-direction: row;
+  width: 100%;
+  height: var(--#{$divider}--Size);  // apply size to height in horizontal orientation
 }
 
+// * Divider vertical
 @mixin pf-v5-c-divider--m-vertical {
-  --#{$divider}--Display: var(--#{$divider}--m-vertical--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-vertical--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-vertical--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-vertical--after--Height);
+  flex-direction: column;
+  width: var(--#{$divider}--Size); // apply size to width in vertical orientation
+  height: 100%;
+}
 
-  width: auto; // update to var breaking change
-  height: inherit; // update to var at breaking change
+:root,
+:where(.#{$divider}) {
+  // * Divider
+  --#{$divider}--Display: flex;
+  --#{$divider}--Color: var(--pf-t--global--border--color--default);
+  --#{$divider}--Size: var(--pf-t--global--border--width--divider--default);
 
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--m-vertical--after--FlexBasis) - var(--#{$divider}--after--Inset)
-      ); // update at breaking change
-  }
+  // * Divider before
+  --#{$divider}--before--FlexBasis: 100%;
 }
 
+// - Divider
 .#{$divider} {
-  // Base
-  --#{$divider}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$divider}--BorderColor--base: var(--#{$divider}--BackgroundColor); // update at breaking change
-  --#{$divider}--Height: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-  --#{$divider}--BackgroundColor: var(--#{$pf-global}--BorderColor--100); // remove at breaking change
-  --#{$divider}--after--BackgroundColor: var(--#{$divider}--BorderColor--base); // remove at breaking change
-
-  // Borders
-  --#{$divider}--after--FlexBasis: 100%;
-  --#{$divider}--after--Inset: 0%;
-
-  // Vertical
-  --#{$divider}--m-vertical--after--FlexBasis: 100%; // remove at breaking change
-
-  // Horizontal mixin
-  --#{$divider}--m-horizontal--Display: flex;
-  --#{$divider}--m-horizontal--FlexDirection: row;
-  --#{$divider}--m-horizontal--after--Height: var(--#{$divider}--Height); // update at breaking change
-  --#{$divider}--m-horizontal--after--Width: auto;
-
-  // Vertical mixin
-  --#{$divider}--m-vertical--Display: inline-flex;
-  --#{$divider}--m-vertical--FlexDirection: column;
-  --#{$divider}--m-vertical--after--Height: auto;
-  --#{$divider}--m-vertical--after--Width: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-
-  // Vertical
+  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
   @include pf-v5-hidden-visible(var(--#{$divider}--Display));
-  @include pf-v5-c-divider--m-horizontal; // set to default to horizontal
 
-  flex-direction: var(--#{$divider}--FlexDirection);
-  flex-shrink: 0;
-  align-items: center;
-  align-self: stretch;
+  align-items: stretch;
   justify-content: center;
   border: 0; // removes the default border styling on an hr
 
-  &::after {
-    align-self: stretch;
-    justify-self: center;
-    width: var(--#{$divider}--after--Width);
-    height: var(--#{$divider}--after--Height);
+  // - Divider before
+  &::before {
+    flex-basis: var(--#{$divider}--before--FlexBasis);
     content: "";
-    background-color: var(--#{$divider}--after--BackgroundColor);
+    background-color: var(--#{$divider}--Color);
   }
 
-  // stylelint-disable max-nesting-depth
+  // - Divider horizontal
+  &.pf-m-horizontal {
+    @include pf-v5-c-divider--m-horizontal;
+  }
+
+  // - Divider vertical
+  &.pf-m-vertical {
+    @include pf-v5-c-divider--m-vertical;
+  }
 
+  // - Divider spacer insets
+  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+    @if $spacer == none {
+      $spacer-value: 0%;
+    }
+
+    &.pf-m-inset-#{$spacer} {
+      --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+    }
+  }
+}
+
+// TODO: move this loop to separate file for resize observer implementation
+// TODO: make responsive values opt in/out
+// stylelint-disable
+.#{$divider} {
   @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: '-on-' + #{$breakpoint};
 
-    @if $breakpoint != "base" {
-      @include pf-v5-apply-breakpoint($breakpoint) {
-        &.pf-m-horizontal#{$breakpoint-name} {
-          @include pf-v5-c-divider--m-horizontal;
-        }
+    @include pf-v5-apply-breakpoint($breakpoint) {
+      &.pf-m-horizontal#{$breakpoint-name} {
+        @include pf-v5-c-divider--m-horizontal;
       }
     }
 
@@ -104,16 +86,15 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
     @include pf-v5-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
-        @if $spacer == none {
-          $spacer-value: 0%;
-        }
-
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
-          --#{$divider}--after--Inset: #{$spacer-value};
+          @if $spacer == none {
+            --#{$divider}--before--FlexBasis: 100%;
+          } @else {
+            --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+          }
         }
       }
     }
   }
-
-  // stylelint-enable
 }
+// stylelint-enable

package/components/Form/form.css

@@ -247,6 +247,9 @@
   max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
 }
 
+.pf-v5-c-form__group {
+  min-width: 0;
+}
 .pf-v5-c-form__group.pf-m-action {
   margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
   overflow: hidden;
@@ -335,6 +338,9 @@
   --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
 }
 
+.pf-v5-c-form__group-control {
+  min-width: 0;
+}
 .pf-v5-c-form__group-control.pf-m-inline {
   display: flex;
   flex-flow: row wrap;

package/components/Form/form.scss

@@ -221,6 +221,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group {
+  min-width: 0;
+
   &.pf-m-action {
     margin-block-start: var(--#{$form}__group--m-action--MarginTop);
     overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
@@ -320,8 +322,9 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-
 .#{$form}__group-control {
+  min-width: 0;
+
   &.pf-m-inline {
     display: flex;
     flex-flow: row wrap;