playbook_ui 14.8.0 → 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_custom_cell_rails: Custom Components for Cells
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -17,3 +18,5 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_pagination: Pagination
+  - advanced_table_pagination_with_props: Pagination Props

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

@@ -10,3 +10,5 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
+export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
+export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -11,7 +11,9 @@
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if index.zero? %>
+                                <% if column[:custom_renderer].present? %>
+                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                                <% elsif index.zero? %>
                                     <% if object.depth.zero? %>
                                         <%= object.row[column[:accessor].to_sym] %>
                                     <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -26,6 +26,21 @@ module Playbook
 
     private
 
+      def custom_renderer_value(column, index)
+        if index.zero?
+          if depth.zero?
+            row[column[:accessor].to_sym]
+          else
+            depth_accessors.each_with_index do |item, accessor_index|
+              key = item.to_sym
+              return row[key] if depth - 1 == accessor_index
+            end
+          end
+        else
+          row[column[:accessor].to_sym]
+        end
+      end
+
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -145,6 +145,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     } : {})
   };
 
+  const dynamicInlineProps = globalInlineProps(props);
+  const combinedStyles = {
+    ...backgroundStyle,
+    ...dynamicInlineProps
+  };
+
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -158,7 +164,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        style={backgroundStyle}
+        style={combinedStyles}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -77,6 +77,12 @@ $pb_button_sizes: (
   &[class*=_loading]  {
     @include pb_button_loading(true);
   }
+
+  // Danger ===================
+  &[class*=_danger] {
+    @include pb_button_danger;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -37,7 +37,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
+  variant?: 'primary' | 'secondary' | 'link'| 'danger' | 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -206,8 +206,6 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
               <Icon icon={icon ? icon : "face-smile-plus"} />
             )
           }
-
-        
         </button>
       );
     } else {

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -167,6 +167,21 @@ $pb_button_border_width: 0px;
   }
 }
 
+// Danger ======================
+@mixin pb_button_danger {
+  @include pb_button_variant($error, $text_dk_default, transparent);
+
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($error, $pb_button_hover_darken));
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($error);
+    }
+  }
+}
+
 // Dark Primary =================
 @mixin pb_button_primary_dark{
   @include pb_button_variant($primary_action);

data/app/pb_kits/playbook/pb_button/button.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link reaction],
+                     values: %w[primary secondary link danger reaction],
                      default: "primary"
       prop :count, type: Playbook::Props::Number
       prop :highlight, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -2,4 +2,5 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Danger", variant: "danger", margin_right: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -34,6 +34,14 @@ const ButtonDefault = (props) => (
         text='Button Disabled'
         {...props}
     />
+    <Button
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        tabIndex={0}
+        text='Button Danger'
+        variant='danger'
+        {...props}
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.md

@@ -1 +1 @@
-The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.
+The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button. Danger buttons are used to indicate destructive actions such as deleting.

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

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -75,6 +75,7 @@ const Collapsible = ({
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
       <div
@@ -83,6 +84,7 @@ const Collapsible = ({
           {...htmlProps}
           className={classes}
           id={id}
+          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -101,7 +101,11 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const swapNegative = size === "sm" && symbol !== ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
+  const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
   const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
   const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
@@ -118,7 +122,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           <>
-            <div>{symbol}</div>
+            <div>{handleNegative}{symbol}</div>
             <div>{getAmount}</div>
             <div>
               {getAbbreviation}
@@ -132,7 +136,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              {symbol}
+              {handleNegative}{symbol}
             </Body>
 
             <Title

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -3,12 +3,12 @@
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.symbol %></div>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
       <div><%= object.title_props[:text] %></div>
       <div><%= object.body_props[:text] %></div>
     <% else %>
       <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.symbol %>
+        <%= object.negative_sign %><%= object.symbol %>
       <% end %>
       <%= pb_rails("title", props: object.title_props) %>
       <%= pb_rails("body", props: object.body_props) %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,12 +68,20 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
       end
 
+      def abbr_or_format_amount
+        abbreviate ? abbreviated_value : formatted_amount
+      end
+
+      def negative_sign
+        amount.starts_with?("-") && swap_negative ? "-" : ""
+      end
+
       def body_props
         {
           text: units_element,
@@ -159,6 +167,14 @@ module Playbook
           whole_value
         end
       end
+
+      def absolute_amount(amount_string)
+        amount_string.sub(/^-/, "")
+      end
+
+      def swap_negative
+        size == "sm" && symbol != ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -65,7 +65,7 @@ test('decimals default prop returns decimals as body text', () => {
 
 test('commaSeparator prop returns comma separated amount', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890"
         commaSeparator
         data={{ testid: 'comma-test' }}
@@ -76,7 +76,7 @@ test('commaSeparator prop returns comma separated amount', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals' }}
@@ -87,7 +87,7 @@ test('commaSeparator prop returns comma separated amount with decimals', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals-matching' }}
@@ -96,3 +96,40 @@ test('commaSeparator prop returns comma separated amount with decimals="matching
   )
   expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
 })
+
+test('handles negative amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount="-320"
+          data={{ testid: 'test-negative-default' }}
+      />
+      <Currency
+          abbreviate
+          amount="-3200000"
+          data={{ testid: 'test-negative-millions' }}
+      />
+      <Currency
+          amount="-123456.78"
+          commaSeparator
+          data={{ testid: 'test-negative-comma-decimals' }}
+      />
+      <Currency
+          amount="-400.50"
+          data={{ testid: 'test-negative-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount="-500.55"
+          data={{ testid: 'test-negative-medium-size' }}
+          size="md"
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-negative-default')).toHaveTextContent('-$320')
+  expect(screen.getByTestId('test-negative-millions')).toHaveTextContent('-$3.2M')
+  expect(screen.getByTestId('test-negative-comma-decimals')).toHaveTextContent('-$123,456.78')
+  expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
+  expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "sm",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyNegative = (props) => {
+  return (
+    <>
+      <Currency
+          amount="-2,000.50"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNegative

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

@@ -9,6 +9,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
   
   react:
   - currency_variants: Variants
@@ -19,6 +20,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
 
   swift:
   - currency_size_swift: Size

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

@@ -6,3 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -88,6 +88,7 @@ body.PBDrawer__Body--close {
 }
 
 .pb_drawer.pb_drawer_after_open {
+  pointer-events: auto;
   transform: translate3d(0, 0, 0);
 }