From 025d9ad44c373974429cd79ee27fa340dfd1f50d Mon Sep 17 00:00:00 2001
From: Jaya Krishna Namburu <namburu1995@gmail.com>
Date: Thu, 8 Aug 2024 15:14:27 +0530
Subject: [PATCH] fix: background-position indicator in position grid for
 keywords (#3899)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

fixes #3898

fixes the background-position indicator in the position grid ui.

## Steps for reproduction

- Set the background-position-y while is top in the UI to bottom.
- The value is saved as it is a valid keyword for the property.
- The position indicator should be in sync with the canvas.

![Screen Recording 2024-08-08 at 2 49
47 PM](https://github.com/user-attachments/assets/922e2ac6-d307-4875-aaca-e18c3114ddf8)


## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
---
 .../backgrounds/background-position.tsx       | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
index e61f914e81..8872a8da78 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
@@ -1,9 +1,34 @@
 import { keywordValues } from "@webstudio-is/css-data";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
-import { getStyleSource, type StyleInfo } from "../../shared/style-info";
+import {
+  getStyleSource,
+  type StyleInfo,
+  type StyleValueInfo,
+} from "../../shared/style-info";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { NonResetablePropertyName } from "../../shared/property-name";
 import type { DeleteProperty, SetProperty } from "../../shared/use-style-data";
+import { useMemo } from "react";
+
+const keyworkToValue: Record<string, number> = {
+  left: 0,
+  right: 100,
+  center: 50,
+  top: 0,
+  bottom: 100,
+};
+
+const calculateBackgroundPosition = (info: StyleValueInfo | undefined) => {
+  if (info?.value.type === "unit") {
+    return info.value.value;
+  }
+
+  if (info?.value.type === "keyword") {
+    return keyworkToValue[info.value.value];
+  }
+
+  return 0;
+};
 
 export const BackgroundPosition = ({
   currentStyle,
@@ -15,9 +40,9 @@ export const BackgroundPosition = ({
   deleteProperty: DeleteProperty;
 }) => {
   const xInfo = currentStyle.backgroundPositionX;
-  const x = xInfo?.value.type === "unit" ? xInfo.value.value : 0;
   const yInfo = currentStyle.backgroundPositionY;
-  const y = yInfo?.value.type === "unit" ? yInfo.value.value : 0;
+  const x = useMemo(() => calculateBackgroundPosition(xInfo), [xInfo]);
+  const y = useMemo(() => calculateBackgroundPosition(yInfo), [yInfo]);
 
   return (
     <Flex direction="column" gap="1">