add default sections for all sections, init toggle-control

apps/designer/app/designer/features/style-panel/controls/index.ts

@@ -3,3 +3,4 @@ export * from "./color/color-control";
 export * from "./select/select-control";
 export * from "./menu/menu-control";
 export * from "./font-family/font-family-control";
+export * from "./toggle/toggle-control";

apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx

@@ -0,0 +1,24 @@
+import { ToggleGroup } from "@webstudio-is/design-system";
+import {
+  TextAlignLeftIcon,
+  TextAlignCenterIcon,
+  TextAlignRightIcon,
+} from "@webstudio-is/icons";
+
+export const ToggleGroupControl = () => (
+  <ToggleGroup.Root
+    type="single"
+    defaultValue="center"
+    aria-label="Text alignment"
+  >
+    <ToggleGroup.Item value="left" aria-label="Left aligned">
+      <TextAlignLeftIcon />
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="center" aria-label="Center aligned">
+      <TextAlignCenterIcon />
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="right" aria-label="Right aligned">
+      <TextAlignRightIcon />
+    </ToggleGroup.Item>
+  </ToggleGroup.Root>
+);

apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const BackgroundsSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const BordersSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const EffectsSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx

@@ -0,0 +1,21 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+import { ToggleGroupControl } from "../../controls";
+
+export const FlexChildSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      <ToggleGroupControl />
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const GridChildSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/index.ts

@@ -1,2 +1,11 @@
 export * from "./layout/layout";
+export * from "./flexChild/flexChild";
+export * from "./gridChild/gridChild";
 export * from "./spacing/spacing";
+export * from "./size/size";
+export * from "./position/position";
+export * from "./typography/typography";
+export * from "./backgrounds/backgrounds";
+export * from "./borders/borders";
+export * from "./effects/effects";
+export * from "./other/other";

apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx

@@ -2,9 +2,12 @@ import { Box, Flex, Grid } from "@webstudio-is/design-system";
 import type { RenderCategoryProps } from "../../style-sections";
 import { FlexGrid } from "./shared/flex-grid";
 import { Lock } from "./shared/lock";
-import { ShowMore } from "../../shared/show-more";
-import { renderProperty } from "../../style-sections";
-import { MenuControl, SelectControl, TextControl } from "../../controls";
+import {
+  MenuControl,
+  SelectControl,
+  TextControl,
+  ToggleGroupControl,
+} from "../../controls";
 import { PropertyName } from "../../shared/property-name";
 
 const LayoutSectionFlex = ({
@@ -12,34 +15,9 @@ const LayoutSectionFlex = ({
   sectionStyle,
   createBatchUpdate,
 }: RenderCategoryProps) => {
-  const {
-    display,
-    flexDirection,
-    flexWrap,
-    alignItems,
-    justifyContent,
-    alignContent,
-    columnGap,
-    rowGap,
-  } = sectionStyle;
   const batchUpdate = createBatchUpdate();
   return (
-    <Flex css={{ flexDirection: "column", gap: "$2" }}>
-      <Grid
-        css={{
-          gridArea: "display",
-          gridTemplateColumns: "auto 1fr",
-          gap: "$space$2",
-          width: "fit-content",
-          fontWeight: "500",
-        }}
-      >
-        <PropertyName
-          property={display.styleConfig.property}
-          label={display.styleConfig.label}
-        />
-        <SelectControl {...display} />
-      </Grid>
+    <>
       <Grid
         css={{
           gap: "$2",
@@ -54,22 +32,21 @@ const LayoutSectionFlex = ({
         <Box css={{ gridArea: "grid" }}>
           <FlexGrid currentStyle={currentStyle} batchUpdate={batchUpdate} />
         </Box>
-        <Box css={{ gridArea: "flexDirection" }}>
-          <MenuControl {...flexDirection} />
-        </Box>
-        <Box css={{ gridArea: "flexWrap" }}>
-          <MenuControl {...flexWrap} />
-        </Box>
-        <Box css={{ gridArea: "alignItems" }}>
-          <MenuControl {...alignItems} />
-        </Box>
-        <Box css={{ gridArea: "justifyContent" }}>
-          <MenuControl {...justifyContent} />
-        </Box>
-        {alignContent && (
-          <Box css={{ gridArea: "alignContent" }}>
-            <MenuControl {...alignContent} />
-          </Box>
+        {(
+          [
+            "flexDirection",
+            "flexWrap",
+            "alignItems",
+            "justifyContent",
+            "alignContent",
+          ] as const
+        ).map(
+          (type) =>
+            sectionStyle[type] && (
+              <Box css={{ gridArea: type }} key={type}>
+                <MenuControl {...sectionStyle[type]} />
+              </Box>
+            )
         )}
       </Grid>
       <Grid
@@ -82,7 +59,7 @@ const LayoutSectionFlex = ({
         }}
       >
         <Box css={{ gridArea: "columnGap" }}>
-          <TextControl {...columnGap} />
+          <TextControl {...sectionStyle["columnGap"]} />
         </Box>
         <Box css={{ gridArea: "lock", px: "$1" }}>
           <Lock
@@ -92,10 +69,10 @@ const LayoutSectionFlex = ({
           />
         </Box>
         <Box css={{ gridArea: "rowGap" }}>
-          <TextControl {...rowGap} />
+          <TextControl {...sectionStyle["rowGap"]} />
         </Box>
       </Grid>
-    </Flex>
+    </>
   );
 };
 
@@ -109,10 +86,26 @@ export const LayoutSection = ({
   styleConfigsByCategory,
   moreStyleConfigsByCategory,
 }: RenderCategoryProps) => {
-  const ActiveLayout = layouts.get(String(currentStyle.display?.value));
+  const ActiveLayout =
+    layouts.get(String(currentStyle.display?.value)) ?? (() => null);
 
-  if (ActiveLayout) {
-    return (
+  return (
+    <Flex css={{ flexDirection: "column", gap: "$2" }}>
+      <Grid
+        css={{
+          gridArea: "display",
+          gridTemplateColumns: "auto 1fr",
+          gap: "$space$2",
+          width: "fit-content",
+          fontWeight: "500",
+        }}
+      >
+        <PropertyName
+          property={sectionStyle.display.styleConfig.property}
+          label={sectionStyle.display.styleConfig.label}
+        />
+        <SelectControl {...sectionStyle.display} />
+      </Grid>
       <ActiveLayout
         setProperty={setProperty}
         createBatchUpdate={createBatchUpdate}
@@ -123,18 +116,7 @@ export const LayoutSection = ({
         styleConfigsByCategory={styleConfigsByCategory}
         moreStyleConfigsByCategory={moreStyleConfigsByCategory}
       />
-    );
-  }
-
-  return (
-    <>
-      <ShowMore
-        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
-          renderProperty(entry)
-        )}
-      />
-      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
-    </>
+    </Flex>
   );
 };
 

apps/designer/app/designer/features/style-panel/sections/other/other.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const OtherSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/position/position.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const PositionSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/size/size.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const SizeSection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx

@@ -0,0 +1,19 @@
+import type { RenderCategoryProps } from "../../style-sections";
+import { ShowMore } from "../../shared/show-more";
+import { renderProperty } from "../../style-sections";
+
+export const TypographySection = ({
+  styleConfigsByCategory,
+  moreStyleConfigsByCategory,
+}: RenderCategoryProps) => {
+  return (
+    <>
+      {styleConfigsByCategory.map((entry) => renderProperty(entry))}
+      <ShowMore
+        styleConfigs={moreStyleConfigsByCategory.map((entry) =>
+          renderProperty(entry)
+        )}
+      />
+    </>
+  );
+};

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

@@ -16,7 +16,19 @@ import {
   FontFamilyControl,
 } from "./controls";
 import { ShowMore } from "./shared/show-more";
-import { LayoutSection, SpacingSection } from "./sections";
+import {
+  LayoutSection,
+  FlexChildSection,
+  GridChildSection,
+  SpacingSection,
+  SizeSection,
+  PositionSection,
+  TypographySection,
+  BackgroundsSection,
+  BordersSection,
+  EffectsSection,
+  OtherSection,
+} from "./sections";
 import { PropertyName } from "./shared/property-name";
 
 export type PropertyProps = {
@@ -37,7 +49,9 @@ export type RenderCategoryProps = {
   setProperty: SetProperty;
   createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
-  sectionStyle: Style;
+  sectionStyle: {
+    [Property in keyof Style]-?: RenderPropertyProps;
+  };
   inheritedStyle: InheritedStyle;
   category: Category;
   styleConfigsByCategory: Array<RenderPropertyProps>;
@@ -64,7 +78,7 @@ export const renderProperty = ({
   if (!Control) return null;
 
   return (
-    <Grid key={category + property} css={{ gridTemplateColumns: "40% 60%" }}>
+    <Grid key={category + property} css={{ gridTemplateColumns: "4fr 6fr" }}>
       <PropertyName property={styleConfig.property} label={styleConfig.label} />
       <Control
         currentStyle={currentStyle}
@@ -87,22 +101,9 @@ export const renderCategory = ({
   styleConfigsByCategory,
   moreStyleConfigsByCategory,
 }: RenderCategoryProps) => {
-  const Category = sections[category];
-  if (!Category) {
-    return (
-      <>
-        {styleConfigsByCategory.map((entry) => renderProperty(entry))}
-        <ShowMore
-          styleConfigs={moreStyleConfigsByCategory.map((entry) =>
-            renderProperty(entry)
-          )}
-        />
-      </>
-    );
-  }
-
+  const Section = sections[category];
   return (
-    <Category
+    <Section
       setProperty={setProperty}
       createBatchUpdate={createBatchUpdate}
       currentStyle={currentStyle}
@@ -130,10 +131,19 @@ export const shouldRenderCategory = ({
 };
 
 const sections: {
-  [key: string]: (props: RenderCategoryProps) => JSX.Element | null;
+  [Property in Category]: (props: RenderCategoryProps) => JSX.Element | null;
 } = {
   layout: LayoutSection,
+  flexChild: FlexChildSection,
+  gridChild: GridChildSection,
   spacing: SpacingSection,
+  size: SizeSection,
+  position: PositionSection,
+  typography: TypographySection,
+  backgrounds: BackgroundsSection,
+  borders: BordersSection,
+  effects: EffectsSection,
+  other: OtherSection,
 };
 
 const controls: {

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

@@ -8,7 +8,11 @@ import {
 
 import { type StyleConfig, styleConfigs } from "./shared/configs";
 import { CollapsibleSection } from "~/designer/shared/inspector";
-import { renderCategory, shouldRenderCategory } from "./style-sections";
+import {
+  renderCategory,
+  RenderCategoryProps,
+  shouldRenderCategory,
+} from "./style-sections";
 import { dependencies } from "./shared/dependencies";
 import { type InheritedStyle } from "./shared/get-inherited-style";
 import {
@@ -68,7 +72,7 @@ const didRender = (category: Category, { property }: StyleConfig): boolean => {
   return false;
 };
 
-type StyleSettingsProps = {
+export type StyleSettingsProps = {
   currentStyle: Style;
   inheritedStyle: InheritedStyle;
   cssRule?: CssRule;
@@ -95,7 +99,7 @@ export const StyleSettings = ({
       search
     );
     const { moreFrom } = categories[category];
-    const sectionStyle: Style = {};
+    const sectionStyle = {} as RenderCategoryProps["sectionStyle"];
     const styleConfigsByCategory: Array<RenderPropertyProps> = [];
     const moreStyleConfigsByCategory: Array<RenderPropertyProps> = [];