playbook_ui 16.2.0.pre.rc.3 → 16.2.0.pre.rc.4

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

@@ -65,7 +65,7 @@
 }] %>
 
 <%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
+  id: "select_a_department",
+  label: "Select a Department",
+  tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

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

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input. 
+
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -192,7 +192,7 @@ describe('MultiLevelSelect multi variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#multi-disabled-test_input')
     fireEvent.click(input)
     
     const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
@@ -227,7 +227,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-test_input')
     fireEvent.click(input)
     
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -246,7 +246,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-click-test_input')
     fireEvent.click(input)
     
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -267,7 +267,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-enabled-click-test_input')
     fireEvent.click(input)
     
     const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -91,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
     marginX,
     marginY,
     disabled = false,
+ 
   } = props;
 
   const spacingMarginProps = {
@@ -197,13 +198,14 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     if (React.isValidElement(child)) {
       const childProps: NavChildProps = {
         itemSpacing: itemSpacing,
+        ...(disabled && { disabled: disabled })
       };
       return React.cloneElement(child, childProps);
     }
     return child;
   });
 
-  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
+  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass, disabledClass)
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
@@ -231,8 +233,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
               icon={iconRight && iconRight}
               iconSize="xs"
               id={id}
-              onClick={onClick}
-              onIconClick={onIconRightClick}
+              onClick={disabled ? undefined : onClick}
+              onIconClick={disabled ? undefined : onIconRightClick}
           >
             <Collapsible.Main
                 className={globalProps({ ...finalItemSpacing })}

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -7,8 +7,10 @@
 @import "./collapsible_nav";
 
 [class^="pb_nav_list"] {
+
   //classes for fontSize and fontWeight props
   .font_size_small {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-size: $font_small;
@@ -16,6 +18,7 @@
   }
 
   .font_size_normal {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-size: $font_normal;
@@ -23,6 +26,7 @@
   }
 
   .font_bolder {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $bolder !important;
@@ -30,6 +34,7 @@
   }
 
   .font_bold {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $bold !important;
@@ -37,6 +42,7 @@
   }
 
   .font_regular {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $regular;
@@ -79,19 +85,22 @@
 }
 
 // Disabled scss
-.pb_nav_item_disabled {
+.pb_nav_item_disabled{
   cursor: not-allowed !important;
-  .pb_nav_list_item_text, 
+
+  .pb_nav_list_item_text,
   .pb_nav_list_item_icon_left,
   .pb_nav_list_item_icon_right,
   .pb_nav_list_item_icon_section {
     color: $text_lt_lighter !important;
     cursor: not-allowed !important;
   }
+
   @media (hover: hover) {
     &:hover {
-      background-color: unset !important;
+      background-color: $white !important;
       color: $text_lt_lighter !important;
+
       .pb_nav_list_item_text,
       .pb_nav_list_item_icon_left,
       .pb_nav_list_item_icon_right {
@@ -100,3 +109,73 @@
     }
   }
 }
+
+  .pb_nav_item_disabled {
+    cursor: not-allowed !important;
+
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_text_collapsible,
+    .pb_nav_list_item_icon_left,
+    .pb_nav_list_item_icon_right,
+    .pb_nav_list_item_icon_section,
+    .pb_nav_list_item_link,
+    .pb_nav_list_item_link_collapsible,
+    .cursor_pointer {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    .pb_collapsible_main_kit {
+      background-color: $white !important;
+    }
+
+    .icon_wrapper,
+    svg {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: $white !important;
+
+        .pb_collapsible_main_kit,
+        .pb_nav_list_item_link,
+        .icon_wrapper {
+          background-color: $white !important;
+        }
+
+        .pb_nav_list_item_icon_section_collapsible path,
+        .pb_nav_list_item_link_collapsible path {
+          color: $text_lt_lighter !important;
+        }
+      }
+    }
+  }
+
+  .collapsible_nav_wrapper_pb_nav_item_disabled {
+    .pb_collapsible_main_kit {
+      background-color: $white !important;
+    }
+
+    .pb_nav_list_item_link,
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left,
+    .pb_nav_list_item_icon_right,
+    .icon_wrapper,
+    .pb_nav_list_item_icon_section {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    .icon_wrapper svg {
+      color: $text_lt_lighter !important;
+    }
+
+    &:hover {
+      .icon_wrapper,
+      .pb_nav_list_item_link {
+        background-color: $white !important;
+      }
+    }
+  }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb

@@ -0,0 +1,24 @@
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const CollapsibleNavDisabledItem = (props) => {
+  return (
+    <Nav 
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          collapsed={false}
+          collapsible
+          disabled
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            disabled
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default  CollapsibleNavDisabledItem

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

@@ -14,6 +14,7 @@ examples:
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -42,6 +43,7 @@ examples:
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -62,9 +64,3 @@ examples:
   - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
   - nav_horizontal_bold_swift: Horizontal Bold
   - nav_props_swift: ""
-
-
-
-  
-
-  

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

@@ -22,4 +22,5 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,5 +1,5 @@
   <% if object.collapsible %>
-    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
+    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname + (object.disabled ? " collapsible_nav_wrapper_pb_nav_item_disabled" : "") }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -25,7 +25,7 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible#{disabled_class}"
         else
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
         end

data/app/pb_kits/playbook/pb_nav/navTypes.ts

@@ -21,5 +21,6 @@ export type NavChildProps = {
     orientation?: "vertical" | "horizontal";
     variant?: "normal" | "subtle";
     itemSpacing?: SpacingObject
+    disabled?: boolean
   };
   

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,15 +1,16 @@
-<%= pb_content_tag(:div, id: nil ) do  %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
+    <label for="<%= object.input_options[:id] || object.id %>">
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>
+      <% else %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
       <% end %>
-    <% else %>
-    <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-    <% end %>
-  </label>
+    </label>
   <% end %>
+
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
@@ -26,4 +27,3 @@
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -289,7 +289,35 @@ test('input display none shows number of selected items', () => {
 
   const kit = screen.getByTestId('input-display-none-test')
   const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
-  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected")
+})
+
+test('input display none keeps selected options visible in dropdown with selected styling', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-dropdown-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-dropdown-test')
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  fireEvent.mouseDown(control)
+
+  await waitFor(() => {
+    const menu = kit.querySelector('.typeahead-kit-select__menu')
+    expect(menu).toBeInTheDocument()
+  })
+
+  // Selected options (Orange, Red) should remain in the dropdown and be marked as selected
+  const selectedOptions = kit.querySelectorAll('.typeahead-kit-select__option--is-selected')
+  expect(selectedOptions.length).toBe(2)
+  const labels = Array.from(selectedOptions).map((el) => el.textContent)
+  expect(labels).toContain('Orange')
+  expect(labels).toContain('Red')
 })
 
 test('typeahead with pills that use name instead of label', () => {