RubyGems - playbook_ui - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (375) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_playground.overrides.json CHANGED Viewed

@@ -1,33 +1,278 @@
 {
+  "structureModes": {
+    "default": "single_container",
+    "modes": {
+      "single_container": {
+        "label": "Single Container",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Draggable.Container\n        container=\"tasks\"{{Container.props}}\n    >\n      <Flex\n          gap=\"xs\"\n          orientation=\"column\"\n      >\n        {items.map(({ id, text }) => (\n          <Draggable.Item\n              container=\"tasks\"\n              dragId={id}\n              key={id}{{Item.props}}\n          >\n            <Card padding=\"xs\">\n              <Body text={text} />\n            </Card>\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </Draggable>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "ghost",
+            "color": "neutral",
+            "direction": "vertical"
+          }
+        },
+        "wrapper": "const initialItems = [\n  { id: 'task-1', container: 'tasks', text: 'Confirm scope' },\n  { id: 'task-2', container: 'tasks', text: 'Design states' },\n  { id: 'task-3', container: 'tasks', text: 'Ship playground' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      },
+      "single_container_horizontal": {
+        "label": "Single Container Horizontal",
+        "template": "<Flex>\n  <DraggableProvider\n      initialItems={initialItems}\n      onReorder={setItems}{{Provider.props}}\n  >\n    <Draggable.Container{{Container.props}}>\n      <Flex\n          alignItems=\"stretch\"\n          flexDirection=\"row\"\n          height=\"110px\"\n      >\n        {items.map(({ id, url }) => (\n          <Draggable.Item\n              dragId={id}\n              key={id}\n              marginRight=\"sm\"{{Item.props}}\n          >\n            <Image\n                alt={id}\n                size=\"md\"\n                url={url}\n            />\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </DraggableProvider>\n</Flex>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "line",
+            "color": "primary",
+            "direction": "horizontal"
+          },
+          "htmlOptions": {
+            "style": {
+              "width": "420px"
+            }
+          }
+        },
+        "wrapper": "const initialItems = [\n  { id: 'image-1', url: 'https://unsplash.it/500/400/?image=633' },\n  { id: 'image-2', url: 'https://unsplash.it/500/400/?image=634' },\n  { id: 'image-3', url: 'https://unsplash.it/500/400/?image=637' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      },
+      "multiple_containers": {
+        "label": "Multiple Containers",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Flex\n        align=\"start\"\n        gap=\"sm\"\n        wrap\n    >\n      {containers.map((container) => (\n        <Draggable.Container\n            container={container}\n            key={container}\n            minWidth=\"220px\"{{Container.props}}\n        >\n          <Card padding=\"sm\">\n            <Title\n                marginBottom=\"xs\"\n                size={4}\n                text={container}\n            />\n            <Flex\n                gap=\"xs\"\n                orientation=\"column\"\n            >\n              {items\n                .filter((item) => item.container === container)\n                .map(({ id, text }) => (\n                  <Draggable.Item\n                      container={container}\n                      dragId={id}\n                      key={id}{{Item.props}}\n                  >\n                    <Card padding=\"xs\">\n                      <Body text={text} />\n                    </Card>\n                  </Draggable.Item>\n                ))}\n            </Flex>\n          </Card>\n        </Draggable.Container>\n      ))}\n    </Flex>\n  </Draggable>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "ghost",
+            "color": "neutral",
+            "direction": "vertical"
+          }
+        },
+        "wrapper": "const containers = ['To Do', 'In Progress', 'Done']\nconst initialItems = [\n  { id: 'task-1', container: 'To Do', text: 'Confirm scope' },\n  { id: 'task-2', container: 'To Do', text: 'Design states' },\n  { id: 'task-3', container: 'In Progress', text: 'Ship playground' },\n  { id: 'task-4', container: 'Done', text: 'Write docs' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "customProps": {
+    "dropZone": {
+      "type": "object",
+      "platforms": ["react"]
+    },
+    "providerId": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "enableCrossContainerPreview": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "tag": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "div",
+        "span",
+        "p",
+        "tr",
+        "td",
+        "tbody"
+      ]
+    },
+    "onDragStart": {
+      "type": "function",
+      "platforms": ["react"]
+    },
+    "onDragEnd": {
+      "type": "function",
+      "platforms": ["react"]
+    },
+    "onDrop": {
+      "type": "function",
+      "platforms": ["react"]
+    }
+  },
+  "propTargets": {
+    "dropZone": "Provider.props",
+    "providerId": "Provider.props",
+    "enableCrossContainerPreview": "Provider.props",
+    "htmlOptions": "Container.props",
+    "tag": "Container.props",
+    "onDragStart": "Item.props",
+    "onDragEnd": "Item.props",
+    "onDrop": "Item.props"
+  },
+  "defaults": {
+    "dropZone": {
+      "type": "ghost",
+      "color": "neutral",
+      "direction": "vertical"
+    },
+    "providerId": "draggable-playground",
+    "enableCrossContainerPreview": false
+  },
   "groups": [
     {
-      "name": "Appearance",
-      "props": ["dropZone", "dropZoneColor"]
+      "name": "Provider",
+      "props": [
+        "dropZone",
+        "providerId",
+        "enableCrossContainerPreview"
+      ]
+    },
+    {
+      "name": "Container",
+      "props": [
+        "tag"
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        "onDragStart",
+        "onDragEnd",
+        "onDrop"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Ghost (neutral)",
-      "props": { "dropZone": "ghost", "dropZoneColor": "neutral" }
+      "name": "Single List",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Outline Drop Zone",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "outline",
+          "color": "primary",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Shadow Drop Zone",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "shadow",
+          "color": "purple",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Line Vertical",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "line",
+          "color": "primary",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Line Horizontal",
+      "structureMode": "single_container_horizontal",
+      "props": {
+        "dropZone": {
+          "type": "line",
+          "color": "primary",
+          "direction": "horizontal"
+        }
+      }
     },
     {
-      "name": "Outline (primary)",
-      "props": { "dropZone": "outline", "dropZoneColor": "primary" }
+      "name": "Multiple Containers",
+      "structureMode": "multiple_containers",
+      "props": {
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
+      }
     },
     {
-      "name": "Shadow (purple)",
-      "props": { "dropZone": "shadow", "dropZoneColor": "purple" }
+      "name": "Cross Container Preview",
+      "structureMode": "multiple_containers",
+      "props": {
+        "enableCrossContainerPreview": true,
+        "dropZone": {
+          "type": "outline",
+          "color": "primary",
+          "direction": "vertical"
+        }
+      }
     },
     {
-      "name": "Line (neutral)",
-      "props": { "dropZone": "line", "dropZoneColor": "neutral" }
+      "name": "Event Listeners",
+      "structureMode": "single_container",
+      "props": {
+        "onDragEnd": "() => console.log('drag end')",
+        "onDragStart": "() => console.log('drag start')",
+        "onDrop": "() => console.log('drop')",
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
+      }
     }
   ],
   "conditionals": {},
+  "propSyncOnEnable": {
+    "enableCrossContainerPreview": {
+      "structureMode": "multiple_containers"
+    }
+  },
   "hints": {
-    "children_note": {
-      "when": {},
-      "message": "Compose Draggable.Container and Draggable.Item as children to build a sortable list.",
+    "single_list": {
+      "presetName": "Single List",
+      "message": "Single List wraps Draggable.Container and Draggable.Item children in DraggableProvider with initialItems and onReorder.",
+      "type": "info"
+    },
+    "outline_drop_zone": {
+      "presetName": "Outline Drop Zone",
+      "message": "Outline Drop Zone passes a dropZone object to DraggableProvider so the dragged item uses the outline treatment.",
+      "type": "info"
+    },
+    "shadow_drop_zone": {
+      "presetName": "Shadow Drop Zone",
+      "message": "Shadow Drop Zone uses the provider dropZone color and type to preview the shadow treatment while dragging.",
+      "type": "info"
+    },
+    "line_vertical": {
+      "presetName": "Line Vertical",
+      "message": "Line Vertical uses dropZone.direction=\"vertical\" for between-row placement.",
+      "type": "info"
+    },
+    "line_horizontal": {
+      "presetName": "Line Horizontal",
+      "message": "Line Horizontal uses dropZone.direction=\"horizontal\" for between-column placement.",
+      "type": "info"
+    },
+    "multiple_containers": {
+      "presetName": "Multiple Containers",
+      "message": "Multiple Containers maps items into Draggable.Container columns by their container value.",
+      "type": "info"
+    },
+    "cross_container_preview": {
+      "presetName": "Cross Container Preview",
+      "message": "Cross Container Preview enables provider-managed movement previews between containers before drop.",
+      "type": "info"
+    },
+    "event_listeners": {
+      "presetName": "Event Listeners",
+      "message": "Event Listeners routes item callbacks through Draggable.Item props so drag events can be handled by app code.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_draggable/docs/example.yml CHANGED Viewed

@@ -17,6 +17,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_independent_containers: Independent Draggable Containers
   - draggable_with_table: Draggable with Table
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors

data/app/pb_kits/playbook/pb_draggable/index.js CHANGED Viewed

@@ -100,6 +100,8 @@ export default class PbDraggable extends PbEnhancedElement {
   bindTouchDragForItem(item) {
     const handle = item.querySelector(DRAG_HANDLE_SELECTOR);
     const dragTarget = handle || item;
+    const isWithinThisDraggable = (element) =>
+      element && this.element.contains(element);
     const state = {
       active: false,
       dragging: false,
@@ -154,6 +156,8 @@ export default class PbDraggable extends PbEnhancedElement {
       event.preventDefault();
       const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+      if (!isWithinThisDraggable(elementBelow)) return;
       const targetItem = elementBelow?.closest(".pb_draggable_item");
       const targetDragId = getDragIdFromElement(elementBelow);
@@ -165,7 +169,7 @@ export default class PbDraggable extends PbEnhancedElement {
       const targetContainer = getContainerFromElement(elementBelow);
       if (targetContainer) {
         const containerElement = elementBelow.closest(DRAGGABLE_CONTAINER);
-        if (containerElement) {
+        if (containerElement && isWithinThisDraggable(containerElement)) {
           this.handleDragOver(pointerEventFromTouch(touch, containerElement));
         }
       }
@@ -175,10 +179,13 @@ export default class PbDraggable extends PbEnhancedElement {
       if (!state.active) return;
       if (state.dragging && touch) {
+        const sourceContainer = item.closest(DRAGGABLE_CONTAINER);
         const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-        const containerElement = elementBelow?.closest(DRAGGABLE_CONTAINER);
+        const containerElement = isWithinThisDraggable(elementBelow)
+          ? elementBelow?.closest(DRAGGABLE_CONTAINER)
+          : sourceContainer;
-        if (containerElement) {
+        if (containerElement && isWithinThisDraggable(containerElement)) {
           this.handleDrop(pointerEventFromTouch(touch, containerElement));
         }

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

@@ -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,7 +456,49 @@
           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;
+        }
       }
     }
   }
 }
+// Menu portaled to body / floating root: outer shell repeats kit classes + `.dropdown_wrapper`
+// so existing `.pb_dropdown_* .dropdown_wrapper .pb_dropdown_container` rules still apply.
+.pb_dropdown_floating_shell {
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+}