playbook_ui 14.8.0.pre.alpha.pbntr661createstickyleftprop4612 → 14.8.0.pre.alpha.play1648heightglobalprops4559

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 447188fd32d5d83aeaf14c246e24bbb2ded7d4ef68ec21db96a48fc115a50d49
-  data.tar.gz: 4c1d2183a6df9ebefcb605e8aaeb52c097cdc1726c672a234237aa194b67c475
+  metadata.gz: ba9b61505396d83dda5a66f647455f7300ffc61aa1568378549a848cf0a3e52d
+  data.tar.gz: 9c7a4c59e621094cf9f5c8115529bfcd202615811b3f08e2757b20204951a514
 SHA512:
-  metadata.gz: 99ea4d44f89369d8d928c441c86ebac5261bd849fda00bdb2490b209fb906232be43c480d49101c24f56c2fcacd23f662025e1dba331dd9472275e5d67040df5
-  data.tar.gz: b5e4d90132d0d728c6fb9c023b9ceeaf8ac64a017cdac314b5d85c774917a806540eb97dab62d7690112cbff97a395e794c271fb7375d4a3c50e6e13afe1abbc
+  metadata.gz: f0e0bad5bbfc8b77967a3c379768451e525e1472e6bd64039070493bd045e1fe836f778f04d3b5a5b18b1af6b871c4182bbe3a3d9f3e1d493972a7394747a038
+  data.tar.gz: f6814ca019c793c26280102244bf5c65a4c9cd44c08f50ca55c8e6b57330714d66972766a6cbdbf29c7ed514e67ee9461158b53be9ab1c41d9e618765e772227

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 data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+    <span 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 data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <span 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,6 +18,10 @@ 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,84 +1,7 @@
-<% 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>
+<%= pb_rails("checkbox" , props: {
+  text: "Select ",
+  value: "checkbox-value",
+  name: "main",
+  indeterminate: true,
+  id: "test-indeterminate-js"
+}) %>

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

@@ -53,7 +53,6 @@
     }
 
     .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,6 +3,7 @@
     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,6 +7,10 @@ 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/pb_table/_table.tsx

@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-    TableHead,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableCell,
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,7 +28,6 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +51,6 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -78,7 +76,6 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -88,56 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
-    useEffect(() => {
-        const handleStickyColumns = () => {
-            let accumulatedWidth = 0;
-    
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
-                    if (!isLastColumn) {
-                        header.classList.add('with-border');
-                        header.classList.remove('sticky-shadow');
-                    } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
-                    }
-    
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-    
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border');
-                        cell.classList.remove('sticky-shadow');
-                    } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyColumns();
-        }, 10);
-
-        window.addEventListener('resize', handleStickyColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyColumns);
-        };
-    }, [stickyLeftcolumn]);
-
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -145,52 +92,26 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {responsive === 'scroll' ? (
-                <div className='table-responsive-scroll'>
-                    {isTableTag ? (
-                        <table
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                        >
-                            {children}
-                        </table>
-                    ) : (
-                        <div
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                        >
-                            {children}
-                        </div>
-                    )}
-                </div>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
             ) : (
-                isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                    >
-                        {children}
-                    </div>
-                )
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
             )}
         </>
     )

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -33,7 +33,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -25,4 +25,3 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
-export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -20,5 +20,3 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
-@import "sticky_columns";
-@import "scroll";

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -2,7 +2,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -100,7 +99,6 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
-      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -184,7 +182,6 @@
   }
  
   .typeahead-kit-select__menu {
-    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }

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,29 @@
+@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);

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,21 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    let css = ''
+    css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
+    return css.trimEnd()
+  },
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    let css = ''
+    css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
+    return css.trimEnd()
+  },
+  heightProps: ({ height }: Height) => {
+    let css = ''
+    css += height ? `height_${filterClassName(height)} ` : ''
+    return css.trimEnd()
+  },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''
     Object.entries(zIndex).forEach((zIndexEntry) => {