playbook_ui 14.17.0 → 14.18.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13874566f1f6c12cde0929976d074965455ec07aec5f90e4bea2b2ae0e7e3b0e
-  data.tar.gz: 2d6fae64049b09f78c419089d563bd15daa6d3cd8857c7743264c78367eb6f00
+  metadata.gz: 7f3de47141a421d9d9d54ab4699505a03bdc2ba36fce5d87d2bd3bc007526e7d
+  data.tar.gz: ffb8e34afbabf026e6a10a8a3ab7981237015d8ba57945df855316d3b93f2ed4
 SHA512:
-  metadata.gz: 88ec472b7d3b00f5359abad8596f1ecdc32f2308c02d0eb4a27c31259b2f563fabdf2458f9fc741865f7c05d99cc11ae55bf747c49f1db16b8b991010ee6ea41
-  data.tar.gz: 181523ec91b70cca9e242a1b5679afb5bee4f77da05391e58618e9269b3d9709cdcbbb18a00d7f0ca221050fec168bb03c984a4cda6980382645c5da9f397ee8
+  metadata.gz: b42981d33ab74bac828aef053f460a9ce9b108b21955f311e9050d1a3e0a7bc06629de944bd11c4cb4d677612a905c32d9faf199eb7614e74534060a75cac1bb
+  data.tar.gz: '09b073481994a722f3330d2f8a581fd9426e9f36ec394e5456db05274313189db59ef9d364b9bbb648846b67f1cc5a3f38912ca7730c680a22bd35c6e1c3c7b7'

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

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &[class*=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_#{$key}::before {
+      opacity: $value;
+    }
+  }
 }

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

@@ -25,6 +25,7 @@ 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,
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     id,
+    imageOverlay,
     imageUrl = '',
     tag = 'div',
     transition = '',
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
+    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-  
   )
 }
 

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -37,3 +37,8 @@ test('backgroundSize = auto', () => {
   const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
   expect(kit).toHaveStyle('background-size: auto')
 })
+
+test('applies correct overlay class when imageOverlay prop is provided', () => {
+  const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
+  expect(kit).toHaveClass('imageoverlay_opacity_6');
+});

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        backgroundColor="category_21"
+        className="background lazyload"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
+        {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

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

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -19,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -6,3 +6,4 @@ 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.