playbook_ui 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfe5e243fdd166f4333142e96b09c56088e5b1d265266ffa87e103a41fc8eaef
-  data.tar.gz: 58a5bea3b1b81cc0fb06731f30aef7c5c02fbc2d7bfddc7175046d913355f325
+  metadata.gz: 9bd94a16e8f4921dfb9fc4dec855acde1e435ef517754f0622a861ee987a0d63
+  data.tar.gz: 8599257f054471735d29bad11278793ed971382e2910dbc50f30dd80b6f85cf2
 SHA512:
-  metadata.gz: fb44317a418ce0d5042d883f6c7a5d1789cef28e04fa3819021e8ec853f8dc5db8dbf09b2fe925188356586e4a9707a6497e0102afaedec2f4c466d4603fad8a
-  data.tar.gz: aada7d4698d5b7dfc3ba3528f295ba980eca79b85ed5d018e332e4ec473b0b021863c412fd2f49b6b9d0e02a4a527bdbe1ffa0160e62f9f2b2b25ccaaee982b1
+  metadata.gz: 07b3efaee6c1db4128f6225d25d89aac30a35d9747881aca6f065a58d83982fda6373244c2fc9cfce867701b75c2bfbaca56f8980ca3b51886abf2b773e3e84b
+  data.tar.gz: 41c4d23b85f2c20877f01bac703b5d50312b5a6e826c1fcc8cb1bb0f0810ce84c118f3334ca9f01489c99c84529b1f4c96df3e8762ce92cf4e8f8326f5a60732

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -3,13 +3,18 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
+    position: "absolute",
     left: `${leftOffset}em`,
+    top: 0,
+    bottom: 0,
+    width: "2px",
+    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style}
+        style={style} 
     />
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -110,17 +110,9 @@
     height: auto;
   }
 
-  .collapsible-trail {
-    background-color: $border_light;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-  }
-
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="advanced-table-responsive-scroll"] {
+    &[class*="table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -158,7 +150,7 @@
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="advanced-table-responsive-scroll"] {
+    &[class*="table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -208,7 +200,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="advanced-table-responsive-scroll"] {
+      &[class*="table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `advanced-table-responsive-${responsive}`,
+    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

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

@@ -2,7 +2,6 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
 

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,16 +14,14 @@ module Playbook
                                      default: "header"
       prop :subrow_headers, type: Playbook::Props::Array,
                             default: []
-      prop :collapsible_trail, type: Playbook::Props::Boolean,
-                               default: true
 
       def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
           output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,14 +2,6 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
-                    <% end %>
-
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -9,8 +9,6 @@ module Playbook
                                 default: []
       prop :row
       prop :depth
-      prop :collapsible_trail, type: Playbook::Props::Boolean,
-                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -6,14 +6,6 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
-                    <% end %>
-
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -12,8 +12,6 @@ module Playbook
                                      default: "header"
       prop :subrow_header, type: Playbook::Props::String,
                            default: ""
-      prop :collapsible_trail, type: Playbook::Props::Boolean,
-                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
+import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
 import Flex from '../pb_flex/_flex'
@@ -36,7 +36,7 @@ type CardPropTypes = {
 } & GlobalProps
 
 type CardHeaderProps = {
-  headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
   headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
@@ -127,12 +127,12 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-
+  
   return (
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId}
+        <Draggable.Item dragId={dragId} 
             key={dragId}
         >
         <Tag
@@ -140,14 +140,14 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            style={mergedStyles}
+            style={mergedStyles} 
         >
           {subComponentTags('Header')}
           {
             dragHandle ? (
               <Flex>
                 <span className="card_draggable_handle">
-                  <Icon
+                  <Icon 
                       icon="grip-dots-vertical"
                       paddingRight="xs"
                       verticalAlign="middle"
@@ -169,7 +169,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              style={mergedStyles}
+              style={mergedStyles} 
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -24,7 +24,7 @@ $additional_colors: (
   "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
-$pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
+$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,24 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
-
-<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
-    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
-    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -181,56 +181,6 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
-
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Status Colors"
-            />
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success"
-                >
-                    <Body
-                        dark
-                        text="Success"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error"
-                >
-                    <Body
-                        dark
-                        text="Error"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,8 +9,10 @@ import type { Callback } from '../types'
 import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
+import { isEmpty } from '../utilities/object'
+
 type FileUploadProps = {
-  accept?: string[],
+  accept?: Record<string, string[]>,
   className?: string,
   customMessage?: string,
   dark?: boolean,
@@ -19,7 +21,7 @@ type FileUploadProps = {
   acceptedFilesDescription?: string,
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
-  onFilesRejected: (error: string, files: File[]) => void,
+  onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
 }
 
 const getFormattedFileSize = (fileSize: number): string => {
@@ -28,7 +30,7 @@ const getFormattedFileSize = (fileSize: number): string => {
 
 const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
-    accept = null,
+    accept = {},
     acceptedFilesDescription = '',
     className,
     customMessage,
@@ -48,30 +50,37 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     getRootProps: () => DropzoneRootProps & any;
     getInputProps: () => DropzoneInputProps & any;
     isDragActive: boolean;
-    rejectedFiles: File[];
+    fileRejections: readonly FileRejection[];
   }
 
-  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
 
-  const prevRejected = useRef<File[] | null>(null);
+  const prevRejected = useRef<readonly FileRejection[] | null>(null);
 
-  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  let maxFileSizeText = ''
+  if (maxSize !== undefined) {
+    maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  }
 
   useEffect(() => {
-    if (rejectedFiles === prevRejected.current) return
-    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
+    if (fileRejections === prevRejected.current) return
+    const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
     if (isFileTooLarge) {
-      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
     }
-    prevRejected.current = rejectedFiles
-  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
+    prevRejected.current = fileRejections
+  }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
 
   const acceptedFileTypes = () => {
-    return accept.map((fileType) => {
+    if (!accept) {
+      return []
+    }
+
+    return Object.keys(accept).map((fileType) => {
       if (fileType.startsWith('image/')) {
         return fileType.replace('image/', ' ')
       } else {
@@ -86,7 +95,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const getDescription = () => {
     return customMessage
       ? customMessage
-      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
+      : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
 
   return (

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -28,7 +28,9 @@ const FileUploadAccept = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['image/svg+xml']}
+          accept={{
+            "image/svg+xml": [".svg", ".xml"],
+          }}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
+          accept={{
+            "application/pdf": [".pdf"],
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+          }}
           acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
           onFilesAccepted={handleOnFilesAccepted}
           {...props}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
 const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
-      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
+      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
     ))}
   </List>
 )

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,6 +1,3 @@
-@import "../tokens/spacing";
-@import "./error_state_mixin";
-
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -15,12 +12,6 @@
     }
   }
 
-@include error-state-flex-start-selectors;
-@include error-state-center-selectors;
-@include error-state-flex-end-selectors;
-@include error-state-left-side-select-kit;
-@include error-state-right-side-select-kit;
-
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -36,7 +27,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-
+    
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -159,7 +150,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    }
+    } 
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,33 +1,12 @@
-@import "../tokens/colors";
-
 [class^=pb_gauge_kit] {
 
-  .fix {
-    fill: $text_lt_default;
-    stroke: none;
-
-    &[class*=dark] {
-      fill: $text_dk_default;
-    }
-  }
-
   .suffix {
     fill: $text_lt_light;
-    stroke: none;
     font: $regular $font_larger $font_family_base;
-
-    &[class*=dark] {
-      fill: $text_dk_light;
-    }
   }
   .prefix {
     fill: $text_lt_light;
-    stroke: none;
     font: $regular $font_base $font_family_base;
-
-    &[class*=dark] {
-      fill: $text_dk_light;
-    }
   }
 
   rect.highcharts-background {
@@ -37,13 +16,4 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-
-  &[class*=dark] {
-    color: $text_dk_default;
-
-    .pb_title_kit_size_1,
-    .pb_caption_kit_xs {
-        color: $text_dk_light;
-    }
-  }
-}
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
-              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
-              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
+              `<span class="prefix">${prefix}</span>` +
+              '<span class="fix">{y:,f}</span>' +
+              `<span class="suffix">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,