playbook_ui 14.24.0.pre.alpha.PLAY2329atstickypinnedborderbug9340 → 14.24.0.pre.alpha.PLAY19989342

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 919140b9c4ff4dc7d78c99c85d8508adf99998960f68df763353d404442a0e2e
-  data.tar.gz: d026678b39843a9e6a879af6704b21ba3d5fdb5eca6dc26f3d12392f637b5dfe
+  metadata.gz: 59c17882526a3b72d9fc83804b03d9b16990cb101e1862b0e52b86302f1d2910
+  data.tar.gz: 2a8bcde09ad5af23d054ddba72d05dd55d18a592e84748435269a933456942ed
 SHA512:
-  metadata.gz: 1d555ca3b3ea695c9c62ff5df638564bac4a1b209e00b5850412be03d3ee120c7dfdb8fbac8ea4a7c4dc7d6805c8538152f89060b238df8718ae84c1940a3e65
-  data.tar.gz: db38867f8c5f8864c1bca8cc000638caffd7c9a2a93a4cb44f6ed71daebfaa72fdc4c0284d0ef46764af54e15fb5449a91030e01efc1af78f652496f0f98ab92
+  metadata.gz: f6e0c7da6c2b966bef964121f3f25a0c4d5f141be242d977d173e14f063dd7c3dd96cb81eedd14bf6cfa06838719ad76470b5e76d5c9b8818d5314b7a4234e13
+  data.tar.gz: 95e0c86be7672a3370c39a60ccdcb2cd5e31112c921b407cea885baf651560869bef742c89716510a5f714f1b768b30472895da6f8f04ac2ac101839ce41082b

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

@@ -971,40 +971,6 @@
       }
     }
   }
-
-  // Firefox-specific fix for last-header-cell and last-cell vertical borders
-  @-moz-document url-prefix() {
-    .pb_advanced_table_header {
-      .last-header-cell {
-        border-right: none !important;
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-    }
-
-    .pb_advanced_table_body {
-      .last-cell {
-        border-right: none !important;
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-    }
-
-    // Dark mode Firefox fixes
-    &.dark {
-      .pb_advanced_table_header {
-        .last-header-cell {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_dark !important;
-        }
-      }
-
-      .pb_advanced_table_body {
-        .last-cell {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_dark !important;
-        }
-      }
-    }
-  }
 }
 
 // Outside of the pb_advanced_table class for popover

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

@@ -19,6 +19,7 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
+  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -35,6 +36,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
+    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -90,7 +92,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -124,7 +126,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -158,7 +160,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
+                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,6 +11,8 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

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

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

data/app/pb_kits/playbook/pb_date/docs/index.js

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

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

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) 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 {
@@ -15,53 +15,5 @@
         }
       }
     }
-
-    // Firefox-specific fix for sticky elements
-    @-moz-document url-prefix() {
-      // Target sticky headers
-      &.sticky-header {
-        th:not(:last-child) {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-
-        .pb_advanced_table_body {
-          .pinned-row {
-            td:not(:first-child):not(:last-child) {
-              border-right: none !important;
-              box-shadow: 1px 0 0 0 $border_light !important;
-            }
-          }
-        }
-      }
-
-      // Target sticky left columns
-      &.sticky-left-column {
-        td[style="left"], th[style="left"] {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-      }
-
-      // Target sticky right columns
-      &.sticky-right-column {
-        td[style="right"], th[style="right"] {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-      }
-
-      // Handle hover states in Firefox
-      @media screen and (min-width: $screen-xs-min) {
-        tr:hover, .pb_table_tr:hover {
-          td:last-child, .pb_table_td:last-child {
-            &[style="left"], &[style="right"] {
-              border-right: none !important;
-              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
-            }
-          }
-        }
-      }
-    }
   }
 }