playbook_ui 14.16.0.pre.rc.3 → 14.16.0.pre.rc.5

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

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:td,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:td) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence || object.text %>
     <% end %>
 <% end %>

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

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:thead,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:thead) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
 <% end %>

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

@@ -1,11 +1,7 @@
 <% if object.tag == "table" %>  
-  <%= content_tag(:th,
+  <%= pb_content_tag(:th,
       colspan: object.colspan,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: "pb-th#{object.id}",
-      **combined_html_options) do %>
+      id: "pb-th#{object.id}") do %>
     <% unless sorting_style? %>
         <%= content.presence || object.text %>
     <% else %>
@@ -46,12 +42,7 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+  <%= pb_content_tag do %>
       <% unless sorting_style? %>
         <%= content.presence || object.text %>
       <% else %>

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

@@ -1,12 +1,9 @@
 <% if object.collapsible && object.tag == "table" %>
-    <%= content_tag(:tr,
-    aria: object.aria,
+    <%= pb_content_tag(:tr,
     class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),  
-    id: object.id,
+    data: object.data.merge(id: object.id),
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
-    **combined_html_options) do %>
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id) do %>
     <%= content.presence %>
   <% end %>
 
@@ -24,22 +21,12 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= content_tag(:tr,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
+      <%= pb_content_tag(:tr) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
 <% end %>

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible, 
+    &.visible,
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {        
+      .arrow {
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
+    I'm 150px high and 100px wide!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
+    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
+    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
+    I have a min_width of 300px!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
+    I have a min_height of 300px!
+  <% end %>
+<% end %>

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

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
+  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,10 +1,11 @@
 <%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+      id: object.id,
+      data: object.data,
+      class: object.classname,
+      style: remove_height_properties(combined_html_options[:style]) || "",
+      **combined_html_options.except(:style)) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -3,24 +3,49 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :delay_open
+      prop :delay_close
+      prop :height
+      prop :interaction, type: Playbook::Props::Boolean,
+                         default: false
+      prop :max_height
+      prop :max_width
+      prop :min_height
+      prop :min_width
       prop :position
+      prop :tooltip_id
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
-      prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
+      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
+      def remove_height_properties(combined_html_options_style)
+        return nil if combined_html_options_style.nil?
+
+        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
+                                   .strip
+                                   .presence
+      end
+
+      def height_and_width_helper
+        out = ""
+        out += "width: #{width};" if width.present?
+        out += "height: #{height};" if height.present?
+        out += "max-height: #{max_height};" if max_height.present?
+        out += "max-width: #{max_width};" if max_width.present?
+        out += "min-height: #{min_height};" if min_height.present?
+        out += "min-width: #{min_width};" if min_width.present?
+        out
+      end
+
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,

data/app/pb_kits/playbook/tokens/_display.scss

@@ -4,10 +4,12 @@ $display_inline_block: inline-block !default;
 $display_flex: flex !default;
 $display_none: none !default;
 $display_inline_flex: inline-flex !default;
+$display_grid: grid !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
   display_inline: $display_inline,
   display_inline_block: $display_inline_block,
-  display_block: $display_block
+  display_block: $display_block,
+  display_grid: $display_grid
 );

data/app/pb_kits/playbook/utilities/_display.scss

@@ -24,13 +24,18 @@
     display: none;
 }
 
+.display_grid {
+    display: grid;
+}
+
 $display_values: (
     none: $display_none,
     flex: $display_flex,
     inline: $display_inline,
     inline_block: $display_inline_block,
     inline_flex: $display_inline_flex,
-    block: $display_block
+    block: $display_block,
+    grid: $display_grid
 );
 
 // using a grid here

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -9,7 +9,7 @@ const testSubject = 'body'
 
 // %w[block inline_block inline flex inline_flex none]
 test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
   for(let x = 0, y = propValues.length; x < y; ++x) {
     const testId = `${testSubject}-${propValues[x]}`
     render(