From 48181827dc7feba0743600286d74d1000808bcf3 Mon Sep 17 00:00:00 2001
From: Renan Mendes Carvalho <aitherios@gmail.com>
Date: Wed, 3 May 2023 13:54:45 +0200
Subject: [PATCH] fix(plugin-search-react): Fix tsc errors and use classes prop

This patch intends to fix the tsc errors in the build and change the usage of FormControlLabel to use the classes property to inject the new styles.

Signed-off-by: Renan Mendes Carvalho <aitherios@gmail.com>
---
 .../components/SearchFilter/SearchFilter.tsx  | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
index b6dc077a89..e7cde794c6 100644
--- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
@@ -24,6 +24,7 @@ import {
   Select,
   MenuItem,
   FormLabel,
+  Typography,
 } from '@material-ui/core';
 
 import { useSearch } from '../../context';
@@ -129,21 +130,18 @@ export const CheckboxFilter = (props: SearchFilterComponentProps) => {
       {values.map((value: string) => (
         <FormControlLabel
           key={value}
+          classes={{ root: classes.checkboxWrapper, label: classes.textWrapper }}
+          label={value}
           control={
-            <div className={classes.checkboxWrapper}>
-              <Checkbox
-                color="primary"
-                tabIndex={-1}
-                inputProps={{ 'aria-labelledby': value }}
-                value={value}
-                name={value}
-                onChange={handleChange}
-                checked={((filters[name] as string[]) ?? []).includes(value)}
-              />
-              <div className={classes.textWrapper}>
-                <span>{value}</span>
-              </div>
-            </div>
+            <Checkbox
+              color="primary"
+              tabIndex={-1}
+              inputProps={{ 'aria-labelledby': value }}
+              value={value}
+              name={value}
+              onChange={handleChange}
+              checked={((filters[name] as string[]) ?? []).includes(value)}
+            />
           }
         />
       ))}
@@ -211,7 +209,7 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
         </MenuItem>
         {values.map((value: string) => (
           <MenuItem key={value} value={value}>
-            <span>{value}</span>
+            <Typography variant="inherit" noWrap>{value}</Typography>
           </MenuItem>
         ))}
       </Select>