playbook_ui 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.alpha.play1648heightglobalprops4606

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b2b5ad03216b06c9f37e1792a0b208efbfd3d44b79f73696e1a3b006f89228c
-  data.tar.gz: 282f44cd7aee29b4bc0ca84396be2a914a3786e91c8b308c5e7f284b84d4d74c
+  metadata.gz: c400478957c7ac7d0b7f5d9dd4313416455cd60e7e405758d7929235a2458f5e
+  data.tar.gz: 820c87cf0e999947f6e1c4eabc30a719c51b2fbf71f5429f01fdc3287948df3d
 SHA512:
-  metadata.gz: 0b14587326a80d3f8a7663ab14df6c51720aae8ad3a3492370dd853a956292a7b80901b2782e6ea04fbdb37b38d7810490234b4396bc9c891158432c208578f4
-  data.tar.gz: a1f50ae88764cf79258478662bd9cd294b394d8c3cbd3c96580045ba2a5a67c3d924d9ee0170daf134ca9400078c4709c18dff06ea98927392f412343b5d7216
+  metadata.gz: bd355b592a328ec6485ec24347f37926631f5fee5e31f8e2d87413cd1be9c5764dacc6e0532688cc720073bcb7fcb430afc45f34da0a0bb60a0ca742fe16a7b5
+  data.tar.gz: e47e0ce844150818eb47998e80628fd8b6a16e1db4c2c5effe065e5c96a075051204046b566cefa96fd9e4a81cccd2b43ba9237b9380f9746082a762614ea4ec

data/app/pb_kits/playbook/_playbook.scss

@@ -126,3 +126,4 @@
 @import 'utilities/overflow';
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
+@import 'utilities/height';

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -6,12 +6,12 @@
                 ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
-    <span class="pb_checkbox_indeterminate">
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
     </span>
   <% else %>
-    <span class="pb_checkbox_checkmark">
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,10 +18,6 @@ module Playbook
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
 
-      def checked_html
-        checked ? "checked='true'" : nil
-      end
-
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,7 +1,84 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Select ",
-  value: "checkbox-value",
-  name: "main",
-  indeterminate: true,
-  id: "test-indeterminate-js"
-}) %>
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("table", props: { container: false, size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>
+        <%= pb_rails("checkbox", props: {
+          checked: true,
+          text: "Uncheck All",
+          value: "checkbox-value",
+          name: "main-checkbox",
+          indeterminate: true,
+          id: "indeterminate-checkbox"
+        }) %>
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% checkboxes.each do |checkbox| %>
+      <tr>
+        <td>
+          <%= pb_rails("checkbox", props: {
+            checked: checkbox[:checked],
+            text: checkbox[:name],
+            value: checkbox[:id],
+            name: "#{checkbox[:id]}-indeterminate-checkbox",
+            id: "#{checkbox[:id]}-indeterminate-checkbox",
+          }) %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -53,6 +53,7 @@
     }
 
     .pb_dropdown_container {
+      position: absolute;
       background-color: $white;
       overflow: hidden;
       box-shadow: $shadow_deep;

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -3,7 +3,6 @@
     class: object.classname,
     data: object.data,
     id: object.id,
-    style: object.container_style,
     **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %> 

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -7,10 +7,6 @@ module Playbook
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end
 
-      def container_style
-        "position: absolute"
-      end
-
       def data
         Hash(prop(:data)).merge(dropdown_container: true)
       end

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb

@@ -6,6 +6,7 @@
     value: "selected_with_icon",
     checked: true,
     icon: true,
+
   }) do %>
     Selected, with icon
   <% end %>
@@ -36,4 +37,4 @@
     Disabled
   <% end %>
 
-</div>
+</div>

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

@@ -0,0 +1,19 @@
+
+$height_auto: auto !default;
+$height_xs: 320px !default;
+$height_sm: 480px !default;
+$height_md: 768px !default;
+$height_lg: 1024px !default;
+$height_xl: 1280px !default;
+$height_2xl: 1440px !default;
+$height_3xl: 1920px !default;
+$heights: (
+  height_auto: $height_auto,
+  height_xs: $height_xs,
+  height_sm: $height_sm,
+  height_md: $height_md,
+  height_lg: $height_lg,
+  height_xl: $height_xl,
+  height_xxl: $height_2xl,
+  height_xxxl: $height_3xl
+);

data/app/pb_kits/playbook/tokens/exports/_height.module.scss

@@ -0,0 +1,37 @@
+@import "../height";
+
+:export {
+  @mixin export_height($height_list) {
+    @each $name, $value in $height_list {
+      .#{$name} {
+        height: $value;
+      }
+    }
+  }
+
+  @include export_height($heights);
+}
+
+:export {
+  @mixin export_max_height($height_list) {
+    @each $name, $value in $height_list {
+      .max_#{$name} {
+        max-height: $value;
+      }
+    }
+  }
+
+  @include export_max_height($heights);
+}
+
+:export {
+  @mixin export_min_height($height_list) {
+    @each $name, $value in $height_list {
+      .min_#{$name} {
+        min-height: $value;
+      }
+    }
+  }
+
+  @include export_min_height($heights);
+}

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

@@ -0,0 +1,33 @@
+@import "../tokens/exports/height.module";
+
+@mixin export_height($height_list) {
+  @each $name, $value in $height_list {
+    .#{$name} {
+      height: $value;
+    }
+  }
+}
+
+@mixin export_max_height($height_list) {
+  @each $name, $value in $height_list {
+    .max_#{$name} {
+      max-height: $value;
+    }
+  }
+}
+
+@mixin export_min_height($height_list) {
+  @each $name, $value in $height_list {
+    .min_#{$name} {
+      min-height: $value;
+    }
+  }
+}
+
+@include export_height($heights);
+@include export_max_height($heights);
+@include export_min_height($heights);
+
+.height-resize {
+  resize: vertical;
+}

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

@@ -27,3 +27,7 @@
 .max_width_xxl {
   max-width: 1320px;
 }
+
+.width-resize {
+  resize: horizontal;
+}

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

@@ -40,6 +40,6 @@
   min-width: $container_100;
 }
 
-.minwidth-resize {
+.width-resize {
   resize: horizontal;
 }

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -7,7 +7,6 @@ export default [
   "right",
   "top",
   "hover",
-  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

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

@@ -361,6 +361,30 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(minHeight)) {
+      let css = ''
+      css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(maxHeight)) {
+      let css = ''
+      css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  heightProps: ({ height }: Height) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(height)) {
+      let css = ''
+      css += height ? `height_${filterClassName(height)} ` : ''
+      return css.trimEnd()
+    }
+  },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''
     Object.entries(zIndex).forEach((zIndexEntry) => {