playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5781 → 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2a773d292a4e041d43732af8f11d427e12bbb0acb12269edd373531502f1893
-  data.tar.gz: 31850e0ff491191f566e32d4ae494bb69d47535af02b8c7f101ab30e534bad03
+  metadata.gz: f4b2ad0e481643abe338553036ee4fb39c7c7ebe3e388e9486acb5a27cc565e7
+  data.tar.gz: 5c17ee40aba4bace77b6354bac9f417cfd7fb3e8bd3cc9029e9f11142b0808ca
 SHA512:
-  metadata.gz: c7262ac209a071d6bba2bf800d3622566b16592e3c8e5b237bef19b301e89f3d1c5d06055256955656692f43e971dcfcbbb692eec50b316d91d3c65695fe42ed
-  data.tar.gz: 1dccbf346dbc37dd71c217f900ea6a07382a431a2663c10a62b10d7654559d972d5cdedd6e21ad80a121a94f64edfd0e07628dc944212e0f9bd45b563faaed12
+  metadata.gz: 0633f4de5953b60ab7e9f0543bfe25de05b99e2e7378478c4c5858e17f61d271fb63ff8b73f2fe9f991c0c9848ea6bb0cf40cb1c9bba790cfff95d4f84fa9fe6
+  data.tar.gz: fa388b6846808f7e7a0b78c3822ad741b4f8302bdbff50c92527bf6af5a90ec002c3cade3a6ae96d24f85c23b19d26a53713321f52402d46b68d9a0e234ac044

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -89,6 +89,7 @@
     }
   }
 
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -178,7 +179,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {
+  @media only screen and (max-width: $screen-xl-min) {  
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -214,7 +215,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-
+      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -305,4 +306,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -133,18 +133,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-
-    isVisible ? this.hideElement(elements) : this.showElement(elements);
-    isVisible ? this.displayDownArrow() : this.displayUpArrow();
-
-    const row = this.element.closest("tr");
-    if (row) {
-      row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("bg-white", isVisible);
+    if (isVisible) {
+      this.hideElement(elements);
+      this.displayDownArrow();
+    } else {
+      this.showElement(elements);
+      this.displayUpArrow();
     }
   }
 
-
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

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

@@ -14,13 +14,10 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                              <button
-                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                class="gray-icon expand-toggle-icon"
-                                data-advanced-table="true">
-                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                              </button>
+                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -45,4 +42,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link && !disabled ? "a" : "button"
+        link ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,7 +14,6 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
-  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -30,7 +29,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
-    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -58,7 +56,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div
+    <div 
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -95,9 +93,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title
-                dark={dark}
-                size={4}
+            <Title size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -131,7 +127,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
-                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -143,20 +138,15 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption dark={dark}
-                        tag="div">
-                        {weekday}
-                    </Caption>
+                    <Caption tag="div">{weekday}</Caption>
                     <Caption color="light"
-                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption dark={dark}
-                    tag="span">
+                <Caption tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
+        <Caption>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,7 +56,6 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
-            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,8 +4,7 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -16,14 +15,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-
-          size="xs"
+      <Caption size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title {...props}
-          size={1}
-      >
+      <Title size={1}>
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -33,13 +28,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption {...props}
-          size="xs"
-      >
+      <Caption size="xs">
         <FormattedDate
             showDayOfWeek
             showIcon

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -134,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-})
+}, [])
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,7 +2,6 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
-$lightbox-z-index-floor: $z_10 !default;
 
  .carousel {
 
@@ -14,7 +13,7 @@ $lightbox-z-index-floor: $z_10 !default;
     top: 0;
     left: 0;
     right: 0;
-    z-index: $lightbox-z-index-floor + 99;
+    z-index: 9999999;
     align-items: center;
     transition: all .5s;
 
@@ -56,7 +55,7 @@ $lightbox-z-index-floor: $z_10 !default;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
   overflow: hidden;
 }
 
@@ -64,7 +63,7 @@ $lightbox-z-index-floor: $z_10 !default;
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -88,7 +87,7 @@ $lightbox-z-index-floor: $z_10 !default;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -98,7 +97,7 @@ $lightbox-z-index-floor: $z_10 !default;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -141,7 +140,7 @@ $lightbox-z-index-floor: $z_10 !default;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: $lightbox-z-index-floor + 20;
+  z-index: 20;
   &.centered {
     justify-content: center;
   }