From 04f2b62a930edf13991ffc67a9cfaf5b77e6cc04 Mon Sep 17 00:00:00 2001
From: Sultan <105234327+natlusyht@users.noreply.github.com>
Date: Sat, 3 Sep 2022 18:40:00 +0300
Subject: [PATCH] make select control adaptive to variance needs

and other adjustments
---
 .../app/designer/features/inspector/inspector.tsx    |  1 -
 .../style-panel/controls/select/select-control.tsx   | 12 +++++++-----
 .../features/style-panel/sections/layout/layout.tsx  |  7 +++++++
 .../features/style-panel/shared/property-name.tsx    |  1 +
 packages/design-system/src/components/select.tsx     |  9 ++-------
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/designer/app/designer/features/inspector/inspector.tsx b/apps/designer/app/designer/features/inspector/inspector.tsx
index 4eba23572c..4287854aa1 100644
--- a/apps/designer/app/designer/features/inspector/inspector.tsx
+++ b/apps/designer/app/designer/features/inspector/inspector.tsx
@@ -21,7 +21,6 @@ const contentStyle = {
   display: "flex",
   flexDirection: "column",
   overflow: "auto",
-  // boxShadow: "0 -1px 0 $colors$panelOutline",
 };
 
 export const Inspector = ({ publish }: InspectorProps) => {
diff --git a/apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx b/apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx
index 7efcc64198..ce705ab512 100644
--- a/apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx
+++ b/apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx
@@ -21,13 +21,12 @@ export const SelectControl = ({
   const setValue = setProperty(styleConfig.property);
 
   return (
-    <Flex align="center">
+    <Flex align="center" css={{ gap: "var(--space-gap)" }}>
       <PropertyName
         property={styleConfig.property}
         label={styleConfig.label}
         css={{
-          fontWeight: "500",
-          marginRight: "$sizes$1",
+          flexBasis: "var(--label-inline, 50%)",
         }}
       />
       <Select
@@ -36,10 +35,13 @@ export const SelectControl = ({
         onChange={setValue}
         ghost
         css={{
+          flexGrow: "var(--select-inline, 1)",
           gap: "calc($sizes$1 / 2)",
-          px: "$sizes$1",
-          fontWeight: "500",
+          px: "calc($sizes$1 + $nudge$3)",
+          height: "$sizes$6",
+          boxShadow: "inset 0 0 0 1px $colors$slate7",
           textTransform: "capitalize",
+          fontWeight: "var(--label-weight)",
           "&:hover": { background: "none" },
         }}
       />
diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
index d8e2e091ec..d600aaa5a3 100644
--- a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
@@ -39,6 +39,13 @@ const layoutSectionFlexStyle = {
       },
     },
   },
+  "& [data-property=display]": {
+    "--space-gap": "$space$2",
+    "--label-weight": "500",
+    "--label-inline": "auto",
+    "--select-inline": "0",
+    "--select-outline": "none",
+  },
 };
 
 const LayoutSectionFlex = ({
diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
index daf3a418d8..9afa16a18b 100644
--- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
@@ -16,6 +16,7 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => {
       <Label
         css={{
           gridColumn: "1",
+          fontWeight: "var(--label-weight, 400)",
           ...(isCurrentBreakpoint
             ? {
                 color: propertyNameColorForSelectedBreakpoint,
diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx
index bb7bf18a6c..0647281f4e 100644
--- a/packages/design-system/src/components/select.tsx
+++ b/packages/design-system/src/components/select.tsx
@@ -1,12 +1,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import noop from "lodash.noop";
 import React, { ReactNode, Ref } from "react";
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CaretDownIcon,
-} from "@webstudio-is/icons";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@webstudio-is/icons";
 import { styled } from "../stitches.config";
 
 const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
@@ -177,7 +172,7 @@ const SelectBase = (
           {value ? getLabel(value) : placeholder}
         </SelectPrimitive.Value>
         <StyledIcon>
-          <CaretDownIcon />
+          <ChevronDownIcon />
         </StyledIcon>
       </StyledTrigger>