diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index 8e5bf02450..fe3979d208 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -391,8 +391,9 @@ function BookingsContent({ status }: BookingsProps) {
variant="compact"
ToolbarLeft={
<>
-
+
+
>
}
diff --git a/apps/web/modules/insights/insights-view.tsx b/apps/web/modules/insights/insights-view.tsx
index 0e4f7eccb6..56b903a45a 100644
--- a/apps/web/modules/insights/insights-view.tsx
+++ b/apps/web/modules/insights/insights-view.tsx
@@ -54,8 +54,9 @@ function InsightsPageContent() {
className="flex flex-wrap items-center gap-2"
data-testid={`insights-filters-${isAll}-${teamId}-${userId}`}>
-
+
+
diff --git a/packages/features/data-table/components/DataTableToolbar.tsx b/packages/features/data-table/components/DataTableToolbar.tsx
index 79d7adcacc..523df0ed57 100644
--- a/packages/features/data-table/components/DataTableToolbar.tsx
+++ b/packages/features/data-table/components/DataTableToolbar.tsx
@@ -52,7 +52,7 @@ function SearchBarComponent(
return (
setSearchTerm(event.target.value.trim())}
@@ -68,7 +68,7 @@ function SearchBarComponent(
return (
{
diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx
index f9c7a00efe..e228a8f2f8 100644
--- a/packages/features/data-table/components/filters/AddFilterButton.tsx
+++ b/packages/features/data-table/components/filters/AddFilterButton.tsx
@@ -17,16 +17,25 @@ import {
CommandEmpty,
CommandItem,
Icon,
+ Tooltip,
} from "@calcom/ui";
import { useDataTable, useFilterableColumns } from "../../hooks";
export interface AddFilterButtonProps {
table: Table;
+ variant?: "base" | "sm";
+ hideWhenFilterApplied?: boolean;
+ showWhenFilterApplied?: boolean;
}
function AddFilterButtonComponent(
- { table }: AddFilterButtonProps,
+ {
+ table,
+ variant = "base",
+ hideWhenFilterApplied = false,
+ showWhenFilterApplied = false,
+ }: AddFilterButtonProps,
ref: React.Ref
) {
const { t } = useLocale();
@@ -43,19 +52,39 @@ function AddFilterButtonComponent(
[activeFilters, setActiveFilters]
);
+ if (hideWhenFilterApplied && activeFilters?.length > 0) {
+ return null;
+ }
+
+ if (showWhenFilterApplied && activeFilters?.length === 0) {
+ return null;
+ }
+
return (
-
-
-
+ {variant === "base" && (
+
+
+
+ )}
+ {variant === "sm" && (
+
+
+
+
+
+ )}
diff --git a/packages/features/data-table/components/filters/ClearFiltersButton.tsx b/packages/features/data-table/components/filters/ClearFiltersButton.tsx
index 101589110b..d9cf60afff 100644
--- a/packages/features/data-table/components/filters/ClearFiltersButton.tsx
+++ b/packages/features/data-table/components/filters/ClearFiltersButton.tsx
@@ -17,7 +17,6 @@ export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => {
data-testid="clear-filters-button"
target="_blank"
rel="noreferrer"
- className="min-w-24"
StartIcon="x"
onClick={() => clearAll(exclude)}>
{t("clear")}
diff --git a/packages/features/data-table/components/filters/FilterPopover.tsx b/packages/features/data-table/components/filters/FilterPopover.tsx
index c122f93f89..b6cdaef714 100644
--- a/packages/features/data-table/components/filters/FilterPopover.tsx
+++ b/packages/features/data-table/components/filters/FilterPopover.tsx
@@ -136,7 +136,7 @@ export function FilterPopover({ column }: FilterPopoverProps) {