playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0.pre.alpha.jasoncypretpatch12816

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb

@@ -0,0 +1,71 @@
+<%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "xxs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "bottom-right"
+    },
+    name: "Terry Johnson",
+    size: "sm",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "bottom-left"
+    },
+    name: "Terry Johnson",
+    size: "md",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "lg",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xl",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Avatar } from '../..'
+
+const AvatarCircleIconComponentOverlay = () => {
+    return (
+        <div>
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xxs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-right",
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="sm"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="md"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="lg"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xl"
+            />
+
+        </div>
+    )
+}
+
+export default AvatarCircleIconComponentOverlay

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
+          size="lg"
+          status="offline"
+          {...props}
+      />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
+          size="xl"
+          status="offline"
+          {...props}
+      />
     </div>
   )
 }

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

@@ -4,11 +4,15 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default
     - avatar_monogram_swift: Monogram

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

@@ -2,3 +2,5 @@ export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
 export { default as AvatarNoImage } from './_avatar_no_image.jsx'
+export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
+export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,6 +28,7 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
+  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -74,6 +74,31 @@ $transition: $transition_cubic;
         opacity: $opacity_10;
       }
     }
+
+    &:disabled ~ .pb_checkbox_checkmark {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_checkbox_label {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+      & ~ .pb_checkbox_label .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
+
+    &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
   }
 
   &.dark {
@@ -81,6 +106,30 @@ $transition: $transition_cubic;
       &:focus ~ .pb_checkbox_checkmark {
         box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
       }
+
+      &:disabled ~ .pb_checkbox_checkmark {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_checkbox_label {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+        & ~ .pb_checkbox_label .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+      }
+
+      &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+        border-color: $border_dark;
+      }
     }
     
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -12,6 +12,7 @@ type CheckboxProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    disabled = false,
     error = false,
     htmlOptions = {},
     id,
@@ -67,6 +69,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     return (
     <input
         defaultChecked={checked}
+        disabled={disabled}
         name={name}
         onChange={onChange}
         ref={checkRef}

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :text
       prop :value
       prop :name
+      prop :disabled, type: Playbook::Props::Boolean, default: false
 
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
@@ -26,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -92,3 +92,17 @@ test('has checked attribute', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        disabled
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />)
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+}) 

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            margin_bottom: "xs",
+            text: "Disabled unchecked",
+            value: "checkbox-value",
+            disabled: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            text: "Disabled checked",
+            value: "checkbox-value",
+            disabled: true,
+            checked: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Checkbox from '../_checkbox'
+
+const CheckboxDisabled = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Checkbox
+          disabled
+          marginBottom="xs"
+          name="default name"
+          tabIndex={0}
+          text="Disabled unchecked"
+          value="default value"
+          {...props}
+      />
+      <Checkbox
+          checked
+          disabled
+          name="checkbox-name"
+          text="Disabled checked"
+          value="check-box value"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CheckboxDisabled

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

@@ -6,6 +6,7 @@ examples:
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
 
   react:
   - checkbox_default: Default
@@ -13,6 +14,7 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+  - checkbox_disabled: Disabled Checkbox
 
   swift:
     - checkbox_default_swift: Default

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

@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
+export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -1,3 +1,5 @@
 Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,3 +1,5 @@
 The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -5,11 +5,13 @@
 @import "../tokens/shadows";
 @import "../tokens/positioning";
 @import "../pb_body/body_mixins";
+@import "../pb_textarea/textarea_mixin";
+
+@import "./scss_partials/dropdown_animation";
 
 .pb_dropdown {
   .dropdown_wrapper {
-    position: relative;
-    .dropdown_trigger_wrapper {
+    [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -28,7 +30,6 @@
       .dropdown_input {
         @include pb_body;
         border: unset;
-        border-radius: $border_rad_heavier;
         padding: 0;
         background-color: $white;
         &:focus-visible {
@@ -40,15 +41,15 @@
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
-    }
 
-    .dropdown_trigger_wrapper_select_only {
-      box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    }
+      &[class*="_select_only"] {
+        box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+      }
 
-    .dropdown_trigger_wrapper_focus {
-      box-shadow: 0px 0px 0 1px $primary;
-      transition: box-shadow 0.1s ease-in-out;
+      &[class*="_focus"] {
+        box-shadow: 0px 0px 0 1px $primary !important;
+        transition: box-shadow 0.1s ease-in-out;
+      }
     }
 
     .pb_dropdown_container {
@@ -58,46 +59,106 @@
       border-radius: $border_rad_heavier;
       border: 1px solid $border_light;
       margin-top: $space_xs;
-      position: absolute;
       z-index: $z_1;
       width: 100%;
-      transition: opacity 0.25s ease-in-out;
 
-      .pb_dropdown_option {
+      [class*="pb_dropdown_option"] {
         cursor: pointer;
         &:hover {
           background-color: $border_light;
         }
-      }
-
-      .dropdown_option_focused {
-        background-color: $border_light;
-      }
 
-      .dropdown_option {
-        width: 100%;
-      }
+        &[class*="_focused"] {
+          background-color: $border_light;
+        }
 
-      .dropdown_option_list {
-        border-bottom: 1px solid $border_light;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
-        [class^="pb_body"],
-        [class^="pb_title_kit"] {
-          color: $white !important;
+        &[class*="_list"] {
+          border-bottom: 1px solid $border_light;
         }
-        &:hover {
-          background-color: $primary !important;
+        &[class*="selected"] {
+          background-color: $primary;
+          [class^="pb_body"],
+          [class^="pb_title_kit"] {
+            color: $white !important;
+          }
+          &:hover {
+            background-color: $primary !important;
+          }
         }
       }
+
+      .dropdown_option_wrapper {
+        width: 100%;
+      }
     }
     .close {
       display: none;
+      animation-name: fadeOut;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
     .open {
       display: block;
+      animation-name: fadeIn;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  &.dark {
+    .dropdown_wrapper {
+      [class*="dropdown_trigger_wrapper"] {
+        @include pb_body_light_dark;
+        background-color: rgba($white, 0.1) !important;
+        background: none;
+        border-color: rgba($white, 0.15);
+        @media (hover: hover) {
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: rgba($white, 0.05) !important;
+          }
+        }
+        [class^="pb_body"] {
+          color: $white;
+        }
+        &[class*="_select_only"] {
+          box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+        }
+        .dropdown_input {
+          background-color: unset;
+          color: $white;
+        }
+      }
+    }
+    .pb_dropdown_container {
+      background-color: $bg_dark !important;
+      border-color: rgba($white, 0.15);
+      color: $white;
+      [class^="pb_body"],
+      [class^="pb_title_kit"] {
+        color: $white !important;
+      }
+
+      [class*="pb_dropdown_option"] {
+        &:hover {
+          background-color: $hover_dark;
+        }
+
+        &[class*="_focused"] {
+          background-color: $hover_dark;
+        }
+
+        &[class*="_list"] {
+          border-color: rgba($white, 0.15);
+        }
+        &[class*="selected"] {
+          background-color: $primary;
+        }
+      }
     }
   }
 }