playbook_ui 13.0.0 → 13.2.0

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

@@ -7,10 +7,12 @@ 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
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
+  - nav_with_spacing_control: Nav with Spacing Control
+  - nav_with_font_control: Nav With Font Control
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_with_all_options: Collapsible Nav With Options
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -26,11 +28,14 @@ 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
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
+  - nav_with_spacing_control: Nav with Spacing Control
+  - nav_with_font_control: Nav With Font Control
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_with_all_options: Collapsible Nav With Options
+  - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
+  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav

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

@@ -15,4 +15,7 @@ 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 CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
+export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
+export {default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
+export {default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"

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

@@ -1,14 +1,15 @@
-<%= content_tag(:li,
-  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", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) 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 %>
         <%= content_tag(object.tag,
-        object.link ? object.link_options : object.options) do %>
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
+          dark: object.dark,
+          id: object.id,
+          href: object.link && object.link,
+          target: object.link && object.target    
+          ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
@@ -26,7 +27,14 @@
     <% end %>
   <% else %>
     <%= content_tag(object.tag,
-      object.link ? object.link_options : object.options) do %>
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
+      href: object.link && object.link,
+      target: object.link && object.target
+      ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
       <% end %>
@@ -40,5 +48,4 @@
         <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
       <% end %>
     <% end %>
-  <% end %>
-<% end %>
+  <% end %>

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

@@ -22,31 +22,72 @@ 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}"
+          "#{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"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
         end
       end
 
-      def tag
-        link ? "a" : "div"
+      def spacing_props
+        if collapsible
+          if object.margin || object.margin_x || object.margin_y || object.margin_bottom || object.margin_top || object.margin_right || object.margin_left
+            # Call the original method
+            original_result = super
+
+            # Remove p_value, px_value, py_value, etc. based on the object's properties
+            margin_classes_to_remove = []
+            margin_classes_to_remove << "m_#{object.margin}" if object.margin
+            margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
+            margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
+            margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
+            margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
+            margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
+            margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
+
+            margin_classes_to_remove.each do |class_to_remove|
+              original_result.gsub!(class_to_remove, "")
+            end
+
+            original_result.strip
+          else
+            super
+          end
+        else
+          super
+        end
       end
 
-      def options
-        {
-          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
-        }.compact
+      def margin_classes
+        margin_attributes = {
+          margin: "m",
+          margin_x: "mx",
+          margin_y: "my",
+          margin_bottom: "mb",
+          margin_top: "mt",
+          margin_right: "mr",
+          margin_left: "ml",
+        }
+
+        # rubocop:disable Style/RedundantAssignment
+        margin_classes = margin_attributes.map do |attr, class_prefix|
+          # rubocop:enable Style/RedundantAssignment
+          value = object.public_send(attr)
+          " #{class_prefix}_#{value}" if value
+        end.compact.join
+
+        margin_classes
       end
 
-      def link_options
-        options.merge(
-          href: link,
-          target: target
-        )
+      def tag
+        link ? "a" : "div"
       end
 
       def collapsible_icons
-        icon_right.present? ? icon_right : %w[plus minus]
+        icon_right.present? && icon_right
+      end
+
+      def collapsible_nav_classname
+        generate_classname("collapsible_nav_wrapper", active_class, collapsible_trail_class)
       end
 
     private

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

@@ -10,5 +10,7 @@
       <% end %>
     <% end %>
   <% end %>
-  <ul><%= content.presence %></ul>
+  <div class='pb_nav_wrapper'>
+    <%= content.presence %>
+  </div>
 <% end %>

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

@@ -0,0 +1,25 @@
+import { Spacing } from "../types";
+
+export type SpacingObject = {
+  margin?: Spacing;
+  marginBottom?: Spacing;
+  marginTop?: Spacing;
+  marginRight?: Spacing;
+  marginLeft?: Spacing;
+  margingX?: Spacing;
+  marginY?: Spacing;
+  padding?: Spacing;
+  paddingBottom?: Spacing;
+  paddingTop?: Spacing;
+  paddingRight?: Spacing;
+  paddingLeft?: Spacing;
+  paddingX?: Spacing;
+  paddingY?: Spacing;
+};
+
+export type NavChildProps = {
+    orientation?: "vertical" | "horizontal";
+    variant?: "normal" | "subtle";
+    itemSpacing?: SpacingObject
+  };
+  

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -70,7 +70,6 @@
   @-moz-document url-prefix() {
     .passphrase-popover {
       position: relative;
-      top: $space_sm;
       left: -($space_xs * 1.5);
     }
   }

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

@@ -1 +1 @@
-We recommend using a typeahead for better UX
+The `multiple` prop enables multiple selections; however, for a better user experience, we recommend our [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react) kit.

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -68,7 +68,7 @@ const Time = (props: TimeProps) => {
             )
       )}
 
-      <time dateTime={date.toString()}>
+      <time dateTime={date.toLocaleString()}>
         <span>
           {unstyled
             ? (