playbook_ui 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d90a9283e859938c8668c9bda85da84fedc435fb8c2e944540fba1a7b834ced
-  data.tar.gz: 269fdbd32bd3da95347cffbcaca0e9c130e551c2288b0eb92a6f73e9d6e205fa
+  metadata.gz: c9d0f9943190ec65f7767c1f1131909858fe408507a1d372dc27035b69847e76
+  data.tar.gz: 692a5f395f2c164a70e82e763d565ba9165a618de92d36f2b251cec4be8d1a43
 SHA512:
-  metadata.gz: 8718b1da13b30dc286191523f1ba14e8ec1304389bdd0263f2b71ec6543473b20234090aca5a8d06d56716e9eed8334118429038a31f2e0983dac1c7503b1b59
-  data.tar.gz: 455f5232737b607d4c6c1d6b574e3bcfd5974246c2daff08bef7196af7e50e3ed3d4512fc4752240adb309ac74f1c56065e325ec7d15202ed3992da226a580a4
+  metadata.gz: 23c40516ab6c6326addb1518871fd50284ab753a827eed90b552f1520fdf6cf1e675f7b7429b28ce5c8d88315a260cfd174c8a586e404d3a21f2aedcf6825340
+  data.tar.gz: 3fa52f22147c20d6c8bcae9c7cbfe258f5cb7fe76fc983b8ae8d4dcd1b804e2277aee4987ec06ce4d45bada533c11ca552eef8dd56b8792c56f6755b0dc4cb6d

data/app/pb_kits/playbook/_playbook.scss

@@ -2,7 +2,6 @@
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
@@ -10,7 +9,6 @@
 @import 'pb_caption/caption';
 @import 'pb_card/card';
 @import 'pb_checkbox/checkbox';
-@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
@@ -38,7 +36,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -53,7 +50,6 @@
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
-@import 'pb_line_graph/line_graph';
 @import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

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

@@ -112,4 +112,45 @@ $pb_button_sizes: (
       @include pb_button_disabled_dark;
     }
   }
+
+  // Icon-only button (icon prop set, no text) - square with equal padding
+  // Rails: uses .pb_button_icon_only class
+  // React: detects when pb_button_content has an empty text span
+  &.pb_button_icon_only,
+  &:has(.pb_button_content > span:empty) {
+    aspect-ratio: 1;
+    min-width: auto;
+    width: auto;
+    height: auto;
+    padding: $pb_button_v_padding !important;
+    min-height: ($pb_button_v_padding * 2) + $font_small;
+    
+    &.pb_button_size_sm {
+      padding: $font_smaller !important;
+      min-height: ($font_smaller * 2) + $font_smaller;
+    }
+    
+    &.pb_button_size_md {
+      padding: $font_small !important;
+      min-height: ($font_small * 2) + $font_small;
+    }
+    
+    &.pb_button_size_lg {
+      padding: ($font_large - 2px) !important;
+      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
+    }
+
+    // Remove margins from icons
+    .button_with_icon,
+    .button_with_icon_right {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    // Remove margins from Rails icon wrapper spans
+    > span {
+      margin-right: 0 !important;
+      margin-left: 0 !important;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -51,9 +51,13 @@ const buttonClassName = (props: ButtonPropTypes) => {
     type = 'inline',
     variant = 'primary',
     size = null,
+    text,
+    children,
   } = props
 
   const classNames = ['pb_button_kit']
+  // Icon-only: has icon, no text/children, and not a reaction button (reaction buttons have count)
+  const isIconOnly = icon && !text && !children && variant !== 'reaction'
 
   if (variant) classNames.push(`pb_button_${variant}`)
   if (type) classNames.push(`pb_button_${type}`)
@@ -63,6 +67,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   if (size) classNames.push(`pb_button_size_${size}`)
   if (variant === 'reaction' && icon && !isValidEmoji(icon)) classNames.push('pb_button_reaction_default')
   if (variant === 'reaction' && highlight) classNames.push('pb_button_active')
+  if (isIconOnly) classNames.push('pb_button_icon_only')
 
   return classNames.join(' ')
 }

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -16,17 +16,21 @@
             <% end %>
         <% end %>
     <% else %>
-    <% if object.icon && !object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
-        </span>
+    <% if !object.loading %>
+        <% if object.icon && !object.icon_right %>
+            <span>
+                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_right: "xs" })) %>
+            </span>
+        <% end %>
     <% end %>
     <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
-    <% if object.icon && object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
-        </span>
+    <% if !object.loading %>
+        <% if object.icon && object.icon_right %>
+            <span>
+                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_left: "xs" })) %>
+            </span>
+        <% end %>
     <% end %>
     <% end %>
 

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

@@ -73,6 +73,10 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
+      def icon_only?
+        icon.present? && text.blank? && variant != "reaction"
+      end
+
       def classname
         class_names = ["pb_button_kit"]
         class_names << "pb_button_#{variant}" if variant
@@ -82,6 +86,7 @@ module Playbook
         class_names << "pb_button_size_#{size}" if size
         class_names << "pb_button_reaction_default" if variant === "reaction" && icon && !valid_emoji(icon)
         class_names << "pb_button_active" if variant === "reaction" && highlight
+        class_names << "pb_button_icon_only" if icon_only?
 
         class_names.join(" ")
         generate_classname(class_names.compact.join(" "), separator: " ")

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_y: "md", text: "Small Size (sm)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Medium Size (md)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Large Size (lg)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import Button from "../../pb_button/_button"
+import Caption from "../../pb_caption/_caption"
+
+const ButtonIconVariant = (props) => (
+  <div>
+    <Caption 
+        marginY="md" 
+        text="Small Size (sm)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Medium Size (md)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Large Size (lg)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonIconVariant

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md

@@ -0,0 +1 @@
+The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<%= pb_rails("button", props: { icon: "plus", variant: "secondary" }) %>` to get an icon button.

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md

@@ -0,0 +1 @@
+The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<Button icon="rocket" variant="primary" />` to get an icon button.

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

@@ -13,6 +13,7 @@ examples:
   - button_form: Button Form Attribute
   - button_managed_disabled: Button Toggle Disabled State
   - button_managed_disabled_helper: Button Toggle Disabled State Helper
+  - button_icon_variant: Icon Button Variant
   
   react:
   - button_default: Button Variants
@@ -27,6 +28,7 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
+  - button_icon_variant: Icon Button Variant
 
   swift:
   - button_default_swift: Button Variants

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

@@ -4,6 +4,7 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonIconOptions } from './_button_icon_options.jsx'
+export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

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

@@ -20,12 +20,23 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+type CustomQuickPickDate = {
+    label: string;
+    value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+    override?: boolean;
+    dates: CustomQuickPickDate[];
+};
+
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -63,6 +74,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -95,7 +107,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday) 
+        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
         : (options || []);
     // ----------------------------------------------------------
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import Dropdown from "../_dropdown"
+
+const DropdownQuickpickCustom = (props) => (
+  <div>
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            // Allow Playbook to handle the logic...
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            // Or, be explicit with an exact date range for more control...
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+        }}
+        label="Date Range"
+        marginBottom="sm"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+          override: false,
+        }}
+        label="Date Range - Append to Defaults"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DropdownQuickpickCustom
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -0,0 +1,10 @@
+The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `timePeriod` and `amount` properties for dynamic date calculations:
+  - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb

@@ -0,0 +1,64 @@
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom",
+  label: "Date Range",
+  margin_bottom: "sm",
+  variant: "quickpick"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom-append-to-defaults",
+  label: "Date Range - Append to Defaults",
+  variant: "quickpick"
+}) %>
+
+<script>
+  const dropdown1 = document.getElementById("date-range-quickpick-custom");
+  if (dropdown1) {
+    dropdown1.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+
+  const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
+  if (dropdown2) {
+    dropdown2.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -0,0 +1,10 @@
+The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `time_period` and `amount` properties for dynamic date calculations:
+  - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -57,6 +58,7 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,4 +26,5 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
+                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -94,7 +96,10 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
+        QuickpickHelper.get_quickpick_options(
+          range_ends_today: range_ends_today,
+          custom_quick_pick_dates: custom_quick_pick_dates
+        )
       end
     end
   end