playbook_ui 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686 → 12.22.0.pre.alpha.play698responsivespacingglobalprop690

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '050709c25af1935687c3472973acb4fe9e7b3e811a0edcf35fb4f01c3d27193c'
-  data.tar.gz: dc4f357e487599331949afd8e95e4ce80285c5223c21cb67c5072af31840bd9d
+  metadata.gz: 383851d079d36f1d554a0e282c498a4fc6847f4b5454e7235949dac02a03d72b
+  data.tar.gz: a16155b3649ed77452c42f37b2dba7453759265c5fa8670ae8bafc5d110db796
 SHA512:
-  metadata.gz: a9347203cd3f428e866317f66251b82bce4794a6376e9fe4028000a7c91aefdceb34a0d4856ce2ccae64f3ed783bbbda8ec4a16ea4e798a9d0a3c54e765a254d
-  data.tar.gz: 8468890749d6669fe3d560741d272de73464c93effe2e7f86301ddd654fbbe7c5601d7b1d3b438363c0bd0278940c8eeea51686b1509bc518c08c9f5930df0cd
+  metadata.gz: 1bf064f59ae1cb0b15bf62cfd577d92f08a106f58ed014a142b656bf101cc5915b3598f83c2ef26fcb225b8f44a601a193a9b7893503e36dd1a097a3a43ee24e
+  data.tar.gz: f715563781a813989eb0a90910db0034ce7f117a133708a449abeb2c7631b65b2e4fdd14361c93a7524ba521bc1ea31d4352f7e62dc79c7433e2a8772479284d

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="span"
+            tag="h4"
             text="No Filter Selected"
         />
       </div>

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

@@ -9,23 +9,22 @@
           <div class="maskContainer">
             <div class="filters">
               <div class="left_gradient"></div>
-              <% 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]}) %>
+              <% 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]}) %>
+                </div>
                 <% end %>
               <% end %>
               <div class="right_gradient"></div>

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_grid {
+  @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_on($min_size, $max_size) {
+              #{$coordinate}: #{$space} !important;
+              }
+            }
+          }
+          @else {
+            @include break_on($min_size, $max_size) {
+              #{$position}: #{$space} !important;
+            }
+          }
+        }
+    }
+  }
+}

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

@@ -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

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.22.0"
-  VERSION = "12.22.0.pre.alpha.PBNTR12checkingemptyfilters686"
+  VERSION = "12.22.0.pre.alpha.play698responsivespacingglobalprop690"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686
+  version: 12.22.0.pre.alpha.play698responsivespacingglobalprop690
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-19 00:00:00.000000000 Z
+date: 2023-05-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack