playbook_ui 14.20.0.pre.alpha.PLAY21817891 → 14.20.0.pre.alpha.play2168firstcolumnborderbug7950

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5a669085171e48d532ab250fafc5318cfd95de42e5fde3532fce1f00466de61
-  data.tar.gz: 966679c3c529eda79c5e1151c97930649ff3df364c66ff7ad9e6f586a49f951b
+  metadata.gz: fcf6c9b4cc1f09fe9f4ad71387108d0a83305a79498d68a455660c8a1d877d9a
+  data.tar.gz: c95645d5f485724ecc9af73bdfd15701be9aac3b11e3626dead28ce4767ec149
 SHA512:
-  metadata.gz: bdbf9b7a3bf06917c740253861ec71609c3c3407312e8706897fc1bd2dc2952cbeeed819ec449a93b0f261c6af7a163c0e07aaf63a47a24cbf2e03fda0e6a053
-  data.tar.gz: 3ffacae8137dce92ae4f612cd7bd5fb08f7985c2bc85f664f666697fb5961c0a41c1caf5b49fac84525b1c938f7250a5f7d441a6ac7def209ac09f6ff885426d
+  metadata.gz: a46969b38f920b5c13d33d8f2287a56942f8f20f833734a1c282c36cd8328f693ee134a4af557d03d60cd91be39c099c816c088a070f4041cad0ee4a95d16f15
+  data.tar.gz: 05fae68a0a62be4ec28dec7c2d46b8e16f8998309da8064566003b8b7bc9471cef8f36605dbd475627fcadd1c1988d41acd513f356278d0941ab5da354dfafe9

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -368,6 +368,10 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  .pb_table_td:nth-child(2) {
+    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -564,6 +568,10 @@
         box-shadow: $shadow_deep !important;
       }
 
+      .pb_table_td:nth-child(2) {
+        box-shadow: 0 0 0 0 !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, 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: { container: false }}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+  <select name="animal" id="animal">
+    <optgroup label="Mammal">
+      <option value="1">Cat</option>
+      <option value="2">Dog</option>
+    </optgroup>
+    <optgroup label="Amphibian">
+      <option value="3">Frog</option>
+      <option value="4">Salamander</option>
+    </optgroup>
+  </select>
+<% end %>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectCustomSelectSubheaders = (props) => {
+  return (
+    <div>
+      <Select
+          label="Favorite Animal"
+          {...props}
+      >
+        <select
+            id="animal"
+            name="animal"
+            {...props}
+        >
+          <optgroup label="Mammal">
+            <option value="1">{'Cat'}</option>
+            <option value="2">{'Dog'}</option>
+          </optgroup>
+          <optgroup label="Amphibian">
+            <option value="3">{'Frog'}</option>
+            <option value="4">{'Salamander'}</option>
+          </optgroup>
+        </select>
+      </Select>
+    </div>
+  )
+}
+
+export default SelectCustomSelectSubheaders

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md

@@ -0,0 +1 @@
+To create a select with non-selectable subheaders, use a Custom Select component to render a native `<select>` containing `<optgroup>` elements. The [optgroup HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup) groups related options under a non-selectable label in the dropdown.

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

@@ -8,6 +8,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
@@ -25,6 +26,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)

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

@@ -11,3 +11,4 @@ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.js
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
+export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'