playbook_ui 14.17.0.pre.alpha.play1499backgroundkitoverlay7105 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b38daf6aad351a9d3b57169619dbba3749175bb2e2aae4f92aeb1368d8cd6cd5
-  data.tar.gz: 6718570cbc87905c88c57df0f1878cabd011e6ddac73d4c522c9ed88f08e537a
+  metadata.gz: fcbb7de57b1795b09a1e17be0796d035b2d81369c91fb4f41f8305356ae9ecb9
+  data.tar.gz: 2ad249de4b7102825375229b1785b79bfaf59c28c433fed5f8085b7c9d1ff4f3
 SHA512:
-  metadata.gz: 8f1df4e4bcd4f2f0dac7285d99a80bd63c0b139db5256d2c8fe7754f78a573a811fa17fd3d8203eff2de08c576070c862add9cf92a3869a63bc178e87abd3a98
-  data.tar.gz: 2a0df11f026f0afe56e42a873105cd71756ea23d7e6bedec727954db2ff20fe7781142226f2415fe1f5d21d38a4c4e1c8fe286bf4a888e2d1f8089a7ba9ac2c7
+  metadata.gz: 5a308beba3d438ade5305948c24395ebc76ecee41870c11966e9e4dadcdccb96898909334a34e51a3e07e1f71cb75158e9c228cc13dc5c80e774d1c9f1b817ff
+  data.tar.gz: b706011d94f16779786e69b56136ea18806acd9d74198e5ebbcae38506ebbce822b70ee35c406ce282b7c845d9157c3b38ded9c68883e0cf827b2304bf471916

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

@@ -55,30 +55,4 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
-
-  &.imageoverlay {
-    position: relative;
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      background-color: inherit;
-    }
-
-    * {
-      position: relative;
-      z-index: 2;
-    }
-  }
-
-  @each $key, $value in $opacity {
-    &.imageoverlay[imageoverlay="#{$key}"]::before {
-      opacity: $value;
-    }
-  }
 }

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

@@ -25,7 +25,6 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
-  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -87,9 +86,8 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     imageUrl = '',
     tag = 'div',
     transition = '',
-    imageOverlay,
   } = props
-
+  
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -134,8 +132,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
-    className,
-    imageOverlay ? "imageoverlay" : ""
+    className
   );
 
   const backgroundStyle = {
@@ -158,7 +155,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
+  
   return (
     <Tag
         {...ariaProps}
@@ -167,12 +164,11 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        imageOverlay={imageOverlay}
         style={combinedStyles}
     >
       {children}
     </Tag>
-
+  
   )
 }
 

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

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

@@ -6,4 +6,3 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
-export { default as BackgroundOverlay } from './_background_overlay.jsx'

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.