playbook_ui 11.14.0 → 11.15.0.pre.alpha.table1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e407af628bc604a5819a251decfce646719b077391b7bf9255f4c3dec086d278
-  data.tar.gz: c7d561411aa36049ca2f6420baf54facb1ac9fa28e7d744c84444847eaedd6f2
+  metadata.gz: 15b86b8ca70f72bbd121b5f06f6826a014b9050351783119d3d50deb475ee96c
+  data.tar.gz: 7da32444f8b9cd59ed83c7fda537c2ad58ef9a87aa62ddfd567844d2488b2165
 SHA512:
-  metadata.gz: 38a1764cb0a97cebbe9a90839042d2f3058813f07097de54a194ef82c7f5a5c1d3c66627ac8b8321478b77671bb0428f9a2e9814663c94d3638e04451f71ddcd
-  data.tar.gz: 76e7a1e717bb814293ac1510066018879bbf4cddfd237994209f3b460b1e17bc6df0f3f1a02eb08779c7bbb0f61927fafae4971fc13aad0453b262f28c63bc9b
+  metadata.gz: f0728c32ede83ef14a32676ddf639179df8503df1fd7079248c66134e9e7351efd66c6e9c81eefafd0c5ed4e6aab674d4d499b63708ae6b1a7472c24477e4029
+  data.tar.gz: 685973877043359bd20017af71f5c5cf8000dacd38c701442359d3f58c723f7d4fb05c9ac9ff6391f93d3bdaac7ff227e9874b3644b49f0ce39fd44f71bd8d8b

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -68,6 +68,12 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
+	.dialog_sticky_header {
+	position: sticky;
+	top: 0;
+	background-color: $white;
+	}
+
 	// @include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
@@ -155,14 +161,29 @@
 				height: 100%;
 				max-height: 100%;
 				max-width: none;
+				.dialog_footer {
+					position:fixed;
+					bottom: 0;
+					background-color: $white;
+				}
+				
 				&[class*="_sm"] {
 					width: $medium;
+					.dialog_footer {
+						width: $medium;
+					}
 				}
 				&[class*="_md"] {
 					width: $large;
+					.dialog_footer {
+						width: $large;
+					}
 				}
 				&[class*="_lg"] {
 					width: $xlarge;
+					.dialog_footer {
+						width: $xlarge;
+					}
 				}
 			} 
 		}
@@ -170,6 +191,7 @@
 }
 
 //styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
 	$medium: 500px;
     $large: 800px;
@@ -199,24 +221,41 @@
 			height: 100% !important;
 			max-height: 100% !important;
 			max-width: 100%;
+			.dialog_footer {
+				position:fixed;
+				bottom: 0;
+				background-color: $white;
+			}
 			&[class*="_sm"] {
 				width: $medium;
+				.dialog_footer {
+					width: $medium;
+				}
 			}
 			&[class*="_md"] {
 				width: $large;
+				.dialog_footer {
+					width: $large;
+				}
 			}
 			&[class*="_lg"] {
 				width: $xlarge;
+				.dialog_footer {
+					width: $xlarge;
+				}
 			}
 		} 
 	}
 
+	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
+	//conflicts were only apparent in nitro, not in playbook local env
 	.pb_dialog_rails {
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;
 	
 	}
+	//overlay for rails kit
 	dialog::backdrop {
 		position: fixed;
 		top: 0;

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -43,7 +43,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   /* eslint-disable react/jsx-handler-names */
 
   return (
-    <>
+    <div className="dialog_sticky_header">
       <Flex
           {...ariaProps}
           {...dataProps}
@@ -56,11 +56,12 @@ const DialogHeader = (props: DialogHeaderProps) => {
             onClose={api.onClose}
           />
         }
+        
       </Flex>
       {separator &&
         <SectionSeparator />
       }
-    </>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
+    class: object.sticky_header,
     aria: object.aria) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -8,6 +8,10 @@ module Playbook
       def classname
         generate_classname("dialog_header")
       end
+
+      def sticky_header
+        "dialog_sticky_header"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -52,11 +52,11 @@ const DialogFullHeight = () => {
             onClick={toggleHeaderSeparatorDialog}>
           {"Small Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleFooterSeparatorDialog}>
           {"Medium Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleBothSeparatorsDialog}>
           {"Large Dialog"}
         </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb

@@ -1,4 +1,5 @@
-<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
 
 <%= pb_rails("dialog", props: { 
     id:"dialog-scroll", 
@@ -8,4 +9,15 @@
     cancel_button: "Cancel", 
     confirm_button: "Confirm", 
     confirm_button_id: "confirm-button-1"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    full_height: true,
+    id:"dialog-scroll-full-height", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
 }) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -2,24 +2,48 @@ import React, { useState } from 'react'
 import { Button, Dialog } from '../../'
 
 const DialogScrollable = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
+
+  const useDialog = (visible = false) => {
+    const [opened, setOpened] = useState(visible)
+    const toggle = () => setOpened(!opened)
+  
+    return [opened, toggle]
+  }
+  
+    const [dialog1Opened, toggleDialog1] = useDialog()
+    const [dialog2Opened, toggleDialog2] = useDialog()
 
   return (
     <>
-      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog1}>{'Open Dialog'}
+      </Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog2}>{'Open Full Height Dialog'}
+      </Button>
       <Dialog
           cancelButton="Cancel"
           confirmButton="Okay"
-          onCancel={close}
-          onClose={close}
-          onConfirm={close}
-          opened={isOpen}
+          onCancel={toggleDialog1}
+          onClose={toggleDialog1}
+          onConfirm={toggleDialog1}
+          opened={dialog1Opened}
           size="md"
           text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
           title="Header Title is the Title Prop"
       />
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          fullHeight
+          onCancel={toggleDialog2}
+          onClose={toggleDialog2}
+          onConfirm={toggleDialog2}
+          opened={dialog2Opened}
+          size="sm"
+          text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in."
+          title="Header Title is the Title Prop"
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md

@@ -1,2 +1,5 @@
-The dialog will create a scroll container automatically when the text exceeds the height of the page. 
-No prop or configuration is needed. 
+The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed. 
+
+When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
+
+If the dialog is a  `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -55,13 +55,13 @@ const DialogSizes = () => {
           {'Small Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleMdDialog}
         >
           {'Medium Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleLgDialog}
         >
           {'Large Dialog'}

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -1,3 +1,5 @@
+@import "tokens/typography";
+
 @mixin subtle {
   [class*=pb_nav_list_kit_item] {
     list-style: none;
@@ -42,6 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
+       letter-spacing: normal;
     }
   }
 }

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

@@ -9,7 +9,6 @@
 @import "side_highlight";
 @import "alignment";
 @import "hover";
-@import "as-cards";
 @import "single-line";
 @import "table-dark";
 @import "mobile";

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

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

@@ -12,39 +12,42 @@ $transition-speed: 0.2s;
         tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-
           td {
             border-top-color: transparent;
-            border-top-width: 1px !important;
-            transition: all $transition-speed ease;
+            border-top-width: 0;
+            transition: all $transition-speed ease; 
           }
-
-          @media (hover:hover) {
+          @media (hover:hover) { 
+            td {
+              position: relative;
+              &:after {
+                transition: background-color $transition-speed ease, height $transition-speed ease;
+                content: "";
+                position: absolute;
+                display: block;
+                top: -1px;
+                left: 0;
+                right: 0;
+                height: 0;
+                background-color: transparent;
+              }
+              &:first-child:after {
+                left: -1px;
+              }
+              &:last-child:after {
+                right: -1px;
+              }
+            }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-
               td {
-                background: $white;
                 border-color: darken($border_light, 10%);
-                border-top-width: 1px;
+                border-top-width: 0;
                 border-top-color: transparent;
-              }
-            }
-          }
-        }
-      }
-      &.as-cards {
-        tbody {
-          tr {
-            td {
-              border-top-color: $border_light;
-              border-top-width: 1px;
-            }
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-top-width: 1px;
-                  border-top-color: $border_light;
+                &:after {
+                  transition: background-color $transition-speed ease, height $transition-speed ease;
+                  background-color: darken($border_light, 10%);
+                  height: 1px;
                 }
               }
             }

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

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

@@ -9,7 +9,6 @@
         td {
           white-space: nowrap;
           text-overflow: ellipsis;
-          overflow: hidden;
 
           & > * {
             &:not(.btn, br) {

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

@@ -57,33 +57,6 @@
           }
         }
       }
-
-      &.as-cards {
-        border: 1px solid $border_light;
-        border-radius: 4px;
-
-        thead {
-          tr {
-            margin: $space-xs 0 0;
-            padding: 0 $space-xs;
-            border-bottom: 1px solid $border_light;
-
-            th {
-              border-width: 0;
-            }
-          }
-        }
-        tbody {
-          tr {
-            margin: $space-xs;
-            width: calc(100% - #{$space-xs}*2);
-
-            td {
-              border-top-width: 1px;
-            }
-          }
-        }
-      }
     }
   }
 }

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.13.0"
-  VERSION = "11.14.0"
+  PREVIOUS_VERSION = "11.15.0"
+  VERSION = "11.15.0.pre.alpha.table1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.14.0
+  version: 11.15.0.pre.alpha.table1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-13 00:00:00.000000000 Z
+date: 2022-12-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1873,7 +1873,6 @@ files:
 - app/pb_kits/playbook/pb_table/index.js
 - app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
-- app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
 - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2359,9 +2358,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss

@@ -1,49 +0,0 @@
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.as-cards {
-      thead {
-        tr {
-          display: flex;
-          width: 100%;
-
-          th {
-            flex-grow: 1;
-          }
-        }
-      }
-      tbody {
-        tr {
-          display: flex;
-          align-items: stretch;
-          flex-direction: row;
-          justify-content: flex-start;
-          width: 100%;
-          margin: $space-xs 0;
-
-          td {
-            background: $white;
-            flex-grow: 1;
-            border-width: 1px 0;
-
-            &:first-child {
-              border-left-width: 1px;
-              border-radius: 4px 0 0 4px;
-            }
-            &:last-child {
-              border-right-width: 1px;
-              border-radius: 0 4px 4px 0;
-            }
-          }
-
-          &:last-child {
-            td {
-              border-top-width: 1px !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}