playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

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

@@ -1,152 +1,27 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
-@import "../tokens/titles";
-@import "../tokens/typography";
 
 [class^="pb_nav_list"] {
-  [class*="pb_collapsible_nav_item"] {
-    @mixin collapsible_trail_class {
-      .pb_collapsible_content_kit {
-        margin-left: $space_md - 2 !important;
-        border-left: 2px solid $border_light;
-      }
-    }
-
-    @mixin bold_class {
-      .pb_collapsible_main_kit {
-        .pb_nav_list_item_text_collapsible {
-          @include pb_title_4;
-          font-weight: $bolder !important;
-        }
-      }
-    }
-
-    &[class*="_active"] {
-      background-color: unset !important;
-      .pb_nav_list_item_link {
-        color: unset !important;
-      }
-      .pb_collapsible_main_kit {
-        background-color: $primary !important;
-        border-radius: $border_rad_heavier;
-        .pb_nav_list_item_text_collapsible,
-        .pb_nav_list_item_icon_collapsible,
-        .icon_wrapper,
-        .pb_icon_kit {
-          color: $white !important;
-        }
-      }
-
-      &:hover {
-        background-color: unset;
-      }
-      .pb_collapsible_main_kit:hover {
-        .pb_nav_list_item_text_collapsible {
-          color: $white !important;
-        }
-      }
-
-      .icon_wrapper {
-        &:hover {
-          background-color: mix($primary, $card_light, 40%);
-          .pb_icon_kit {
-            color: $primary !important;
-          }
-        }
-      }
-    }
+  .pb_collapsible_nav_item {
+  .pb_collapsible_main_kit,
+  .pb_collapsible_content_kit,
+  .pb_collapsible_kit {
+    padding: 0 !important;
+  }
 
+  .icon_wrapper {
+    border-radius: $border_radius_rounded;
+    width: 19px;
+    height: 19px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $space_xs;
     &:hover {
-      .pb_nav_list_item_link_collapsible {
-        background-color: unset !important;
-      }
-    }
-
-    .pb_collapsible_main_kit:hover {
-      border-radius: $border_rad_heavier;
-      background-color: mix($primary, $card_light, 10%);
-      .pb_nav_list_item_text_collapsible,
-      svg {
-        color: $primary !important;
-      }
-    }
-
-    .pb_collapsible_main_kit,
-    .pb_collapsible_content_kit,
-    .pb_collapsible_kit {
-      padding: 0 !important;
-    }
+      background-color: rgba($primary_action, $opacity_3);
 
-    &[class*="_collapsible_trail"] {
-      @include collapsible_trail_class;
-    }
-
-    &[class*="_bold_text"] {
-      @include bold_class;
-    }
-
-    &[class*="_emphasized"] {
-      @include collapsible_trail_class;
-      @include bold_class;
-    }
-
-    .icon_wrapper {
-      border-radius: $border_radius_rounded;
-      width: $space_sm + 3;
-      height: $space_sm + 3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: $space_xs;
-      &:hover {
-        background-color: mix($primary, $card_light, 40%);
-      }
-    }
-
-    &.dark {
-      &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
-        .pb_nav_list_item_text {
-          color: $white !important;
-        }
-      }
-
-      .pb_nav_list_item_text_collapsible {
-        color: $white !important;
-      }
-      .pb_nav_list_item_text {
-        color: $text_dk_light;
-      }
-      .pb_nav_list_kit_item:hover {
-        background-color: #ffffff33;
-        color: $white;
-      }
-      .pb_icon_kit {
-        color: $text_dk_light;
-      }
-
-      .pb_collapsible_main_kit:hover {
-        background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
-          color: $white !important;
-        }
-      }
-      .icon_wrapper:hover {
-        background-color: mix($white, $card_dark, 40%);
-      }
-      &[class*="_active"] {
-        .icon_wrapper:hover {
-          background-color: mix($primary, $card_light, 40%);
-        }
-      }
-
-      &[class*="pb_collapsible_nav_item"][class*="_emphasized"],
-      &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
-        .pb_collapsible_content_kit {
-          border-color: $border_dark;
-        }
-      }
     }
   }
 }
+}

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

@@ -11,69 +11,57 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
-  bold?: boolean,
-  emphasized?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
+  collapsibleClick?: () => void,
   data?: object,
-  dark?: boolean,
   iconLeft?: string,
   iconRight?: string | string[],
-  onIconRightClick?: () => void,
-  onIconLeftClick?: () => void,
+  iconRightClick?: () => void,
+  iconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
-  onClick?: () => void,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-  collapsibleTrail?: boolean,
-  collapsed?: boolean
+  toggleCollapsed?: any
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
-    bold,
-    emphasized,
     children,
     className,
     collapsible,
+    collapsibleClick,
     data = {},
-    dark = false,
     iconLeft,
     iconRight,
-    onIconRightClick,
-    onIconLeftClick,
+    iconRightClick,
+    iconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
-    collapsibleTrail,
-    collapsed
+    toggleCollapsed
   } = props
 
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
-  const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
-  const boldClass = collapsible && bold ? 'bold' : ''
-  const emphasizedClass = collapsible && emphasized ? 'emphasized' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 
-                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass, boldClass, emphasizedClass) : '', 
-                  globalProps(props), 
-                  className)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
 
 
   const handleIconClick = (e:any) => {
-    if (onIconLeftClick) {
+    if (iconLeftClick) {
     e.stopPropagation();
-    onIconLeftClick()
+    iconLeftClick()
     }
   }
 
@@ -89,19 +77,20 @@ const NavItem = (props: NavItemProps) => {
           <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
             iconSize="xs" 
             id={id}
-            collapsed={collapsed}
-            onIconClick={onIconRightClick}
-            onClick={onClick}
+            collapsed={toggleCollapsed}
+            iconClick={iconRightClick}
+            onClick={collapsibleClick}
           >
-          <Collapsible.Main dark={dark}>
+          <Collapsible.Main>
           <Tag
-          className="pb_nav_list_item_link_collapsible"
+          className="pb_nav_list_item_link"
           href={link}
+          onClick={onClick}
           target={target}
         >
           {imageUrl &&
             <div
-              className="pb_nav_list_item_icon_section_collapsible"
+              className="pb_nav_list_item_icon_section"
               key={imageUrl}
               onClick={(e)=>handleIconClick(e)}
             >
@@ -114,18 +103,18 @@ const NavItem = (props: NavItemProps) => {
   
           {iconLeft &&
             <div
-              className="pb_nav_list_item_icon_section_collapsible"
+              className="pb_nav_list_item_icon_section"
               key={iconLeft}
               onClick={(e)=>handleIconClick(e)}
             >
               <Icon
-                className="pb_nav_list_item_icon_left_collapsible"
+                className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
           }
-           <span className="pb_nav_list_item_text_collapsible">
+           <span className="pb_nav_list_item_text">
             {text}
           </span>
         </Tag>

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

@@ -29,6 +29,12 @@
         flex: 1;
         font-weight: $regular;
       }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+      letter-spacing: normal;
+    }
       &:hover {
         background-color: rgba($primary, 0.03);
         [class*=_icon] {
@@ -38,11 +44,5 @@
           color: $primary;
         }
       }
-    }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
-      color: $primary;
-      letter-spacing: normal;
-    }
   }
 }

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

@@ -1,84 +1,63 @@
-import React from "react";
-import { Nav, NavItem } from '../..'
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
 
 const CollapsibleNav = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const collapsibles = navItems.map(() => useCollapsible(true))
+
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false)
+      } else {
+        setCollapsed(true)
+      }
+    })
+  }
+
+
+  const handleIconRightClick = (index) => {
+    const [isCollapsed, setCollapsed] = collapsibles[index]
+    setCollapsed(!isCollapsed)
+  }
+
   return (
-    <Nav variant="subtle">
-      <NavItem
-          collapsible 
-          iconLeft="city" 
-          iconRight={["plus", "minus"]}
-          link="#" 
-          text="Overview" 
-          {...props}
-      >
-        <NavItem
-            link="#" 
-            text="City"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Business" 
-            {...props}
-        />
-      </NavItem>
-      <NavItem 
-          active 
-          collapsible 
-          iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
-          link="#" 
-          text="Albums" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="Entertainment" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Food" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Style" 
-            {...props}
-        />
-      </NavItem>
-      <NavItem 
-          collapsible 
-          iconLeft="city" 
-          iconRight={["plus", "minus"]}
-          link="#" 
-          text="Similar Artists" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="City"
-            {...props} 
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Business" 
-            {...props}
-        />
-      </NavItem>
-    </Nav>
-  );
-};
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsible
+                collapsibleClick={() => handleMainClick(index)}
+                iconLeft="chevron-down"
+                iconRightClick={() => handleIconRightClick(index)}
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                text={text}
+                toggleCollapsed={collapsed}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
 
 export default CollapsibleNav

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx}

@@ -1,12 +1,11 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavEmphasize = (props) => {
+const CollapsibleNavCustomIcons = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -30,8 +29,8 @@ const CollapsibleNavEmphasize = (props) => {
         />
       </NavItem>
       <NavItem 
+          active 
           collapsible 
-          emphasized
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -56,7 +55,6 @@ const CollapsibleNavEmphasize = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -83,4 +81,4 @@ const CollapsibleNavEmphasize = (props) => {
   );
 };
 
-export default CollapsibleNavEmphasize;
+export default CollapsibleNavCustomIcons;

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

@@ -7,8 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  # - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -26,9 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
-  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -14,5 +14,4 @@ export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

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

@@ -2,20 +2,19 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
-  dark: object.dark,
   id: object.id) do %>
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
-      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
         <%= content_tag(object.tag,
         object.link ? object.link_options : object.options) do %>
           <% if object.image_url %>
-            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
           <% end %>
           <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
           <% end %>
-          <span class="pb_nav_list_item_text_collapsible">
+          <span class="pb_nav_list_item_text">
             <%= object.text %>
           </span>
         <% end %>    

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

@@ -4,12 +4,9 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :bold, type: Playbook::Props::Boolean, default: false
       prop :collapsible, type: Playbook::Props::Boolean, default: false
-      prop :emphasized, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
-      prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
       prop :icon_left
       prop :icon_right
       prop :image_url
@@ -18,7 +15,7 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
         else
           generate_classname("pb_nav_list_kit_item", active_class)
         end
@@ -30,7 +27,7 @@ module Playbook
 
       def options
         {
-          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
+          class: "pb_nav_list_item_link",
         }.compact
       end
 
@@ -50,18 +47,6 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
-
-      def bold_class
-        bold ? "bold" : nil
-      end
-
-      def collapsible_trail_class
-        collapsible_trail ? "collapsible_trail" : nil
-      end
-
-      def emphasized_class
-        emphasized ? "emphasized" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  data: { options: "data_attribute" },
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md

@@ -0,0 +1 @@
+Inspect the element and notice the data-attribute being added to the `<select>` element

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

@@ -11,6 +11,7 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_data_attributes: Select W/ Data Attributes
 
 
 

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,5 +1,4 @@
 <%= content_tag(:div,
-  data: object.data,
   aria: object.aria,
   class: object.classnames) do %>
   <% if object.label %>
@@ -24,6 +23,7 @@
         disabled: object.disabled,
         required: object.required,
         multiple: object.multiple,
+        data: object.data,
         onchange: object.onchange,
         include_blank: object.include_blank,
       )