!= Action in a button mode has a type=button as default

~ `Action` now has discriminative props

Author: dzek69

CHANGELOG.md

@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.27.6] - 2025-01-05
+### Breaking
+- `Action` in a button mode has a `type=button` as default
+### Dev
+- `Action` now has discriminative props
+
 ## [0.27.5] - 2025-01-05
 ### Fixed
 - `Input` error state should color text too, should not color prefix and suffix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.27.5",
+  "version": "0.27.6",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

src/components/ui/action/Action.stories.tsx

@@ -17,6 +17,7 @@ const meta: Meta = {
                 type: "text",
             },
         },
+        href: { type: "string" },
     },
 };
 
@@ -38,8 +39,45 @@ const Primary: Story = {
     },
 };
 
+const Button: Story = {
+    args: {
+        label: "I am a button",
+        icon: "checkmark",
+        onClick: () => { alert("Clicked"); },
+    },
+};
+
+const Link: Story = {
+    args: {
+        label: "I am a link",
+        icon: "checkmark",
+        href: "https://example.com",
+    },
+};
+
+const WithCustomLink: Story = {
+    args: {
+        label: "I am a custom link",
+        icon: "checkmark",
+        to: "/subpage",
+        Link: (props) => {
+            return (
+                <a
+                    href={props.href}
+                    onClick={(e) => { e.preventDefault(); alert("I'd take you to " + props.href); }}
+                >
+                    {props.children}
+                </a>
+            );
+        },
+    },
+};
+
 export {
     Primary,
+    Button,
+    Link,
+    WithCustomLink,
 };
 
 export default meta;

src/components/ui/action/Action.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
+import { omit } from "@ezez/utils";
+
 import type { ICON } from "../../icons/Icon";
 import type { ThemeCSS } from "../../../theme";
 
@@ -13,19 +15,34 @@ interface LinkProps { // @TODO extract? - same on list item
     children: React.ReactNode;
 }
 
-interface Props {
+type NativeLinkProps = {
     /**
      * If action should be a native link provide target URL as `href`
      */
-    href?: string;
+    href: string;
+    type?: never;
+};
+
+type RouterLinkProps = {
     /**
      * If action should be a routed link provide target URL as `to` and `Link` component
      */
-    to?: string;
+    to: string;
     /**
      * If action should be a routed link provide target URL as `to` and `Link` component
      */
-    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    Link: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    type?: never;
+};
+
+type ButtonProps = {
+    /**
+     * If action should be a button provide `onClick` handler
+     */
+    type?: React.ComponentProps<typeof Button>["type"];
+};
+
+type CommonProps = {
     /**
      * Standard onClick handler (with no event)
      */
@@ -47,15 +64,20 @@ interface Props {
      */
     css?: ThemeCSS;
     badge?: ReactNode;
-}
+};
+
+type Props = (NativeLinkProps | RouterLinkProps | ButtonProps) & CommonProps;
 
 /**
  * Action is a round-shaped button or a link, usually used at headers/toolbars.
  *
  * Its label is displayed below the circular shape.
  */
 const Action: React.FC<Props> = (props) => {
-    const { icon, label, href, to, Link, css, ...restProps } = props;
+    const { icon, label, css, ..._restProps } = props;
+    const restProps = omit(
+        _restProps as unknown as Record<string, string>, ["to", "Link", "href", "type"],
+    ) as Omit<Props, "to" | "Link" | "href" | "type" | "icon" | "label" | "css">;
     const maybeCss = css ? { css } : {};
 
     let iconElem: ReactNode = icon;
@@ -72,24 +94,24 @@ const Action: React.FC<Props> = (props) => {
         </>
     );
 
-    if (to) {
-        if (!Link) {
+    if ("to" in props) {
+        if (!("Link" in props)) {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
         return (
-            <Link href={to} {...restProps}>
+            <props.Link href={props.to} {...restProps}>
                 <Anchor className={props.className} {...maybeCss}>{content}</Anchor>
-            </Link>
+            </props.Link>
         );
     }
 
-    if (href) {
-        return <Anchor href={href} className={props.className} {...restProps} {...maybeCss}>{content}</Anchor>;
+    if ("href" in props) {
+        return <Anchor href={props.href} className={props.className} {...restProps} {...maybeCss}>{content}</Anchor>;
     }
 
     return (
-        <Button onClick={props.onClick} className={props.className} {...maybeCss}>
+        <Button onClick={props.onClick} className={props.className} {...maybeCss} type={props.type ?? "button"}>
             {content}
         </Button>
     );