playbook_ui 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

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

@@ -6,9 +6,9 @@
     background-color: unset;
     background: unset;
 
-    thead, .pb_table_thead {
-      tr, .pb_table_tr {
-        th, .pb_table_th {
+    thead, .thead {
+      tr, .tr {
+        th, .th {
           text-align: left;
         }
       }

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

@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
 }
 
 [class^=pb_table] {
-  tbody, .pb_table_tbody {
+  tbody, .tbody {
     [class^=pb_table_row_kit] {
       @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
         &[class*=_side_highlight_#{$color_name}] {
-          td, .pb_table_td {
+          td, .td {
             &:first-child {
               @include pb_table_row_kit_side_highlight($color_value);
             }

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -4,9 +4,9 @@
     max-width: 100vw;
     table-layout: fixed;
 
-    tbody, .pb_table_tbody {
-      tr, .pb_table_tr {
-        td, .pb_table_td {
+    tbody, .tbody {
+      tr, .tr {
+        td, .td {
           white-space: nowrap;
           text-overflow: ellipsis;
 
@@ -20,7 +20,7 @@
             display: block !important;
           }
 
-          br, .pb_table_br {
+          br, .br {
             content:' ' !important;
 
             &::after {

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

@@ -2,7 +2,7 @@
 
 [class^="pb_table"] {
   &.sticky-header {
-    thead, .pb_table_thead {
+    thead, .thead {
       background: $white;
       position: sticky;
       top: 0;
@@ -12,7 +12,7 @@
 
   &.dark {
     &.sticky-header {
-      thead, .pb_table_thead {
+      thead, .thead {
         background: $bg_dark;
         position: sticky;
         top: 0;

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

@@ -1,7 +1,7 @@
 [class^=pb_table] {
   &.striped {
-    tbody, .pb_table_tbody {
-      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+    tbody, .tbody {
+      tr:nth-child(odd), .tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -9,8 +9,8 @@
 
   &.dark {
     &.striped {
-      tbody, .pb_table_tbody {
-        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+      tbody, .tbody {
+        tr:nth-child(odd), .tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

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

@@ -1,19 +1,12 @@
 @import "../../tokens/colors";
 
 [class^=pb_table] {
-  display: table;
-
   @each $name, $value in $cell-pad-list {
     &.#{$name} {
       width: 100%;
-      thead, .pb_table_thead {
-        display: table-header-group;
-
-        tr, .pb_table_tr {
-          display: table-row;
-
-          th, .pb_table_th {
-            display: table-cell;
+      thead, .thead {
+        tr, .tr {
+          th, .th {
             padding: $cell-pad-md $cell-gutter;
 
             &:first-child {
@@ -25,14 +18,9 @@
           }
         }
       }
-      tbody, .pb_table_tbody {
-        display: table-row-group;
-
-        tr, .pb_table_tr {
-          display: table-row;
-
-          td, .pb_table_td {
-            display: table-cell;
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px;
@@ -48,8 +36,7 @@
         }
       }
       &.data_table {
-        thead tr th,
-        .pb_table_thead .pb_table_tr .pb_table_th {
+        thead tr th {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {
@@ -59,8 +46,7 @@
             padding-right: $cell-pad-sm;
           }
         }
-        tbody tr td,
-        .pb_table_tbody .pb_table_tr .pb_table_td  {
+        tbody tr td {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -7,9 +7,9 @@
       border-spacing: 0;
       background: $white;
 
-      thead, .pb_table_thead {
-        tr, .pb_table_tr {
-          th, .pb_table_th {
+      thead, .thead {
+        tr, .tr {
+          th, .th {
             border-color: $border_light;
             border-style: solid;
             border-width: 1px 0 1px 0;
@@ -26,9 +26,9 @@
         }
       }
 
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
-          td, .pb_table_td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px 0;
@@ -42,7 +42,7 @@
           }
 
           &:last-child {
-            td, .pb_table_td {
+            td, .td {
               border-width: 0 0 1px 0;
 
               &:first-child {

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
   &.table-md,
   &.table-lg {
     &.table-dark {
-      thead, .pb_table_thead {
-        tr, .pb_table_tr {
+      thead, .thead {
+        tr, .tr {
           border-color: $border_dark !important;
 
-          th, .pb_table_th {
+          th, .th {
             border-color: $border_dark !important;
             color: $text_dk_light;
           }
         }
       }
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
+      tbody, .tbody {
+        tr, .tr {
           border-color: $border_dark;
           transition: none !important;
 
-          td, .pb_table_td {
+          td, .td {
             border-color: $border_dark !important;
             color: $white;
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
             }
           }
           &:first-child {
-            td, .pb_table_td {
+            td, .td {
               border-top-width: 0 !important;
             }
           }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
         &.table-dark {
           background: none !important;
 
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 background: $table-dark-card-bg !important;
               }
             }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
         }
       }
       &.table-dark {
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
-            td, .pb_table_td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               &:first-child {
                 border-top-color: $border_dark !important;
               }
             }
             &:first-child {
-              td, .pb_table_td {
+              td, .td {
                 border-top-width: 1px !important;
               }
             }

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

@@ -10,7 +10,7 @@ $text_align_values: (
 );
 
 [class^=pb_table] {
-  thead, .pb_table_thead {
+  thead, .thead {
     [class^=pb_table_header_kit] {
       @each $align_name, $align_value in $text_align_values {
         &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
 }
 
 [class^=pb_table] {
-  thead, .pb_table_thead {
+  thead, .thead {
     [class^=pb_th_active] {
       color: $primary !important;
     }

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead, .pb_table_thead {
-        tr, .pb_table_tr {
+      thead, .thead {
+        tr, .tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th, .pb_table_th {
+          th, .th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
-          td, .pb_table_td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td, .pb_table_td {
+            td, .td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
-            td, .pb_table_td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
+          tbody, .tbody {
+            tr, .tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -1,12 +1,12 @@
 [class^=pb_table] {
   &.vertical-border {
-    td, th, .pb_table_td, .pb_table_th {
+    td, th, .td, .th {
       border-right: 1px solid $border_light !important;
     }
 
     @media screen and (min-width: $screen-xs-min) {
-      tr:hover, .pb_table_tr:hover {
-        td:last-child, .pb_table_td:last-child {
+      tr:hover, .tr:hover {
+        td:last-child, .td:last-child {
           border-right-color: darken($border_light, 10%) !important;
         }
       }

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

@@ -13,7 +13,9 @@
       class: object.classname,
       data: object.data,
       id: object.id) do %>
-      <%= content.presence %>
+      <%= content_tag(:div, class: "div-table") do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -1,57 +1,47 @@
-<% if object.tag == "table" %>  
-  <%= content_tag(:th,
-      colspan: object.colspan,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: "pb-th#{object.id}" ) do %>
-    <% unless sorting_style? %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
+<%= content_tag(:th,
+    colspan: object.colspan,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: "pb-th#{object.id}" ) 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 %>
+    <% end %>
+  <% else %>
+    <%= link_to next_link, style: link_style do %>
+      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
         <%= content.presence || object.text %>
-      <% end %>
-    <% else %>
-      <%= link_to next_link, style: link_style do %>
-        <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
-          <%= content.presence || object.text %>
-            <% if sorting_style? %>
-              <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
-                                            fixed_width: true,
-                                            classname: active_item.any? ? "pb_th_active" : "",
-                                            padding_left: "xs" }) %>
-          <% end %>
+          <% if sorting_style? %>
+            <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                          fixed_width: true,
+                                          classname: active_item.any? ? "pb_th_active" : "",
+                                          padding_left: "xs" }) %>
         <% end %>
       <% end %>
-      <% if use_dropdown_select %>
-        <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
-                                        close_on_click: "outside",
-                                        trigger_element_id: "pb-th#{object.id}",
-                                        tooltip_id: "sort-filter-btn-tooltip#{object.id}",
-                                        position: object.placement ,
-                                        padding: 'none'}) do %>
-          <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-            <% object.sort_items.each do |sort_item| %>
-              <% item = active_or_first_item(sort_items_for(sort_item)) %>
-              <%= pb_rails("nav/item", props: {
-                text: item[:item],
-                link: next_link(sort_item: sort_item),
-                highlighted_border: false,
-                padding: "xs",
-                icon_right: sort_icon(item[:direction], item[:active]),
-                active: item[:active],
-                classname: "header_nav_item"
-              }) %>
-            <% end %>
+    <% end %>
+    <% if use_dropdown_select %>
+      <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                      close_on_click: "outside",
+                                      trigger_element_id: "pb-th#{object.id}",
+                                      tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                      position: object.placement ,
+                                      padding: 'none'}) do %>
+        <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
+          <% object.sort_items.each do |sort_item| %>
+            <% item = active_or_first_item(sort_items_for(sort_item)) %>
+            <%= pb_rails("nav/item", props: {
+              text: item[:item],
+              link: next_link(sort_item: sort_item),
+              highlighted_border: false,
+              padding: "xs",
+              icon_right: sort_icon(item[:direction], item[:active]),
+              active: item[:active],
+              classname: "header_nav_item"
+            }) %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
-<% else %>
-  <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-      <%= content.presence || object.text %>
-  <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -23,16 +23,9 @@ module Playbook
                   default: ""
       prop :sort_dropdown, type: Playbook::Props::Boolean,
                            default: false
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[table div],
-                 default: "table"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class) + tag_class
-      end
-
-      def tag_class
-        " pb_table_th"
+        generate_classname("pb_table_header_kit", align_class)
       end
 
       def align_class

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

@@ -1,17 +1,7 @@
-<% if object.tag == "table" %>
-    <%= content_tag(:tr,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
-      <%= content.presence %>
-    <% end %>
-<% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
-      <%= content.presence %>
-    <% end %>
-<% end %>
+<%= content_tag(:tr,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -5,21 +5,14 @@ module Playbook
     class TableRow < Playbook::KitBase
       prop :side_highlight_color, type: Playbook::Props::String,
                                   default: "none"
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[table div],
-                 default: "table"
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
+        generate_classname("pb_table_row_kit", side_highlight_class)
       end
 
       def side_highlight_class
         side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
       end
-
-      def tag_class
-        " pb_table_tr"
-      end
     end
   end
 end

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

@@ -27,7 +27,7 @@ type TextInputProps = {
   required?: boolean,
   type: string,
   value: string | number,
-  children: React.ReactElement,
+  children: Node,
   addOn?: {
     icon?: string,
     alignment?: "right" | "left",
@@ -85,12 +85,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         icon={icon}
     />
   )
-
-  const childInput = children ? children.type === "input" : undefined
-
   const textInput = (
-    childInput ? React.cloneElement(children, { className: "text_input" }) :
-    (<input
+    <input
         {...domSafeProps(props)}
         className="text_input"
         disabled={disabled}
@@ -103,7 +99,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+    />
   )
 
   const addOnInput = (
@@ -135,7 +131,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   )
 
   const render = (() => {
-    if (children && !childInput) return children
+    if(children) return children
     if (shouldShowAddOn) return addOnInput
 
     return textInput
@@ -148,7 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
+      {label && 
         <Caption
             className="pb_text_input_kit_label"
             text={label}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -58,16 +58,6 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'frog', alignment: 'right', border: true }}
-            label="Right-Aligned Add On With Child Input"
-            onChange={handleUpdateFourthInput}
-            {...props}
-        >
-          <input />
-        </TextInput>
-      </div>
       <div>
         <TextInput
             addOn={{ icon: 'percent', alignment: 'left', border: false }}
@@ -86,16 +76,6 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'frog', alignment: 'left', border: true }}
-            label="Left-Aligned Add On With Child Input"
-            onChange={handleUpdateFourthInput}
-            {...props}
-        >
-          <input />
-        </TextInput>
-      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -7,5 +7,4 @@
 | **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
 | **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
 | **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **title** | `String` | Adds a title |  |  |

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

@@ -23,5 +23,4 @@ examples:
   - user_vertical_size_swift: Vertical
   - user_text_only_swift: Text Only
   - user_size_swift: Horizontal Size
-  - user_presence_indicator_swift: Presence Indicator
   - user_props_table: ""