playbook_ui 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -1,7 +1,3 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-**NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
-
-Expand the table above to see this in action.
-
-A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
+A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,7 +1,3 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
-
-Expand the table above to see this in action.
-
-A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
+A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props) doc example above.

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

@@ -5,8 +5,7 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
-  - advanced_table_sticky_header_rails: Sticky Header
-  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -22,15 +21,11 @@ examples:
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
-  - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_sticky_header: Sticky Header
-  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_sticky_columns: Sticky Columns
-  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells

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

@@ -22,8 +22,4 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
-export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
-export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
-export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'

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_copy_button/_copy_button.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -6,19 +7,16 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
-import usePBCopy from './usePBCopy'
-
 type CopyButtonProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  id?: string
-  from?: string
-  text?: string
-  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
-  tooltipText?: string
-  value?: string
-  timeout?: number
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -29,34 +27,62 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
-    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, copy] = usePBCopy({ value, from, timeout })
+  const [copied, setCopied] = useState(false)
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
   return (
-    <div {...ariaProps}
+    <div
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip
+      <Tooltip 
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
+        <Button
+            icon='copy'
             onClick={copy}
         >
-          {text}
+          { text }
         </Button>
       </Tooltip>
     </div>

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

@@ -6,4 +6,3 @@ examples:
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  - copy_button_hook: Copy Hook

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

@@ -1,3 +1,2 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
-export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.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.