Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replaced ButtonV2's with Button in entire codebase #9736

Merged
merged 12 commits into from
Jan 5, 2025
1 change: 1 addition & 0 deletions public/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@
"add_new_patient": "Add New Patient",
"add_new_user": "Add New User",
"add_notes": "Add notes",
"add_patient_updates": "Add Patient Updates",
"add_policy": "Add Insurance Policy",
"add_prescription_medication": "Add Prescription Medication",
"add_prescription_to_consultation_note": "Add a new prescription to this consultation.",
Expand Down
48 changes: 33 additions & 15 deletions src/CAREUI/display/Callout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";

import { cn } from "@/lib/utils";

import { ButtonVariant } from "@/components/Common/ButtonV2";
import { ButtonVariant } from "@/components/ui/button";
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved

interface CalloutProps {
variant?: ButtonVariant;
Expand All @@ -15,30 +15,48 @@ export default function Callout({
variant = "primary",
...props
}: CalloutProps) {
const variantClasses: Record<ButtonVariant, string> = {
primary: "bg-primary-100 text-primary-900 shadow-sm",
outline: "border border-gray-200 bg-white text-gray-900 shadow-sm",
secondary: "bg-gray-100 text-gray-900 shadow-sm",
destructive: "bg-red-100 text-red-900 shadow-sm",
primary_gradient:
"bg-gradient-to-b from-primary-700 to-primary-800 text-white shadow-lg",
ghost: "hover:bg-gray-100 text-gray-900 shadow-sm",
link: "text-gray-900 underline-offset-4 hover:underline",
white: "bg-white text-gray-900 shadow-sm",
alert: "bg-alert-100 text-alert-900 shadow-sm",
warning: "bg-warning-100 text-warning-900 shadow-sm",
outline_primary:
"border border-primary-700 bg-white text-primary-700 shadow-sm",
};

const badgeVariantClasses: Record<ButtonVariant, string> = {
primary: "border-primary-300",
outline: "border-gray-200",
secondary: "border-gray-300",
destructive: "border-red-300",
primary_gradient: "border-primary-700",
ghost: "border-gray-100",
link: "border-transparent",
white: "border-gray-200",
alert: "border-alert-300",
warning: "border-warning-300",
outline_primary: "border-primary-700",
};

return (
<div
className={cn(
"flex h-min gap-2 rounded-md px-2 py-1.5 text-sm/tight",
{
primary: "bg-primary-100/50 text-primary-800",
secondary: "bg-gray-50 text-gray-700",
warning: "bg-warning-50 text-warning-700",
alert: "bg-purple-50 text-purple-500",
danger: "bg-danger-50 text-danger-600",
}[variant],
variantClasses[variant],
props.className,
)}
>
<div
className={cn(
"h-min rounded-full border bg-white px-2 py-0.5",
{
primary: "border-primary-200",
secondary: "border-secondary-300",
warning: "border-warning-300",
alert: "border-purple-300",
danger: "border-danger-300",
}[variant],
badgeVariantClasses[variant],
)}
>
<span className="font-medium">{props.badge}</span>
Expand Down
57 changes: 0 additions & 57 deletions src/CAREUI/display/Chip.tsx

This file was deleted.

19 changes: 14 additions & 5 deletions src/CAREUI/display/PopupModal.tsx
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { ReactNode, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import { Cancel, Submit } from "@/components/Common/ButtonV2";
import { Button } from "@/components/ui/button";

import DialogModal from "@/components/Common/Dialog";

import useBreakpoints from "@/hooks/useBreakpoints";
Expand Down Expand Up @@ -41,9 +42,13 @@ export default function PopupModal(props: Props) {
<div className="space-y-6">
{props.children}
<div className="cui-form-button-group px-4">
<Cancel onClick={props.onHide} label={t("close")} shadow={false} />
<Button variant="outline" onClick={props.onHide}>
<span>{t("close")}</span>
</Button>
{props.onSubmit && (
<Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
<Button variant="primary" onClick={props.onSubmit}>
<span>{t("save")}</span>
</Button>
)}
</div>
</div>
Expand Down Expand Up @@ -141,9 +146,13 @@ const DesktopView = (props: Props) => {
>
{children}
<div className="flex w-full items-center justify-end gap-2 rounded-b-lg border-t border-t-secondary-300 bg-secondary-100 p-2">
<Cancel onClick={props.onHide} label={t("close")} shadow={false} />
<Button variant="outline" onClick={props.onHide}>
<span>{t("close")}</span>
</Button>
{props.onSubmit && (
<Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
<Button variant="primary" onClick={props.onSubmit}>
<span>{t("save")}</span>
</Button>
)}
</div>
</div>
Expand Down
15 changes: 4 additions & 11 deletions src/CAREUI/interactive/FiltersSlideover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import SlideOver from "@/CAREUI/interactive/SlideOver";

import { Button } from "@/components/ui/button";

import ButtonV2 from "@/components/Common/ButtonV2";

import useFilters from "@/hooks/useFilters";

type AdvancedFilter = ReturnType<typeof useFilters>["advancedFilter"];
Expand Down Expand Up @@ -35,18 +33,13 @@ export default function FiltersSlideover({
<div className="flex items-center justify-between">
<span className="text-lg font-bold">{t("filters")}</span>
<div className="mr-2 flex items-center justify-end gap-1">
<ButtonV2
variant="danger"
ghost
onClick={onClear}
id="clear-filter"
>
<Button variant="warning" onClick={onClear} id="clear-filter">
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
<CareIcon icon="l-filter-slash" className="text-lg" />
<span>{t("clear")}</span>
</ButtonV2>
<ButtonV2 ghost onClick={onApply} id="apply-filter">
</Button>
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
<Button variant="alert" onClick={onApply} id="apply-filter">
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
{t("apply")}
</ButtonV2>
</Button>
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
}
Expand Down
24 changes: 9 additions & 15 deletions src/CAREUI/interactive/Zoom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ReactNode, createContext, useContext, useState } from "react";

import CareIcon from "@/CAREUI/icons/CareIcon";

import ButtonV2 from "@/components/Common/ButtonV2";
import { Button } from "@/components/ui/button";

type ProviderValue = {
scale: number;
Expand Down Expand Up @@ -69,31 +69,25 @@ export const ZoomControls = (props: { disabled?: boolean }) => {

return (
<div className="absolute bottom-8 right-8 flex flex-col items-center justify-center gap-1 rounded-full border border-secondary-400 bg-white p-0.5 shadow-lg md:flex-row-reverse md:gap-2">
<ButtonV2
<Button
disabled={props.disabled}
circle
variant="secondary"
size="small"
shadow={false}
className="p-2.5"
variant="ghost"
className="p-2.5 rounded-full"
onClick={ctx.zoomIn}
>
<CareIcon icon="l-search-plus" className="text-lg" />
</ButtonV2>
</Button>
<span className="text-sm font-semibold text-secondary-800">
{Math.round(ctx.scale * 100)}%
</span>
<ButtonV2
<Button
disabled={props.disabled}
circle
variant="secondary"
size="small"
shadow={false}
className="p-2.5"
variant="ghost"
className="p-2.5 rounded-full"
onClick={ctx.zoomOut}
>
<CareIcon icon="l-search-minus" className="text-lg" />
</ButtonV2>
</Button>
</div>
);
};
8 changes: 4 additions & 4 deletions src/CAREUI/misc/PaginatedList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useState } from "react";

import CareIcon from "@/CAREUI/icons/CareIcon";

import ButtonV2, { CommonButtonProps } from "@/components/Common/ButtonV2";
import { Button, CommonButtonProps } from "@/components/ui/button";

import Pagination from "@/components/Common/Pagination";

import { PaginatedResponse, QueryRoute } from "@/Utils/request/types";
Expand Down Expand Up @@ -122,9 +123,8 @@ const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
const { loading, refetch } = useContextualized<object>();

return (
<ButtonV2
<Button
variant="secondary"
border
{...props}
onClick={() => refetch()}
disabled={loading}
Expand All @@ -134,7 +134,7 @@ const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
className={classNames("text-lg", loading && "animate-spin")}
/>
<span>{label}</span>
</ButtonV2>
</Button>
);
};

Expand Down
8 changes: 4 additions & 4 deletions src/Utils/AuthorizeFor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ export type AuthorizedElementProps = {
*
* **Example:**
* ```jsx
* <ButtonV2 authorizedFor={(role) => !role.includes('ReadOnly')}>
* <AuthorizedButton authorizedFor={(role) => !role.includes('ReadOnly')}>
* Delete Facility
* </ButtonV2>
* <ButtonV2 authorizedFor={AuthorizeFor.Admins}>
* </AuthorizedButton>
* <AuthorizedButton authorizedFor={AuthorizeFor.Admins}>
* Delete Facility
* </ButtonV2>
* </AuthorizedButton>
* ```
*/
authorizeFor?: AuthorizedForCB | undefined;
Expand Down
19 changes: 16 additions & 3 deletions src/components/Auth/ResetPassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { navigate } from "raviger";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { Cancel, Submit } from "@/components/Common/ButtonV2";
import { Button } from "@/components/ui/button";

import TextFormField from "@/components/Form/FormFields/TextFormField";
import { validateRule } from "@/components/Users/UserFormValidations";

Expand Down Expand Up @@ -173,8 +174,20 @@ const ResetPassword = (props: ResetPasswordProps) => {
)}
</div>
<div className="grid p-4 sm:flex sm:justify-between">
<Cancel onClick={() => navigate("/login")} />
<Submit onClick={(e) => handleSubmit(e)} label="reset" />
<Button
variant="outline"
type="button"
onClick={() => navigate("/login")}
>
<span>{t("cancel")}</span>
</Button>
<Button
variant="primary"
type="submit"
onClick={(e) => handleSubmit(e)}
>
<span>{t("reset")}</span>
</Button>
</div>
</form>
</div>
Expand Down
25 changes: 25 additions & 0 deletions src/components/Common/AuthorizedButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from "react";

import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";

import { Button, ButtonProps } from "@/components/ui/button";

import { AuthorizedElementProps, AuthorizedForCB } from "@/Utils/AuthorizeFor";

type AuthorizedButtonProps = Omit<AuthorizedElementProps, "authorizeFor"> & {
authorizeFor: AuthorizedForCB;
} & ButtonProps;

const AuthorizedButton: React.FC<AuthorizedButtonProps> = (props) => {
return (
<AuthorizedChild authorizeFor={props.authorizeFor}>
{({ isAuthorized }) => (
<Button {...props} disabled={props.disabled || !isAuthorized}>
{props.children}
</Button>
)}
</AuthorizedChild>
);
};

export default AuthorizedButton;
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
Loading
Loading