Merge pull request #262 from contentstack/VE-3475-ui-text-and-error-m…

…essages-update feat: UI Text and Error message changes
contentstack · Oct 9, 2024 · 3572584 · 3572584
2 parents a34bea9 + 808e4e6
commit 3572584
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/src/visualBuilder/components/CommentIcon.tsx b/src/visualBuilder/components/CommentIcon.tsx
@@ -130,8 +130,10 @@ export default function CommentIcon(props: CommentIconProps) {
             className={classNames(
                 "visual-builder__button visual-builder__button--secondary",
                 visualBuilderStyles()["visual-builder__button"],
-                visualBuilderStyles()["visual-builder__button--secondary"]
+                visualBuilderStyles()["visual-builder__button--secondary"],
+                visualBuilderStyles()["visual-builder__tooltip"]
             )}
+            data-tooltip={"Add comment"}
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();

diff --git a/src/visualBuilder/components/CslpError.tsx b/src/visualBuilder/components/CslpError.tsx
@@ -60,9 +60,7 @@ export function CslpError({}: CslpErrorProps) {
                 >
                     <p>Invalid CSLP tag</p>
                     <span>
-                        Due to the invalid CSLP tag, the related Contentstack
-                        field cannot be identified, and therefore, the content
-                        cannot be modified.
+                    The CSLP is invalid or incorrectly generated.
                     </span>
                 </div>
             ) : null}

diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
@@ -142,8 +142,10 @@ function FieldToolbarComponent(
                 "visual-builder__button visual-builder__button--secondary visual-builder__button--edit",
                 visualBuilderStyles()["visual-builder__button"],
                 visualBuilderStyles()["visual-builder__button--secondary"],
-                visualBuilderStyles()["visual-builder__button--edit"]
+                visualBuilderStyles()["visual-builder__button--edit"],
+                visualBuilderStyles()["visual-builder__tooltip"]
             )}
+            data-tooltip={"Edit"}
             onClick={(e) => {
                 // TODO the listener for field path is attached to the common parent requiring
                 // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown
@@ -161,8 +163,10 @@ function FieldToolbarComponent(
             className={classNames(
                 "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
                 visualBuilderStyles()["visual-builder__button"],
-                visualBuilderStyles()["visual-builder__button--secondary"]
+                visualBuilderStyles()["visual-builder__button--secondary"],
+                visualBuilderStyles()["visual-builder__tooltip"]
             )}
+            data-tooltip={"Replace"}
             data-testid={`visual-builder-replace-${fieldType}`}
             onClick={(e) => {
                 e.stopPropagation();
@@ -229,8 +233,10 @@ function FieldToolbarComponent(
                                     ],
                                     visualBuilderStyles()[
                                         "visual-builder__button--secondary"
-                                    ]
+                                    ],
+                                    visualBuilderStyles()["visual-builder__tooltip"]
                                 )}
+                                data-tooltip={direction.value === "vertical"?"Move up":"Move left"}
                                 onClick={(e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -262,8 +268,10 @@ function FieldToolbarComponent(
                                     ],
                                     visualBuilderStyles()[
                                         "visual-builder__button--secondary"
-                                    ]
+                                    ],
+                                    visualBuilderStyles()["visual-builder__tooltip"]
                                 )}
+                                data-tooltip={direction.value === "vertical"?"Move down":"Move right"}
                                 onClick={(e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -295,8 +303,10 @@ function FieldToolbarComponent(
                                     ],
                                     visualBuilderStyles()[
                                         "visual-builder__button--secondary"
-                                    ]
+                                    ],
+                                    visualBuilderStyles()["visual-builder__tooltip"]
                                 )}
+                                data-tooltip={"Delete"}
                                 onClick={(e) => {
                                     e.preventDefault();
                                     e.stopPropagation();

diff --git a/src/visualBuilder/components/addInstanceButton.tsx b/src/visualBuilder/components/addInstanceButton.tsx
@@ -27,8 +27,10 @@ function AddInstanceButtonComponent(
                 visualBuilderStyles()["visual-builder__add-button"],
                 {
                     "visual-builder__add-button--with-label": props.label,
-                }
+                },
+                visualBuilderStyles()["visual-builder__tooltip"]
             )}
+            data-tooltip={"Add section"}
             data-testid="visual-builder-add-instance-button"
             disabled={disabled}
             title={

diff --git a/src/visualBuilder/components/emptyBlock.tsx b/src/visualBuilder/components/emptyBlock.tsx
@@ -46,8 +46,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                     visualBuilderStyles()["visual-builder__empty-block-title"]
                 )}
             >
-                There are no {blockParentName.toLowerCase()} to show in this
-                section.
+                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
             </div>
             <button
                 className={classNames(

diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts
@@ -392,7 +392,6 @@ export function visualBuilderStyles() {
                 position: absolute;
 
                 bottom: 20px;
-                left: -16px;
                 margin-bottom: 16px;
 
                 padding: 12px;