@inglorious/ui 8.5.0 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/controls/button/button.stories.js

@@ -57,7 +57,19 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    accept: {
+      control: "text",
+      description: "File types the picker offers (with `onFileSelect`).",
+    },
+    isMultiple: {
+      control: "boolean",
+      description: "Lets the picker select more than one file.",
+    },
     onClick: { action: "onClick" },
+    onFileSelect: {
+      action: "onFileSelect",
+      description: "Turns the button into a file picker.",
+    },
   },
   parameters: {
     docs: {
@@ -150,6 +162,16 @@ Round.args = {
   children: "＋",
 }
 
+export const FilePicker = {}
+FilePicker.args = {
+  ...Default.args,
+  children: "Change photo",
+  variant: "outline",
+  shape: "pill",
+  accept: "image/jpeg,image/png,image/webp",
+  onFileSelect: () => {},
+}
+
 export const CustomContent = {}
 CustomContent.args = {
   ...Default.args,

package/src/controls/button/template.js

@@ -3,7 +3,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 
@@ -12,10 +12,14 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
 /**
  * Renders a themed button for actions and form submission.
  * Supports variants, sizes, shapes, pressed state, and full-width layout.
+ * With `onFileSelect`, the button also opens a file picker on click.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', variant: 'primary' })
  *
+ * // File picker
+ * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
+ *
  * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
@@ -34,7 +38,10 @@ export function render(props) {
     ariaLabel = "",
     isAriaPressed = false,
     className = "",
+    accept,
+    isMultiple = false,
     onClick,
+    onFileSelect,
     ...rest
   } = props
 
@@ -57,6 +64,13 @@ export function render(props) {
     ...extraClasses,
   }
 
+  const handleClick = onFileSelect
+    ? (event) => {
+        onClick?.(event)
+        event.currentTarget.nextElementSibling.click()
+      }
+    : onClick
+
   return html`
     <button
       type=${buttonType}
@@ -64,10 +78,29 @@ export function render(props) {
       aria-pressed=${isAriaPressed}
       class=${classMap(classes)}
       ?disabled=${isDisabled}
-      @click=${onClick}
+      @click=${handleClick}
       ${ref((element) => applyElementProps(element, rest))}
     >
       ${children}
     </button>
+    ${
+      onFileSelect
+        ? html`<input
+            type="file"
+            accept=${accept ?? ""}
+            ?multiple=${isMultiple}
+            ?disabled=${isDisabled}
+            hidden
+            @change=${(event) => handleFileChange(event, onFileSelect)}
+          />`
+        : nothing
+    }
   `
 }
+
+function handleFileChange(event, onFileSelect) {
+  const { files } = event.target
+  if (files?.length) onFileSelect(files)
+  // Clear the input so picking the same file again still fires `change`
+  event.target.value = ""
+}

package/src/controls/file-upload/style.css

@@ -58,6 +58,10 @@
     inset: 0;
     opacity: 0;
     cursor: pointer;
+
+    &::file-selector-button {
+      cursor: inherit;
+    }
   }
 
   .iw-upload-content {

package/types/controls/button.d.ts

@@ -22,7 +22,13 @@ export interface ButtonProps {
   ariaLabel?: string
   isAriaPressed?: boolean
   className?: string
-  onClick?: () => void
+  /** File types the picker offers, as in the native `accept` attribute */
+  accept?: string
+  /** Lets the picker select more than one file */
+  isMultiple?: boolean
+  onClick?: (event: MouseEvent) => void
+  /** Turns the button into a file picker; called with the chosen files */
+  onFileSelect?: (files: FileList) => void
   [key: string]: unknown
 }