RubyGems - playbook_ui - Versions diffs - 14.14.0 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 - Mend

playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

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

@@ -36,4 +36,5 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_inline_editing: Inline Cell Editing

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

@@ -20,4 +20,5 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

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

@@ -21,6 +21,7 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
+  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
+    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          <>
-            <div>{handleNegative}{symbol}</div>
-            <div>{getAmount}</div>
-            <div>
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </div>
-          </>
+          nullDisplay && !amount ? (
+            <div>{nullDisplay}</div>
+          ) : (
+            <>
+              <div>{handleNegative}{symbol}</div>
+              <div>{getAmount}</div>
+              <div>
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </div>
+            </>
+          )
         ) : (
-          <>
-            <Body
-                className="dollar_sign"
-                color="light"
-                dark={dark}
-            >
-              {handleNegative}{symbol}
-            </Body>
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-            >
-              {getAmount}
-            </Title>
-            <Body
-                className="unit"
-                color="light"
-                dark={dark}
-            >
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </Body>
-          </>
+          >
+            {nullDisplay}
+          </Title>
+          ) : (
+            <>
+              <Body
+                  className="dollar_sign"
+                  color="light"
+                  dark={dark}
+              >
+                {handleNegative}{symbol}
+              </Body>
+              <Title
+                  className="pb_currency_value"
+                  dark={dark}
+                  size={sizes[size]}
+              >
+                {getAmount}
+              </Title>
+              <Body
+                  className="unit"
+                  color="light"
+                  dark={dark}
+              >
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </Body>
+            </>
+          )
         )}
       </div>
     </div>

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

@@ -1,17 +1,24 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
-      <div><%= object.title_props[:text] %></div>
-      <div><%= object.body_props[:text] %></div>
+      <% if object.null_display && object.amount.blank? %>
+        <div><%= object.null_display %></div>
+      <% else %>
+        <div><%= object.negative_sign %><%= object.symbol %></div>
+        <div><%= object.title_props[:text] %></div>
+        <div><%= object.body_props[:text] %></div>
+      <% end %>
     <% else %>
-      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+     <% if object.null_display && object.amount.blank? %>
+        <%= pb_rails("title", props: object.title_props) %>
+      <% else %>
+        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+          <%= object.negative_sign %><%= object.symbol %>
+        <% end %>
+          <%= pb_rails("title", props: object.title_props) %>
+          <%= pb_rails("body", props: object.body_props) %>
       <% end %>
-      <%= pb_rails("title", props: object.title_props) %>
-      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

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

@@ -46,6 +46,9 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
+      prop :null_display, type: Playbook::Props::String,
+                          required: false
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,10 +68,20 @@ module Playbook
         }
       end
+      def title_text
+        if null_display
+          null_display
+        elsif swap_negative
+          absolute_amount(abbr_or_format_amount)
+        else
+          abbr_or_format_amount
+        end
+      end
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: title_text,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -145,8 +158,10 @@ module Playbook
           1
         when "md"
           3
-        else
+        when "sm"
           4
+        else
+          3
         end
       end

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

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

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   swift:
   - currency_size_swift: Size

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

@@ -6,4 +6,5 @@ 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'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb CHANGED Viewed

@@ -1,5 +1,8 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+    class: object.classname + object.error_class,
+    'data-pb-date-picker' => true,
+    'data-validation-message' => object.validation_message,
+      ) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED Viewed

@@ -75,6 +75,8 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md CHANGED Viewed

@@ -1 +1,3 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onchange",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-string",
+}) %>
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onchange")._flatpickr
+    <%# Define Hook %>
+    const changeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onchange-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+      const string = document.querySelector('#date-picker-onchange-string')
+      string.textContent = dateStr
+    }
+    <%# Push one or more hooks to onChange config array %>
+    fp.config.onChange.push(changeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onclose",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-string",
+}) %>
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onclose")._flatpickr
+    <%# Define Hook %>
+    const closeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onclose-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+      const string = document.querySelector('#date-picker-onclose-string')
+      string.textContent = dateStr
+    }
+    <%# Push one or more hooks to onClose config array %>
+    fp.config.onClose.push(closeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -7,6 +7,8 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)

data/app/pb_kits/playbook/pb_date_picker/index.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
+const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
+export default class PbDatePicker extends PbEnhancedElement {
+  static get selector() {
+    return DATE_PICKER_WRAPPER_SELECTOR;
+  }
+  connect() {
+    this.setValidationMessage();
+  }
+  setValidationMessage() {
+    const validationMessage = this.element.dataset?.validationMessage;
+    const inputElement = this.element.querySelector("input");
+    if (validationMessage) {
+      const setErrorTextContent = (text, timeout) => {
+        setTimeout(() => {
+          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+      inputElement.addEventListener("change", (e) => {
+        if (!e.target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb CHANGED Viewed

@@ -1,4 +1,8 @@
-<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
+<div
+    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
+    data-pb-dialog-wrapper="true"
+    data-overlay-click= <%= object.overlay_close %>
+>
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -33,8 +37,3 @@
             <%= content %>
     <% end %>
 </div>
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => dialogHelper())
-    window.addEventListener("turbo:frame-load", () => dialogHelper())
-<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js CHANGED Viewed

@@ -1,3 +1,5 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

data/app/pb_kits/playbook/pb_dialog/index.js ADDED Viewed

@@ -0,0 +1,75 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
+export default class PbDialog extends PbEnhancedElement {
+  static get selector() {
+    return DIALOG_WRAPPER_SELECTOR;
+  }
+  connect() {
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+  }
+  setupDialog() {
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+      loadingButton.addEventListener("click", function () {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+        let newClass = currentClass.replace("_enabled", "_disabled_loading");
+        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+        // Disable the buttons
+        okayLoadingButton.disabled = true;
+        if (cancelButton) cancelButton.disabled = true;
+        okayLoadingButton.className = newClass;
+        if (cancelButton) cancelButton.className = newCancelClass;
+      });
+    }
+    openTrigger.forEach((open) => {
+      open.addEventListener("click", () => {
+        var openTriggerData = open.dataset.openDialog;
+        var targetDialog = document.getElementById(openTriggerData)
+        if (targetDialog.open) return;
+        targetDialog.showModal();
+      });
+    });
+    closeTrigger.forEach((close) => {
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
+    });
+    // Close dialog box on outside click
+    dialogs.forEach((dialogElement) => {
+      dialogElement.addEventListener("mousedown", (event) => {
+        const dialogParentDataset = dialogElement.parentElement.dataset
+        if (dialogParentDataset.overlayClick === "overlay_close") return
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+        if (clickedOutsideDialogModal) {
+          dialogElement.close()
+          event.stopPropagation()
+        }
+      })
+    })
+  }
+}

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

@@ -134,11 +134,11 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
-.pb_drawer_lg_left.pb_drawer {
+.pb_drawer_lg_left .pb_drawer {
   transform: translateX(-100%);
 }
-.pb_drawer_lg_right.pb_drawer {
+.pb_drawer_lg_right .pb_drawer {
   transform: translateX(100%);
 }
@@ -157,6 +157,34 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
+ &.pb_drawer_within_element_rails {
+    position: relative;
+    width: 100%;
+    display: block;
+    background-color: $white;
+    overflow: hidden;
+    // Use max-height for a smooth accordion-like animation
+    max-height: 0;
+    transition: max-height $animation-duration ease-in-out;
+    z-index: 1;
+    &.open {
+      max-height: 1000px;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: inherit;
+      z-index: -1;
+    }
+  }
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -297,7 +325,6 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
-    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     &[class*="_left"]{
@@ -325,10 +352,23 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
+    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+    &[class*="_center"]{
+      justify-content: center;
+    }
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+<%= pb_rails("drawer", props: {
+    id:"drawer-3",
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>