playbook_ui 17.1.0 → 17.2.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b282160685aeb7935309b54bddb2856ff20b4957a8ca3455a268ab52693bb8e7
-  data.tar.gz: 31b055f1c7c84e23d99b25cb980a5ad370f53088e265308ccd4e72a0b74500ba
+  metadata.gz: b0cfdd29dff7aa690ffa80f529b880a467df847de2897b20978f15aee42493f9
+  data.tar.gz: efe2a6be9fa5b594a9ec8cf3dba4085b7bbc3b6e0ce181a60710b0e760165640
 SHA512:
-  metadata.gz: ce34582a3e72b462fa81e781a464f4f1352aaad7a37ffbace981816b5ec899397a6c29d8aa487af44d0fe20bda2f2d8280574bbf5a0a31548eed4c8e576976d8
-  data.tar.gz: 41690ad445b535cab92bb9a8c7a1e3c23e382b2e3661def036d7b85b16b7d2f6ec5c4419b22cdabdfc96f289231be50a4241d583e716a038a19efd82dfd63b3d
+  metadata.gz: d1000f4e35e8953cbeff95dba2a55f2373c594320e00fc58ac8436eded89a5eb9f5383c85600bf3d747d71148182841ab2a1c5f4124581b5b03596813ea0b353
+  data.tar.gz: '068ba2587e7d290077532454b72d6b6cddefa2d919834bc41329259a010b70535ab6ab0636a846973f3c436d6f6cc259a1fb455edade7989f352b15e76c3543d'

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

@@ -1076,6 +1076,30 @@
       }
     }
 
+    // Firefox-specific fix for vertical borders disappearing upon row hover
+    .pb_table.vertical-border .pb_advanced_table_body {
+      tr:not(.virtualized-table-row) td:not(:last-child):not(.last-cell),
+      .pb_table_tr:not(.virtualized-table-row) .pb_table_td:not(:last-child):not(.last-cell) {
+        position: relative;
+        border-right-color: transparent !important;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: -1px;
+          bottom: -1px;
+          width: 1px;
+          background-color: var(--table-border-color);
+        }
+
+        // The base kit gives the first column's divider the column group color
+        &:first-child::before {
+          background-color: var(--column-border-color);
+        }
+      }
+    }
+
     &[class*="column-group-border-"] {
       .pb_advanced_table_header {
         th[colspan]:not([colspan="1"]):not(:last-child),
@@ -1122,6 +1146,14 @@
         }
       }
 
+      // --table-border-color stays light in dark mode, matches token of base kit's dark vertical border
+      .pb_table.vertical-border .pb_advanced_table_body {
+        tr:not(.virtualized-table-row) td:not(:last-child):not(.last-cell)::before,
+        .pb_table_tr:not(.virtualized-table-row) .pb_table_td:not(:last-child):not(.last-cell)::before {
+          background-color: $border_dark;
+        }
+      }
+
       &[class*="column-group-border-"] {
         .pb_advanced_table_header {
           th[colspan]:not([colspan="1"]):not(:last-child),

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

@@ -18,6 +18,11 @@
       margin-top: $space_xs;
     }
   }
+  .pb_form_group_kit {
+    > .pb_button_kit.file_upload_custom_message_spacing {
+      margin-bottom: $space_xxs;
+    }
+  }
 }
 
 .pb_file_upload_kit_error {

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("file_upload", props: {
+  accept: ".pdf,.xlsx",
+  custom_message: "Choose a file. The accepted file types are Adobe (.pdf) and Microsoft (.xlsx)",
+  id: "file-upload-custom-message-file-types",
+}) %>
+
+<%= pb_rails("file_upload", props: {
+  custom_message: "Max Size: 10MB.",
+  id: "file-upload-custom-message-max-size",
+  margin_top: "md",
+}) %>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.getElementById("upload-file-upload-custom-message-max-size")
+    const maxSize = 10 * 1000 * 1000
+
+    if (!fileInput) return
+
+    fileInput.addEventListener("change", function () {
+      const files = Array.from(fileInput.files || [])
+      const fileTooLarge = files.some((file) => file.size > maxSize)
+
+      if (fileTooLarge) {
+        fileInput.setCustomValidity("File size is too large. Maximum file size is 10MB.")
+        fileInput.reportValidity()
+      } else {
+        fileInput.setCustomValidity("")
+      }
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message_rails.md

@@ -0,0 +1,3 @@
+Use the `custom_message` prop to provide additional information about the files that can be uploaded, such as accepted file types or maximum file size. The `custom_message` is informational only.
+
+The first example demonstrates using it along with the `accept` prop and serves as a description of accepted files. The second example demonstrates using it as a max size warning with a script tag mimicking a client-side alert; however, when actually implemented file size limits should be enforced server-side when processing the uploaded file.

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_input_options.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("file_upload", props: { input_options: { name: "my_file_upload"}}) %>
+
+ 

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_input_options.md

@@ -0,0 +1 @@
+Use `input_options` to access the File Upload input directly. Common implemenation patterns use this to add a `name` prop directly to the input, among other props.

data/app/pb_kits/playbook/pb_file_upload/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "accept": {},
+    "customMessage": "",
     "dark": false
   },
   "groups": [

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

@@ -3,8 +3,10 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
+  - file_upload_custom_message: Add a custom message
   - file_upload_error: Error
   - file_upload_remove_replace: Remove and Replace
+  - file_upload_input_options: Input Options
 
   react:
   - file_upload_default: Default List of files to upload

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

@@ -1,8 +1,8 @@
 <%= pb_content_tag(:div) do %>
-      <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
+      <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width,  margin_bottom: object.custom_message.present? ? "none" : nil}) do %>
         <label
           for="upload-<%= object.id %>"
-          class="pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled <%= 'dark' if object.dark %>"
+          class="pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled <%= 'dark' if object.dark %> <%= 'file_upload_custom_message_spacing' if object.custom_message.present? %>"
         >
           <%= "#{object.label}" %>
         </label>
@@ -10,11 +10,20 @@
           type: "file",
           dark: object.dark,
           error: object.error.presence,
+          margin_bottom: object.custom_message.present? ? "xxs" : nil,
           input_options: {
+            accept: object.accept.presence,
             id: "upload-#{object.id}",
-            classname: "cursor_pointer",
-          }.merge(object.input_options)
+            classname: "cursor_pointer ",
+          }.compact.merge(object.input_options)
+        }) %>
+      <% end %>
+      <% if object.custom_message.present? %>
+        <%= pb_rails("body", props: {
+          text: object.custom_message,
+          dark: object.dark,
+          color: "lighter",
+          classname: "file_upload_custom_message"
         }) %>
       <% end %>
-    </label>
 <% end %>

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -23,6 +23,9 @@ module Playbook
 
       prop :error, type: Playbook::Props::String
 
+      prop :custom_message, type: Playbook::Props::String,
+                            default: ""
+
       def classname
         file_upload_class = generate_classname("pb_file_upload_kit")
         file_upload_class + error_class + full_width_class

data/app/pb_kits/playbook/pb_file_upload/kit.schema.json

@@ -18,8 +18,10 @@
     "customMessage": {
       "type": "string",
       "platforms": [
-        "react"
-      ]
+        "react",
+        "rails"
+      ],
+      "default": ""
     },
     "dark": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_icon/docs/_icon_css_api.html.erb

@@ -0,0 +1,3 @@
+<div>
+  <span class="pb-icon-sparkles" aria-hidden="true"></span>
+</div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_css_api.jsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+const IconCssApi = () => {
+  return (
+    <div>
+      <span aria-hidden="true"
+          className="pb-icon-sparkles"
+      />
+    </div>
+  )
+}
+
+export default IconCssApi

data/app/pb_kits/playbook/pb_icon/docs/_icon_css_api.md

@@ -0,0 +1 @@
+Every icon is available as a CSS class enabling them to be used anywhere without importing the Icon component. The pattern needed is `pb-icon-{icon-name}` (e.g. pb-icon-asterisk). Props for size and color are not available here; size can be set with the --pb-icon-size custom property and color can be set with the CSS color property. if you need an icon to animate, a utility class should be used alongside it, e.g. `pb-icon-spin`. For a full reference, see the [Icons page](https://playbook.powerapp.cloud/icons).

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

@@ -9,6 +9,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_color: Icon Color
+  - icon_css_api: Icon CSS API
 
   react:
   - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_color: Icon Color
+  - icon_css_api: Icon CSS API
 
   swift:
   - icon_default_swift: Icon Default

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

@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
 export { default as IconColor } from './_icon_color.jsx'
+export { default as IconCssApi } from './_icon_css_api.jsx'

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -19,6 +19,7 @@ type LinkProps = {
   icon?: string,
   iconRight?: string,
   id?: string,
+  rel?: string,
   tabIndex?: number,
   tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   target?: string,
@@ -39,6 +40,7 @@ const Link = (props: LinkProps): React.ReactElement => {
     icon = '',
     iconRight = '',
     id = '',
+    rel,
     tabIndex,
     tag = 'a',
     target = '',
@@ -64,6 +66,14 @@ const Link = (props: LinkProps): React.ReactElement => {
     return undefined
   }
 
+  const getRelAttribute = () => {
+    if (rel !== undefined) {
+      return rel
+    }
+
+    return target !== 'child' ? 'noreferrer' : undefined
+  }
+
   const renderContent = () => (
     <>
       {icon && (
@@ -99,7 +109,7 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
+          rel={getRelAttribute()}
           tabIndex={tabIndex}
           target={getTargetAttribute()}
       >
@@ -111,7 +121,7 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
+          rel={getRelAttribute()}
           tabIndex={tabIndex}
           target={getTargetAttribute()}
       >

data/app/pb_kits/playbook/pb_link/docs/_link_rel.html.erb

@@ -0,0 +1,16 @@
+<div>
+  <%= pb_rails("link", props: {
+    href: "https://playbook.powerapp.cloud/",
+    target: "playbookDocs",
+    text: "Named Tab (default rel)"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    href: "https://playbook.powerapp.cloud/",
+    rel: "",
+    target: "playbookDocs",
+    text: "Named Tab (rel override, reusable)"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_rel.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Link from '../../pb_link/_link'
+
+const LinkRel = (props) => (
+  <div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Playbook in a named tab, opens a new tab on every click' }}
+          href="https://playbook.powerapp.cloud/"
+          tabIndex={0}
+          target="playbookDocs"
+          text="Named Tab (default rel)"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Playbook in a named tab, reused on repeat clicks' }}
+          href="https://playbook.powerapp.cloud/"
+          rel=""
+          tabIndex={0}
+          target="playbookDocs"
+          text="Named Tab (rel override, reusable)"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkRel

data/app/pb_kits/playbook/pb_link/docs/_link_rel.md

@@ -0,0 +1,3 @@
+By default, `Link` sets `rel="noreferrer"` on any `target` other than `'child'`. This is a secure default — `noreferrer` implies `noopener`, which blocks the opened page from accessing `window.opener` — but it also prevents the browser from reusing a previously opened named tab: a browsing context opened with `noopener` isn't discoverable by name on later clicks, so every click opens a brand-new tab instead of navigating the existing one.
+
+Pass `rel=""` to opt out of the default and get a reusable named tab, the same way `target="child"` already behaves. Only do this for targets you control and trust (e.g. another view within the same app) — for links to third-party or untrusted destinations, leave `rel` unset and keep the secure default.

data/app/pb_kits/playbook/pb_link/docs/_playground.json

@@ -31,7 +31,8 @@
         "href",
         "target",
         "disabled",
-        "tabIndex"
+        "tabIndex",
+        "rel"
       ]
     },
     {
@@ -167,5 +168,8 @@
       "message": "Use tag to borrow link styling on semantic headings or inline text, but keep href when the element should still navigate.",
       "type": "info"
     }
-  }
+  },
+  "emitEmptyStringProps": [
+    "rel"
+  ]
 }

data/app/pb_kits/playbook/pb_link/docs/_playground.overrides.json

@@ -2,6 +2,7 @@
   "children": {
     "default": "Link text"
   },
+  "emitEmptyStringProps": ["rel"],
   "defaults": {
     "color": "default",
     "disabled": false,
@@ -17,7 +18,7 @@
     },
     {
       "name": "Behavior",
-      "props": ["href", "target", "disabled", "tabIndex"]
+      "props": ["href", "target", "disabled", "tabIndex", "rel"]
     },
     {
       "name": "Appearance",

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

@@ -7,6 +7,7 @@ examples:
   - link_disabled: Disabled
   - link_tag: Tag
   - link_target: Target
+  - link_rel: Rel
 
 
   react:
@@ -16,3 +17,4 @@ examples:
   - link_disabled: Disabled
   - link_tag: Tag
   - link_target: Target
+  - link_rel: Rel

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

@@ -3,4 +3,5 @@ export { default as LinkUnderline } from './_link_underline.jsx'
 export { default as LinkIcon } from './_link_icon.jsx'
 export { default as LinkDisabled } from './_link_disabled.jsx'
 export { default as LinkTag } from './_link_tag.jsx'
-export { default as LinkTarget } from './_link_target.jsx'
+export { default as LinkTarget } from './_link_target.jsx'
+export { default as LinkRel } from './_link_rel.jsx'

data/app/pb_kits/playbook/pb_link/kit.schema.json

@@ -56,6 +56,13 @@
         "rails"
       ]
     },
+    "rel": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
     "tabIndex": {
       "type": "number",
       "platforms": [

data/app/pb_kits/playbook/pb_link/link.html.erb

@@ -9,11 +9,11 @@
 <% end %>
 
 <% if object.tag == "a" %>
-  <%= pb_content_tag(object.tag, { href: object.href, target: object.target }) do %>
+  <%= pb_content_tag(object.tag, { href: object.href, rel: object.rel_attribute, target: object.target }) do %>
     <%= link_content.call %>
   <% end %>
 <% else %>
-  <%= pb_content_tag(:a, { href: object.href }) do %>
+  <%= pb_content_tag(:a, { href: object.href, rel: object.rel_attribute }) do %>
     <%= content_tag(object.tag) do %>
       <%= link_content.call %>
     <% end %>

data/app/pb_kits/playbook/pb_link/link.rb

@@ -11,6 +11,7 @@ module Playbook
       prop :href
       prop :icon
       prop :icon_right
+      prop :rel
       prop :tabindex
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[a h1 h2 h3 h4 h5 h6 p span div],
@@ -32,6 +33,12 @@ module Playbook
         target if target && href
       end
 
+      def rel_attribute
+        return rel unless rel.nil?
+
+        target == "child" ? nil : "noreferrer"
+      end
+
     private
 
       def color_class

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -120,3 +120,32 @@ test('should render child target prop', () => {
 
   expect(kit).toHaveAttribute('target', 'child')
 })
+
+test('defaults to noreferrer for a named target', () => {
+  render(
+      <Link
+          data={{ testid: 'rel-default-test' }}
+          href="https://playbook.powerapp.cloud/"
+          target="namedTab"
+      />
+  )
+
+  const kit = screen.getByTestId('rel-default-test')
+
+  expect(kit).toHaveAttribute('rel', 'noreferrer')
+})
+
+test('rel prop overrides the default noreferrer', () => {
+  render(
+      <Link
+          data={{ testid: 'rel-override-test' }}
+          href="https://playbook.powerapp.cloud/"
+          rel=""
+          target="namedTab"
+      />
+  )
+
+  const kit = screen.getByTestId('rel-override-test')
+
+  expect(kit).toHaveAttribute('rel', '')
+})

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -59,6 +59,7 @@ sections:
       - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
+      - table_with_filter_with_card_title_props
 
   - title: "Table Actions"
     examples:

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

@@ -8,10 +8,10 @@ examples:
     - table_sticky_right_columns: Sticky Right Column
     - table_sticky_columns: Sticky Left and Right Columns
     - table_header: Table Header
-    - table_alignment_row_rails: Row Alignment
-    - table_alignment_column_rails: Cell Alignment
-    - table_alignment_shift_row_rails: Row Shift
-    - table_alignment_shift_data_rails: Cell Shift
+    - table_alignment_row: Row Alignment
+    - table_alignment_column: Cell Alignment
+    - table_alignment_shift_row: Row Shift
+    - table_alignment_shift_data: Cell Shift
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -28,23 +28,23 @@ examples:
     - table_vertical_border: Vertical Borders
     - table_contrast_border: Contrast Border
     - table_striped: Striped Table
-    - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
+    - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
     - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
+    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
+    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
+    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
-    - table_with_filter_variant_rails: Variant with Filter
+    - table_with_filter_variant: Variant with Filter
     - table_with_filter_variant_external_filter_rails: Variant with Filter (External Filter)
-    - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
-    - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
+    - table_with_filter_variant_with_pagination: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)
 
   react:
     - table_sm: Small