playbook_ui 16.10.0.pre.alpha.play300617391 → 16.10.0.pre.alpha.play300617418

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 580a39765f590afc00f4c9fc7cac5d9c5c7c741ce08609400363df3611c15c21
-  data.tar.gz: b8436265466dd1d91e673efc290a3d3d58ceed27bbe4edfb13794549084e6d8d
+  metadata.gz: eea9e460fe3172005e0ffb859d2110dfd98731a78012d2e0c980fa030d16e51b
+  data.tar.gz: a9ff3972f4b7c8f841626687a74ea0475a3f6e3ccba811df5f3a6d7a4ecd7f6c
 SHA512:
-  metadata.gz: 7e6f41d566b0c145b41090f130c2e01ab3826146d642cc462fe849a20810bff5206a3758c996f9ee9aaf791c1967cde4d8b21ba68450813d8f6e9a701ff595b5
-  data.tar.gz: 962a8d491cb2c4fc14e04561ab56cefab606a3d12f55a9c3ffc2a364f56af30c8ec3a4dd6ec671c9fa1710238219b0de4ce80e3f49ff40b2ec5d981f210adbd9
+  metadata.gz: 461c23cf434287c4d6b23afdaa85ac7f66737a9b546652ef7508cf95d06c61b2d3b3b05e7db5f5711a37a5663c8fb967cd7959f3fb32c2bd8d2bce5414252cf8
+  data.tar.gz: a854d92ff8049450212c46c721930ba6dac1350107582e06749b240af20efaf7f6debeccfebd10da39c6b323dff1752b08c7f9154c0625fce38ecb56b377b30e

data/app/pb_kits/playbook/_playbook.scss

@@ -36,6 +36,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_full_screen/full_screen';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -128,3 +129,4 @@
 @import 'utilities/vertical_align';
 @import 'utilities/height';
 @import 'utilities/gap';
+@import 'utilities/border';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -84,13 +84,11 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  htmlOptions={{ style: { width: "100", height: "100" } }}
                   icon="circle-play"
                   rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
-                  htmlOptions={{ style: { width: "100", height: "100" } }}
                   icon="circle-play"
                />
             )}

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

@@ -475,6 +475,11 @@
     width: 18px;
     height: 18px;
     border-radius: 50%;
+
+    .pb_custom_icon {
+      width: 17px !important;
+      height: 17px !important;
+    }
   }
 
   .header-sort-button {

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "required": {
       "platforms": [

data/app/pb_kits/playbook/pb_circle_icon_button/kit.schema.json

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_date_time/kit.schema.json

@@ -72,7 +72,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

data/app/pb_kits/playbook/pb_date_time_stacked/kit.schema.json

@@ -44,7 +44,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

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

@@ -10,6 +10,61 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
+@mixin dropdown-disabled-typography($color) {
+  .pb_body_kit,
+  .pb_body_kit_default,
+  .pb_body_kit_light,
+  .pb_body_kit_lighter,
+  .pb_body_kit_link,
+  .pb_body_kit_success,
+  .pb_body_kit_error,
+  .pb_body_kit_neutral,
+  .pb_body_kit_positive,
+  .pb_body_kit_negative,
+  .pb_caption_kit,
+  .pb_caption_kit_xs,
+  .pb_caption_kit_sm,
+  .pb_caption_kit_md,
+  .pb_caption_kit_base,
+  .pb_caption_kit_lg,
+  .pb_caption_kit_xl,
+  .pb_title_kit,
+  .pb_detail_kit,
+  .pb_detail_kit_color_light,
+  .pb_detail_kit_color_default,
+  .pb_detail_kit_color_lighter,
+  .pb_detail_kit_color_link,
+  .pb_detail_kit_color_error,
+  .pb_detail_kit_color_success,
+  .pb_link_kit,
+  .pb_link_kit_underline,
+  a {
+    color: $color !important;
+  }
+
+
+  @each $caption-color, $caption-value in $pb_caption_colors {
+    .pb_caption_kit_xs_#{$caption-color},
+    .pb_caption_kit_sm_#{$caption-color},
+    .pb_caption_kit_md_#{$caption-color},
+    .pb_caption_kit_base_#{$caption-color},
+    .pb_caption_kit_lg_#{$caption-color},
+    .pb_caption_kit_xl_#{$caption-color} {
+      color: $color !important;
+    }
+  }
+  
+
+  @each $link-color, $link-value in $pb_link_colors {
+    .pb_link_kit_#{$link-color},
+    .pb_link_kit_#{$link-color}_underline,
+    .pb_link_kit_#{$link-color}_disabled,
+    .pb_link_kit_#{$link-color}_underline_disabled {
+      color: $color !important;
+    }
+  }
+}
+
 .pb_dropdown_default,
 .pb_dropdown_subtle,
 .pb_dropdown_quickpick,
@@ -50,6 +105,17 @@
           color: $input_text_default;
         }
       }
+
+      .dropdown_input:disabled {
+        background-color: $input_background_disabled;
+        color: $input_text_disabled;
+        cursor: default;
+      }
+
+      .dropdown_input:disabled::placeholder {
+        color: $input_text_disabled;
+      }
+
       &:focus {
         box-shadow: 0px 0px 0 1px $status_border_primary !important;
         outline: unset;
@@ -145,6 +211,20 @@
             }
           }
         }
+
+        // Disabled state
+        &.disabled {
+          cursor: not-allowed;
+          // background-color: $input_background_disabled;
+          color: $input_text_disabled;
+          border-color: $input_border_disabled;
+          pointer-events: none;
+          @include dropdown-disabled-typography($input_text_disabled);
+          &:hover,
+          &:focus {
+            background-color: $input_background_disabled;
+          }
+        }
       }
 
       .dropdown_option_wrapper {
@@ -376,6 +456,40 @@
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }
+
+        &.disabled {
+          cursor: not-allowed;
+          background-color: $input_background_disabled_dark;
+          color: $input_text_disabled_dark;
+          border-color: $input_border_disabled_dark;
+          pointer-events: none;
+          @include dropdown-disabled-typography($input_text_disabled_dark);
+          &:hover,
+          &:focus {
+            background-color: $input_background_disabled_dark;
+          }
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    .dropdown_wrapper {
+      .dropdown_trigger_wrapper,
+      .dropdown_trigger_wrapper_focus,
+      .dropdown_trigger_wrapper_focus_select_only,
+      .dropdown_trigger_wrapper_select_only {
+        background-color: $input_background_disabled;
+        box-shadow: none !important;
+        cursor: default !important;
+        opacity: 0.5;
+        pointer-events: none;
+
+        input {
+          background-color: $input_background_disabled;
+          color: $input_text_disabled;
+          cursor: default !important;
+        }
       }
     }
   }

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

@@ -93,6 +93,7 @@ type DropdownProps = {
     closeOnClick?: "outside" | "inside" | "any";
     constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
+    disabled?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -139,6 +140,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark = false,
         data = {},
         defaultValue = {},
+        disabled = false,
         error,
         htmlOptions = {},
         id,
@@ -164,6 +166,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown", variant, separatorsClass),
+        disabled && "disabled",
         globalProps(props),
         className
     );
@@ -174,7 +177,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : (options || []);
     // ----------------------------------------------------------
 
-    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(disabled ? true : isClosed);
 
     // Use a suffix for the trigger ID to avoid conflict with the outer div's id
     const sanitizeForId = (str: string) =>
@@ -228,6 +231,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const handleLabelClick = (e: React.MouseEvent) => {
       e.stopPropagation();
+      if (disabled) return;
       if (selectId) {
         const trigger = document.getElementById(selectId);
         if (trigger) trigger.focus();
@@ -269,8 +273,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     // dropdown to toggle with external control
     useEffect(() => {
-        setIsDropDownClosed(isClosed)
-    }, [isClosed])
+        setIsDropDownClosed(disabled ? true : isClosed)
+    }, [disabled, isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
@@ -330,12 +334,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (disabled) return;
         setFilterItem(e.target.value);
         setIsDropDownClosed(false);
     };
 
 
       const handleOptionClick = (clickedItem: GenericObject) => {
+                if (disabled) return;
                 const shouldCloseOnClick = closeOnClick === "any" || closeOnClick === "inside";
                 
                 if (multiSelect) {
@@ -378,11 +384,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
              };
 
     const handleWrapperClick = () => {
+        if (disabled) return;
         autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
     const handleBackspace = () => {
+      if (disabled) return;
       if (multiSelect) {
         setSelected([]);
         onSelect && onSelect([]);
@@ -502,6 +510,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     blankSelection,
                     clearable,
                     dropdownContainerRef,
+                    disabled,
                     error,
                     errorId,
                     filterItem,
@@ -564,7 +573,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             }
                         }, 0);
                     }}
-                    onFocus={() => setIsInputFocused(true)}
+                    onFocus={() => !disabled && setIsInputFocused(true)}
                     ref={dropdownRef}
                 >
                     {children ? (

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

@@ -0,0 +1,93 @@
+<%
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown-disabled-options") return;
+
+    const option = e.detail;
+    const dropdown = e.target;
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
+    if (avatarWrapper) {
+      const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+      avatarWrapper.dataset.name = option.label;
+      avatarWrapper.setAttribute("data-initials", initials);
+    }
+
+    const badgeEl = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = `pb_badge_kit_${variant}`;
+    }
+  });
+</script>

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

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
+
+const DropdownCustomDisplayDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+          <Flex align="center">
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge dark
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                    : option.status === "Unavailable"
+                    ? "warning"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownCustomDisplayDisabledOption

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

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

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

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownDisabled = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        disabled
+        label="Default Dropdown"
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDisabled

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

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: "Available Option", value: "available", id: "available-option" },
+    { label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
+    { label: "Another Available", value: "another-available", id: "another-available" },
+    { label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>

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

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState()
+
+  const options = [
+    { label: 'Available Option', value: 'available', id: 'available-option' },
+    { label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
+    { label: 'Another Available', value: 'another-available', id: 'another-available' },
+    { label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
+  ]
+
+  return (
+    <div>
+      <Caption
+          text="Select an option. Disabled options remain visible but cannot be selected."
+      />
+      <Dropdown
+          onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+          options={options}
+          placeholder="Choose an option"
+          {...props}
+      />
+      {selectedOption && (
+        <Caption
+            marginTop="xs"
+            text={`Selected: ${selectedOption.label}`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DropdownDisabledOption

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

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.