playbook_ui 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2345 → 13.19.0.pre.alpha.play1186collapsiblenaviconcolorbug2321

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e693dc32399817f16b4a1774d85d5bfea28e1a97a1ccaa95ac539484d798b31
-  data.tar.gz: f8f6fd1ea3569b64af9587f09e8d7f9becdbdf5d0ee0b1f390b4655d83e3f70b
+  metadata.gz: d4a0c9535e1e8a18819885ccf9f8a0cb1f99d043dfe98b8139e1c5eb25538a07
+  data.tar.gz: 8d1b59b1dba9d078a97621ad906f6e73ec52e18104b6b1b286188cd4041f64fd
 SHA512:
-  metadata.gz: 84eb81e1905e206b4a847090f7aa6a548a850efb67db9dd25242639a1938db75396272ab2a71971b2152b61ff3ecc73a77a1b483501dd94119246e577fa19589
-  data.tar.gz: 243bf284c7f512bdbb494c0d1aa05ecfe9bee70fc2aa6897eb050b5967a0d6133a0b74449b737ed8c66a151d5d019602bed6cb51a07785f0e7a728efd0be1be7
+  metadata.gz: 7e8d6d9fbf50224808ef954c507edddd5a6960ae123af18130915008ab45bd8992c1443259ab04cb70f5f48930c889de87dfacbbf7b2296c4a84545240762a18
+  data.tar.gz: 2d1d0a1c3dcef04a3fb90b667aa6bbbf3410a36c5b8a2ce12dc08d24c340608656573bf3f5188569ac44658affc245f81afb6cb3440a4f1f4f4f5d9400b4a7bb

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -36,8 +36,6 @@ $confirmation_toast_colors: (
     z-index: $z_9;
     display: flex;
     justify-content: space-around;
-    max-width: max-content;
-    width: 90%;
 
     &.top {
       top: $space_md;
@@ -84,11 +82,9 @@ $confirmation_toast_colors: (
 
       &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
         color: $white;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical; 
-        white-space: normal;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
       }
     }
   }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -98,7 +98,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             (text && (
               <Title
                   className="pb_fixed_confirmation_toast_text"
-                  flex="1"
                   size={4}
                   text={text}
               />

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,49 +1,5 @@
-<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-short" } }) %>
-
 <%= pb_rails("fixed_confirmation_toast", props: {
-  classname: "toast-to-hide",
-  closeable: true,
-  id: "toast-top-center-multi-short",
   multi_line: true,
-  text: "Multi-line is used when the given text will not fit on one line.",
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
-  vertical: "top",
-  horizontal: "center"
 }) %>
-
-<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { toast: "#toast-top-center-multi-long" } }) %>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  classname: "toast-to-hide",
-  closeable: true,
-  id: "toast-top-center-multi-long",
-  multi_line: true,
-  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-
-<script type="text/javascript">
-  const alltoasts = document.queryselectorall(".toast-to-hide")
-  const allbuttons = document.queryselectorall("button[data-toast]")
-
-  const hidealltoasts = () => {
-    alltoasts.foreach((toast) => {
-      toast.style.display = "none"
-    })
-  }
-
-  hidealltoasts()
-
-  allbuttons.foreach((button) => {
-    button.onclick = () => {
-      hidealltoasts()
-      let toast = document.queryselector(button.getattribute("data-toast"))
-
-      if (toast) {
-        toast.style.display = "flex"
-      }
-    }
-  })
-</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,69 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastMultiLine = (props) => {
-
-    const [openShort, setOpenShort] = useState(false)
-    const [openLong, setOpenLong] = useState(false)
-
-    const handleClickShort = () => {
-        setOpenShort(true)
-    }
-    const handleClickLong= () => {
-        setOpenLong(true)
-    }
-
-    const handleCloseShort = () => {
-        setOpenShort(false)
-    }
-
-    const handleCloseLong= () => {
-        setOpenLong(false)
-    }
-
-    return (
-        <>
-            <Button
-                onClick={handleClickShort}
-                text="Short Multiline"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-            <Button
-                onClick={handleClickLong}
-                text="Long Multiline"
-                variant="secondary"
-                {...props}
-            />
-
-            <FixedConfirmationToast
-                closeable 
-                horizontal='center'
-                multiLine
-                onClose={handleCloseShort}
-                open={openShort}
-                status='tip'
-                text='Multi-line is used when the given text will not fit on one line.'
-                vertical='top'
-                {...props}
-            />
-
-            <FixedConfirmationToast
-                closeable
-                horizontal='center'
-                multiLine
-                onClose={handleCloseLong}
-                open={openLong}
-                status='tip'
-                text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
-                vertical='top'
-                {...props}
-            />
-        </>
-    )
+  return (
+    <div>
+      <FixedConfirmationToast
+          multiLine
+          status="tip"
+          text="Scan to Assign Selected Items. Click here to generate report"
+          {...props}
+      />
+    </div>
+  )
 }
 
 export default FixedConfirmationToastMultiLine

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -8,8 +8,8 @@
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
 <% end %>

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

@@ -25,9 +25,6 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
-    - table_with_subcomponents: Table with Sub Components (Table Elements)
-    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-
 
   react:
     # - table_div: Div

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) {
+      tr:nth-child(odd), .tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+        tr:nth-child(odd), .tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

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

@@ -48,8 +48,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 +58,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/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: ""