playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

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_overlay/_overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,7 +39,6 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
-    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -58,7 +57,6 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-} & GlobalProps;
+};
 
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-
-type ModifiedGlobalProps = Omit<GlobalProps, 'width'>
+import { globalProps } from '../utilities/globalProps'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -18,7 +16,7 @@ type ProgressSimpleProps = {
   value: number,
   variant?: "default" | "positive" | "negative" | "warning",
   width: string,
-} & ModifiedGlobalProps
+}
 
 const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
@@ -58,7 +56,7 @@ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   )
 
   return (
-    <div
+    <div 
         {...dataProps}
         {...htmlProps}
         className={wrapperClass}

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,10 +1,9 @@
-<%= content_tag(:div,
-class: object.wrapper_classname,
-style: object.style) do %>
+<%= content_tag(:div, class: object.wrapper_classname) do %>
   <%= content_tag(:div,
   id: object.id,
   data: object.data_values,
   class: object.classname,
+  style: object.style,
   **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -21,11 +21,6 @@ module Playbook
                      values: %w[default positive negative warning],
                      default: "default"
 
-      # Explicitly defining the width prop here so the local prop takes precedence over global width prop
-      def width
-        prop(:width)
-      end
-
       def number_value
         validate_required_progress_props
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -19,11 +19,8 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0;
+    padding: 0 $space_xs;
     display: flex;
-    [class*="pb_caption_kit"] {
-      padding: 0 $space_xs;
-    }
   }
   &::before {
     content: "";

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,7 +38,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
-  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -48,7 +47,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
-        style={dynamicInlineProps}
     >
       {
         children && children ||

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/docs/_selectable_card_default.html.erb

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

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/_table.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
+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,
@@ -66,7 +64,6 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
-    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -79,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 !== '',
         },
@@ -89,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()
@@ -146,56 +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}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </table>
-                    ) : (
-                        <div
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </div>
-                    )}
-                </div>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
             ) : (
-                isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </div>
-                )
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
             )}
         </>
     )

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

@@ -25,9 +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'
-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'