@inglorious/ui 8.4.2 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.4.2",
+  "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",
@@ -308,19 +308,19 @@
   "peerDependencies": {
     "@inglorious/store": "12.0.0",
     "@inglorious/utils": "5.1.0",
-    "@inglorious/web": "6.8.1"
+    "@inglorious/web": "6.9.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "11.1.6",
+    "@inglorious/charts": "11.1.7",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",
     "@inglorious/vite-plugin-vue": "1.0.6",
-    "@inglorious/web": "6.8.1",
+    "@inglorious/web": "6.9.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

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/src/feedback/snackbar/snackbar.stories.js

@@ -10,7 +10,14 @@ export default {
     message: { control: "text" },
     position: {
       control: "select",
-      options: ["bottom-left", "bottom-right", "top-left", "top-right"],
+      options: [
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "top-left",
+        "top-center",
+        "top-right",
+      ],
     },
     onClose: { action: "onClose" },
   },
@@ -23,3 +30,20 @@ export const Default = {
     position: "bottom-left",
   },
 }
+
+// A phone app keeps a bar at the bottom: the snackbar rises above it.
+export const AboveBottomNavigation = {
+  args: {
+    isOpen: true,
+    message: "New version available",
+    position: "bottom-center",
+  },
+  decorators: [
+    (story) => {
+      const container = document.createElement("div")
+      container.style.setProperty("--iw-snackbar-offset-bottom", "4.875rem")
+      container.append(story())
+      return container
+    },
+  ],
+}

package/src/feedback/snackbar/style.css

@@ -1,26 +1,47 @@
+/* Fixed to the viewport, clear of the system bars. A bottom snackbar also
+   clears whatever bar the app keeps at the bottom: the app sets
+   --iw-snackbar-offset-bottom to that bar's height while it shows, and the
+   offset then stands in for the safe area, which the bar already covers.
+   Only the app knows when its bar is on screen, so nothing is guessed here. */
 .iw-snackbar {
+  --iw-snackbar-gap: var(--iw-space-4);
   position: fixed;
   z-index: var(--iw-z-popover, 1060);
+  max-width: calc(100vw - 2 * var(--iw-snackbar-gap));
 }
 
-.iw-snackbar-bottom-left {
-  left: var(--iw-space-4);
-  bottom: var(--iw-space-4);
+.iw-snackbar-bottom-left,
+.iw-snackbar-bottom-center,
+.iw-snackbar-bottom-right {
+  bottom: calc(
+    var(--iw-snackbar-gap) +
+      var(--iw-snackbar-offset-bottom, var(--safe-area-bottom, 0px))
+  );
 }
 
-.iw-snackbar-bottom-right {
-  right: var(--iw-space-4);
-  bottom: var(--iw-space-4);
+.iw-snackbar-top-left,
+.iw-snackbar-top-center,
+.iw-snackbar-top-right {
+  top: calc(var(--iw-snackbar-gap) + var(--safe-area-top, 0px));
 }
 
+.iw-snackbar-bottom-left,
 .iw-snackbar-top-left {
-  left: var(--iw-space-4);
-  top: var(--iw-space-4);
+  left: var(--iw-snackbar-gap);
 }
 
+.iw-snackbar-bottom-right,
 .iw-snackbar-top-right {
-  right: var(--iw-space-4);
-  top: var(--iw-space-4);
+  right: var(--iw-snackbar-gap);
+}
+
+/* Both insets and auto margins: the snackbar is as wide as its content, up
+   to the gutters, and centered within them. */
+.iw-snackbar-bottom-center,
+.iw-snackbar-top-center {
+  inset-inline: var(--iw-snackbar-gap);
+  width: fit-content;
+  margin-inline: auto;
 }
 
 .iw-snackbar-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
 }
 

package/types/feedback/snackbar.d.ts

@@ -6,7 +6,13 @@ export interface SnackbarProps {
   isOpen?: boolean
   message?: TemplateResult | string | number
   action?: TemplateResult | string | number
-  position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+  position?:
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right"
+    | "top-left"
+    | "top-center"
+    | "top-right"
   className?: string
   onClose?: () => void
   [key: string]: unknown