playbook_ui 13.21.0 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640

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

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -5,16 +5,7 @@
 
   @each $status_name, $status_value in $pb_online_status_statuses {
     &[class*=_#{$status_name}]  {
-      background: $status_value;
+      @include pb_online_status($status_value);
     }
   }
-  &[class*=_online]  {
-    @include pb_online_status_online;
-  }
-  &[class*=_away]  {
-    @include pb_online_status_away;
-  }
-  &[class*=_offline]  {
-    @include pb_online_status_offline;
-  }
 }

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -10,7 +10,7 @@ type OnlineStatusProps = {
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  status?: "online" | "offline" | "away",
+  status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
 } & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -7,6 +7,12 @@ $pb_online_status_statuses: (
   online: $success,
   away: $warning,
   offline: $neutral,
+  success: $success,
+  warning: $warning,
+  error: $error,
+  info: $info,
+  neutral: $neutral,
+  primary: $primary,
 );
 
 @mixin pb_online_status($background: $neutral) {
@@ -23,16 +29,4 @@ $pb_online_status_statuses: (
   border-style: solid;
   border-radius: 50%;
   background: $background;
-}
-
-@mixin pb_online_status_away {
-  @include pb_online_status($warning);
-}
-
-@mixin pb_online_status_online {
-  @include pb_online_status($success);
-}
-
-@mixin pb_online_status_offline {
-  @include pb_online_status($neutral);
-}
+}

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -1,9 +1,6 @@
-<%= pb_rails("online_status", props: { status: "offline" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "online" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "away" }) %>
+<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -5,24 +5,35 @@ import OnlineStatus from '../_online_status'
 const OnlineStatusDefault = (props) => (
   <>
     <OnlineStatus
+        marginY="xs"
         status="offline"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="online"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="away"
         {...props}
     />
-
+    <OnlineStatus
+        marginY="xs"
+        status="error"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="info"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="primary"
+        {...props}
+    />
   </>
 )
 

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -2,5 +2,6 @@
     aria: object.aria.merge!(label: object.status),
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbOnlineStatus
     class OnlineStatus < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[online offline away],
+                    values: %w[online offline away success warning error info neutral primary],
                     default: "offline"
 
       def classname

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -1 +1,2 @@
-<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname,) %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,5 +1,5 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
@@ -9,4 +9,4 @@
             if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
     })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
-  id: object.id) do %>
+  id: object.id,
+  **combined_html_options) do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria_attributes,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -3,7 +3,8 @@
   id: object.id,
   data: object.data_values,
   class: object.classname,
-  style: object.style) do %>
+  style: object.style,
+  **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:ul,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:li,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -4,7 +4,8 @@
     class: object.classname,
     data: object.data,
     id: object.id,
-    value: object.value) do %>
+    value: object.value,
+    **combined_html_options) do %>
 
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

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

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   aria: object.aria,
   data: object.data,
-  class: object.classnames) do %>
+  class: object.classnames,
+  **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
       <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

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

@@ -4,7 +4,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
@@ -12,7 +13,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -4,7 +4,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: "pb-th#{object.id}" ) do %>
+      id: "pb-th#{object.id}",
+      **combined_html_options) do %>
     <% unless sorting_style? %>
       <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
@@ -51,7 +52,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -3,7 +3,6 @@
 @import "../tokens/colors";
 
 [class^="pb_text_input_kit"] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -60,6 +60,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const filteredProps = {...props}
+  if (filteredProps.marginBottom === undefined) {
+     filteredProps.marginBottom = "sm"
+  }
 
   const { alignment, border, icon } = addOn
   const addOnAlignment = alignment === 'left' ? 'left' : 'right'
@@ -74,7 +78,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
-    globalProps(props),
+    globalProps(filteredProps),
     className,
   ])
   const addOnIcon = (

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

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     aria: object.aria,
     class: object.classname,
-    data: object.data) do %>
+    data: object.data,
+    **combined_html_options) 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_text_input/text_input.rb

@@ -26,7 +26,8 @@ module Playbook
                     nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
       end
 
       def input_tag

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -16,7 +16,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(kitClass)
+  expect(kit).toHaveClass(`${kitClass} mb_sm`)
 })
 
 test('returns additional class name', () => {

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

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

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
@@ -13,4 +14,4 @@
           <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
         <% end %>
       </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>