refactor: hyphenate space and position sections

Slightly refactored both space and position sections. Moved property maps from scrub and keyboard to dedicated sections. Also fixed keyboard highlighting in space and inset controls.
webstudio-is · Mar 9, 2025 · 65a2015 · 65a2015
1 parent 3c8ac56
commit 65a2015
Show file tree

Hide file tree

Showing 12 changed files with 232 additions and 178 deletions.
diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx
@@ -1,15 +1,22 @@
-import { Grid, theme } from "@webstudio-is/design-system";
 import { useRef, useState } from "react";
-import { movementMapInset, useKeyboardNavigation } from "../shared/keyboard";
+import { Grid, theme } from "@webstudio-is/design-system";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
+import { useKeyboardNavigation } from "../shared/keyboard";
 import { createBatchUpdate, deleteProperty } from "../../shared/use-style-data";
-import { getInsetModifiersGroup, useScrub } from "../shared/scrub";
+import { useScrub } from "../shared/scrub";
 import { ValueText } from "../shared/value-text";
-import type { StyleValue } from "@webstudio-is/css-engine";
-import { InputPopover } from "../shared/input-popover";
-import { InsetLayout, type InsetProperty } from "./inset-layout";
-import { InsetTooltip } from "./inset-tooltip";
 import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
 import { useModifierKeys, type Modifiers } from "../../shared/modifier-keys";
+import { InputPopover } from "../shared/input-popover";
+import { InsetLayout, type InsetProperty } from "./inset-layout";
+import { getInsetModifiersGroup, InsetTooltip } from "./inset-tooltip";
+
+const movementMapInset = {
+  top: ["bottom", "right", "bottom", "left"],
+  right: ["top", "left", "bottom", "left"],
+  bottom: ["top", "right", "top", "left"],
+  left: ["top", "right", "bottom", "right"],
+} as const;
 
 const Cell = ({
   scrubStatus,
@@ -23,7 +30,7 @@ const Cell = ({
   onPopoverClose: () => void;
   scrubStatus: ReturnType<typeof useScrub>;
   property: InsetProperty;
-  getActiveProperties: (modifiers?: Modifiers) => readonly InsetProperty[];
+  getActiveProperties: (modifiers?: Modifiers) => CssProperty[];
   onHover: (target: HoverTarget | undefined) => void;
 }) => {
   const styleDecl = useComputedStyleDecl(property);
@@ -93,7 +100,7 @@ export const InsetControl = () => {
 
   const [openProperty, setOpenProperty] = useState<InsetProperty>();
   const [activePopoverProperties, setActivePopoverProperties] = useState<
-    undefined | readonly InsetProperty[]
+    undefined | CssProperty[]
   >();
   const modifiers = useModifierKeys();
   const handleOpenProperty = (property: undefined | InsetProperty) => {
@@ -111,11 +118,14 @@ export const InsetControl = () => {
   });
 
   // by deafult highlight hovered or scrubbed properties
-  // if keyboard navigation is active, highlight its active property
   // if popover is open, highlight its property and hovered properties
   const activeProperties = [
     ...(activePopoverProperties ?? scrubStatus.properties),
   ];
+  // if keyboard navigation is active, highlight its active property
+  if (keyboardNavigation.isActive) {
+    activeProperties.push(keyboardNavigation.activeProperty);
+  }
   const getActiveProperties = (modifiers?: Modifiers) => {
     return modifiers && openProperty
       ? getInsetModifiersGroup(openProperty, modifiers)

diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx
@@ -1,5 +1,6 @@
-import { Grid, Box, theme, styled } from "@webstudio-is/design-system";
 import type { MouseEvent } from "react";
+import { Grid, Box, theme, styled } from "@webstudio-is/design-system";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import type { Modifiers } from "../../shared/modifier-keys";
 
 const RECT_HEIGHT = 6;
@@ -42,7 +43,7 @@ type InsetLayoutProps = {
   onHover: (
     args: { element: HTMLElement; property: InsetProperty } | undefined
   ) => void;
-  getActiveProperties: (modifiers?: Modifiers) => readonly InsetProperty[];
+  getActiveProperties: (modifiers?: Modifiers) => CssProperty[];
 };
 /**
  *  Grid schema for graphical layout

diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx
@@ -1,12 +1,36 @@
 import { useState, type ReactElement } from "react";
 import { Tooltip } from "@webstudio-is/design-system";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { useModifierKeys } from "../../shared/modifier-keys";
-import { getInsetModifiersGroup } from "../shared/scrub";
 import { createBatchUpdate } from "../../shared/use-style-data";
 import type { InsetProperty } from "./inset-layout";
 import { PropertyInfo } from "../../property-label";
 import { useComputedStyles } from "../../shared/model";
 
+const opposingInsetGroups = [
+  ["top", "bottom"],
+  ["left", "right"],
+] satisfies CssProperty[][];
+
+const circleInsetGroups = [
+  ["top", "right", "bottom", "left"],
+] satisfies CssProperty[][];
+
+export const getInsetModifiersGroup = (
+  property: CssProperty,
+  modifiers: { shiftKey: boolean; altKey: boolean }
+) => {
+  let groups: CssProperty[][] = [];
+
+  if (modifiers.shiftKey) {
+    groups = circleInsetGroups;
+  } else if (modifiers.altKey) {
+    groups = opposingInsetGroups;
+  }
+
+  return groups.find((group) => group.includes(property)) ?? [property];
+};
+
 const sides = {
   top: "top",
   right: "left",
@@ -15,7 +39,7 @@ const sides = {
 } as const;
 
 const propertyContents: {
-  properties: InsetProperty[];
+  properties: CssProperty[];
   label: string;
   description: string;
 }[] = [
@@ -41,9 +65,9 @@ const propertyContents: {
   },
 ];
 
-const isSameUnorderedArrays = (
-  arrA: readonly string[],
-  arrB: readonly string[]
+const isSameUnorderedArrays = <Item,>(
+  arrA: readonly Item[],
+  arrB: readonly Item[]
 ) => {
   if (arrA.length !== arrB.length) {
     return false;

diff --git a/apps/builder/app/builder/features/style-panel/sections/position/position.tsx b/apps/builder/app/builder/features/style-panel/sections/position/position.tsx
@@ -1,4 +1,4 @@
-import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { Grid, theme } from "@webstudio-is/design-system";
 import { propertyDescriptions } from "@webstudio-is/css-data";
 import { StyleSection } from "../../shared/style-section";
@@ -13,12 +13,12 @@ import { InsetControl } from "./inset-control";
 
 export const properties = [
   "position",
-  "zIndex",
+  "z-index",
   "top",
   "right",
   "bottom",
   "left",
-] satisfies Array<StyleProperty>;
+] satisfies CssProperty[];
 
 export const Section = () => {
   const position = useComputedStyleDecl("position");
@@ -56,9 +56,9 @@ export const Section = () => {
               <PropertyLabel
                 label="Z Index"
                 description={propertyDescriptions.zIndex}
-                properties={["zIndex"]}
+                properties={["z-index"]}
               />
-              <TextControl property="zIndex" />
+              <TextControl property="z-index" />
             </>
           )}
         </Grid>
@@ -69,9 +69,9 @@ export const Section = () => {
               <PropertyLabel
                 label="Z Index"
                 description={propertyDescriptions.zIndex}
-                properties={["zIndex"]}
+                properties={["z-index"]}
               />
-              <TextControl property="zIndex" />
+              <TextControl property="z-index" />
             </Grid>
           </Grid>
         )}

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
@@ -8,7 +8,7 @@ import {
   Flex,
   theme,
 } from "@webstudio-is/design-system";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import { propertyDescriptions } from "@webstudio-is/css-data";
 import {
   CssValueInput,
@@ -34,8 +34,8 @@ const Input = ({
   onClosePopover,
 }: {
   styleSource: StyleValueSourceColor;
-  property: StyleProperty;
-  getActiveProperties: (modifiers?: Modifiers) => readonly StyleProperty[];
+  property: CssProperty;
+  getActiveProperties: (modifiers?: Modifiers) => CssProperty[];
   value: StyleValue;
   onClosePopover: () => void;
 }) => {
@@ -147,8 +147,8 @@ export const InputPopover = ({
   onClose,
 }: {
   styleSource: StyleValueSourceColor;
-  property: StyleProperty;
-  getActiveProperties: (modifiers?: Modifiers) => readonly StyleProperty[];
+  property: CssProperty;
+  getActiveProperties: (modifiers?: Modifiers) => CssProperty[];
   value: StyleValue;
   isOpen: boolean;
   onClose: () => void;

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/keyboard.ts b/apps/builder/app/builder/features/style-panel/sections/shared/keyboard.ts
@@ -9,24 +9,6 @@ const movementKeys = [
   "ArrowLeft",
 ] as const;
 
-export const movementMapSpace = {
-  marginTop: ["marginBottom", "marginRight", "paddingTop", "marginLeft"],
-  marginRight: ["marginTop", "marginLeft", "marginBottom", "paddingRight"],
-  marginBottom: ["paddingBottom", "marginRight", "marginTop", "marginLeft"],
-  marginLeft: ["marginTop", "paddingLeft", "marginBottom", "marginRight"],
-  paddingTop: ["marginTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  paddingRight: ["paddingTop", "marginRight", "paddingBottom", "paddingBottom"],
-  paddingBottom: ["paddingTop", "paddingRight", "marginBottom", "paddingLeft"],
-  paddingLeft: ["paddingTop", "paddingTop", "paddingBottom", "marginLeft"],
-} as const;
-
-export const movementMapInset = {
-  top: ["bottom", "right", "bottom", "left"],
-  right: ["top", "left", "bottom", "left"],
-  bottom: ["top", "right", "top", "left"],
-  left: ["top", "right", "bottom", "right"],
-} as const;
-
 /**
  * useFocusWithin does't work with popovers, implement it using debounce
  */

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/scrub.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/scrub.tsx
@@ -1,18 +1,16 @@
+import { useState, useEffect, useRef } from "react";
 import type {
-  StyleProperty,
+  CssProperty,
   StyleValue,
   UnitValue,
 } from "@webstudio-is/css-engine";
+import { toValue } from "@webstudio-is/css-engine";
 import { numericScrubControl } from "@webstudio-is/design-system";
-import { useState, useEffect, useRef } from "react";
+import { camelCaseProperty, isValidDeclaration } from "@webstudio-is/css-data";
 import { useModifierKeys } from "../../shared/modifier-keys";
 import type { StyleUpdateOptions } from "../../shared/use-style-data";
-import type { SpaceStyleProperty } from "../space/types";
-import { isValidDeclaration } from "@webstudio-is/css-data";
 import { parseIntermediateOrInvalidValue } from "../../shared/css-value-input/parse-intermediate-or-invalid-value";
-import { toValue } from "@webstudio-is/css-engine";
 import type { CssValueInputValue } from "../../shared/css-value-input/css-value-input";
-import type { InsetProperty } from "../position/inset-layout";
 
 type ScrubStatus<P extends string> = {
   isActive: boolean;
@@ -34,7 +32,7 @@ type HoverTarget<P> = {
   element: HTMLElement | SVGElement;
 };
 
-export const useScrub = <P extends StyleProperty>(props: {
+export const useScrub = <P extends CssProperty>(props: {
   value?: StyleValue;
   target: HoverTarget<P> | undefined;
   getModifiersGroup: (
@@ -87,7 +85,7 @@ export const useScrub = <P extends StyleProperty>(props: {
       } as const;
 
       if (isValidDeclaration(property, toValue(value)) === false) {
-        value = parseIntermediateOrInvalidValue(property, {
+        value = parseIntermediateOrInvalidValue(camelCaseProperty(property), {
           type: "intermediate",
           value: `${value.value}`,
           unit: value.unit,
@@ -154,52 +152,3 @@ export const useScrub = <P extends StyleProperty>(props: {
     values,
   };
 };
-
-const opposingSpaceGroups = [
-  ["paddingTop", "paddingBottom"],
-  ["paddingRight", "paddingLeft"],
-  ["marginTop", "marginBottom"],
-  ["marginRight", "marginLeft"],
-] as const;
-
-const circleSpaceGroups = [
-  ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  ["marginTop", "marginRight", "marginBottom", "marginLeft"],
-] as const;
-
-export const getSpaceModifiersGroup = (
-  property: SpaceStyleProperty,
-  modifiers: { shiftKey: boolean; altKey: boolean }
-) => {
-  let groups: ReadonlyArray<ReadonlyArray<SpaceStyleProperty>> = [];
-
-  if (modifiers.shiftKey) {
-    groups = circleSpaceGroups;
-  } else if (modifiers.altKey) {
-    groups = opposingSpaceGroups;
-  }
-
-  return groups.find((group) => group.includes(property)) ?? [property];
-};
-
-const opposingInsetGroups = [
-  ["top", "bottom"],
-  ["left", "right"],
-] as const;
-
-const circleInsetGroups = [["top", "right", "bottom", "left"]] as const;
-
-export const getInsetModifiersGroup = (
-  property: InsetProperty,
-  modifiers: { shiftKey: boolean; altKey: boolean }
-) => {
-  let groups: ReadonlyArray<ReadonlyArray<InsetProperty>> = [];
-
-  if (modifiers.shiftKey) {
-    groups = circleInsetGroups;
-  } else if (modifiers.altKey) {
-    groups = opposingInsetGroups;
-  }
-
-  return groups.find((group) => group.includes(property)) ?? [property];
-};