playbook_ui 14.17.0.pre.alpha.play1499backgroundkitoverlay7110 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0aa6639822cd2ea1f1956a8e184d0194086ae25e2307d7c6233469ff6889722c
-  data.tar.gz: ccc5ed747a8511d0fe4f51c6bfe152b5cffc40aab95acc09867ed30874f0acb8
+  metadata.gz: c4eed786792f1c5eea97b75faecd6189cb039c81d91a3f999cb9caab3048b63e
+  data.tar.gz: a88401324ebf090e25add4d906ac29e974536fc0800bedf80a3c74fb7e346524
 SHA512:
-  metadata.gz: d4e5a6fa4924c2cb68814350e0bd7ed4e5f5952c77b0f695ec72d006d3e370c94ed013d7cdfe7998e59e36601e249b3474aa1c1f93e6407958bfc37e1e3f84d9
-  data.tar.gz: d88379f2a0912b9058238866fd54ed60f15b54c584f828219918343e07963292dfcaef332f535f53049338ff0a9a09f24b31e27691b8fdf4f0a3fddad0ee5fd9
+  metadata.gz: a86ebc9438ea0abc1ad6dc17ccad0881ea85af8116da7dcc098f34555ecdbe4191ef2983fb458c1011ac8cc0a4941c0fafbc2a345babe4d9b286ad916f5e6bd3
+  data.tar.gz: 2161ae14909692c4433b10399f95862a64685350fb43e03c1329574251291aaaf6bb0212d58f8b753c4c84b9570767293c6533554f0bad23663a9130b325fc18

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -171,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-
   )
 }
 

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -8,11 +8,11 @@ const BackgroundOverlay = (props) => {
   return (
     <Background
         alt="colorful background"
+        backgroundColor="category_21"
         className="background lazyload"
-        imageOverlay="opacity_6"
-        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
         {...props}
-        backgroundColor="light"
       >
         <Flex
             orientation="column"
@@ -25,7 +25,6 @@ const BackgroundOverlay = (props) => {
                 padding="lg"
                 size={1}
                 text="Background Kit Image"
-                {...props}
             />
           </FlexItem>
         </Flex>

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

@@ -11,7 +11,6 @@ examples:
   - background_size: Size
 
   react:
-  - background_overlay: Overlay
   - background_light: Light
   - background_white: White
   - background_gradient: Gradient
@@ -20,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
+@import "../tokens/border_radius";
 
 .pb_draggable_container {
   .pb_draggable_item {
@@ -34,7 +35,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;
@@ -64,7 +65,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;
         }
@@ -73,48 +74,70 @@
         &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
         &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
       }
-
-      // Line variant
+    }
+  }
+  // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
+  &.line_vertical {
+    .pb_draggable_item {
+      position: relative;
       &.drop_zone_line {
-        // Hide the original content to show the 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;
         & > * {
           opacity: 0;
         }
-
+        height: 4px;
         // Style for horizontal line (default)
         &::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
-          width: 4px;
-          height: 100%;
+          width: 100%;
+          height: 4px;
           background-color: $neutral;
-          border-radius: 1000px;
+          border-radius: $border_radius_rounded;
           z-index: 10;
           pointer-events: none;
+          transform: translateY(-50%);
         }
-
-        // Apply color variants
+        // Apply color variants to the ::before element
         &.drop_zone_color_primary::before { background-color: $primary; }
         &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }
-}
-
-// Support for vertical layouts (horizontal line)
-.pb_draggable_container.vertical {
-  .pb_draggable_item {
-    &.is_dragging {
-      // Line variant for vertical layouts (horizontal line)
+  // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
+  &.line_horizontal {
+    .pb_draggable_item {
+      position: relative;
       &.drop_zone_line {
+        position: relative;
+        z-index: 2;
+        & > * {
+          opacity: 0;
+        }
+        width: 4px;
+        height: auto;
+        // Style for vertical line
         &::before {
-          width: 100%;
-          height: 4px;
+          content: '';
+          position: absolute;
           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,123 +60,120 @@ const DraggableDropZones = (props) => {
 
   return (
     <>
-    <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}
+      <Flex justify="between"
+          {...props}
+      >
+        <FlexItem marginRight="xl">
+          <DraggableProvider
+              dropZone={{type: "shadow"}}
+              initialItems={dataShadow}
+              onReorder={(items) => setInitialShadowState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Shadow"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialShadowState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <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}
+                  <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
                   marginBottom="xs"
-                  padding="xs"
+                  text="Outline"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
+              {initialOutlineState.map(({ id, text }) => (
+                <Card
+                    dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <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}
+                  <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
                   marginBottom="xs"
-                  padding="xs"
+                  text="Line"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialLineState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
+                  <Flex alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <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 allows you to choose the style of drop zones that appear when dragging an item.
+  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
 
-By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "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.
+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).

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

@@ -6,6 +6,8 @@ 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 = [
   {
@@ -42,54 +44,54 @@ const DraggableDropZonesColors = (props) => {
 
   return (
     <>
-    <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>
+      <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>
     </>
   );
 };

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

@@ -1 +1 @@
-By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)
+  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.

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

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+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: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2122",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2133",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+
+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="110px"
+            > 
+              {initialLineHorizontalState.map(({ id, url }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginRight="sm"
+                >
+                  <Image alt={id}
+                      size="md"
+                      url={url}
+                  />
+                </Draggable.Item>
+              ))}
+            </Flex>
+          </Draggable.Container>
+        </DraggableProvider>
+      </Flex>
+    </>
+  );
+};
+
+export default DraggableDropZones;

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

@@ -0,0 +1,5 @@
+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.

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

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