From cd5cd2126fee1d9f120463c78b16e5cc097edbc3 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 22 Jan 2024 19:37:30 +0100
Subject: [PATCH] chore: Better expression editor tooltip wording (#2805)

## Description

- better expresion tooltip wording
- better layout for empty state

<img width="265" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/1ad93c44-9bfa-4ee3-a6c5-945a3b3ed7e5">

<img width="492" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/75d7ed46-0862-4174-b42d-1d735e07c5c0">


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

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

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 .../builder/app/builder/shared/binding-popover.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/builder/app/builder/shared/binding-popover.tsx b/apps/builder/app/builder/shared/binding-popover.tsx
index 279dcdd563..54e4f0d7ee 100644
--- a/apps/builder/app/builder/shared/binding-popover.tsx
+++ b/apps/builder/app/builder/shared/binding-popover.tsx
@@ -160,8 +160,8 @@ const BindingPanel = ({
         </Flex>
         {scopeEntries.length === 0 && (
           <Flex justify="center" align="center" css={{ py: theme.spacing[5] }}>
-            <Text variant="labelsSentenceCase">
-              No variables available in this scope
+            <Text variant="labelsSentenceCase" align="center">
+              No variables available
             </Text>
           </Flex>
         )}
@@ -196,13 +196,11 @@ const BindingPanel = ({
           variant="wrapped"
           content={
             <Text>
-              Compose variables, do math; the result of the expression will be
-              used as a value.
+              Use JavaScript syntax to access variables along with comparison
+              and arithmetic operators.
               <br />
-              Example: VariableA || VariableB || &quot;DefaultValue&quot;
-              <br />
-              Explanation: If VariableA is empty, use VariableB; otherwise use
-              &quot;DefaultValue&quot;.
+              Use the dot notation to access nested object values:
+              <Text variant="mono">Variable.nested.value</Text>
             </Text>
           }
         >