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,43 +101,48 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
     });
 
   return (
-    <FluentProvider theme={theme} style={{ height: "100%" }}>
+    <div className={styles.paneContainer}>
-      <div className="panelFormWrapper">
+      <CosmosFluentProvider>
-        <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
+        <div className="panelFormWrapper">
-          <Text>Select which columns to display in your view of items in your container.</Text>
+          <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
-          <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
+            <Text>Select which columns to display in your view of items in your container.</Text>
-            <SearchBox
+            <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
-              value={columnSearchText}
+              <SearchBox
-              onChange={onSearchChange}
+                className={styles.searchBox}
-              style={{ width: "100%" }}
+                value={columnSearchText}
-              placeholder="Search fields"
+                onChange={onSearchChange}
-            />
+                placeholder="Search fields"
-          </div>
-
-          <div style={{ flex: 1 }}>
-            {columnDefinitionList.map((columnDefinition) => (
-              <Checkbox
-                className="tableColumnSelectionCheckbox"
-                key={columnDefinition.id}
-                label={`${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`}
-                checked={selectedColumnIdsSet.has(columnDefinition.id)}
-                onChange={(_, checked) => onCheckedValueChange(columnDefinition.id, checked)}
               />
-            ))}
+            </div>
+
+            <div className={styles.checkboxContainer}>
+              {columnDefinitionList.map((columnDefinition) => (
+                <Checkbox
+                  style={{ marginBottom: 0 }}
+                  key={columnDefinition.id}
+                  label={{
+                    className: styles.checkboxLabel,
+                    children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
+                  }}
+                  checked={selectedColumnIdsSet.has(columnDefinition.id)}
+                  onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
+                />
+              ))}
+            </div>
+            <Button appearance="secondary" size="small" onClick={() => setNewSelectedColumnIds(defaultSelection)}>
+              Reset
+            </Button>
+          </div>
+          <div className="panelFooter" style={{ display: "flex", gap: theme.spacingHorizontalS }}>
+            <Button appearance="primary" onClick={onSave}>
+              Save
+            </Button>
+            <Button appearance="secondary" onClick={closeSidePanel}>
+              Cancel
+            </Button>
           </div>
-          <Button appearance="secondary" size="small" onClick={() => setNewSelectedColumnIds(defaultSelection)}>
-            Reset
-          </Button>
         </div>
-        <div className="panelFooter" style={{ display: "flex", gap: theme.spacingHorizontalS }}>
+      </CosmosFluentProvider>
-          <Button appearance="primary" onClick={onSave}>
+    </div>
-            Save
-          </Button>
-          <Button appearance="secondary" onClick={closeSidePanel}>
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </FluentProvider>
   );
 };