@pathscale/ui 2.4.0 → 2.5.0

package/dist/components/button/Button.generated.d.ts

@@ -11,6 +11,22 @@ export type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "col
     width?: Width | "square";
     radius?: Radius;
     type?: "button" | "submit" | "reset";
+    /**
+     * Renders an anchor instead of a button, and navigates.
+     *
+     * A link that looks like a button is the single most common thing every
+     * app in the fleet was reaching outside the library for, because `Button`
+     * was a `<button>` and `Link`'s variants are underline treatments rather
+     * than fills. Both spellings existed and neither was this one, so call
+     * sites wrote the raw classes instead.
+     *
+     * It is a real anchor: middle-click, right-click, open-in-new-tab and
+     * "copy link address" all work, which is exactly what a `<button>` with an
+     * onClick handler takes away.
+     */
+    href?: string;
+    target?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
     children?: JSX.Element;
 };
 export declare const ButtonLayout: __LayoutComponent<ButtonProps>;

package/dist/components/button/Button.generated.js

@@ -1,71 +1,86 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Button.css";
 import { Show } from "solid-js";
 import { button as external_Button_recipe_js_button } from "./Button.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button>");
+import { buttonElement, buttonHref, buttonRel } from "./Button.interactions.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutButtonLayout = (_stable, p)=>{
     const loading = ()=>"loading" === p.state;
     const inert = ()=>loading() || "disabled" === p.state || Boolean(p.disabled);
-    return (()=>{
-        var _el$ = _tmpl$2();
-        spread(_el$, mergeProps(()=>_stable.slot.root, {
-            get type () {
-                return p.type ?? "button";
-            },
-            get disabled () {
-                return inert();
-            },
-            get ["aria-disabled"] () {
-                return inert() ? "true" : "false";
-            },
-            get ["aria-busy"] () {
-                return loading() ? "true" : void 0;
-            },
-            get ["data-state"] () {
-                return p.state ?? "default";
-            },
-            get ["data-flavor"] () {
-                return p.flavor ?? "primary";
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return loading();
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                spread(_el$2, mergeProps(()=>_stable.slot.spinner, {
-                    "aria-hidden": "true"
-                }), false, false);
-                return _el$2;
-            }
-        }), null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.startIcon;
-            },
-            get children () {
-                var _el$3 = _tmpl$();
-                spread(_el$3, mergeProps(()=>_stable.slot.startIcon), false, true);
-                insert(_el$3, ()=>p.startIcon);
-                return _el$3;
-            }
-        }), null);
-        insert(_el$, ()=>_stable.children, null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.endIcon;
-            },
-            get children () {
-                var _el$4 = _tmpl$();
-                spread(_el$4, mergeProps(()=>_stable.slot.endIcon), false, true);
-                insert(_el$4, ()=>p.endIcon);
-                return _el$4;
-            }
-        }), null);
-        return _el$;
-    })();
+    const element = ()=>buttonElement(p.href);
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return element();
+        }
+    }, ()=>_stable.slot.root, {
+        get type () {
+            return memo(()=>"a" === element())() ? void 0 : p.type ?? "button";
+        },
+        get href () {
+            return buttonHref(p.href, inert());
+        },
+        get target () {
+            return memo(()=>"a" === element())() ? p.target : void 0;
+        },
+        get rel () {
+            return memo(()=>"a" === element())() ? buttonRel(p.rel, p.target) : void 0;
+        },
+        get disabled () {
+            return memo(()=>"a" === element())() ? void 0 : inert();
+        },
+        get ["aria-disabled"] () {
+            return inert() ? "true" : "false";
+        },
+        get ["aria-busy"] () {
+            return loading() ? "true" : void 0;
+        },
+        get ["data-state"] () {
+            return p.state ?? "default";
+        },
+        get ["data-flavor"] () {
+            return p.flavor ?? "primary";
+        },
+        get children () {
+            return [
+                createComponent(Show, {
+                    get when () {
+                        return loading();
+                    },
+                    get children () {
+                        var _el$ = _tmpl$();
+                        spread(_el$, mergeProps(()=>_stable.slot.spinner, {
+                            "aria-hidden": "true"
+                        }), false, false);
+                        return _el$;
+                    }
+                }),
+                createComponent(Show, {
+                    get when () {
+                        return p.startIcon;
+                    },
+                    get children () {
+                        var _el$2 = _tmpl$();
+                        spread(_el$2, mergeProps(()=>_stable.slot.startIcon), false, true);
+                        insert(_el$2, ()=>p.startIcon);
+                        return _el$2;
+                    }
+                }),
+                memo(()=>_stable.children),
+                createComponent(Show, {
+                    get when () {
+                        return p.endIcon;
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$();
+                        spread(_el$3, mergeProps(()=>_stable.slot.endIcon), false, true);
+                        insert(_el$3, ()=>p.endIcon);
+                        return _el$3;
+                    }
+                })
+            ];
+        }
+    }));
 };
 const ButtonLayout = defineComponent({
     recipe: external_Button_recipe_js_button,

package/dist/components/button/Button.interactions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * What `href` decides, as three functions.
+ *
+ * A `.layout.tsx` binds free identifiers to props, so anything with a rule in
+ * it belongs beside the markup rather than inside it. These are also the parts
+ * worth testing, and the repository's tests are pure: there is no DOM in the
+ * suite, by choice.
+ */
+/** An anchor when there is somewhere to go, a button otherwise. */
+export declare const buttonElement: (href: string | undefined) => "a" | "button";
+/**
+ * The destination, unless the control is inert.
+ *
+ * There is no `disabled` on an anchor. Keeping the `href` and refusing the
+ * click leaves it focusable, activatable by Enter, and still offering "open in
+ * new tab" from the context menu - a disabled control that is not disabled.
+ * Removing the attribute is what makes it inert; `aria-disabled` is how it is
+ * announced.
+ */
+export declare const buttonHref: (href: string | undefined, inert: boolean) => string | undefined;
+/**
+ * `rel` for a link, defaulted for new tabs.
+ *
+ * A `target="_blank"` without `noopener` hands the opening document to the
+ * destination. Defaulted rather than forced, so a caller who means `me` or
+ * `nofollow` still gets it.
+ */
+export declare const buttonRel: (rel: string | undefined, target: string | undefined) => string | undefined;

package/dist/components/button/Button.interactions.js

@@ -0,0 +1,4 @@
+const buttonElement = (href)=>"string" == typeof href ? "a" : "button";
+const buttonHref = (href, inert)=>"string" != typeof href || inert ? void 0 : href;
+const buttonRel = (rel, target)=>rel ?? ("_blank" === target ? "noopener noreferrer" : void 0);
+export { buttonElement, buttonHref, buttonRel };

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "author": "pathscale",
   "repository": {
     "type": "git",