playbook_ui 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -7,7 +7,10 @@
 
 $selector: ".pb_form_pill";
 $pb_form_pill_height: 27px;
-$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
+$form_pill_colors: (
+  primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
+);
 
 
 [class^=pb_form_pill_kit] {
@@ -33,18 +36,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
           color: $text_lt_default;
         }
       }
-      @if ($color_name == "warning") {
-        background-color: mix($yellow, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $yellow;
-        }
-      }
-      @if ($color_name == "accessories") {
-        background-color: mix($product_8_background, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $product_8_background;
-        }
-      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
@@ -54,24 +45,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 20%);
             border: 1px solid $border_light;
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 20%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 20%);
-          }
         }
         &:active {
           background-color: mix($color_value, $card_light, 30%);
           @if ($color_name == "neutral") {
             background-color: mix($neutral, $card_light, 30%);
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 30%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 30%);
-          }
         }
       }
       #{$selector}_text {
@@ -79,9 +58,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
         padding: 0 $space-xs;
       }
       #{$selector}_close {
@@ -100,23 +76,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 60%);
           }
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
-        &:hover {
-          background-color: mix($color_value, $card_light, 40%);
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 40%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          color: $product_8_background;
-        }
-        &:hover {
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 40%);
-          }
-        }
       }
       #{$selector}_tag {
         color: $color_value;
@@ -124,9 +83,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
       }
     }
   }
@@ -176,23 +132,25 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   }
   &.dark {
     @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
+      // Primary and Neutral are exceptions to the general rule in the handoff 
       &[class*=_#{$color_name}]  {
-        background-color: mix($color_value, $card_dark, 10%);
-        .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-          color: $color_name;
-        }
-        .pb_form_pill_close {
-          color: $color_name;
-          &:hover {
-            background-color: mix($color_value, $card_dark, 40%);
-          }
-        }
-        &:hover {
-          background-color: mix($color_value, $card_dark, 20%);
-        }
-        &:active {
-          background-color: mix($color_value, $card_dark, 30%);
-        }
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
@@ -227,192 +185,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             }
           }
           &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
+            background-color: mix($active_dark, $card_dark, 20px);
           }
           &:active {
             background-color: mix($active_dark, $card_dark, 30%);
           }
         }
-        @if ($color_name == "data_1") {
-          background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: mix($active_dark, $card_light, 90%);
-          }
-          .pb_form_pill_close {
-            color: mix($active_dark, $card_light, 90%);
-            &:hover {
-              background-color: mix($active_dark, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_1, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "data_6") {
-          background-color: mix($data_6, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($text_dk_light, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($data_6, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_6, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "windows") {
-          background-color: mix($product_1_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_1_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_1_highlight;
-            &:hover {
-              background-color: mix($product_1_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_1_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_1_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "siding") {
-          background-color: mix($product_2_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_2_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_2_highlight;
-            &:hover {
-              background-color: mix($product_2_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_2_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_2_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "roofing") {
-          background-color: mix($product_5_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_5_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_5_highlight;
-            &:hover {
-              background-color: mix($product_5_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_5_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_5_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "doors") {
-          background-color: mix($product_3_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_3_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_3_highlight;
-            &:hover {
-              background-color: mix($product_3_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_3_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_3_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "gutters") {
-          background-color: mix($product_6_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_6_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_6_highlight;
-            &:hover {
-              background-color: mix($product_6_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_6_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_6_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "solar") {
-          background-color: mix($product_4_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_4_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_4_highlight;
-            &:hover {
-              background-color: mix($product_4_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_4_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_4_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "insulation") {
-          background-color: mix($product_7_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_7_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_7_highlight;
-            &:hover {
-              background-color: mix($product_7_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_7_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_7_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          background-color: mix($product_8_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($product_8_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_8_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_8_highlight, $card_dark, 30%);
-          }
-        }
       }
     }
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -17,7 +17,7 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,

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

@@ -6,7 +6,6 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors

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

@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
-export { default as FormPillColors } from './_form_pill_colors.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -12,7 +12,7 @@ module Playbook
                             values: %w[none lowercase],
                             default: "none"
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
+                   values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
       prop :icon

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -16,7 +16,6 @@ type GanttChartProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  ref?: any
 };
 
 const GanttChart = (props: GanttChartProps) => {
@@ -28,7 +27,6 @@ const GanttChart = (props: GanttChartProps) => {
     data = {},
     htmlOptions = {},
     id,
-    ref,
   } = props;
 
   const ariaProps = buildAriaProps(aria);
@@ -66,7 +64,6 @@ const GanttChart = (props: GanttChartProps) => {
           }}
           highcharts={Highcharts}
           options={options}
-          ref={ref}
       />
     </div>
   );

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
-                         default: true
+                         default: false
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 import Flex from "../pb_flex/_flex";
-import { getAllIcons } from "../utilities/icons/allicons"
 
 type MapControlTypes = {
   zoomBtns?: boolean, 
@@ -13,8 +12,6 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
-const eyeIcon = getAllIcons()["eye"]
-
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -45,10 +42,7 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
-              />
+              <Icon icon="eye" />
             </Button>
           ) : null}
         </>

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

@@ -34,7 +34,6 @@ type MultiLevelSelectProps = {
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
   variant?: "multi" | "single"
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -51,8 +50,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    variant = "multi",
-    pillColor = "primary"
+    variant = "multi"
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -88,9 +86,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
-  const arrowDownElementId = `arrow_down_${id}`
-  const arrowUpElementId = `arrow_up_${id}`
-
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
       return
@@ -176,12 +171,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target) &&
-        event.target.id !== arrowDownElementId &&
-        event.target.id !== arrowUpElementId
-      ) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsDropdownClosed(true)
       }
     }
@@ -268,6 +258,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
+    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
@@ -476,7 +467,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? returnedArray.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -489,7 +479,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? defaultReturn.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -525,20 +514,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div id={arrowDownElementId}
-                key="chevron-down">
+            <div key="chevron-down">
               <Icon
                   icon="chevron-down"
-                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div id={arrowUpElementId}
-                key="chevron-up">
+            <div key="chevron-up">
               <Icon
                   icon="chevron-up"
-                  id={arrowUpElementId}
                   size="xs"
               />
             </div>

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

@@ -6,7 +6,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
 
   react:
   - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)

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

@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -19,9 +19,6 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
-      prop :pill_color, type: Playbook::Props::Enum,
-                        values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
-                        default: "primary"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -37,7 +34,6 @@ module Playbook
           selectedIds: selected_ids,
           input_name: input_name,
           variant: variant,
-          pillColor: pill_color,
         }
       end
     end