refactor: Rename prop values

Author: bprusinowski

app/configurator/components/chart-controls/section.tsx

@@ -159,11 +159,8 @@ export const ControlSection = forwardRef<
 
 type ControlSectionContentProps = {
   children: ReactNode;
-  px?: "default" | "none";
-  // large for specific purposes, e.g. base layer map options
-  // default for right panel options
-  // none for left panel options
-  gap?: "large" | "default" | "none";
+  px?: "md" | "none";
+  gap?: "lg" | "md" | "none";
 } & Omit<BoxProps, "children">;
 
 const useControlSectionContentStyles = makeStyles<
@@ -173,8 +170,7 @@ const useControlSectionContentStyles = makeStyles<
   controlSectionContent: {
     display: "flex",
     flexDirection: "column",
-    gap: ({ gap }) =>
-      theme.spacing(gap === "large" ? 3 : gap === "default" ? 2 : 0),
+    gap: ({ gap }) => theme.spacing(gap === "lg" ? 3 : gap === "md" ? 2 : 0),
     minWidth: 0,
     paddingLeft: ({ px }) => (px === "none" ? 0 : theme.spacing(4)),
     paddingTop: theme.spacing(2),
@@ -187,8 +183,8 @@ export const ControlSectionContent = ({
   component = "div",
   role,
   children,
-  px = "default",
-  gap = "default",
+  px = "md",
+  gap = "md",
   sx,
   ...props
 }: ControlSectionContentProps) => {

app/configurator/components/chart-options-selector.tsx

@@ -391,7 +391,7 @@ const EncodingOptionsPanel = ({
           <SectionTitle closable>
             {getFieldLabel(`${chartConfig.chartType}.${encoding.field}`)}
           </SectionTitle>
-          <ControlSectionContent gap="large">
+          <ControlSectionContent gap="lg">
             {!encoding.customComponent && (
               <ChartFieldField
                 field={encoding.field}

app/configurator/components/chart-options-selector/base-layer-field.tsx

@@ -60,7 +60,7 @@ export const BaseLayerField = ({ chartConfig }: { chartConfig: MapConfig }) => {
       <SectionTitle closable>
         <Trans id="chart.map.layers.base">Base map</Trans>
       </SectionTitle>
-      <ControlSectionContent gap="large">
+      <ControlSectionContent gap="lg">
         <ChartOptionCheckboxField
           label={t({
             id: "chart.map.layers.base.show",

app/configurator/components/chart-options-selector/conversion-units-field.tsx

@@ -419,7 +419,7 @@ const ConversionUnitSection = ({
       <SectionTitle iconName="balance">
         <Trans id="controls.convert-unit">Unit Conversion</Trans>
       </SectionTitle>
-      <ControlSectionContent gap="large">
+      <ControlSectionContent gap="lg">
         <Checkbox
           label={t({
             id: "controls.convert-unit.enable",

app/configurator/components/chart-options-selector/layout-field.tsx

@@ -73,7 +73,7 @@ export const LayoutField = ({
       <SectionTitle iconName="swatch">
         <Trans id="controls.section.layout-options">Layout options</Trans>
       </SectionTitle>
-      <ControlSectionContent gap="large">
+      <ControlSectionContent gap="lg">
         {hasSubType && (
           <ChartSubType
             encoding={encoding}

app/configurator/components/custom-layers-selector.tsx

@@ -220,7 +220,7 @@ export const CustomLayersSelector = () => {
           ) : null}
         </Box>
       </LeftDrawer>
-      <ControlSectionContent gap="large">
+      <ControlSectionContent gap="lg">
         {configLayers.length === 0 && (
           <Typography variant="body3" color="text.secondary">
             <Trans id="chart.map.layers.no-layers">No imported maps</Trans>