playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4991 → 14.9.0.pre.alpha.play1742globalheightfixes4766

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,6 +1,3 @@
-@import "../tokens/spacing";
-@import "./error_state_mixin";
-
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -15,49 +12,6 @@
     }
   }
 
-@include error-state-flex-start-selectors;
-@include error-state-center-selectors;
-@include error-state-flex-end-selectors;
-@include error-state-left-side-select-kit;
-@include error-state-right-side-select-kit;
-
-  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
-  // &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
-  // &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
-  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
-  //   align-items: flex-start;
-  // }
-
-  // &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
-  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-  //   align-items: flex-start;
-  //   .pb_select_kit_wrapper,
-  //   .pb_select_kit_wrapper.error {
-  //     padding-top: $space_md;
-  //     margin-top: 2px;
-  //     .pb_select_kit_caret {
-  //       padding-top: $space_xl;
-  //     }
-  //   }
-  // }
-
-  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
-  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
-  //   align-items: center;
-  // }
-
-  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-  //   align-items: flex-end;
-  // }
-
-  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-  //   align-items: flex-start;
-  //   .pb_text_input_kit.error {
-  //     padding-top: $space_md;
-  //     margin-top: 2px;
-  //   }
-  // }
-
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -73,7 +27,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-
+    
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -196,7 +150,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    }
+    } 
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -24,34 +24,37 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-}
+} & GlobalProps
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
-// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_sidebar', globalProps(props), className)}>
+    <div
+        className={classnames('layout_sidebar', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -60,8 +63,12 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_body', globalProps(props), className)}>
+    <div
+        className={classnames('layout_body', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -71,8 +78,12 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
+    <div
+        className={classnames('layout_item', sizeClass, globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -81,8 +92,12 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_header', globalProps(props), className)}>
+    <div
+        className={classnames('layout_header', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -91,8 +106,12 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_footer', globalProps(props), className)}>
+    <div
+        className={classnames('layout_footer', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: darken($primary_action, 10%);
+    color: $data_3;
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -19,16 +19,6 @@
           font-weight: $bolder;
         }
       }
-    }
-  }
-
-  .dark & {
-    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
-      &[class*=_link] {
-        &[class*=_active] {
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
-    }
+   }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -223,7 +223,6 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
-        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -241,17 +240,11 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible {
-          color: $white !important;
-        }
-      }
-
-      .pb_collapsible_main_kit {
+        .pb_nav_list_item_text_collapsible,
         svg {
-          color: $text_dk_default !important;
+          color: $white !important;
         }
       }
-
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -263,13 +256,6 @@
           }
         }
       }
-
-      &[class*="_active"] {
-        > .pb_collapsible_main_kit {
-          background-color: $primary;
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_light !important;
+        color: $text_dk_lighter !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary_action_dark;
+          outline: 1px solid $primary;
         }
       }
     }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: $bg_dark_card;
+      background: transparent;
 
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary_action_dark;
+        background: $primary-action;
       }
     }
 
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: $bg_dark_card;
+        background: transparent;
       }
     }
 

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
+          <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
           <%= content %>
         <% end %>

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -1,46 +1,40 @@
-import React from "react"
-import classnames from "classnames"
+import React from 'react'
+import classnames from 'classnames'
 
-import { buildCss, buildHtmlProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
+import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
 
-const statusMap: {
-  neutral: "neutral"
-  decrease: "negative"
-  increase: "positive"
-} = {
-  increase: "positive",
-  decrease: "negative",
-  neutral: "neutral",
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
 }
 
 const iconMap = {
-  increase: "arrow-up",
-  decrease: "arrow-down",
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
 }
 
 type StatChangeProps = {
-  change?: "increase" | "decrease" | "neutral"
-  className?: string
-  dark?: boolean
-  icon?: string
-  id?: string
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  value?: string | number
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const {
-    change = "neutral",
-    className,
-    dark = false,
+  const { 
+    change = 'neutral', 
+    className, 
     htmlOptions = {},
-    icon,
-    id,
-    value,
+    icon, 
+    id, 
+    value 
   } = props
 
   const status = statusMap[change as keyof typeof statusMap]
@@ -53,32 +47,30 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
 
   return (
     <>
-      {value && (
+      {value &&
         <div
             className={classnames(
-            buildCss("pb_stat_change_kit", status),
-            globalProps(props),
-            className
-          )}
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
             id={id}
             {...htmlProps}
         >
-          <Body dark={dark}
-              status={status}
-          >
-            {" "}
-            {returnedIcon && (
+          <Body status={status}>
+            {returnedIcon &&
               <>
-                <Icon dark={dark}
+                <Icon
                     fixed_width
                     icon={returnedIcon}
-                />{" "}
+                />
+                {' '}
               </>
-            )}
+            }
             {`${value}%`}
           </Body>
         </div>
-      )}
+      }
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
-    <%= "#{object.value}%" if object.value %>
-  <% end %>
+      <%= pb_rails("body", props: { status: object.status }) do %>
+        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
+        <%= "#{object.value}%" if object.value %>
+      <% end %>
 <% end %>

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

@@ -55,8 +55,3 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

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

@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 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'
-export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
-export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
-export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,106 +1,32 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyColumnsRef: () => void;
-
-    static get selector(): string {
-      return '.table-responsive-collapse'
-    }
-
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
-        const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-            const colSpan = header.colSpan
-            for (let i = 0; i < colSpan; i++) {
-              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-            }
-        });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
-          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
-            cell.setAttribute('data-title', headers[headerIndex])
-          })
-        })
-      });
-
-      // New sticky columns logic
-      this.initStickyColumns();
-    }
-
-    private initStickyColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
-
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
-        const classList = Array.from(table.classList);
-
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
-        if (stickyColumnClass) {
-          // Extract the IDs from the class name
-          this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
-
-          if (this.stickyLeftColumns.length > 0) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
-          }
+  static get selector(): string {
+    return '.table-responsive-collapse'
+  }
+
+  connect(): void {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+      // Header Titles
+      const headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        const colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }
       });
-    }
-
-    private handleStickyColumns(): void {
-      let accumulatedWidth = 0;
 
-      this.stickyLeftColumns.forEach((colId, index) => {
-        const isLastColumn = index === this.stickyLeftColumns.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');
-          }
-        });
-      });
-    }
-
-    // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyColumnsRef);
-      }
-    }
-}
+      // for each row in tbody
+      [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+        // for each cell
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+          // apply the attribute
+          cell.setAttribute('data-title', headers[headerIndex])
+        })
+      })
+    })
+  }
+}

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

@@ -21,5 +21,4 @@
 @import "striped";
 @import "outer_padding";
 @import "sticky_columns";
-@import "scroll";
-@import "collapsible";
+@import "scroll";