From f359057c9e91b078e2674afba68bd6fdffbc8b60 Mon Sep 17 00:00:00 2001 From: Ricky Smith Date: Fri, 17 Jan 2025 18:20:01 +0100 Subject: [PATCH 1/2] Optimize `GridToolbarQuickFilter` --- .changeset/angry-poems-lay.md | 5 +++++ .changeset/witty-garlics-flow.md | 5 +++++ .../admin-theme/src/componentsTheme/MuiDataGrid.tsx | 11 +++++++++++ .../admin/src/common/toolbar/DataGridToolbar.tsx | 12 ++++++++++++ 4 files changed, 33 insertions(+) create mode 100644 .changeset/angry-poems-lay.md create mode 100644 .changeset/witty-garlics-flow.md diff --git a/.changeset/angry-poems-lay.md b/.changeset/angry-poems-lay.md new file mode 100644 index 0000000000..be81bf4c66 --- /dev/null +++ b/.changeset/angry-poems-lay.md @@ -0,0 +1,5 @@ +--- +"@comet/admin": minor +--- + +Make the width of `GridToolbarQuickFilter` responsive when used inside `DataGridToolbar` diff --git a/.changeset/witty-garlics-flow.md b/.changeset/witty-garlics-flow.md new file mode 100644 index 0000000000..8a43e37141 --- /dev/null +++ b/.changeset/witty-garlics-flow.md @@ -0,0 +1,5 @@ +--- +"@comet/admin-theme": minor +--- + +Prevent the input value of `GridToolbarQuickFilter` from being truncated too early diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx index b924b1376f..59c659176a 100644 --- a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx +++ b/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx @@ -46,6 +46,17 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { styleOverrides: mergeOverrideStyles<"MuiDataGrid">(component?.styleOverrides, { root: { backgroundColor: "white", + + "& [class*='MuiDataGrid-toolbarQuickFilter']": { + [`& > .${inputBaseClasses.root} .${inputBaseClasses.input}`]: { + paddingRight: 0, // Removes unnecessary spacing to the clear button that already has enough spacing + textOverflow: "ellipsis", + }, + + [`& > .${inputBaseClasses.root} .${inputBaseClasses.input}[value=''] + .${iconButtonClasses.root}`]: { + display: "none", // Prevents the disabled clear-button from overlaying the input value + }, + }, }, columnsPanelRow: { marginBottom: spacing(2), diff --git a/packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx b/packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx index f8c1783b40..cc836e8bdc 100644 --- a/packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx +++ b/packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx @@ -24,6 +24,18 @@ const Root = createComponentSlot(Toolbar)({ }, })( ({ ownerState, theme }) => css` + [class*="MuiDataGrid-toolbarQuickFilter"] { + width: 120px; + + ${theme.breakpoints.up("sm")} { + width: 150px; + } + + ${theme.breakpoints.up("md")} { + width: "auto"; + } + } + ${ownerState.density === "comfortable" && css` min-height: 80px; From 235a454de7dc3248812bf96de2425b8e938b6f37 Mon Sep 17 00:00:00 2001 From: Ricky James Smith Date: Mon, 20 Jan 2025 11:47:18 +0100 Subject: [PATCH 2/2] Change to patch Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com> --- .changeset/witty-garlics-flow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/witty-garlics-flow.md b/.changeset/witty-garlics-flow.md index 8a43e37141..df60e1c36d 100644 --- a/.changeset/witty-garlics-flow.md +++ b/.changeset/witty-garlics-flow.md @@ -1,5 +1,5 @@ --- -"@comet/admin-theme": minor +"@comet/admin-theme": patch --- Prevent the input value of `GridToolbarQuickFilter` from being truncated too early