playbook_ui 16.10.0.pre.alpha.play300617429 → 16.10.0.pre.alpha.play300617505

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc61e3b1cf418d10b8c89717465ec82d728f918711ab223e03065119d0e6ebe2
-  data.tar.gz: a59e2de7ba4dbba8477676d95664dd0442148d2effd74ad5c9f1162e7e451693
+  metadata.gz: b6044e67e19269e1a92b4676fa5016bed0216700a6dcacfb20cc7d51cf260d7c
+  data.tar.gz: b6b32bf00d34dda342226e78fcbe12c10998afd6834dabc39897de96a8800b33
 SHA512:
-  metadata.gz: 0dd024e07261c2ead3b178c94561265f0a64caa2f07d177c71f2ef325163243c630d4903290151e7cf3eff0c70c3a1840ba56d646d31c6fff49107c37e1066e9
-  data.tar.gz: d16f9553b4b72dca3f94d39b9d3dc29529bf17c0dcb24b0154fe127e610298f9f155d1533df6e2f90a7ef6c86d5078c67b4f8dc102fe6a7a6d97f2053a5d87ac
+  metadata.gz: 0ffcf33ef0bb707a2b5a7cc34755d26eddc2ea8a0b980f60f4dcd13befa32d55965228809c6996b103e83558100bed90f521a2cdd43e17e45b8d1ba5279387db
+  data.tar.gz: 3380b0f9a955d1d682109399d8dc369102594e63e865fe2b50433939eb1a53c993fb8e36099dbfc71fb08d3787aed44790371b2972f305aac09c6df0e34aa8a5

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -32,9 +32,9 @@ exports[`html structure is correct 1`] = `
                 class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
-                height="auto"
+                height="1.5em"
                 viewBox="0 0 30 25"
-                width="auto"
+                width="1.5em"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path

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

@@ -0,0 +1,66 @@
+<div id="file-upload-remove-replace">
+  <%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
+
+  <%= pb_rails("file_upload", props: {
+    id: "remove_replace",
+    input_options: { multiple: true },
+  }) %>
+</div>
+
+<template id="file-list-item-template">
+  <%= pb_rails("list/item") do %>
+    <%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
+      <%= pb_rails("body", props: { data: { file_name: true } }) %>
+      <%= pb_rails("circle_icon_button", props: {
+        icon: "times",
+        variant: "secondary",
+        input_options: { classname: "remove-file-button" },
+      }) %>
+    <% end %>
+  <% end %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.getElementById("upload-remove_replace")
+    const list = document.getElementById("selected-files-list")
+    const template = document.getElementById("file-list-item-template")
+    let files = []
+
+    if (!fileInput || !list || !template) return
+
+    function syncInput() {
+      const dataTransfer = new DataTransfer()
+      files.forEach((file) => dataTransfer.items.add(file))
+      fileInput.files = dataTransfer.files
+    }
+
+    function render() {
+      list.innerHTML = ""
+
+      files.forEach((file, index) => {
+        const clone = template.content.cloneNode(true)
+        const nameElement = clone.querySelector("[data-file-name]")
+        const removeButton = clone.querySelector(".remove-file-button")
+
+        nameElement.textContent = file.name
+        removeButton.addEventListener("click", function (event) {
+          event.preventDefault()
+          event.stopPropagation()
+          files = files.filter((_, fileIndex) => fileIndex !== index)
+          syncInput()
+          render()
+        })
+
+        list.appendChild(clone)
+      })
+    }
+
+    fileInput.addEventListener("change", function () {
+      const newFiles = Array.from(fileInput.files)
+      files = [...files, ...newFiles]
+      syncInput()
+      render()
+    })
+  })
+<% end %>

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

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import Flex from '../../pb_flex/_flex'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+
+const FileUploadRemoveReplace = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const handleRemoveFile = (index) => {
+    setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
+  }
+
+  return (
+    <div>
+      {filesToUpload.length > 0 && (
+        <List marginBottom="sm">
+          {filesToUpload.map((file, index) => (
+            <ListItem key={`${file.name}-${index}`}>
+              <Flex
+                  align="center"
+                  justify="between"
+                  width="100%"
+              >
+                <Body text={file.name} />
+                <CircleIconButton
+                    aria={{ label: `Remove ${file.name}` }}
+                    icon="times"
+                    onClick={() => handleRemoveFile(index)}
+                    variant="secondary"
+                />
+              </Flex>
+            </ListItem>
+          ))}
+        </List>
+      )}
+      <FileUpload
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadRemoveReplace

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

@@ -0,0 +1,5 @@
+The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
+
+**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
+
+**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.

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

@@ -4,6 +4,7 @@ examples:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
   - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace
 
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +12,5 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error
+  - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace

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

@@ -4,3 +4,4 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
 export { default as FileUploadError } from './_file_upload_error.jsx'
+export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'

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

@@ -125,8 +125,6 @@ module Playbook
 
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
-        svg["height"] = "auto"
-        svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "16.10.0"
-  VERSION = "16.10.0.pre.alpha.play300617429"
+  VERSION = "16.10.0.pre.alpha.play300617505"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 16.10.0.pre.alpha.play300617429
+  version: 16.10.0.pre.alpha.play300617505
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-02 00:00:00.000000000 Z
+date: 2026-07-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1630,6 +1630,9 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.json
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml