playbook_ui 15.4.0.pre.alpha.PLAY2465improvetruncation12292 → 15.4.0.pre.alpha.play254712379

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c94a476c487c962bfc494f14bc2ce270d0a40ae0d67397ab2cd427c46e737daa
-  data.tar.gz: bc7fb17ca8d6f5828604f195e1cdfaf26a425b120c57bf98d2f866755a9f1094
+  metadata.gz: 1e3a2f13c99348c91029efd118b7491a3d70554286780980620dbc4bf2746121
+  data.tar.gz: 10b6b15d921600eee4fd1b9b631bdd0571e49680b00af25358a1d32cbaa30fb2
 SHA512:
-  metadata.gz: d1fefeb691bfb6fe4bfad24fca4c85eadd0b515b6722d66e3dc85f83dd3245849d21fdd9fb9011cbd8c6c9ff0f104243239bc5bb7019a142d657520019ce3ad7
-  data.tar.gz: 2590d80114e311bb9526ea81f46a902b99deaf77a444ad19c1adab62f9f828c8f84d59e57c25cb3ff5a4cb1b30151e94c24ecf53b2e523deac934d8505452362
+  metadata.gz: f9df2ad880a4df9bf2cbccc107ff3a15493728dc179b39f23ebc023cde0a17d47bad0f132624de43dd8667d45177ea2f4ca9db887cdb33235eefb5ee9c1c5f0a
+  data.tar.gz: 9827d30f93a07f258b162845c427cddf43960bc780e29ceb6d656be669a66e9e5b2a1d13478dbacb1392ce25fb6147772f8d711ff647c62aa5964ac620042098

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -182,6 +182,33 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  const positionCalendarIfNeeded = (fp: Instance) => {
+    const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
+    if (!cal) return
+
+    const inputRect = fp.input.getBoundingClientRect()
+    const h = cal.getBoundingClientRect().height || 300
+    const spaceBelow = window.innerHeight - inputRect.bottom
+    const spaceAbove = inputRect.top
+
+    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+      if (staticPosition) {
+        cal.style.top = 'auto'
+        cal.style.bottom = 'calc(100% + 5px)'
+      } else {
+        cal.style.position = 'fixed'
+        cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
+        cal.style.left = `${inputRect.left}px`
+      }
+    } else if (staticPosition) {
+      cal.style.top = ''
+      cal.style.bottom = ''
+    } else {
+      Object.assign(cal.style, { position: '', top: '', left: '', bottom: '', right: '', transform: '' })
+      fp._positionCalendar()
+    }
+  }
+
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
 
@@ -239,6 +266,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  // Store resize / position handler reference for cleanup
+  let resizeRepositionHandlerRef: (() => void) | null = null
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -260,13 +290,24 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
-    onOpen: [() => {
+    onOpen: [(_selectedDates, _dateStr, fp) => {
       calendarResizer()
-      window.addEventListener('resize', calendarResizer)
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+      }
+      resizeRepositionHandlerRef = () => {
+        calendarResizer()
+        positionCalendarIfNeeded(fp)
+      }
+      window.addEventListener('resize', resizeRepositionHandlerRef)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
+      positionCalendarIfNeeded(fp)
     }],
     onClose: [(selectedDates, dateStr) => {
-      window.removeEventListener('resize', calendarResizer)
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+        resizeRepositionHandlerRef = null
+      }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       onClose(selectedDates, dateStr)
     }],

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

@@ -1,7 +1,7 @@
 <%= 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 %>
-  <form>
+  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  </form>
+  <% end %>
 <% end %>

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -1,4 +1,5 @@
-Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+Tooltip options from Highcharts:
+
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -1,5 +1,5 @@
 Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
 
-For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+For React, pass the option `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
 
-For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
+For Rails, the option `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -37,7 +37,7 @@
     },
   } %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 <%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
 
   <% chartOptionsSecond = {