RubyGems - playbook_ui - Versions diffs - 14.5.0 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222 - Mend

playbook_ui 14.5.0 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222

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 (100) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c323706076c08d2191bb507c94cf711fbb21957412513edeb7e57c36d099037c
-  data.tar.gz: '079b77b7edecd9ce5a8c0d252f029ec67e758c30b7d1469fb9de35ef91cd9d9e'
+  metadata.gz: d63cd70fa0e0f14b032f5ecf9797821a9d220c73c30daa8b3c930835621e4375
+  data.tar.gz: '0983801b52c3b009e241a4bacf55ae0184d7a50e4ce54279bae09ba8bee19414'
 SHA512:
-  metadata.gz: 1905e1368e12c0a3d34622c0c6d27e3c382bb37d5f6489525b31c51d43e4e6f0173c3922bf88f3ae3356d253a01730f6f413f1c4e730a53adc0e1bda7d71bd66
-  data.tar.gz: 561bf8f8fcc2ae777fcf670b01b4969dfc47e3e406b6caea75815bd240190353a2d37abba20a14d59ca0a627adbafe2fe8bfdfe95e0eb11f192048cdcad13401
+  metadata.gz: 3c179daad11db77a567d9964a4ff9cdb90efab24cdb88b7b8059579ef9592146d0deaa03e02765cd817e5730527e280796387f516974325ee80e644ae29f04da
+  data.tar.gz: 8e2b6701b47d392cda459d528dfbde3ff3c0703a6a5152fe73b77506013b5055d5f6e95c0bf41617b4b0dd8b03fbf666292573e99f4624386aff58deb6971ec8

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx CHANGED Viewed

@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[]) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
       switch (row.depth) {
         case 0: {
           return (
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+      columnDefinitions.map((column, index) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-      if (column.cellAccessors) {
-        columnStructure.cell = createCellFunction(column.cellAccessors)
-      }
-      return columnStructure
-    })
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
+  }
+  return columnStructure
+})
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React from "react"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+const AdvancedTableCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      customRenderer: (row, value) => (
+        <Pill text={value}
+            variant="success"
+        />
+      ),
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      customRenderer: (row, value) => (
+        <Flex alignItems="end"
+            orientation="column"
+        >
+          <Detail bold
+              color="default"
+              text={value}
+          />
+          <Caption size="xs">{row.original.graduatedStudents}</Caption>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+export default AdvancedTableCustomCell

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md ADDED Viewed

@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -15,3 +16,4 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_custom_cell: Custom Components for Cells

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

@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 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'

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

@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+  static expandedRows = new Set()
+  static isCollapsing = false
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+    const expandedRows = Array.from(firstLevelButtons).filter(button =>
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+    const expandedSubRows = Array.from(subrowButtons).filter(button =>
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb CHANGED Viewed

@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb CHANGED Viewed

@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_card/_card_mixin.scss CHANGED Viewed

@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb CHANGED Viewed

@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
-<%= pb_rails("dialog", props: {
-    id:"dialog-loading",
-    size: "sm",
-    title: "Loading Exmaple",
-    text: "Make a loading request?",
-    cancel_button: "Cancel Button",
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay",
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+<script>
+    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 : "";
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+        });
+  }
+</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md CHANGED Viewed

@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

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

@@ -69,15 +69,21 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
         &[class*="_focused"] {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
+          &:hover, &:focus {
+            .pb_body_kit {
+              color: $primary;
+            }
+          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -87,7 +93,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $primary !important;
+            background-color: $product_1_background !important;
           }
         }
       }
@@ -125,6 +131,81 @@
     }
   }
+  &.separators_hidden {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        [class*="pb_dropdown_option"] {
+          border: none;
+        }
+      }
+    }
+  }
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        [class*="pb_dropdown_option"]:first-child {
+          margin-top: $space_xs;
+        }
+        [class*="pb_dropdown_option"]:last-child {
+          margin-bottom: $space_xs;
+        }
+        [class*="pb_dropdown_option"] {
+          margin: $space_xs;
+          padding: $space_xs;
+          border-radius: $border_radius_md;
+          border-bottom: none;
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: -$space_xs;
+            right: -$space_xs;
+            bottom: -4.5px;
+            height: 1px;
+            background: $border_light;
+          }
+        }
+        [class*="pb_dropdown_option"]:last-child::after {
+          display: none;
+        }
+      }
+    }
+    &.separators_hidden {
+      .dropdown_wrapper {
+        .pb_dropdown_container {
+          [class*="pb_dropdown_option"]:first-child {
+            margin-top: $space_xs;
+          }
+          [class*="pb_dropdown_option"]:last-child {
+            margin-bottom: $space_xs;
+          }
+          [class*="pb_dropdown_option"] {
+            padding: $space_xxs $space_xs;
+            margin: $space_xxs $space_xs;
+            &::after {
+              height: 0px;
+            }
+            &[class*="selected"] {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -35,10 +35,19 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
+    separators: boolean;
     triggerRef?: any;
+    variant?: "default" | "subtle";
 };
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -55,15 +64,20 @@ const Dropdown = (props: DropdownProps) => {
         label,
         onSelect,
         options,
-        triggerRef
+        separators = true,
+        triggerRef,
+        variant = "default",
     } = props;
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
+    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
@@ -125,7 +139,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+    });
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +189,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
     return (
         <div {...ariaProps}
@@ -258,8 +280,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+export default DropdownClearSelection

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: {options: options, separators: false}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+const DropdownSeparatorsHidden = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        separators={false}
+        {...props}
+    />
+  </div>
+  )
+}
+export default DropdownSeparatorsHidden

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb ADDED Viewed

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+const DropdownSubtleVariant = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <>
+     <Dropdown
+         options={options}
+         separators={false}
+         variant="subtle"
+         {...props}
+    />
+  </>
+  )
+}
+export default DropdownSubtleVariant

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.