playbook_ui_docs 14.21.1 → 14.21.2.pre.alpha.PLAY18938263

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b23c654b3afbbaabd2b378685ce9fd0d8597f51a5f93d338e759d347a811f5a
-  data.tar.gz: cb4ee9bfdc717177802741592f6a9c8c3925d0fda7b90eda0a9de71e0c11f2f0
+  metadata.gz: 29bb81608f7560ac0e2fbaf1cb93371280002ad9b6bc0f0c3cedfd89d01503d0
+  data.tar.gz: 22c1f3e84918d35dbec8ec2ddaecbcc31a08e3d82ab6ea47a037fd10e7bb705b
 SHA512:
-  metadata.gz: c54936d98e127ae630ed40d4cd85390b54ddef12fcff327da914c98e90f5c19ae1137c478bf5f4b57e6b0f4feead83b9b8a394c63b2baca83c8194c3851d689d
-  data.tar.gz: f3fb7cff9115d70644d8d72f6d4fd75716231d58009a7bd6faaae3d3c4c92fa846e2e7b1a8fc005449b5c3ef5b352cf6c25c7d7ec611140ad12e25f42b595747
+  metadata.gz: 65b2c3893019bade98924148c9ceb11882d274ef1a60d9eec9b2b2950369e4f2194b3c8528ac4109d8ca6b225d459e97b7eaf4ee9100fe5405958b3598e470fe
+  data.tar.gz: f9bf449a4a24469eb742d3023138107e3f255a79ef0b528a8a80988a2dc9c7adf783d4270b44d0c5cdefe9d1d8968ab946bf71ca0ad2c36db68b2c0f79a51464

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

@@ -0,0 +1,51 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnStyling = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{headerAlignment: "left", cellAlignment: "left"},
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{headerAlignment: "center", cellAlignment: "center"},
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStyling

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

@@ -0,0 +1,7 @@
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+
+1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+`columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -0,0 +1,77 @@
+import React from "react";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnStylingColumnHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              columnStyling:{headerAlignment: "left", cellAlignment: "left"},
+
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              columnStyling:{headerAlignment: "center", cellAlignment: "center"},
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnStylingColumnHeaders

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

@@ -0,0 +1 @@
+`columnStyling` can also be used with the multi column logic. When used in this way, `columnStyling` must be used within the leaf column's columnDefinition as shown.

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

@@ -0,0 +1,63 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            column_styling:{header_alignment:"left", cell_alignment:"left"}
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            column_styling:{header_alignment:"center", cell_alignment:"center"}
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`column_styling` can also be used with the multi column logic. When used in this way, `column_styling` must be used within the leaf column's column_definition as shown.

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

@@ -0,0 +1,38 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling:{header_alignment:"left", cell_alignment:"left"}
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      column_styling:{header_alignment:"center", cell_alignment:"center"}
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+
+1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -19,6 +19,8 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -57,3 +59,5 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_column_styling: Column Styling
+  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers

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

@@ -34,3 +34,5 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb

@@ -1,3 +1,4 @@
 <%= pb_rails("checkbox", props: {text: "Custom Checkbox"}) do%>
+    <input type="hidden" name="custom-name" value="0" />
     <input type="checkbox" name="custom-name" value="custom-value"/>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md

@@ -0,0 +1 @@
+When using a custom checkbox wrapped in the Checkbox kit, hidden inputs are not automatically included and cannot be prop enabled. Manually add a hidden input before the checkbox if necessary to submit a value when the checkbox is unchecked (as is standard in Rails forms).

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb

@@ -0,0 +1,22 @@
+
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+  <%=pb_rails("flex", props: { gap: "sm", orientation: "column"}) do %>
+    <%= pb_rails("checkbox" , props: {
+      text: "1. pb_rails(\"checkbox\") Checkbox from kit",
+      value: "checkbox-value",
+      name: "checkbox-name",
+      hidden_input: true
+      }) %>
+    <%= form.check_box :example_checkbox,
+      data: { field1: "value1", field2: "value2" },
+      props: { text: "2. form.check_box Checkbox from Form Builder" },
+      unchecked_value: "no",
+      id: "checkbox-id",
+      name: "checkbox-name",
+      class: "checkbox-class"
+    %>
+    <%= form.actions do |action| %>
+      <%= action.button props: { type: "submit", text: "Submit", variant: "primary" } %>
+    <% end %>   
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md

@@ -0,0 +1,5 @@
+The way to access hidden inputs for form submission depends on which version of the kit being used within the form context.
+
+If using the Rails Checkbox version of the kit, set `hidden_input: true`. Inspect Checkbox #1 in the example above to see the hidden input in the DOM. 
+
+If using the Form Builder version of the kit (reference the [Form kit page](https://playbook.powerapp.cloud/kits/form) for more on these), the hidden input will appear if the input has a set `unchecked_value`. Inspect Checkbox #2 in the example above (and the two checkbox examples on the Form kit page) to see the hidden input in the DOM. See the [Rails check_box FormHelper docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box) for more.

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("checkbox" , props: {
   text: "Checkbox with Options",
+  hidden_input: true,
   input_options: {
     id: "checkbox-id",
     name: "checkbox-name",

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

@@ -7,6 +7,7 @@ examples:
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
+    - checkbox_form: Form and Hidden Input
 
   react:
   - checkbox_default: Default

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

@@ -44,6 +44,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_close_on_select: Close On Selection
-
 

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

@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -101,7 +101,7 @@
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>

data/app/pb_kits/playbook/pb_section_separator/docs/_description.md

@@ -1 +1,3 @@
-Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable `$bg_light`).
+Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
+
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.