playbook_ui_docs 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12149 → 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a41ffe34a4eb35218d9eb5fa35865c6de5a32f7e6b95d56f8fa71ee8dffb5b7
-  data.tar.gz: eb02072e99f9d7a88d187fc1283a22920db25b3880f76bded0fbcae4c482d3f3
+  metadata.gz: d824bd157d14a8643cbc18f9ec7676b45fe90e949315e96e191ce66503a6aff7
+  data.tar.gz: a64fe3d7ce447ca068d90e46f1ab54a36e07f5f917efd8cb5092ff2c14c20c48
 SHA512:
-  metadata.gz: 900ee6e1f2946da69233d043f832b748140f62447ccd3579fbb3c722db17a4ecb7b9118e773448bc1d52c90f0a06074c672e6b072d1ad1d95a5b2827352f2ce7
-  data.tar.gz: 5efd64ec7e787a6c25caf5a42e5502fe4b9b552d6b010d258b8909676807e31a92dc6a27e3a4d95fd8a40c65fe354aa1e6cdfce58a70ce36fe1c857f80483522
+  metadata.gz: 0c7d7dae90ec02263d91fa228845fbe3cd46769a9906be99e0055adacf327486f670e143517d360cc1691f9e2d0c47a8b101c85f54fa9713a35263f5a1621613
+  data.tar.gz: da4b5f29eec7b56ff02ba76f154f25182b5d02f9da670f2e211482b6eb856ebf0d665c7d133de8069e46f7c6baa5df02e0c7c2f253ac6cb1a0e86d96670732c2

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_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_date_picker/docs/example.yml

@@ -48,8 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
-  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,5 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

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

@@ -1 +1 @@
-Use to display the date, stacking month and day.
+Use to display the date, stacking month and day. Year will not show if it is the current year.

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
-  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -13,7 +12,6 @@ examples:
   react:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
-  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

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

@@ -1,7 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
 export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
-export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'

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

@@ -49,9 +49,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_quickpick: Quick Pick Variant
-  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
-  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
-
 

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

@@ -22,8 +22,4 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
-export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
-export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
-export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'

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>