playbook_ui_docs 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d69923b71d3c4116b4351555bdd26771da6b7c4ed1014c22d5dd0b2eeb977c5
-  data.tar.gz: 7fdcb789645ba26848a2e1d10e16afae5d777764da22426e9be2698ed4a00add
+  metadata.gz: 828fd024c2950b857d0ff61e9aced530635e804cea10943f716aae842a061588
+  data.tar.gz: 6c1b739e7cac2a08139638f8c5215a8d88f90f96179218c23d8c899a1836ae44
 SHA512:
-  metadata.gz: 4cdefcf684ae893fe5b5098cf73c63924050a96760c23c6c623c39907a2308a92c5f593eeb25ef451db189033f3e22430af96309da67771f82ea9602254fd05a
-  data.tar.gz: 128061d2e426203bdd4cc7caddb5cdba55dd287a47d9d72869a9351c571096cd54fa65e5a97b5eb74785aec7cdb0fc237446021703b6e5bd5184d124fe9df85c
+  metadata.gz: 505e690902c0dae8ae9fe2597ebb432daa2326010de9559048913b5714fdfdd23c1b9221a3c40cae285bd4baa675bd379850abaa2e1658a48447f29a8252feca
+  data.tar.gz: 5adae0c2447b01560e700be5cd1a3e9becea1df8faa306dd9b4c689ebafb53fd14e8f24f01bc64927085c509cd26cba562f715f6954604a1d2c46640a33e2690

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
-      column_styling: { 
-        cell_background_color: "info_subtle",
-      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
-      column_styling: { 
-        cell_background_color: "info",
-        header_background_color: "info",
-        header_font_color: "white",
-        font_color: "white"
-      }
     },
     {
       accessor: "completedClasses",
@@ -36,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,7 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
-
-1)  `cell_background_color`:  use this to control the background color of all cells in the given column
-2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
-3) `header_background_color`: use this to control the background color of the column header
-4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -29,5 +29,167 @@
       label: "Graduated Students",
     }
 ] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<% column_definitions_two = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
+
+<% column_definitions_three = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+
+<% column_definitions_four = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
+<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>

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

@@ -1,6 +1,7 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -40,14 +41,203 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
+  const columnDefinitionsTwo = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+
+  const tablePropsTwo = {
+    verticalBorder: true,
+  }
+
+  const columnDefinitionsThree = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tablePropsThree = {
+    verticalBorder: true
+  }
+
+  const columnDefinitionsFour = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
   return (
     <div>
+      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
+      <Caption text="Advanced Table Vertical Border Multi Header" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsTwo}
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsTwo}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsThree}
+          columnGroupBorderColor="text_lt_default"
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsThree}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsFour}
+          tableData={MOCK_DATA}
+          {...props}
+      />
     </div>
   )
 }

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

@@ -26,8 +26,7 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
-export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,6 +22,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -40,6 +41,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -58,6 +60,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

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

@@ -3,13 +3,11 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
-  - contact_unstyled: Unstyled
 
 
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
-  - contact_unstyled: Unstyled
 
 
   swift:

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

@@ -1,3 +1,2 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
-export { default as ContactUnstyled } from './_contact_unstyled.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -1,29 +1,20 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers-1",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  controls_start_id: "start-date-picker-1",
-  controls_end_id: "end-date-picker-1",
-  start_date_id: "quickpick_start_date_1",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date_1",
-  end_date_name: "end_date"
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker-1",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers-1"
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker-1",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers-1"
-}) %>
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -1,4 +1,4 @@
-You can link a Quickpick Dropdown to standard DatePickers using the following props:
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
 
 **For the Quickpick DatePicker**:
 `controls_start_id`: ID of the DatePicker that should receive the start date.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -12,8 +12,6 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -27,8 +25,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple