Cleanup checkbox styles

src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.less

@@ -1,3 +0,0 @@
-.tableColumnSelectionCheckbox label {
-  padding: 4px 8px;
-}

src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx

@@ -1,19 +1,37 @@
-import { Checkbox } from "@fluentui/react";
 import {
   Button,
-  FluentProvider,
+  Checkbox,
+  CheckboxOnChangeData,
   InputOnChangeData,
+  makeStyles,
   SearchBox,
   SearchBoxChangeEvent,
   Text,
 } from "@fluentui/react-components";
 import { configContext } from "ConfigContext";
 import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
-import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
+import { CosmosFluentProvider, getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import React from "react";
 import { useSidePanel } from "../../../hooks/useSidePanel";
-import "./TableColumnSelectionPane.less";
 
+const useColumnSelectionStyles = makeStyles({
+  paneContainer: {
+    height: "100%",
+    display: "flex",
+  },
+  searchBox: {
+    width: "100%",
+  },
+  checkboxContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+  },
+  checkboxLabel: {
+    padding: "4px 8px",
+    marginBottom: "0px",
+  },
+});
 export interface TableColumnSelectionPaneProps {
   columnDefinitions: ColumnDefinition[];
   selectedColumnIds: string[];
@@ -31,9 +49,15 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
   const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []);
   const [columnSearchText, setColumnSearchText] = React.useState<string>("");
   const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds);
+  const styles = useColumnSelectionStyles();
 
   const selectedColumnIdsSet = new Set(newSelectedColumnIds);
-  const onCheckedValueChange = (id: string, checked?: boolean): void => {
+  const onCheckedValueChange = (id: string, checkedData?: CheckboxOnChangeData): void => {
+    const checked = checkedData?.checked;
+    if (checked === "mixed" || checked === undefined) {
+      return;
+    }
+
     if (checked) {
       selectedColumnIdsSet.add(id);
     } else {
@@ -77,27 +101,31 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
     });
 
   return (
-    <FluentProvider theme={theme} style={{ height: "100%" }}>
+    <div className={styles.paneContainer}>
+      <CosmosFluentProvider>
         <div className="panelFormWrapper">
           <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
             <Text>Select which columns to display in your view of items in your container.</Text>
             <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
               <SearchBox
+                className={styles.searchBox}
                 value={columnSearchText}
                 onChange={onSearchChange}
-              style={{ width: "100%" }}
                 placeholder="Search fields"
               />
             </div>
 
-          <div style={{ flex: 1 }}>
+            <div className={styles.checkboxContainer}>
               {columnDefinitionList.map((columnDefinition) => (
                 <Checkbox
-                className="tableColumnSelectionCheckbox"
+                  style={{ marginBottom: 0 }}
                   key={columnDefinition.id}
-                label={`${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`}
+                  label={{
+                    className: styles.checkboxLabel,
+                    children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
+                  }}
                   checked={selectedColumnIdsSet.has(columnDefinition.id)}
-                onChange={(_, checked) => onCheckedValueChange(columnDefinition.id, checked)}
+                  onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
                 />
               ))}
             </div>
@@ -114,6 +142,7 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
             </Button>
           </div>
         </div>
-    </FluentProvider>
+      </CosmosFluentProvider>
+    </div>
   );
 };