feat(ui): allow the button type to be overwritten (#1541)

* feat(ui): allow the button type to be overwritten

* refactor(ui): replace hardcoded values with tailwind predefined

* fix(greenhouse): failing tests due to async/mock timing issue

* chore(ci): generate changeset

* fix(ui): after merge changes

* chore(ui): update btn props jsdoc

Author: vlad-schur-external-sap

.changeset/few-paws-glow.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+Added customizable type property for the button component.

packages/ui-components/src/components/AppShell/AppShell.component.tsx

@@ -41,7 +41,7 @@ export const AppShell = ({
         <>
           {topNavigation && <HeaderContainer fullWidth={fullWidthOrDefault}>{topNavigation}</HeaderContainer>}
           <MainContainer>
-            <MainContainerInner fullWidth={fullWidthOrDefault} className={`${topNavigation ? "jn:mt-[3.875rem]" : ""}`}>
+            <MainContainerInner fullWidth={fullWidthOrDefault} className={`${topNavigation ? "jn:mt-15.5" : ""}`}>
               {sideNavigation}
               <ContentContainer>{children}</ContentContainer>
             </MainContainerInner>
@@ -55,7 +55,7 @@ export const AppShell = ({
           </HeaderContainer>
           {/* Wrap everything except page header and footer and navigations in a main container. Add top margin to MainContainerInner as we are not in embedded mode here. */}
           <MainContainer>
-            <MainContainerInner fullWidth={fullWidthOrDefault} className="jn:mt-[3.875rem]">
+            <MainContainerInner fullWidth={fullWidthOrDefault} className="jn:mt-15.5">
               {sideNavigation}
               <ContentContainer>{children}</ContentContainer>
             </MainContainerInner>

packages/ui-components/src/components/Button/Button.component.tsx

@@ -1,9 +1,17 @@
 /*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { forwardRef, HTMLProps, LegacyRef, MouseEventHandler, ReactNode, MouseEvent } from "react"
+import React, {
+  forwardRef,
+  HTMLProps,
+  MouseEventHandler,
+  ReactNode,
+  MouseEvent,
+  ButtonHTMLAttributes,
+  Ref,
+} from "react"
 import { Icon } from "../Icon/index"
 import { KnownIcons } from "../Icon/Icon.component"
 import { Spinner } from "../Spinner/index"
@@ -38,24 +46,24 @@ const btnDefaultBase = `
 `
 
 const btnSmallDefaultPadding = `
-  jn:py-[0.3125rem]
+  jn:py-1.25
   jn:px-[0.5rem]
 `
 
 const btnSmallSubduedPadding = `
   jn:py-[0.25rem]
-  jn:px-[0.4375rem]
+  jn:px-1.75
 `
 
 // default size padding
 const btnDefaultPadding = `
-  jn:py-[0.4375rem]
-  jn:px-[0.625rem] 
+  jn:py-1.75
+  jn:px-2.5 
 `
 
 const btnDefaultSubduedPadding = `
-  jn:py-[0.375rem]
-  jn:px-[0.5625rem]
+  jn:py-1.5
+  jn:px-2.25
 `
 
 const defaultButtonColors = `
@@ -166,6 +174,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
     {
       label,
       title,
+      type = "button",
       variant = "default",
       size = "default",
       disabled,
@@ -183,7 +192,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
     const titleValue = title || label || ""
 
     const buttonIcon = progress ? (
-      <Spinner size={size === "small" ? "1.125rem" : "1.5rem"} color={`${spinnerColorClass(variant)}`} />
+      <Spinner size={size === "small" ? "1.125rem" : "1.5rem"} color={spinnerColorClass(variant)} />
     ) : icon ? (
       <Icon
         icon={icon}
@@ -213,9 +222,9 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
           ${className}`}
         disabled={disabled || undefined}
         onClick={handleClick}
-        ref={ref as LegacyRef<HTMLButtonElement>}
+        ref={ref as Ref<HTMLButtonElement>}
         {...(props as HTMLProps<HTMLButtonElement>)}
-        type="button"
+        type={type}
         title={titleValue}
       >
         {buttonIcon}
@@ -240,7 +249,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         `}
         disabled={disabled}
         onClick={onClick}
-        ref={ref as LegacyRef<HTMLAnchorElement>}
+        ref={ref as Ref<HTMLAnchorElement>}
         {...(props as HTMLProps<HTMLAnchorElement>)}
         title={titleValue}
       >
@@ -312,6 +321,12 @@ export interface ButtonProps extends Omit<HTMLProps<HTMLAnchorElement> | HTMLPro
    */
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
 
+  /**
+   * Button type.
+   * @default "button"
+   */
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"]
+
   /**
    * Indicates whether the button's action is in progress.
    * @default false

packages/ui-components/src/components/Button/Button.test.tsx

@@ -132,6 +132,16 @@ describe("Button", () => {
     expect(screen.getByRole("button")).toHaveAttribute("data-lolol")
   })
 
+  test("defaults to type button", () => {
+    render(<Button label="Default type" />)
+    expect(screen.getByRole("button", { name: "Default type" })).toHaveAttribute("type", "button")
+  })
+
+  test("allows overriding type", () => {
+    render(<Button label="Submit" type="submit" />)
+    expect(screen.getByRole("button", { name: "Submit" })).toHaveAttribute("type", "submit")
+  })
+
   test("renders an icon with the defined button title", () => {
     render(<Button title="customTitle" icon="default" />)
     expect(screen.getByRole("img")).toBeInTheDocument()