@morscherlab/mint-sdk 1.2.0-beta.14 → 1.2.0-beta.15

package/dist/__tests__/components/iconButtonIconSizing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles.css

@@ -4148,6 +4148,14 @@ code, pre {
   width: 1.5rem;
   height: 1.5rem;
 }
+/* A bare <svg> in the slot has no intrinsic size and collapses to 0 width as a
+   flex item; fill the sized icon box so callers need not size their icon. */
+.mint-icon-button__icon--sm > svg,
+.mint-icon-button__icon--md > svg,
+.mint-icon-button__icon--lg > svg {
+  width: 100%;
+  height: 100%;
+}
 /* Spinner */
 .mint-icon-button__spinner {
   animation: mint-spin 1s linear infinite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.2.0-beta.14",
+  "version": "1.2.0-beta.15",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/iconButtonIconSizing.test.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> passed to IconButton's slot must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('IconButton icon sizing', () => {
+  it('should size a bare slot svg to the icon box when the caller passes no dimensions', () => {
+    const css = readFileSync(
+      resolve(__dirname, '../../styles/components/icon-button.css'),
+      'utf8',
+    )
+    expect(css).toMatch(
+      /\.mint-icon-button__icon--sm > svg,\s*\.mint-icon-button__icon--md > svg,\s*\.mint-icon-button__icon--lg > svg \{\s*width: 100%;\s*height: 100%;\s*\}/,
+    )
+  })
+})

package/src/styles/components/icon-button.css

@@ -167,6 +167,15 @@
   height: 1.5rem;
 }
 
+/* A bare <svg> in the slot has no intrinsic size and collapses to 0 width as a
+   flex item; fill the sized icon box so callers need not size their icon. */
+.mint-icon-button__icon--sm > svg,
+.mint-icon-button__icon--md > svg,
+.mint-icon-button__icon--lg > svg {
+  width: 100%;
+  height: 100%;
+}
+
 /* Spinner */
 .mint-icon-button__spinner {
   animation: mint-spin 1s linear infinite;