playbook_ui_docs 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118
+  version: 14.17.0.pre.alpha.play1499backgroundkitoverlay7105
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-04 00:00:00.000000000 Z
+date: 2025-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -147,6 +147,8 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -706,35 +708,33 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx

@@ -1,115 +0,0 @@
-import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Draggable from '../_draggable'
-import { DraggableProvider } from '../context'
-import Image from '../../pb_image/_image'
-
-
-
-const dataLineVertical = [
-  {
-    id: "211",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "212",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "213",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-
-const dataLineHorizontal = [
-  {
-    id: "221",
-    text: "Task 1",
-  },
-  {
-    id: "222",
-    text: "Task 2",
-  },
-  {
-    id: "223",
-    text: "Task 3",
-  },
-];
-
-const DraggableDropZones = (props) => {
-  const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
-  const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
-
-  return (
-    <>
-      <Caption marginBottom="xs" 
-          marginTop="xl"
-          text="Vertical"
-      />
-      <DraggableProvider
-          dropZone={{ type: "line", color: "purple" }}
-          initialItems={dataLineVertical}
-          onReorder={(items) => setInitialLineVerticalState(items)}
-      >
-          <Draggable.Container {...props}>
-          <Flex flexDirection="column"
-              height="367px"
-          >
-              {initialLineVerticalState.map(({ id, url }) => (
-                <Draggable.Item dragId={id}
-                    key={id}
-                    marginBottom="sm"
-                >
-                  <Image alt={id}
-                      size="md"
-                      url={url}
-                  />
-                </Draggable.Item>
-              ))}
-          </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
-      <Caption marginBottom="xs" 
-          marginTop="xl"
-          text="Horizontal"
-      />
-      <Flex>
-      <DraggableProvider
-          dropZone={{ type: "line", direction: "horizontal" }}
-          initialItems={dataLineHorizontal}
-          onReorder={(items) => setInitialLineHorizontalState(items)}
-      >
-          <Draggable.Container
-              htmlOptions={{style:{ width: "285px"}}}
-              {...props}
-          >
-              <Flex alignItems="stretch"
-                  flexDirection="row"
-                  height="42px"
-              > 
-                  {initialLineHorizontalState.map(({ id, text }) => (
-                    <Card dragId={id}
-                        draggableItem
-                        key={id}
-                        marginRight="xs"
-                        padding="xs"
-                        {...props}
-                    >
-                        <Body
-                            text={text}
-                            {...props}
-                        />
-                    </Card>
-                 ))}
-              </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
-      </Flex>
-    </>
-  );
-};
-
-export default DraggableDropZones;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md

@@ -1,5 +0,0 @@
-When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
-
-The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
-
-Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.