RubyGems - playbook_ui - Versions diffs - 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0 - Mend

playbook_ui 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx CHANGED Viewed

@@ -10,7 +10,6 @@ import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
 import DropdownContext from "../context";
-import MultiSelectTriggerDisplay from "./MultiSelectTriggerDisplay";
 import Body from "../../pb_body/_body";
 import Icon from "../../pb_icon/_icon";
@@ -45,14 +44,12 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
     filterItem,
-    handleBackspace,
     handleChange,
     handleWrapperClick,
     inputRef,
     inputWrapperRef,
     isDropDownClosed,
     isInputFocused,
-    multiSelect,
     selected,
     setIsInputFocused,
     toggleDropdown,
@@ -72,21 +69,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const triggerWrapperClasses = buildCss(
     "dropdown_trigger_wrapper",
     isInputFocused && "focus",
-    !autocomplete && !multiSelect && "select_only"
+    !autocomplete && "select_only"
   );
-  const selectedArray = Array.isArray(selected)
-    ? selected
-    : selected && Object.keys(selected).length
-    ? [selected]
-    : [];
-  const joinedLabels = multiSelect
-    ? ""
-    : selectedArray.map((option) => option.label).join(", ");
   const customDisplayPlaceholder = selected?.label ? (
-    ""
+    <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
   ) : placeholder ? (
@@ -95,8 +82,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
-  const defaultDisplayPlaceholder = joinedLabels
-    ? joinedLabels
+  const defaultDisplayPlaceholder = selected?.label
+    ? selected.label
     : autocomplete
     ? ""
     : placeholder
@@ -138,60 +125,23 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                   paddingX="sm"
                   paddingY="xs"
               >
-                <FlexItem fixedSize={multiSelect ? "85%" : ""}>
-                  <Flex align="center"
-                      wrap
-                  >
+                <FlexItem>
+                  <Flex align="center">
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
                         <Body dark={dark}
-                            paddingLeft={`${joinedLabels ? "xs" : "none"}`}
+                            paddingLeft={`${selected.label ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
                         </Body>
                       </Flex>
                     ) : (
-                      multiSelect ? (
-                        <>
-                        <MultiSelectTriggerDisplay
-                            autocomplete={autocomplete}
-                            dark={dark}
-                            placeholder={placeholder}
-                            selected={selectedArray}
-                        />
-                        {autocomplete && (
-                          <input
-                              className="dropdown_input"
-                              onChange={handleChange}
-                              onClick={(e) => {
-                                e.stopPropagation();// keep the wrapper’s handler from firing
-                                toggleDropdown();
-                              }}
-                              onFocus={() => setIsInputFocused(true)}
-                              onKeyDown={(e) => {
-                                 handleKeyDown(e);
-                                 e.stopPropagation(); //Fixes issue with keyboard accessibility
-                               }}
-                              placeholder={
-                                joinedLabels
-                                  ? ""
-                                  : placeholder
-                                  ? placeholder
-                                  : "Select..."
-                              }
-                              ref={inputRef}
-                              value={filterItem}
-                          />
-                        )}
-                        </>
-                      ) : (
-                        <Body dark={dark}
-                            text={defaultDisplayPlaceholder}
-                        />
-                      )
+                      <Body dark={dark}
+                          text={defaultDisplayPlaceholder}
+                      />
                     )}
-                    {autocomplete && !multiSelect && (
+                    {autocomplete && (
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
@@ -202,7 +152,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
-                            joinedLabels
+                            selected.label
                               ? ""
                               : placeholder
                               ? placeholder
@@ -214,29 +164,14 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     )}
                   </Flex>
                 </FlexItem>
-                <FlexItem>
                   <Body
-                      alignItems="center"
                       dark={dark}
                       display="flex"
                       htmlOptions={{
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
-                  {
-                    selectedArray.length > 0 && (
-                      <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
-                        <Icon
-                            cursor="pointer"
-                            dark={dark}
-                            icon="times"
-                            paddingRight="xs"
-                            size="sm"
-                        />
-                      </div>
-                    )
-                  }
+                  >
                     <Icon
                         cursor="pointer"
                         dark={dark}
@@ -244,7 +179,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         size="sm"
                     />
                   </Body>
-                </FlexItem>
               </Flex>
             </>
           )

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -99,7 +99,6 @@
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
-  <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -98,7 +98,6 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss CHANGED Viewed

@@ -23,7 +23,7 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+    &:not(:has(.pb_phone_number_input)) {
       align-items: flex-start;
       .pb_select_kit_wrapper {
@@ -49,7 +49,7 @@
 @mixin error-state-left-side-select-kit {
   &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
-    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+    &:not(:has(.pb_phone_number_input)) {
       align-items: flex-start;
       .pb_text_input_kit.error {

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

@@ -20,12 +20,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_tag {
+  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
-  .pb_form_pill_close {
-    font-size: 17px;
-  }
   &[class*=wrapped] {
     height: max-content;
@@ -99,9 +96,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        width: 17px;
-        justify-content: center;
-        border-radius: 50%;
+        border-radius: calc(50%);
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -151,7 +146,8 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 0.875em;
+    height: 12px !important;
+    width: 12px !important;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -162,7 +158,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -170,20 +166,17 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 14px;
-      width: 14px;
-      font-size: 15px;
-      border-radius: 50%;
+      height: 10px;
+      border-radius: calc(50%);
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 14px;
-      height: 14px;
-      margin-top: 3px;
-      width: 14px;
-      &::before { line-height: 15px; }
+      flex-basis: 16px;
+      height: 16px;
+      margin-top: 2px;
+      width: 16px;
+      &::before { line-height: 16.5px; }
     }
     .pb_form_pill_icon {
-      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx CHANGED Viewed

@@ -81,11 +81,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
-  const uppercaseState = state?.toUpperCase() ?? ''
-  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
-  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
   return (
     <div
         className={classes(className, dark)}
@@ -93,8 +88,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {hasAllEmptyProps && '—'}
-      {emphasis == 'street' && !hasAllEmptyProps &&
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -111,11 +105,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' && !hasAllEmptyProps &&
+      {emphasis == 'city' &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -128,18 +122,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode ?? ''}`}
+              {` ${zipcode}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' && !hasAllEmptyProps &&
+      {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -150,7 +144,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>

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

@@ -195,8 +195,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           if (!selectedItem.length) {
             setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, label } = selectedItem[0];
-            setSingleSelectedItem({ id: [id], value: label, item: selectedItem });
+            const { id, value } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value, item: selectedItem });
           }
         }
       }

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb CHANGED Viewed

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx CHANGED Viewed

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED Viewed

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "business Affairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED Viewed

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],