github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: Add buttonSize property to CardButtonSchema and update button styles in BaseModelTable for consistency

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-03-27 12:07:04 +00:00
parent 59a9636870
commit 526eb756b1
2 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Common/UI/Components/Card/Card.tsx
View File

@@ -1,4 +1,4 @@
import Button, { ButtonStyleType } from "../Button/Button";
import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import ShortcutKey from "../ShortcutKey/ShortcutKey";
import IconProp from "../../../Types/Icon/IconProp";
import React, { FunctionComponent, ReactElement } from "react";
@@ -12,6 +12,7 @@ export interface CardButtonSchema {
isLoading?: undefined | boolean;
className?: string | undefined;
shortcutKey?: undefined | ShortcutKey;
buttonSize?: ButtonSize | undefined;
}
export interface ComponentProps {
@@ -59,21 +60,21 @@ const Card: FunctionComponent<ComponentProps> = (
</div>
{(props.rightElement ||
(props.buttons && props.buttons.length > 0)) && (
<div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0">
<div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
{props.rightElement && (
<div className="mb-2 md:mb-0 md:mr-3">
{props.rightElement}
</div>
)}
{props.buttons && props.buttons.length > 0 && (
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-1.5">
{props.buttons.map(
(
button: CardButtonSchema | ReactElement,
i: number,
) => {
return (
<div key={i}>
<div key={i} className="flex items-center">
{React.isValidElement(button) ? button : null}
{React.isValidElement(button) ? null : (
<Button
@@ -82,6 +83,9 @@ const Card: FunctionComponent<ComponentProps> = (
buttonStyle={
(button as CardButtonSchema).buttonStyle
}
buttonSize={
(button as CardButtonSchema).buttonSize
}
className={
(button as CardButtonSchema).className
}

25
Common/UI/Components/ModelTable/BaseModelTable.tsx
View File

@@ -19,7 +19,7 @@ import {
BulkActionFailed,
BulkActionOnClickProps,
} from "../BulkUpdate/BulkUpdateForm";
import { ButtonStyleType } from "../Button/Button";
import { ButtonSize, ButtonStyleType } from "../Button/Button";
import Card, {
CardButtonSchema,
ComponentProps as CardComponentProps,
@@ -1045,7 +1045,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
headerbuttons.push({
title: "View Documentation",
icon: IconProp.Book,
buttonStyle: ButtonStyleType.OUTLINE,
buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
buttonSize: ButtonSize.Small,
className: "hidden md:flex",
onClick: () => {
Navigation.navigate(props.documentationLink!, {
@@ -1061,7 +1062,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
title: "",
icon: IconProp.Help,
buttonStyle: ButtonStyleType.ICON,
className: "py-0 pr-0 pl-1 mt-1",
buttonSize: ButtonSize.Small,
className: "",
onClick: () => {
setShowHelpModal(true);
},
@@ -1073,7 +1075,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
headerbuttons.push({
title: "Watch Demo",
icon: IconProp.Play,
buttonStyle: ButtonStyleType.OUTLINE,
buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
buttonSize: ButtonSize.Small,
className: "hidden md:flex",
onClick: () => {
Navigation.navigate(props.videoLink!, {
@@ -1109,8 +1112,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
title: `${props.createVerb || "Create"} ${
props.singularName || model.singularName
}`,
buttonStyle: ButtonStyleType.NORMAL,
className: showFilterButton || props.showRefreshButton ? "mr-1" : "",
buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
buttonSize: ButtonSize.Small,
className: "",
onClick: () => {
setModalType(ModalType.Create);
setShowModal(true);
@@ -1122,10 +1126,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
if (props.showRefreshButton) {
headerbuttons.push({
...getRefreshButton(),
className: showFilterButton
? "p-1 px-1 pr-0 pl-0 py-0 mt-1"
: "py-0 pr-0 pl-1 mt-1",
buttonSize: ButtonSize.Small,
className: "",
onClick: async () => {
await fetchItems();
},
@@ -1137,7 +1139,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
headerbuttons.push({
title: "",
buttonStyle: ButtonStyleType.ICON,
className: "py-0 pr-0 pl-1 mt-1",
buttonSize: ButtonSize.Small,
className: "",
onClick: () => {
setQuery({});
setShowFilterModal(true);