eslint

apps/designer/app/designer/features/style-panel/controls/menu/menu-control.tsx

@@ -1,5 +1,4 @@
 import { IconButtonWithMenu } from "@webstudio-is/design-system";
-import { TextControl } from "../text/text-control";
 import { getFinalValue } from "../../shared/get-final-value";
 import { useIsFromCurrentBreakpoint } from "../../shared/use-is-from-current-breakpoint";
 import type { ControlProps } from "../../style-sections";

apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx

@@ -1,6 +1,5 @@
-import { Grid, Select } from "@webstudio-is/design-system";
+import { Select } from "@webstudio-is/design-system";
 import { getFinalValue } from "../../shared/get-final-value";
-import { PropertyName } from "../../shared/property-name";
 import type { ControlProps } from "../../style-sections";
 
 export const SelectControl = ({

apps/designer/app/designer/features/style-panel/controls/text/text-control.tsx

@@ -2,7 +2,6 @@ import { FocusEvent, PointerEvent, useCallback } from "react";
 import {
   Box,
   Text,
-  Grid,
   IconButton,
   TextField,
   Combobox,
@@ -12,7 +11,7 @@ import { getFinalValue } from "../../shared/get-final-value";
 import { ControlProps } from "../../style-sections";
 import { units } from "@webstudio-is/react-sdk";
 import { ChevronDownIcon } from "@webstudio-is/icons";
-import { PropertyName, PropertyIcon } from "../../shared/property-name";
+import { PropertyIcon } from "../../shared/property-name";
 
 const sortedUnits = units
   .slice(0)

apps/designer/app/designer/features/style-panel/shared/configs.ts

@@ -46,14 +46,7 @@ type BaseStyleConfig = {
 };
 
 // @todo make it use actual list of controls
-export type Control =
-  | "Spacing"
-  | "Text"
-  | "Color"
-  | "Menu"
-  | "Select"
-  | "Empty"
-  | "FontFamily";
+export type Control = "Text" | "Color" | "Menu" | "Select" | "FontFamily";
 
 export type StyleConfig = BaseStyleConfig & {
   control: Control;
@@ -66,37 +59,6 @@ const getControl = (property: StyleProperty): Control => {
   if (property.toLocaleLowerCase().includes("color")) {
     return "Color";
   }
-  // Spacing properties is more narrow than StyleProperty,
-  // so we have to widen it to be able to run .includes.
-  // @todo do better
-  const spacing = categories.spacing
-    .properties as unknown as Array<StyleProperty>;
-  if (spacing.includes(property)) {
-    return "Spacing";
-  }
-
-  // @todo remove once all sections are done
-  switch (
-    property
-    // case "display": {
-    //   return "Select";
-    // }
-    // case "flexDirection":
-    // case "flexWrap":
-    // case "alignItems":
-    // case "justifyItems":
-    // case "justifyContent":
-    // case "alignContent": {
-    //   return "Menu";
-    // }
-    // case "placeContent": {
-    //   return "Empty";
-    // }
-    //case "fontFamily": {
-    //  return "FontFamily";
-    //}
-  ) {
-  }
 
   return "Text";
 };

apps/designer/app/designer/features/style-panel/style-sections.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid } from "@webstudio-is/design-system";
+import { Grid } from "@webstudio-is/design-system";
 import type { StyleConfig } from "./shared/configs";
 import {
   type Style,

apps/designer/app/designer/features/style-panel/style-settings.tsx

@@ -8,11 +8,7 @@ import {
 
 import { type StyleConfig, styleConfigs } from "./shared/configs";
 import { CollapsibleSection } from "~/designer/shared/inspector";
-import {
-  renderProperty,
-  renderCategory,
-  shouldRenderCategory,
-} from "./style-sections";
+import { renderCategory, shouldRenderCategory } from "./style-sections";
 import { dependencies } from "./shared/dependencies";
 import { type InheritedStyle } from "./shared/get-inherited-style";
 import {