playbook_ui 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1315703b951ec18c52f143275d8fcce5219cd6cab284b284be92584ffe64adb5
-  data.tar.gz: a8ec02f07ec4a6e857e855b712f659c539410232cb4d8515ae99566e3c1d39f3
+  metadata.gz: a687edbd714231627256d5016b1f8da9ec2876ba3c104dda60cf7174fa8c638b
+  data.tar.gz: 6ff5663b5613b7774d1c2091c54ccdc2b1664342bd95edbf1fb7f5114c8baf0b
 SHA512:
-  metadata.gz: 947391921569c72c01d30a6819ab580140bea82df5bc6f83a8e3426ea1561a07e6178574a8c3df62c820818eb98f792aa7eb0cab223ec837f420f44ec1adb29e
-  data.tar.gz: c33a5d61b41a9fb8c57538234484a37e3bc08c8dbc161f727ec8fa9ba5fcbc0f1e9615bb4c53f844561c89e1ce03a4d64064a6d9e00fb54ba72138dadfc507d8
+  metadata.gz: edc9fda753bf6fbc732f150ad060f0123f0ef4b3718b2cd7707d526ce4f48f15fe0b61d5a97fca767d65bdab6400bae9ab2f3a15ce4f5f4c66709a43b7d1b6ce
+  data.tar.gz: b0a623310a3381bbc3c9090a5aacf8f6fd766828082b116fdb977d9614a40edde660c0993e74d446a5d962f02596d41568c4349bcdd0e362677eda8a40e5aa0c

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (id) {
+      // Attach the clear function to the window, scoped by the id
+      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
+        const resetData = modifyRecursive(formattedData, false);
+        setFormattedData(resetData);
+        setReturnedArray([]);
+        setDefaultReturn([]);
+        setSingleSelectedItem({ id: [], value: "", item: [] });
+        onSelect([]);
+      };
+      return () => {
+        delete (window as any)[`clearMultiLevelSelect_${id}`];
+      };
+    }
+  }, [formattedData, id, onSelect]);
+
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
     id: string,

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb

@@ -0,0 +1,93 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-reset-example",
+    name: "my_array",
+    tree_data: treeData,
+    return_all_selected: true
+}) %>
+
+<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
+
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
+
+    exampleResetButton.addEventListener("click", () => {
+        clearMultiLevelSelectById('multi-level-select-reset-example');
+      });
+    function clearMultiLevelSelectById(id) {
+      const clearFunction = window[`clearMultiLevelSelect_${id}`];
+      if (clearFunction) {
+        clearFunction();
+      } else {
+        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
+      }
+    }
+  })
+</script>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md

@@ -0,0 +1 @@
+In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 

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

@@ -7,6 +7,7 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,6 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -74,6 +73,9 @@ $pb_selectable_card_border: 2px;
 
         position: relative;
         @include pb_card_selected;
+        // Selected card has 1px more border
+        // Remove 1px so content does not "jump"
+        padding: calc($space_sm - 1px);
         transition-property: none;
         transition-duration: 0s;