playbook_ui 12.22.0 → 12.23.0.pre.alpha.play698responsivespacingglobalprop701

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4bbbcbbc5dcde74cb026a9f2b5d510c6362f2654c8c06885b25881598603b1b4
-  data.tar.gz: 5f7fa24b05cee92ce96deab0f358fe0bfbc0909753555b7d13179423d13d26cc
+  metadata.gz: b91dd130cd55fd9c676be19f84344322da9a00d41aae523639d3665771e1d83d
+  data.tar.gz: ea17401df5700535fc82dedd94af7af26e1645da49793a3a4ea4bb40964e8243
 SHA512:
-  metadata.gz: 9532f359c1aa5bd18300c006a1e9cb97d80377fa4616354c38087b5725e399f3296c179862789c48d04dc34506ffc31a07a3c9a0e9f24498f33e1d98c31ca535
-  data.tar.gz: 86612e31acd71f850bb381a30cf6e044ebf502d4e4be657bfab6bde5bd1a0bf3ebc10106c2e3e4c36c708bf1b4500d4ef701f58f0f9835bbfe566d8ccb269b51
+  metadata.gz: 6645923822abde8e36493c0bf266431ca51a6c1c86de9b98a1579b3d3ab149c89795398f04952e9aa0615cedbd91fc60037dc1d39811cccb70a3a9442aaf65d8
+  data.tar.gz: 8e7e9400daa0f600b2ca07fe4a19f05098dfc7c9e433c67dee9fbdb436e08485fa780496bda1c91049079575d27ae92e40d0fcf0ee87e372dcf98c73e16ffb5a

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -27,7 +27,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
             color="light"
             paddingLeft="xs"
             size={4}
-            tag="h4"
+            tag="span"
             text="No Filter Selected"
         />
       </div>

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -9,22 +9,23 @@
           <div class="maskContainer">
             <div class="filters">
               <div class="left_gradient"></div>
-              <% object.filters.each do |filter| %>
-                <% if filter[:name] == "" %>
-                  <div>
-                    <%= pb_rails("body", props: {
-                      color: "light",
-                      padding_left: "xs",
-                      size: 4,
-                      tag:"h4",
-                      text: "No Filter Selected"
-                    }) %>
-                  </div>
-                <% else %>
-                <div class="filter">
-                  <%= pb_rails("caption", props: { text: filter[:name]}) %>
-                  <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+              <% if object.filters&.none? { |filter| filter[:name].present? } %>
+                <div>
+                  <%= pb_rails("body", props: {
+                    color: "light",
+                    padding_left: "xs",
+                    size: 4,
+                    tag:"span",
+                    text: "No Filter Selected"
+                  }) %>
                 </div>
+              <% end %>
+              <% object.filters&.each do |filter| %>
+                <% if filter[:name].present? %>
+                  <div class="filter">
+                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                  </div>
                 <% end %>
               <% end %>
               <div class="right_gradient"></div>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -2,8 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
 
-
-[class^=pb_text_input_kit] {
+[class^="pb_text_input_kit"] {
   margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
@@ -22,8 +21,8 @@
       overflow: hidden;
     }
     input:hover,
-    .text_input:hover{
-      background-color: rgba($focus_input_light,$opacity_5);
+    .text_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
     }
     input:focus,
     .text_input:focus,
@@ -32,7 +31,7 @@
       @include pb_textarea_focus;
       @include transition_default;
       border-color: $primary;
-      background-color: rgba($focus_input_light,$opacity_5);
+      background-color: rgba($focus_input_light, $opacity_5);
     }
   }
   &.dark {
@@ -52,15 +51,16 @@
       .text_input .placeholder {
         @include pb_body_light_dark;
       }
-      input, .text_input {
+      input,
+      .text_input {
         @include pb_textarea_dark;
         @include pb_body_dark;
         overflow: hidden;
-        background-color: rgba($white,$opacity_1);
+        background-color: rgba($white, $opacity_1);
         border-color: rgba($white, 0.15);
       }
       input:hover,
-      .text_input:hover{
+      .text_input:hover {
         background-color: rgba($white, 0.15);
       }
       input:focus,
@@ -73,7 +73,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input, .text_input {
+        input,
+        .text_input {
           border-color: $error_dark;
         }
       }
@@ -81,10 +82,11 @@
   }
   &.error {
     .text_input_wrapper {
-      [class*=pb_body_kit] {
+      [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input, .text_input {
+      input,
+      .text_input {
         border-color: $error;
       }
     }
@@ -151,90 +153,92 @@
       }
     }
   }
-}
 
-.text_input_wrapper_add_on {
-  & > [class^=pb_text_input_kit]:not(:last-child) {
-    .text_input_wrapper_add_on input, [class^=pb_text_input_kit] .text_input_wrapper_add_on .text_input {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-right-width: 0;
+  .text_input_wrapper_add_on {
+    & > [class^="pb_text_input_kit"]:not(:last-child) {
+      .text_input_wrapper_add_on input,
+      [class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right-width: 0;
+      }
+    }
+    .section-separator span {
+      padding: 0;
     }
-  }
-  .section-separator span {
-    padding: 0;
-  }
 
-  .add-on {
-    &-card {
-      height: 45px;
-      margin: 0;
-      padding: 0 !important;
-      align-items: center;
-      justify-content: center;
-      width: 45px;
-    }
-    &-icon {
-      color: $text_lt_lighter;
-    }
-    &-card-dark {
-      background-color: $bg-dark;
-    }
-    &-left {
-      .text_input {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+    .add-on {
+      &-card {
+        height: 45px;
+        margin: 0;
+        padding: 0 !important;
+        align-items: center;
+        justify-content: center;
+        width: 45px;
+      }
+      &-icon {
+        color: $text_lt_lighter;
+      }
+      &-card-dark {
+        background-color: rgba($white, $opacity_1);
+        border-color: rgba($white, 0.15);
+      }
+      &-left {
+        .text_input {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
       }
-    }
 
-    &-right {
-      .text_input{
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+      &-right {
+        .text_input {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
       }
     }
-  }
-  .text_input:focus ~ .add-on-card-dark {
-    background-color: $focus_input_dark;
-    border-width: 0px;
-  }
-  .card-left-aligned {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .card-right-aligned {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+    .text_input:focus ~ .add-on-card-dark {
+      background-color: $focus_input_dark;
+      border-width: 0px;
+    }
+    .card-left-aligned {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-  .border {
-    &_right_off {
-      .card-left-aligned {
-        border-right: 0;
-      }
-      .text_input {
-        border-left: 0;
-        padding-left: 16px;
-      }
+    .card-right-aligned {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    &_left_on {
-      .card-right-aligned {
-        border-left: 0;
+
+    .border {
+      &_right_off {
+        .card-left-aligned {
+          border-right: 0;
+        }
+        .text_input {
+          border-left: 0;
+          padding-left: 16px;
+        }
       }
-    }
-    &_right_on {
-      .card-left-aligned {
-        border-right: 0;
+      &_left_on {
+        .card-right-aligned {
+          border-left: 0;
+        }
       }
-    }
-    &_left_off {
-      .card-right-aligned {
-        border-left: 0;
+      &_right_on {
+        .card-left-aligned {
+          border-right: 0;
+        }
       }
-      .text_input {
-        border-right: 0;
-        padding-right: 0;
+      &_left_off {
+        .card-right-aligned {
+          border-left: 0;
+        }
+        .text_input {
+          border-right: 0;
+          padding-right: 0;
+        }
       }
     }
   }

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -38,6 +38,35 @@ $breakpoints_grid: (
     )
 );
 
+$breakpoints_max_only: (
+    xl: (
+        max: $screen-xl-max
+    ),
+    lg: (
+        max: $screen-lg-max
+    ),
+    md: (
+        max: $screen-md-max
+    ),
+    sm: (
+        max: $screen-sm-max
+    ),
+    xs: (
+        max: $screen-xs-max,
+    )
+);
+
+@mixin break_test($min: null, $max: null) {
+  @if not $max {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+} @else {
+    @media screen and (max-width: $max) {
+    @content;}
+  }
+}
+
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
 }

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -7,7 +7,10 @@ $space_classes: (
 	md: $space_md,
 	lg: $space_lg,
 	xl: $space_xl,
-	none: 0
+	none: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
 );
 
 $positions: (
@@ -41,3 +44,26 @@ $positions: (
 		}
 	}
 }
+
+@each $size, $size_value in $breakpoints_max_only {
+  @each $position_name, $position in $positions {
+    @each $space_name, $space in $space_classes {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .#{$position_name}_#{$size}_#{$space_name} {
+          @if type-of($position)=="list" {
+            @each $coordinate in $position {
+              @include break_at( $max_size) {
+              #{$coordinate}: #{$space} !important;
+              }
+            }
+          }
+          @else {
+            @include break_at( $max_size) {
+              #{$position}: #{$space} !important;
+            }
+          }
+        }
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -22,7 +22,7 @@ type AlignItems = {
 type AlignSelf = {
   alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
-type AllSizes = None | Sizes
+type AllSizes = None | Sizes | "auto" | "initial" | "inherit"
 
 type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     padding,
   }: Margin & Padding) => {
     let css = ''
-    css += marginRight ? `mr_${marginRight} ` : ''
-    css += marginLeft ? `ml_${marginLeft} ` : ''
-    css += marginTop ? `mt_${marginTop} ` : ''
-    css += marginBottom ? `mb_${marginBottom} ` : ''
-    css += marginX ? `mx_${marginX} ` : ''
-    css += marginY ? `my_${marginY} ` : ''
-    css += margin ? `m_${margin} ` : ''
-    css += paddingRight ? `pr_${paddingRight} ` : ''
-    css += paddingLeft ? `pl_${paddingLeft} ` : ''
-    css += paddingTop ? `pt_${paddingTop} ` : ''
-    css += paddingBottom ? `pb_${paddingBottom} ` : ''
-    css += paddingX ? `px_${paddingX} ` : ''
-    css += paddingY ? `py_${paddingY} ` : ''
-    css += padding ? `p_${padding} ` : ''
-    return css
+    const spacingProps = {
+      marginRight,
+      marginLeft,
+      marginTop,
+      marginBottom,
+      marginX,
+      marginY,
+      margin,
+      paddingRight,
+      paddingLeft,
+      paddingTop,
+      paddingBottom,
+      paddingX,
+      paddingY,
+      padding,
+    };
+
+    function handleObjectValue(properties: Margin | Padding, prefix: string) {
+      let classResult = '';
+
+      Object.entries(properties).forEach(([key, value]) => {
+        classResult += `${prefix}_${key}_${value} `;
+      });
+
+      return classResult;
+    }
+
+    function getPrefix(key: string) {
+      const prefixes: Record<string, string> = {
+        marginRight: 'mr',
+        marginLeft: 'ml',
+        marginTop: 'mt',
+        marginBottom: 'mb',
+        marginX: 'mx',
+        marginY: 'my',
+        margin: 'm',
+        paddingRight: 'pr',
+        paddingLeft: 'pl',
+        paddingTop: 'pt',
+        paddingBottom: 'pb',
+        paddingX: 'px',
+        paddingY: 'py',
+        padding: 'p',
+      };
+
+      return prefixes[key];
+    }
+
+    Object.entries(spacingProps).forEach(([key, value]) => {
+      if (value) {
+        if (typeof value === 'object') {
+          css += handleObjectValue(value, getPrefix(key));
+        } else {
+          const prefix = getPrefix(key);
+          css += `${prefix}_${value} `;
+        }
+      }
+    });
+    return css.trim();
   },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''

data/lib/playbook/spacing.rb

@@ -50,17 +50,32 @@ module Playbook
     end
 
     def spacing_values
-      %w[none xxs xs sm md lg xl]
+      %w[none xxs xs sm md lg xl auto initial inherit]
+    end
+
+    def screen_size_values
+      %w[xs sm md lg xl]
     end
 
     def spacing_props
       selected_props = spacing_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
-      selected_props.map do |k|
-        spacing_value = send(k)
-        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
+      css = ""
+      selected_props.each do |prop|
+        spacing_value = send(prop)
+        prefix = spacing_options[prop]
+        if responsive
+          spacing_value.each do |key, value|
+            css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
+          end
+        elsif spacing_values.include?(spacing_value)
+          css += "#{prefix}_#{spacing_value} "
+        end
+      end
+
+      css.strip unless css.blank?
     end
 
     def max_width_props

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.21.0"
-  VERSION = "12.22.0"
+  PREVIOUS_VERSION = "12.23.0"
+  VERSION = "12.23.0.pre.alpha.play698responsivespacingglobalprop701"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.22.0
+  version: 12.23.0.pre.alpha.play698responsivespacingglobalprop701
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-18 00:00:00.000000000 Z
+date: 2023-05-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2491,7 +2491,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2502,12 +2502,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []