fix align-items rendering quirk, address review suggestions

apps/designer/app/designer/features/style-panel/shared/configs.ts

@@ -22,13 +22,11 @@ export type Control =
   | "Select"
   | "Empty";
 
-type StyleConfigWithItems = BaseStyleConfig & {
+export type StyleConfig = BaseStyleConfig & {
   control: Control;
   items: Array<{ label: string; name: string }>;
 };
 
-export type StyleConfig = StyleConfigWithItems;
-
 type Property = keyof typeof keywordValues;
 
 const getControl = (property: StyleProperty): Control => {

apps/designer/app/designer/features/style-panel/style-section.tsx

@@ -211,7 +211,7 @@ const ComboboxControl = ({
   //   }
   // }, []);
 
-  if (styleConfig.control !== "Combobox") return null;
+  // if (styleConfig.control !== "Combobox") return null;
 
   // @todo show which instance we inherited the value from
   const value = getFinalValue({
@@ -349,7 +349,7 @@ const SelectControl = ({
         label={styleConfig.label}
         css={{
           fontWeight: "500",
-          marginRight: "4px",
+          marginRight: "$sizes$1",
         }}
       />
       <Select
@@ -358,8 +358,8 @@ const SelectControl = ({
         onChange={setValue}
         ghost
         css={{
-          gap: "3px",
-          px: "6px",
+          gap: "calc($sizes$1 / 2)",
+          px: "$sizes$1",
           fontWeight: "500",
           textTransform: "capitalize",
           "&:hover": { background: "none" },
@@ -389,7 +389,6 @@ const IconButtonWithMenuControl = ({
   const currentValue = value.value as string;
 
   if (String(currentStyle.display?.value).includes("flex") !== true) {
-    styleConfig.control = "Combobox";
     return (
       <ComboboxControl
         currentStyle={currentStyle}
@@ -438,11 +437,11 @@ const IconButtonWithMenuControl = ({
 };
 
 const GridControl = ({
-  css,
+  name,
   currentStyle,
   createBatchUpdate,
 }: {
-  css: CSS;
+  name: string;
   currentStyle: Style;
   createBatchUpdate: CreateBatchUpdate;
 }) => {
@@ -484,8 +483,9 @@ const GridControl = ({
 
   return (
     <Grid
+      data-property={name}
       css={{
-        ...css,
+        gridArea: name,
         alignItems: "center",
         gridTemplateColumns: "repeat(3, 1fr)",
         gridTemplateRows: "repeat(3, 1fr)",
@@ -549,7 +549,7 @@ const GridControl = ({
           flexDirection: "column",
           width: "100%",
           height: "100%",
-          gap: "3px",
+          gap: "calc($sizes$1 / 2)",
           color: "currentColor",
         }}
       >
@@ -557,10 +557,10 @@ const GridControl = ({
           <Flex
             key={index}
             css={{
-              blockSize: "33.3333%",
+              blockSize: "calc(100% / 3)",
               inlineSize: value,
               background: "currentColor",
-              borderRadius: "2px",
+              borderRadius: "calc($radii$1 / 2)",
             }}
           ></Flex>
         ))}
@@ -570,17 +570,16 @@ const GridControl = ({
 };
 
 const LockControl = ({
-  css,
+  name,
   currentStyle,
   setProperty,
-  ...rest
 }: {
-  css: CSS;
+  name: string;
   currentStyle: Style;
   setProperty: SetProperty;
 }) => {
   return (
-    <IconButton css={{ width: "100%", ...css }} {...rest}>
+    <IconButton data-property={name} css={{ width: "100%", gridArea: name }}>
       <icons.lock.opened />
     </IconButton>
   );
@@ -670,7 +669,7 @@ export const renderCategory = ({
     case "layout": {
       const css = {
         alignItems: "center",
-        gap: "8px",
+        gap: "$space$styleSection",
         "& > [data-type=iconbuttonwithmenu]": {
           display: "flex",
           justifyContent: "center",
@@ -704,14 +703,12 @@ export const renderCategory = ({
               >
                 {styleConfigsByCategory}
                 <LockControl
-                  data-property="lock"
-                  css={{ gridArea: "lock" }}
+                  name="lock"
                   currentStyle={currentStyle}
                   setProperty={setProperty}
                 />
                 <GridControl
-                  data-property="grid"
-                  css={{ gridArea: "grid" }}
+                  name="grid"
                   currentStyle={currentStyle}
                   createBatchUpdate={createBatchUpdate}
                 />

packages/design-system/src/components/icon-button-with-menu.tsx

@@ -6,10 +6,10 @@ import { Box } from "./box";
 import { Tooltip } from "./tooltip";
 
 const StyledContent = styled(DropdownMenuPrimitive.Content, {
-  maxWidth: "224px",
+  maxWidth: "$sizes$dropdownMenu",
   backgroundColor: "$colors$slate4",
-  borderRadius: "4px",
-  padding: "8px",
+  borderRadius: "$radii$1",
+  padding: "$sizes$2",
   boxShadow:
     "0px 2px 7px rgba(0, 0, 0, 0.1), 0px 5px 17px rgba(0, 0, 0, 0.15), inset 0 0 1px 1px $colors$gray1, 0 0 0 1px $colors$gray8",
 });
@@ -19,16 +19,16 @@ const itemStyles = {
   fontSize: "$2",
   lineHeight: 1,
   color: "$colors$slate12",
-  borderRadius: 3,
+  borderRadius: "$radii$1",
   display: "flex",
   alignItems: "center",
-  height: 28,
-  padding: "0 5px",
+  height: "$sizes$5",
+  padding: "0 $space$5",
   position: "relative",
-  paddingLeft: 25,
-  paddingRight: 25,
+  paddingLeft: "$space$5",
+  paddingRight: "$space$5",
   userSelect: "none",
-  gap: "8px",
+  gap: "$space$2",
   "&:hover": {
     background: "$colors$blue10",
     color: "$colors$blue1",
@@ -58,7 +58,7 @@ const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
 const IconButton = styled("button", {
   all: "unset",
   fontFamily: "inherit",
-  borderRadius: "2px",
+  borderRadius: "calc($radii$1 / 2)",
   width: "100%",
   height: "100%",
   display: "inline-flex",
@@ -69,10 +69,6 @@ const IconButton = styled("button", {
   "&:hover": {
     backgroundColor: "$colors$gray3",
   },
-  "& svg": {
-    width: "24px",
-    height: "24px",
-  },
   "& path": {
     fill: "currentColor",
   },

packages/design-system/src/stitches.config.ts

@@ -220,6 +220,7 @@ export const {
       7: "45px",
       8: "65px",
       9: "80px",
+      styleSection: "8px",
     },
     sizes: {
       1: "5px",
@@ -233,6 +234,7 @@ export const {
       9: "80px",
       sidebarLeft: "45px",
       sidebarRight: "240px",
+      dropdownMenu: "224px",
     },
     // space: {
     //   1: '4px',