playbook_ui_docs 15.3.0.pre.alpha.PLAY2630fctearlyautoClose12133 → 15.3.0.pre.alpha.PLAY258611978

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68dd23591f42cb6e4c08a0fcc4d96055b209a2292c4c95d2157075ad8949296b
-  data.tar.gz: a8d758793494a1e56fe6f45a67e3a632b08dbf3dc5eeffe2d7a3abd987419d95
+  metadata.gz: 8c994cc038b61b9cb95b90263a316823a5c7a26cc5b308abf6a0c4f4546b754c
+  data.tar.gz: 7b58d77602441179ffaaf67a71062229264c2071b9b9079596f1e3b6ac08f8de
 SHA512:
-  metadata.gz: 78261cbe2c12298fe264ac6d49e5a67ae3b12d2395dbd45c05aef79d4a1a783301fbb21e5179ee2b772299d2756764f499e73edd0eb00ac9d82d5899964b6ef3
-  data.tar.gz: d0c44630ab93c9c9455237099016a38716afaa90efc43a335064e630154e83276df08260bdd31ecddffbd2ffc3b926d56390c1b8534e705304d4c71a3ab5d31d
+  metadata.gz: '09d3c0ea52feee68d35e8756de6464c409a9e8f2ff531d1a316c7529e49c09fb30d77580c7e67db22a9eb73c5663830755e3e43b4234d1f39e724a6bf21fc1b7'
+  data.tar.gz: 33fe6882d960ec21a094d1d40699cbfc0ec8fd2faef8db897722e7a73fba4ea235ba0addd8fbe56588d4bffbc36038d7bfcf0d5aaf1eb9f129e4982e1b9580ca

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

@@ -26,10 +26,6 @@
     {
       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 +1 @@
-`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.
+`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.

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

@@ -1,8 +1,7 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

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

@@ -4,6 +4,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 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`.
 
-3) `fontColor`: This will allow you to control the font color for a given column.
-
 `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

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

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

@@ -29,7 +29,6 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      column_styling: { font_color: "red" }
     }
 ] %>
 

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

@@ -4,6 +4,4 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 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`.
 
-3) `font_color`: This will allow you to control the font color for a given column.
-
 `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/_advanced_table_padding_control.jsx

@@ -22,6 +22,7 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
+
     },
     {
       accessor: "scheduledMeetings",
@@ -38,15 +39,6 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      columnStyling:{cellPadding: "none", fontColor: "white"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={"category_1"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

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

@@ -76,22 +76,6 @@ const columnDefinitions = [
         {
           label: "Attendance",
           id: "attendance",
-          header: () => (
-            <Flex alignItems="center" 
-                justifyContent="center"
-            >
-              <Caption marginRight="xs">Attendance</Caption>
-              <Tooltip placement="top" 
-                  text="Whoa. I'm a Tooltip Too!" 
-                  zIndex={10}
-              >
-                <Icon cursor="pointer" 
-                    icon="info"
-                    size="xs" 
-                />
-              </Tooltip>
-            </Flex>
-          ),  
           columns: [
             {
               accessor: "attendanceRate",

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

@@ -12,7 +12,7 @@
         capture do
           pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
             pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
-            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs", cursor: "pointer" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
             pb_rails("tooltip", props: {
               trigger_element_id: "tooltip-interact",
               tooltip_id: "example-custom-tooltip",

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

@@ -11,7 +11,6 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_with_custom_header_rails: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: 342,
+  amount: "342",
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount={342}
+          amount="342"
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,27 +22,13 @@
 }) %>
 
 <script>
-// Hide toasts immediately
-const hideAutoToasts = () => {
-  const toastAuto = document.getElementById('toast-auto-close');
-  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
-  if (toastAuto) toastAuto.style.display = 'none';
-  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
-}
-hideAutoToasts();
-
-// Handle various page load/restore events
-window.addEventListener('pageshow', hideAutoToasts)
-document.addEventListener('turbolinks:load', hideAutoToasts)
-document.addEventListener('turbo:load', hideAutoToasts)
-
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-
+  
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,6 +24,7 @@
   horizontal: "center"
 }) %>
 
+
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -34,15 +35,6 @@
     })
   }
 
-  // Hide toasts immediately
-  hideMultiToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hideMultiToasts)
-  document.addEventListener('DOMContentLoaded', hideMultiToasts)
-  document.addEventListener('turbolinks:load', hideMultiToasts)
-  document.addEventListener('turbo:load', hideMultiToasts)
-
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -54,3 +46,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,28 +69,27 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hidePositionToasts = () => {
+  const hideToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
-  // Hide toasts immediately
-  hidePositionToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hidePositionToasts)
-  document.addEventListener('DOMContentLoaded', hidePositionToasts)
-  document.addEventListener('turbolinks:load', hidePositionToasts)
-  document.addEventListener('turbo:load', hidePositionToasts)
-
   buttons.forEach((button) => {
     button.onclick = () => {
-      hidePositionToasts()
+      hideToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
+
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>