From ce2a5ebc52aee551e4745b5bc609ef4cbf22fa0c Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 21 Jan 2024 17:22:31 +0100
Subject: [PATCH] feat: Outline Section UX improvement  (#2789)

## Description

1. What is this PR about (link the issue and add a short description)
The PR has 2 improvements mentioned in the issue #2602 :
 * Ordered the Outline section after the Effects section
 * Hides all properties except Style until a Style value is selected

## Steps for reproduction

1. Login and create a project.
2. On the style section on the right side of the screen. scroll down to
find the updates.
3.  Outline section has shifted below Effects section.
4. And only on selecting the other toggles on style property other than
none, renders the colour, width and offset properties.


## Code Review

- [x] 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

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

## Before merging

- [x] tested locally and on preview environment (preview dev login:
d252)
- [ ] 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

---------

Co-authored-by: ShyanRoyChoudhury <shayan.roy31@gmail.com>
---
 .../style-panel/sections/outline/outline.tsx  | 72 ++++++++++---------
 .../features/style-panel/style-sections.tsx   |  4 +-
 apps/builder/env-check.js                     |  3 +-
 3 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx b/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx
index ca954ed5f6..2d5e246097 100644
--- a/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx
@@ -18,6 +18,11 @@ const properties: StyleProperty[] = [
 
 export const OutlineSection = (props: RenderCategoryProps) => {
   const { currentStyle, setProperty, deleteProperty } = props;
+  const { outlineStyle } = currentStyle;
+
+  if (outlineStyle?.value.type !== "keyword") {
+    return;
+  }
 
   return (
     <CollapsibleSection
@@ -31,45 +36,48 @@ export const OutlineSection = (props: RenderCategoryProps) => {
           setProperty={setProperty}
           deleteProperty={deleteProperty}
         />
+        {outlineStyle.value.value !== "none" && (
+          <>
+            <Grid
+              css={{
+                gridTemplateColumns: `1fr ${theme.spacing[20]} ${theme.spacing[12]}`,
+              }}
+              gapX={2}
+            >
+              <PropertyName
+                style={currentStyle}
+                properties={[property]}
+                label={"Color"}
+                onReset={() => deleteProperty(property)}
+              />
 
-        <Grid
-          css={{
-            gridTemplateColumns: `1fr ${theme.spacing[20]} ${theme.spacing[12]}`,
-          }}
-          gapX={2}
-        >
-          <PropertyName
-            style={currentStyle}
-            properties={[property]}
-            label={"Color"}
-            onReset={() => deleteProperty(property)}
-          />
+              <Box
+                css={{
+                  gridColumn: `span 2`,
+                }}
+              >
+                <ColorControl
+                  property={property}
+                  currentStyle={currentStyle}
+                  setProperty={setProperty}
+                  deleteProperty={deleteProperty}
+                />
+              </Box>
+            </Grid>
 
-          <Box
-            css={{
-              gridColumn: `span 2`,
-            }}
-          >
-            <ColorControl
-              property={property}
+            <OutlineWidth
               currentStyle={currentStyle}
               setProperty={setProperty}
               deleteProperty={deleteProperty}
             />
-          </Box>
-        </Grid>
 
-        <OutlineWidth
-          currentStyle={currentStyle}
-          setProperty={setProperty}
-          deleteProperty={deleteProperty}
-        />
-
-        <OutlineOffset
-          currentStyle={currentStyle}
-          setProperty={setProperty}
-          deleteProperty={deleteProperty}
-        />
+            <OutlineOffset
+              currentStyle={currentStyle}
+              setProperty={setProperty}
+              deleteProperty={deleteProperty}
+            />
+          </>
+        )}
       </Flex>
     </CollapsibleSection>
   );
diff --git a/apps/builder/app/builder/features/style-panel/style-sections.tsx b/apps/builder/app/builder/features/style-panel/style-sections.tsx
index 44ae66d9ac..803a59e1dd 100644
--- a/apps/builder/app/builder/features/style-panel/style-sections.tsx
+++ b/apps/builder/app/builder/features/style-panel/style-sections.tsx
@@ -40,8 +40,8 @@ export const categories = [
   "backgrounds",
   "borders",
   "boxShadows",
-  "outline",
   "effects",
+  "outline",
   "transitions",
 ] as const;
 
@@ -141,7 +141,7 @@ export const shouldRenderCategory = (
 
 export const sections: Record<
   Category,
-  (props: RenderCategoryProps) => JSX.Element | null
+  (props: RenderCategoryProps) => JSX.Element | undefined
 > = {
   layout: LayoutSection,
   flexChild: FlexChildSection,
diff --git a/apps/builder/env-check.js b/apps/builder/env-check.js
index ddf79e579c..579715749e 100644
--- a/apps/builder/env-check.js
+++ b/apps/builder/env-check.js
@@ -24,8 +24,9 @@ const S3_KEYS = [
 const errors = [];
 
 REQUIRED_ENVS.map((env) => {
-  if (!process.env[env])
+  if (!process.env[env]) {
     errors.push(`👉 The ${env} environment variable is required`);
+  }
 });
 
 if (process.env.DEPLOYMENT_ENVIRONMENT === "production") {