playbook_ui 13.7.0 → 13.8.0.pre.alpha.PLAY962SingleSelect1246

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

@@ -0,0 +1,87 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome2",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people2",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent2",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business2",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative2",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development2",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience2",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact2",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment2",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer2",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy2",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectSingle = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single"
+          inputName="Power"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingle;

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

@@ -1,12 +1,13 @@
 examples:
   rails:
   - multi_level_select_default: Default
+  - multi_level_select_single: Single Select
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  
+
   react:
   - multi_level_select_default: Default
+  - multi_level_select_single: Single Select
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
-  

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

@@ -1,3 +1,4 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
+export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

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

@@ -14,6 +14,11 @@ module Playbook
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
+      prop :input_name, type: Playbook::Props::String,
+                        default: ""
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[multi single],
+                     default: "multi"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -27,6 +32,8 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
+          input_name: input_name,
+          variant: variant,
         }
       end
     end

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

@@ -12,6 +12,7 @@ import { Spacing } from "../types";
 
 type NavItemProps = {
   active?: boolean;
+  highlighted_border?: boolean;
   aria?: { [key: string]: string };
   fontWeight?: "regular" | "bold" | "bolder";
   children?: React.ReactNode[] | React.ReactNode;
@@ -44,7 +45,7 @@ type NavItemProps = {
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
-  
+
   const fontWeightDefault = (orientation: string, variant: string) => {
     return orientation === "horizontal" && variant === "subtle"
       ? "regular"
@@ -55,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
 
   const {
     active = false,
+    highlighted_border = true,
     aria = {},
     orientation,
     variant,
@@ -97,7 +99,7 @@ const NavItem = (props: NavItemProps) => {
     marginY,
   };
 
-//separate margin props and padding props  in itemSpacing object 
+//separate margin props and padding props  in itemSpacing object
 const filterItemSpacing = (obj: { [key: string]: string }) => {
   const filteredPadding: { [key: string]: string } = {};
   const filteredMargin: { [key: string]: string } = {};
@@ -114,7 +116,7 @@ const filterItemSpacing = (obj: { [key: string]: string }) => {
 //deconstruct itemSpacing
 const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
-//if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence 
+//if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
   const finalItemSpacing = {
     ...(filteredMargin || {}),
     ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
@@ -138,19 +140,20 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const Tag = link ? "a" : "div";
   const activeClass = active === true ? "active" : "";
+  const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
     "normal": "font_size_normal"
   };
-    
+
   const fontWeightMapping = {
     "bold": "font_bold",
     "bolder": "font_bolder",
     "regular": "font_regular"
   };
-    
+
   const fontSizeClass = fontSizeMapping[fontSize];
   const fontWeightClass = fontWeightMapping[fontWeight];
 
@@ -162,9 +165,9 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   );
 
   const classes = classnames(
-    buildCss("pb_nav_list_kit_item", activeClass),
+    buildCss("pb_nav_list_kit_item", activeClass, highlightedBorderClass),
     collapsible
-      ? buildCss("pb_collapsible_nav_item", activeClass)
+      ? buildCss("pb_collapsible_nav_item", activeClass, highlightedBorderClass)
       : "",
     fontSizeClass,
     fontWeightClass,
@@ -192,7 +195,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     return child;
   });
 
-  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, collapsibleTrailClass)
+  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
   return (
     <>
@@ -207,7 +210,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             onIconClick={onIconRightClick}
             onClick={onClick}
           >
-            <Collapsible.Main 
+            <Collapsible.Main
             className={globalProps({ ...finalItemSpacing })}
             dark={dark}>
               <Tag

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -6,6 +6,8 @@ import NavItem from './_item'
 
 const navTestId = 'nav'
 const itemTestId = 'item'
+const activeTestBorderlessId = 'activeborderless'
+const activeTestBorderId = 'active'
 const navClassName = 'custom-class-name-nav'
 const itemClassName = 'custom-class-name-item'
 const navTitle = 'Menu'
@@ -35,6 +37,14 @@ const NavDefault = (props) => {
             />
             <NavItem
                 active
+                data={{ testid: activeTestBorderId }}
+                link="#"
+                text="Video"
+            />
+            <NavItem
+                active
+                data={{ testid: activeTestBorderlessId }}
+                highlighted_border={false}
                 link="#"
                 text="Video"
             />
@@ -70,6 +80,18 @@ test('should render title', () => {
     expect(kit).toBeInTheDocument()
 })
 
+test('should have a left border', () => {
+    render(<NavDefault iconRight="angle-down" />)
+    const kit = screen.getByTestId(activeTestBorderId)
+    expect(kit).toContainHTML('pb_nav_list_kit_item_active')
+})
+
+test('should not have a left border', () => {
+    render(<NavDefault iconRight="angle-down" />)
+    const kit = screen.getByTestId(activeTestBorderlessId)
+    expect(kit).toContainHTML('pb_nav_list_kit_item_active_highlighted_border_none')
+})
+
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
@@ -80,4 +102,4 @@ test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
     expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
-})
+})

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

@@ -41,5 +41,11 @@
       color: $primary;
       letter-spacing: normal;
     }
+    &[class*="dark"] {
+      [class*="_item_text"],
+      [class*="_item_icon"] {
+        color: $white !important;
+      }    
+    } 
   }
 }

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

@@ -22,6 +22,9 @@ $selector: ".pb_nav_list";
       border-bottom: 1px solid $border_light;
       &[class*="_active"] {
         border-left-color: $primary !important;
+        &[class*="_highlighted_border_none"] {
+          border-left-width: 0px !important;
+        }
         [class*="_item_icon"] {
           color: $primary !important;
         }

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

@@ -10,6 +10,7 @@ module Playbook
       prop :font_weight, type: Playbook::Props::Enum,
                          values: %w[bold regular bolder],
                          default: "regular"
+      prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
@@ -22,9 +23,9 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "#{generate_classname('pb_nav_list_kit_item', active_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"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
         end
       end
 
@@ -96,6 +97,10 @@ module Playbook
         active ? "active" : nil
       end
 
+      def highlighted_border_class
+        !highlighted_border && active ? "highlighted_border_none" : nil
+      end
+
       def font_weight_class
         case font_weight
         when "bold"

data/app/pb_kits/playbook/pb_table/styles/_table_header.scss

@@ -24,6 +24,7 @@ $text_align_values: (
 .pb_th_link:hover {
   background-color: rgba($primary, 0.03);
   color: $primary !important;
+  border-radius: $border_radius_md;
 }
 
 .pb_th_link, .pb_th_nolink{
@@ -38,13 +39,12 @@ $text_align_values: (
   }
 }
 
-[class*="pb_table_header_dropdown"][class*="_vertical"] {
-  &[class*="_normal"] {
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
-      &[class*="_link"] {
-        border-left-width: 0px;
-        background-color: #fff !important;
-      }
-    }
-  }
+.header_last_item {
+  border-bottom-left-radius: $border_radius_md;
+  border-bottom-right-radius: $border_radius_md;
+}
+
+.header_first_item {
+  border-top-left-radius: $border_radius_md;
+  border-top-right-radius: $border_radius_md;
 }

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,8 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each do |item| %>
-            <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
+          <% object.sort_menu.each_with_index do |item, index| %>
+            <%= pb_rails("nav/item", props: {
+              text: item[:item],
+              link: item[:link],
+              highlighted_border: false,
+              padding: "xs",
+              icon_right: sort_icon(item[:direction], item[:active]),
+              active: item[:active],
+              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+            }) %>
           <% end %>
         <% end %>
       <% end %>