playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.alphaforaudiences7167

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee5a8f7236c5915641d49888d1b31358596a366e9e22a281b560dcaa31bb8936
-  data.tar.gz: ad235c43f83f72d5d31a9a99e02d662cb7db5b5b5c270d9c1bbe3c9392e9d9ae
+  metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
+  data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
 SHA512:
-  metadata.gz: 198ec85648866bcbcb816b91bc9a54e8ea126596c036bc5af0d8fb9ddad100b1cfca65a032a24cc65211f0679495cbbc5ab0f0708cf2751c9e75d1f19fac35bd
-  data.tar.gz: 9ca8b30bda370751ff399531e4e22879a39beae908d79dedac31dfe5f30159aa501b1a3ed620d80f44e74d1c619ac1517e31c304d8583c9d86862a74a157ba99
+  metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
+  data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,6 +1,5 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
-@import "../tokens/border_radius";
 
 .pb_draggable_container {
   .pb_draggable_item {
@@ -35,7 +34,7 @@
           width: 100%;
           height: 100%;
           border: 2px dashed $neutral;
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           box-sizing: border-box;
           z-index: 10;
           pointer-events: none;
@@ -65,7 +64,7 @@
           width: 100%;
           height: 100%;
           background-color: rgba($neutral, $opacity_5);
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           z-index: 10;
           pointer-events: none;
         }
@@ -74,70 +73,48 @@
         &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
         &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
       }
-    }
-  }
-  // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
-  &.line_vertical {
-    .pb_draggable_item {
-      position: relative;
+
+      // Line variant
       &.drop_zone_line {
-        // Hide the original content to show the line only (held draggable item should not take up space in drop zone)
-        position: relative;
-        z-index: 2;
+        // Hide the original content to show the line
         & > * {
           opacity: 0;
         }
-        height: 4px;
+
         // Style for horizontal line (default)
         &::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
           background-color: $neutral;
-          border-radius: $border_radius_rounded;
+          border-radius: 1000px;
           z-index: 10;
           pointer-events: none;
-          transform: translateY(-50%);
         }
-        // Apply color variants to the ::before element
+
+        // Apply color variants
         &.drop_zone_color_primary::before { background-color: $primary; }
         &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }
-  // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
-  &.line_horizontal {
-    .pb_draggable_item {
-      position: relative;
+}
+
+// Support for vertical layouts (horizontal line)
+.pb_draggable_container.vertical {
+  .pb_draggable_item {
+    &.is_dragging {
+      // Line variant for vertical layouts (horizontal line)
       &.drop_zone_line {
-        position: relative;
-        z-index: 2;
-        & > * {
-          opacity: 0;
-        }
-        width: 4px;
-        height: auto;
-        // Style for vertical line
         &::before {
-          content: '';
-          position: absolute;
+          width: 100%;
+          height: 4px;
           left: 0;
           top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $neutral;
-          border-radius: $border_radius_rounded;
-          z-index: 10;
-          pointer-events: none;          
-          transform: translateX(-50%);
         }
-
-        // Apply color variants to the ::before element
-        &.drop_zone_color_primary::before { background-color: $primary; }
-        &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }

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

@@ -60,120 +60,123 @@ const DraggableDropZones = (props) => {
 
   return (
     <>
-      <Flex justify="between"
-          {...props}
-      >
-        <FlexItem marginRight="xl">
-          <DraggableProvider
-              dropZone={{type: "shadow"}}
-              initialItems={dataShadow}
-              onReorder={(items) => setInitialShadowState(items)}
-          >
-              <Caption
+    <Flex justify="between"
+        {...props}
+    >
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "shadow"}}
+            initialItems={dataShadow}
+            onReorder={(items) => setInitialShadowState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Shadow"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialShadowState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Shadow"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialShadowState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-        <FlexItem marginRight="xl">
-          <DraggableProvider
-              dropZone={{type: "outline"}}
-              initialItems={dataOutline}
-              onReorder={(items) => setInitialOutlineState(items)}
-          >
-              <Caption
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "outline"}}
+            initialItems={dataOutline}
+            onReorder={(items) => setInitialOutlineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Outline"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialOutlineState.map(({ id, text }) => (
+              <Card
+                  dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Outline"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialOutlineState.map(({ id, text }) => (
-                <Card
-                    dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex
-                      alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-        <FlexItem>
-          <DraggableProvider
-              dropZone={{type: "line"}}
-              initialItems={dataLine}
-              onReorder={(items) => setInitialLineState(items)}
-          >
-              <Caption
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem>
+        <DraggableProvider
+            dropZone={{type: "line"}}
+            initialItems={dataLine}
+            onReorder={(items) => setInitialLineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Line"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialLineState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Line"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialLineState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-      </Flex>
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
     </>
   );
 };

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

@@ -1,5 +1,5 @@
-  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
 
-By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
 
-When using the "line" type, 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" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).
+Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.

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

@@ -6,8 +6,6 @@ import Caption from '../../pb_caption/_caption'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableProvider } from '../../pb_draggable/context'
 
-
-
 // Initial items to be dragged
 const dataPrimary = [
   {
@@ -44,54 +42,54 @@ const DraggableDropZonesColors = (props) => {
 
   return (
     <>
-      <Caption marginBottom="xs"
-          text="Primary"
-      />
-      <DraggableProvider
-          dropZone={{type: "shadow", color: "primary"}}
-          initialItems={dataPrimary}
-          onReorder={(items) => setInitialPrimaryState(items)}
-      >
-          <Draggable.Container {...props}>
-              <Flex>
-                  {initialPrimaryState.map(({ id, url }) => (
-                    <Draggable.Item dragId={id}
-                        key={id}
-                        marginRight="sm"
-                    >
-                        <Image alt={id}
-                            size="md"
-                            url={url}
-                        />
-                    </Draggable.Item>
-                  ))}
-              </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
-      <Caption marginBottom="xs"
-          text="Purple"
-      />
-      <DraggableProvider
-          dropZone={{type: "outline", color: "purple"}}
-          initialItems={dataPurple}
-          onReorder={(items) => setInitialPurpleState(items)}
-      >
-          <Draggable.Container {...props}>
-              <Flex>
-                  {initialPurpleState.map(({ id, url }) => (
-                    <Draggable.Item dragId={id}
-                        key={id}
-                        marginRight="sm"
-                    >
-                        <Image alt={id}
-                            size="md"
-                            url={url}
-                        />
-                    </Draggable.Item>
-                  ))}
-              </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
+    <Caption marginBottom="xs">
+      Primary
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "shadow", color: "primary"}}
+        initialItems={dataPrimary}
+        onReorder={(items) => setInitialPrimaryState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPrimaryState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    <Caption marginBottom="xs">
+      Purple
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "outline", color: "purple"}}
+        initialItems={dataPurple}
+        onReorder={(items) => setInitialPurpleState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPurpleState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
     </>
   );
 };

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

@@ -1 +1 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
+By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)

data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../context'
+import { DraggableProvider } from '../../pb_draggable/context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

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

@@ -2,6 +2,4 @@ The draggable kit can also be used in conjunction with the table kit to create d
 
 - Wrap the Table with the `DraggableProvider` and manage state as shown. 
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
-
-We recommending using the default `dropZone type` with the Table kit.
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 

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

@@ -4,17 +4,14 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table: Draggable with Table
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
-  - draggable_drop_zones_line: Draggable Drop Zones Line
 
   rails:
-  - draggable_default: Default
-  - draggable_with_list: Draggable with List Kit
-  - draggable_with_selectable_list: Draggable with SelectableList Kit
-  - draggable_with_cards: Draggable with Cards
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
+  - draggable_with_cards_rails: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 

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

@@ -3,7 +3,4 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTable } from './_draggable_with_table.jsx'
-export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
-export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -128,58 +128,6 @@ const DraggableKitWithCard = () => {
   );
 };
 
-const DraggableWithLineVertical = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-const DraggableWithLineHorizontal = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line", direction: "horizontal" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
 test("generated default kit and classname", () => {
   render(<DefaultDraggableKit />);
   const kit = screen.getByTestId(testId);
@@ -240,19 +188,3 @@ test("generated dragHandle with Card", () => {
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
-
-test("line dropZone with default direction applies 'line_vertical' class to container", () => {
-  render(<DraggableWithLineVertical />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_vertical");
-});
-
-test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
-  render(<DraggableWithLineHorizontal />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_horizontal");
-});

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   } = contextValues;
 
   // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null; 
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -41,9 +41,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Line variant gets line_{direction} classname on container no matter what
-    dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
-    dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
+    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
+    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );