playbook_ui 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 → 14.9.0.pre.alpha.play1703errorstatealignment4889

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

@@ -18,3 +18,5 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_pagination: Pagination
+  - advanced_table_pagination_with_props: Pagination Props

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

@@ -10,3 +10,5 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
+export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
+export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'

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

@@ -4,8 +4,10 @@
                 <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
                     <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
-                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                            <button
+                              class="gray-icon toggle-all-icon"
+                              onclick="expandAllRows(this); event.preventDefault();">
+                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>
@@ -13,4 +15,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -31,14 +31,12 @@ $avatar-sizes: (
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
           transform: translateX(-50%);
-          padding: 2px !important;
         }
 
         [class^=pb_card_kit].overlay_left_center,
         [class^=pb_card_kit].overlay_right_center {
           top: 50%;
           transform: translateY(-50%);
-          padding: 2px !important;
         }
       }
 

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,24 +1,25 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^=pb_body_kit]{
+[class^="pb_body_kit"] {
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*=_default_#{$status_name}] {
+      &[class*="_default_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+    &[class*="_#{$dark_color_name}"][class*="dark"] {
       @include pb_body($dark_color_value);
     }
   }
-  b, strong {
+  b,
+  strong {
     font-weight: $bold;
   }
 
@@ -29,7 +30,8 @@
     }
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -39,26 +41,25 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=#{$status_name}] {
+    &[class*="#{$status_name}"] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*=dark] {
+  &[class*="dark"] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
-      &[class*=_#{$dark_color_name}][class*=dark]{
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+      &[class*="_#{$dark_color_name}"][class*="dark"] {
         @include pb_body($dark_color_value);
       }
     }
-    @each $status_name, $status_value in $pb_body_status {
-      &[class*=_#{$status_name}] {
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-
 }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,29 +3,35 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  lighter:        $text_lt_lighter,
-  link:           $primary,
-  error:          $error,
-  success:        $text_lt_success_sm,
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  link: $primary,
+  error: $error,
+  success: $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
-  link:           $active_dark,
-  error:          $error,
-  success:        $text_dk_success_sm,
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  link: $active_dark,
+  error: $error,
+  success: $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default:        $text_lt_default,
-  negative:       $error,
-  dark_error:     $error_dark_body,
-  positive:       $text_lt_success_sm,
+  default: $text_lt_default,
+  negative: $error,
+  dark_error: $error_dark_body,
+  positive: $text_lt_success_sm,
+);
+
+$pb_dark_body_status: (
+  default: $text_dk_default,
+  negative: $error_dark,
+  positive: $text_dk_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,6 +13,7 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
+          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -22,11 +23,13 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
+            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
+          {...props}
       />
       <Link
           {...props}
@@ -36,17 +39,20 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
+            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
+          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
+            {...props}
         />
       </Link>
     </BreadCrumbs>

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,9 +13,10 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error,
+  error:          $error_dark,
 );
 
 

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 }
 
 @mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action);
+  @include pb_card_selected($primary_action_dark);
 }
 
 @mixin pb_card($background: $card_light, $border_color: $border_light) {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -40,8 +40,6 @@ module Playbook
                         default: {}
       prop :input_data, type: Playbook::Props::HashProp,
                         default: {}
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
@@ -57,8 +55,6 @@ module Playbook
       prop :position, type: Playbook::Props::String,
                       default: "auto"
       prop :position_element, type: Playbook::Props::String
-      prop :reset_to_default, type: Playbook::Props::Boolean,
-                              default: false
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
                             values: %w[week month quickpick none],
@@ -102,7 +98,6 @@ module Playbook
           plugins: plugins,
           position: position,
           positionElement: position_element,
-          resetToDefault: reset_to_default,
           required: required,
           selectionType: selection_type,
           showTimezone: show_timezone,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -24,11 +24,9 @@ type DatePickerConfig = {
   required: boolean,
   hideIcon?: boolean;
   inLine?: boolean,
-  inputValue: string,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
   selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
-  resetToDefault?: boolean,
   showTimezone?: boolean,
   staticPosition: boolean,
   thisRangesEndToday?: boolean,
@@ -52,7 +50,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableWeekdays,
     enableTime,
     format,
-    inputValue,
     maxDate,
     minDate,
     mode,
@@ -62,7 +59,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins,
     position = "auto",
     positionElement,
-    resetToDefault,
     required,
     selectionType,
     showTimezone,
@@ -246,12 +242,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.changeYear(Number(e.target.value))
   })
 
-  // add data atrribute for reset to default
-  const element = document.querySelector(`#${pickerId}`);
-  if (resetToDefault && defaultDate && element) {
-    element.setAttribute("data-pb-date-picker", defaultDate?.toString());
-  }
-
   // Reverse month and year dropdown reset on form.reset()
   if (picker.input.form) {
     picker.input.form.addEventListener('reset', () => {

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

@@ -2,7 +2,6 @@ examples:
 
   rails:
   - date_picker_default: Default
-  - date_picker_reset_to_default: Reset to Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
   - date_picker_allow_input: Allow Input

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -11,3 +11,8 @@
   }
 }
 
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
+    border: 1px $text_dk_lighter dashed;
+  }
+}

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -13,6 +13,7 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
+  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
+    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card>
+      <Card dark={dark}>
         <input {...getInputProps()} />
-        <Body color="light">
+        <Body
+            color="light"
+            dark={dark}
+        >
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -5,11 +5,17 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{object.label}" %>
+        </label>
         <%= pb_rails("text_input", props: {
           type: "file",
+          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}", 
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -45,12 +45,11 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
-  <%= form.date_picker :example_date_picker_2,  props: { label: true,  reset_to_default: true, default_date: "06/09/1994" } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()"  } %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,7 +1,7 @@
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: flex-start;
   justify-content: flex-start;
 
   &[class*=_full] {
@@ -12,6 +12,18 @@
     }
   }
 
+  &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){
+    align-items: flex-end;
+  }
+
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
+    align-items: center;
+  }
+
+  &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
+    align-items: center;
+  }
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +39,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-    
+
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +162,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    } 
+    }
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

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

@@ -19,6 +19,16 @@
           font-weight: $bolder;
         }
       }
-   }
+    }
+  }
+
+  .dark & {
+    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
+      &[class*=_link] {
+        &[class*=_active] {
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
+    }
   }
 }

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

@@ -223,6 +223,7 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -240,11 +241,17 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
+        .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
       }
+
+      .pb_collapsible_main_kit {
+        svg {
+          color: $text_dk_default !important;
+        }
+      }
+
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -256,6 +263,13 @@
           }
         }
       }
+
+      &[class*="_active"] {
+        > .pb_collapsible_main_kit {
+          background-color: $primary;
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
     }
   }
 }

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

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_lighter !important;
+        color: $text_dk_light !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-};
+} & GlobalProps;
 
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
+          outline: 1px solid $primary_action_dark;
         }
       }
     }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: transparent;
+      background: $bg_dark_card;
 
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary-action;
+        background: $primary_action_dark;
       }
     }
 
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: transparent;
+        background: $bg_dark_card;
       }
     }
 

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text }) %>
+          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
         <% else %>
           <%= content %>
         <% end %>