playbook_ui 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7256 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 48cd43bb932e1c4f270ea278f69c50fc282fdd2b84d8f7717cfeca534bd14339
-  data.tar.gz: 2ea5e5612451faa35cdb30e6a480c05b60a28c45299575a168e33f871b6d8713
+  metadata.gz: ae80c8bbc6351e7f84ab5967fde8573a709a92ac254494b3a62bad562b84ae4e
+  data.tar.gz: bb61cfa90ee01b24ed0b0c610968c4ef2f7c66ae3e1259b3c01677c7d5ea09f6
 SHA512:
-  metadata.gz: 1d3cb55c3183220eda3f8760db226919151dcb5ecf8dfd31935109620afca11aa31369bcf45a022cd484c95ee6845a514c93ec4992d8ef27f10c22f803a3bfc2
-  data.tar.gz: a35dc04e2895202eeb24ecf95a10df7df6e2387c0652801d6f2f53fa981b7a1e1aac862aa9509a9a2981ad050564fa0fd5b359697f4d3cf85d8a33221be5f8d1
+  metadata.gz: 5245532a255dcd08b5076768b3e7f9c76b5fda7a52e1d9508b39a97f29d3a2399276ea9c1ffbf5fea21c92c828c43e3ffb049a9e51c90d911a1992c06532efb3
+  data.tar.gz: b0f8a6c7f7fe337c1d77a54dac52e517cf67ab86e56b6d01613b2a5cb97a689e9730a74679eb39734e4b70ecebfefa86cfc793cc19ef15260d771e46d386fd60

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;
     }
   }
-
-  &[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,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,
@@ -84,12 +83,11 @@ 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),
@@ -134,7 +132,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
-    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -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}
@@ -171,6 +168,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
+  
   )
 }
 

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

@@ -37,8 +37,3 @@ 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/example.yml

@@ -19,4 +19,3 @@ 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,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,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'