playbook_ui 17.0.0 → 17.1.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a0a3a991932ffc02ce86b727b56b252fbf4bb0bc93f232fbbad6941c63e56d5
-  data.tar.gz: 342f580343e5a39ef86663eba4d1fb8bce4ddcc699d3d7b52c9a7e1d16404f95
+  metadata.gz: 7b715350921a0d13054afef8c7a265256206ce8a191121ac5a553f7a6c53f81e
+  data.tar.gz: d2f45143b6d02498ee81758e82ce67ad49f35d821990d627bdd973ac3d944f83
 SHA512:
-  metadata.gz: 878f0f3aa7a1930e43394ae899c2708d9d7d3596f4ebb014c588f1095921c9cb7575f77f33dfb207286bb93c2c3b2185b9b244df1addd71aa6347835c0560560
-  data.tar.gz: 71ddab4024b085f462b341b2daf4158aac4cc81a5289025f5cf1782ba4c72560e2b75d6054a61faae3eb5d3cd1cf46ae24e8d579bcd313fe0578a5ac06692efb
+  metadata.gz: 060ba5b0e47cbefc0822b7f624b45344e28dea010f2b0af1d380e7d85e33b59f0b5a2df7153cbc1b4b7264b4821ee9617dc2e732ff8704b029333329119a1583
+  data.tar.gz: a90fecaa285e278f7d119e96f48760f8c36816ef7f8810c1177e1100d088bf34c9d4f7705319d99a1106e570b4304989536169262bc5223d2ecb505210ca5566

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 153, highlight: false, icon: "🎉", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
 <%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -11,7 +11,7 @@ return (
     <Button
         count={highlightActive ? (reactionCount + 1) : reactionCount}
         highlight = {highlightActive}
-        icon="&#127881;"
+        icon="🎉"
         onClick={()=> setHighlightActive(!highlightActive)}
         tabIndex={0}
         variant="reaction"

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md

@@ -1,3 +1,3 @@
-The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
+The `reaction` variant accepts any emoji as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
 
 Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
+  error: "Invalid date. Please pick a valid date.",
   picker_id: "date-picker-error"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
-import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error={<>
-          <Icon icon="warning" /> Invalid date. Please pick a valid date.
-        </>}
+        error="Invalid date. Please pick a valid date."
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -7,6 +7,6 @@
 %>
 
 <%= pb_rails("dropdown", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  error: "Please make a valid selection",
   options: options
 }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,12 +1,9 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
-import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : (<>
-        <Icon icon="warning" /> Please make a valid selection
-    </>)
+    const error = selectedOption?.value ? null : "Please make a valid selection"
     const options = [
         {
             label: "United States",

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

@@ -1 +1 @@
-<%= pb_rails("file_upload", props: {id: "error",  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>
+<%= pb_rails("file_upload", props: {id: "error",  error: "Please upload a valid file."}) %>

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

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import FileUpload from '../_file_upload'
 import List from '../../pb_list/_list'
 import ListItem from '../../pb_list/_list_item'
-import Icon from '../../pb_icon/_icon'
 
 const AcceptedFilesList = ({ files }) => (
   <List>
@@ -19,10 +18,6 @@ const FileUploadError = (props) => {
     setFilesToUpload([...filesToUpload, ...files])
   }
 
-  const error = (<>
-    <Icon icon="warning" /> Please upload a valid file
-  </>)
-
   return (
     <div>
       <AcceptedFilesList
@@ -30,7 +25,7 @@ const FileUploadError = (props) => {
           {...props}
       />
       <FileUpload
-          error={error}
+          error="Please upload a valid file."
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

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

@@ -1,10 +1,9 @@
 <%# SVG fill color inherited from css color property %>
 <div class="icon-wrapper">
-
-  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
+  <% svg_path = Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s %>
+  <p><%= pb_rails("icon", props: { icon: svg_path } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_path, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, icon: svg_path, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_path } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_path } ) %></p>
 </div>

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

@@ -12,4 +12,4 @@ You must source _your own SVG into component/view_ you are working on. This can
 
 ### Rails
 
-Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
+Pass a local filesystem path to an SVG under your application or a mounted engine (for example `Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s`) via the `icon` or `custom_icon` prop. Remote `http(s)` URLs are not fetched — only local / engine paths are supported.

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -2,7 +2,7 @@
   <%= object.render_svg %>
 <% elsif object.valid_emoji? %>
   <span class="pb_icon_kit_emoji">
-    <%= object.icon.html_safe %>
+    <%= object.icon %>
   </span>
 <% else %>
   <%= pb_content_tag(:i) do %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -46,8 +46,19 @@ module Playbook
       prop :tabindex
 
       def valid_emoji?
-        emoji_regex = /\p{Emoji}/
-        emoji_regex.match?(icon)
+        str = icon.to_s
+        return false if str.blank?
+        # Digits / # / * match \p{Emoji} as keycap bases; require real emoji forms.
+        # Also reject markup so we never treat HTML-like strings as emoji.
+        return false if str.match?(%r{[<>&"'A-Za-z/\\]})
+
+        str.match?(
+          /
+            \p{Emoji_Presentation}
+            | \p{Extended_Pictographic}
+            | [\d#*]\u{FE0F}?\u{20E3}
+          /x
+        )
       end
 
       def classname
@@ -103,7 +114,11 @@ module Playbook
           if Rails.application.config.respond_to?(:icon_path)
             resolved_icon = resolve_alias(icon)
             path = self.class.icon_path_index[resolved_icon]
-            path if path && File.exist?(path)
+            # icon_path_index keys off the *.svg basename, so apply the same
+            # realpath / .svg / allowed-root checks as custom_icon loading —
+            # otherwise a foo.svg symlink to a non-svg file would be File.read
+            # directly in svg_content.
+            path && File.exist?(path) ? allowed_svg_path(path)&.to_s : nil
           end
       end
 
@@ -302,8 +317,9 @@ module Playbook
         source = source.to_s
         return "" if source.blank?
 
-        remote = remote_svg_uri(source)
-        return read_remote_svg(remote) if remote
+        # Remote http(s) fetch removed: untrusted custom_icon/icon values must not
+        # trigger server-side requests (SSRF). Use local / engine SVG paths only.
+        return "" if remote_svg_uri(source)
 
         path = allowed_svg_path(source)
         return "" unless path
@@ -318,16 +334,11 @@ module Playbook
         nil
       end
 
-      def read_remote_svg(uri)
-        uri.open("User-Agent" => "Playbook-Icon-Kit/1.0 (https://github.com/powerhome/playbook)", redirect: false, &:read)
-      rescue OpenURI::HTTPError, StandardError
-        ""
-      end
-
       def allowed_svg_path(source)
         candidate = Pathname.new(source)
         candidate = Rails.root.join(candidate) unless candidate.absolute?
-        resolved = candidate.expand_path
+        resolved = real_path(candidate.expand_path)
+        return nil unless resolved
         return nil unless svg_file?(resolved)
         return nil unless path_within_allowed_root?(resolved)
 
@@ -337,7 +348,8 @@ module Playbook
       # Only ever read real .svg files. This keeps non-svg files that happen to
       # live inside an allowed root (config/master.key, credentials, .env, ...)
       # structurally out of the read path rather than relying on the is_svg?
-      # gate to exclude them.
+      # gate to exclude them. Extension is checked on the resolved real path so
+      # a *.svg symlink to a non-svg file cannot bypass the filter.
       def svg_file?(path)
         path.file? && path.extname.casecmp(".svg").zero?
       end
@@ -351,9 +363,12 @@ module Playbook
         false
       end
 
-      # An SVG may live in the host application or in any mounted engine
-      # (Playbook itself, or a host app's component engines), so every loaded
-      # engine root is allowed in addition to Rails.root.
+      # An SVG may live in the host application, any mounted engine
+      # (Playbook itself, or a host app's component engines), or the configured
+      # icon_path directory. playbook-website points development icon_path at
+      # ../node_modules/@powerhome/playbook-icons/icons, which resolves outside
+      # Rails.root / Engine.root — that directory must still be allowed, while
+      # realpath + svg_file? keep symlink-to-non-svg blocked.
       def allowed_svg_roots
         @allowed_svg_roots ||= svg_root_candidates.filter_map { |candidate| real_path(candidate) }.uniq
       end
@@ -361,10 +376,19 @@ module Playbook
       def svg_root_candidates
         Rails::Engine.descendants
                      .map { |engine| engine_root(engine) }
-                     .push(Playbook::Engine.root, Rails.root)
+                     .push(Playbook::Engine.root, Rails.root, configured_icon_path_root)
                      .compact
       end
 
+      def configured_icon_path_root
+        return unless Rails.application.config.respond_to?(:icon_path)
+
+        base = Rails.application.config.icon_path
+        return if base.blank?
+
+        Rails.root.join(base)
+      end
+
       def engine_root(engine)
         engine.root
       rescue

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.html.erb

@@ -4,13 +4,13 @@
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "&#128525;",
+  icon: "😍",
   size:"md",
   variant: "red"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: '&#x1F389;',
+  icon: "🎉",
   size: "lg",
   variant: "teal"
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.jsx

@@ -12,14 +12,14 @@ const IconCircleEmoji = (props) => {
       />
       <br/>
       <IconCircle
-          icon="&#128525;"
+          icon="😍"
           size="md"
           variant="red"
           {...props}
       />
       <br/>
       <IconCircle
-          icon="&#x1F389;"
+          icon="🎉"
           size="lg"
           variant="teal"
           {...props}

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.md

@@ -1 +1 @@
-The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string to the `icon` prop as shown in the code snippet below.
+The Icon Circle also allows you to pass an emoji in place of an icon if needed. Pass any emoji as a string to the `icon` prop as shown in the code snippet below.

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -37,7 +37,7 @@ describe("IconCircle Kit", () => {
         render(
             <IconCircle
                 data={{ testid: testId }}
-                icon="&#128525;"
+                icon="😍"
                 size="md"
             />
         )

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -16,7 +15,7 @@ const PhoneNumberInputValidation = (props) => {
     // Start with initial error - will be cleared on blur if valid
     const initialError = (
         <>
-            <Icon icon="warning" /> Missing phone number.
+            Missing phone number.
         </>
     );
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -18,6 +18,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-height: 45px;
+    &:has(option[value=""]:checked) {
+      color: $input_text_default;
+    }
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $input_background_state;
@@ -170,6 +173,9 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    &:has(option[value=""]:checked) {
+      color: $input_text_default_dark;
+    }
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $input_background_state_dark;

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  error: "Please make a valid selection",
   id: "select-food-error",
   label: "Favorite Food",
   name: "food",

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
-import Icon from '../../pb_icon/_icon'
 
 const SelectError = (props) => {
   const options = [
@@ -19,14 +18,10 @@ const SelectError = (props) => {
     },
   ]
 
-  const error = (<>
-    <Icon icon="warning" /> Please make a valid selection
-  </>)
-
   return (
     <div>
       <Select
-          error={error}
+          error="Please make a valid selection"
           label="Favorite Food"
           name="food-error"
           options={options}
@@ -34,7 +29,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error={error}
+          error="Please make a valid selection"
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb

@@ -1,11 +1,11 @@
 <div class="pb--doc-demo-row">
-  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <% svg_path = Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s %>
 
   <%= pb_rails("selectable_card_icon", props: {
-    custom_icon: svg_url,
+    custom_icon: svg_path,
     title_text: "Customization", 
     body_text: "Personalize everything",
     input_id: 1,
     checked: true,
   }) %>
-</div>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md

@@ -16,4 +16,4 @@ So long as you have a valid React `<SVG>` node, you can send it as the `customIc
 
 ### Rails
 
-Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
+Pass a local filesystem path to an SVG under your application or a mounted engine (for example `Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s`) via the `custom_icon` prop. Remote `http(s)` URLs are not fetched — only local / engine paths are supported.

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -45,6 +45,7 @@ type TableProps = {
     title?: string,
     titleProps?: { [key: string]: any },
     variant?: "default" | "withFilter",
+    contrastBorder?: boolean,
     verticalBorder?: boolean,
 } & GlobalProps
 
@@ -80,6 +81,7 @@ const Table = (props: TableProps): React.ReactElement => {
         striped = false,
         tag = 'table',
         title,
+        contrastBorder = false,
         verticalBorder = false,
     } = props
 
@@ -87,6 +89,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const dataProps = buildDataProps(data)
     const htmlProps = buildHtmlProps(htmlOptions)
     const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+    const contrastBorderCss = contrastBorder ? 'contrast-border' : ''
     const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
@@ -117,6 +120,7 @@ const Table = (props: TableProps): React.ReactElement => {
         },
         globalProps(props),
         tableCollapseCss,
+        contrastBorderCss,
         verticalBorderCss,
         className
     )

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

@@ -14,6 +14,7 @@
     "striped": false,
     "tag": "table",
     "variant": "default",
+    "contrastBorder": false,
     "verticalBorder": false
   },
   "groups": [
@@ -33,6 +34,7 @@
       "props": [
         "striped",
         "verticalBorder",
+        "contrastBorder",
         "singleLine",
         "disableHover",
         "headerStyle",

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

@@ -39,7 +39,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["striped", "verticalBorder", "singleLine", "disableHover", "headerStyle", "dark", "dataTable"]
+      "props": ["striped", "verticalBorder", "contrastBorder", "singleLine", "disableHover", "headerStyle", "dark", "dataTable"]
     },
     {
       "name": "Sticky Columns",

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

@@ -42,6 +42,7 @@ sections:
     examples:
       - table_data_table
       - table_vertical_border
+      - table_contrast_border
       - table_striped
 
   - title: "Header Variants"

data/app/pb_kits/playbook/pb_table/docs/_table_contrast_border.html.erb

@@ -0,0 +1,71 @@
+<%= pb_rails("table", props: { size: "sm", contrast_border: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>
+
+<br/>
+
+<%= pb_rails("table", props: { size: "sm", contrast_border: true, vertical_border: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>