RubyGems - playbook_ui - Versions diffs - 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0 - Mend

playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

Files changed (210) hide show

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

@@ -181,96 +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>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success_subtle"
-                >
-                    <Body
-                        text="Success Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error_subtle"
-                >
-                    <Body
-                        text="Error Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
         </>
     )
 }

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

	@@ -1 +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>.
1	+ 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_circle_icon_button/_circle_icon_button.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
@@ -18,7 +16,7 @@ $pb_button_styles: (
   flex-grow: 0;
   width: $pb_button_size;
   height: $pb_button_size;
-  border-radius: math.div($pb_button_size, 2);
+  border-radius: $pb_button_size / 2;
   line-height: $pb_button_size;
   flex-basis: $pb_button_size;
   min-width: $pb_button_size;
@@ -55,4 +53,4 @@ $pb_button_styles: (
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx CHANGED Viewed

@@ -20,7 +20,6 @@ type CircleIconButtonProps = {
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
-  target?: string
   variant?: 'primary' | 'secondary' | 'link',
 }
@@ -37,7 +36,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     loading = false,
     onClick = noop,
     type,
-    target,
     link,
     newWindow,
     variant,
@@ -68,7 +66,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           loading={loading}
           newWindow={newWindow}
           onClick={onClick}
-          target={target}
           text={null}
           variant={variant}
       >

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb CHANGED Viewed

@@ -17,7 +17,6 @@ module Playbook
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
-      prop :target
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb CHANGED Viewed

@@ -10,11 +10,3 @@
   link: "https://google.com",
   new_window: true
 }) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "info",
-  variant: "secondary",
-  aria: { label: "Link to Playbook in new window" },
-  link: "https://playbook.powerapp.cloud/",
-  target: "child"
-}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx CHANGED Viewed

@@ -21,15 +21,6 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
-    <br/>
-    <CircleIconButton
-        aria={{ label: "Link to Playbook in new window" }}
-        icon="info"
-        link="https://playbook.powerapp.cloud/"
-        target="child"
-        variant="secondary"
-    />
   </div>
 )

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,7 +32,6 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 const Collapsible = ({
@@ -48,9 +47,8 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
-  tag = 'div',
   ...props
-}: CollapsibleProps & GlobalProps): React.ReactElement => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
   useEffect(()=> {
@@ -78,12 +76,9 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
-  const Tag: React.ReactElement | any = `${tag}`;
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <Tag
+      <div
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -101,7 +96,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </Tag>
+      </div>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
+}: CollapsibleMainProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 @import "../../pb_textarea/textarea_mixin";
 [class^=pb_date_picker_kit] {
@@ -43,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       input,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
@@ -8,8 +6,8 @@
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: math.div($space_xs, 4);
-    margin-top: math.div($space_xs, 3);
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
   }
 }
 @media (max-width: 499px) {
@@ -21,7 +19,7 @@
   }
 }
 // Firefox Header Adjustments
-@supports (-moz-appearance:none) {
+@supports (-moz-appearance:none) {
   select.flatpickr-monthDropdown-months {
       width: 97px !important;
       margin-left: $space_xs + 3;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 [class^=pb_date_range_inline_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -23,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: math.div($space_xs, 2);
-      margin-right: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: math.div($space_xs, 2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 [class^=pb_date_time_stacked] {
   [class^=padding_month] {
@@ -21,7 +19,7 @@
 }
 .date-time-padding {
-  padding-right: math.div($space_xs, 2);
-  padding-left: math.div($space_xs, 2);
+  padding-right: $space_xs / 2;
+  padding-left: $space_xs / 2;
 }

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx CHANGED Viewed

@@ -287,6 +287,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
+              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -295,7 +296,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
-              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,6 +306,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
+            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -326,7 +327,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
-                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED Viewed

@@ -1,5 +1,3 @@
-@use "sass:math";
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/typography";
@@ -124,7 +122,7 @@
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       [class*="dropdown_trigger_wrapper"] {
@@ -148,7 +146,7 @@
   &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         [class*="pb_dropdown_option"]:first-child {
           margin-top: $space_xs;
         }
@@ -163,7 +161,7 @@
           border-radius: $border_radius_md;
           border-bottom: none;
           position: relative;
           &::after {
             content: "";
             position: absolute;
@@ -174,20 +172,20 @@
             background: $border_light;
           }
         }
         [class*="pb_dropdown_option"]:last-child::after {
-          display: none;
+          display: none;
         }
       }
     }
     &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {
             margin-top: $space_xs;
           }
           [class*="pb_dropdown_option"]:last-child {
             margin-bottom: $space_xs;
           }
@@ -195,7 +193,7 @@
           [class*="pb_dropdown_option"] {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
             &::after {
               height: 0px;
             }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss CHANGED Viewed

@@ -11,8 +11,3 @@
   }
 }
-.dark [class*='pb_file_upload_kit'] {
-  [class*='pb_card_kit'] {
-    border: 1px $text_dk_lighter dashed;
-  }
-}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,19 +9,16 @@ 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?: Record<string, string[]>,
+  accept?: string[],
   className?: string,
   customMessage?: string,
-  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
-  onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
+  onFilesRejected: (error: string, files: File[]) => void,
 }
 const getFormattedFileSize = (fileSize: number): string => {
@@ -30,11 +27,10 @@ const getFormattedFileSize = (fileSize: number): string => {
 const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
-    accept = {},
+    accept = null,
     acceptedFilesDescription = '',
     className,
     customMessage,
-    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -50,37 +46,30 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     getRootProps: () => DropzoneRootProps & any;
     getInputProps: () => DropzoneInputProps & any;
     isDragActive: boolean;
-    fileRejections: readonly FileRejection[];
+    rejectedFiles: File[];
   }
-  const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
-  const prevRejected = useRef<readonly FileRejection[] | null>(null);
+  const prevRejected = useRef<File[] | null>(null);
-  let maxFileSizeText = ''
-  if (maxSize !== undefined) {
-    maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
-  }
+  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
   useEffect(() => {
-    if (fileRejections === prevRejected.current) return
-    const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
+    if (rejectedFiles === prevRejected.current) return
+    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
     if (isFileTooLarge) {
-      onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
     }
-    prevRejected.current = fileRejections
-  }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
+    prevRejected.current = rejectedFiles
+  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
   const acceptedFileTypes = () => {
-    if (!accept) {
-      return []
-    }
-    return Object.keys(accept).map((fileType) => {
+    return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
         return fileType.replace('image/', ' ')
       } else {
@@ -95,7 +84,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const getDescription = () => {
     return customMessage
       ? customMessage
-      : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
+      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
   return (
@@ -105,12 +94,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card dark={dark}>
+      <Card>
         <input {...getInputProps()} />
-        <Body
-            color="light"
-            dark={dark}
-        >
+        <Body color="light">
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb CHANGED Viewed

@@ -5,17 +5,11 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label
-          for="upload-<%= object.id %>"
-          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
-        >
-          <%= "#{object.label}" %>
-        </label>
+        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {
           type: "file",
-          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}",
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>