show when is current breakpoint, refactor

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

@@ -1,30 +1,41 @@
 import { Flex, ToggleGroup, Tooltip } from "@webstudio-is/design-system";
+import { StyleProperty } from "@webstudio-is/react-sdk";
+import { useIsFromCurrentBreakpoint } from "../../shared/use-is-from-current-breakpoint";
 
 export type ToggleGroupControlProps = {
+  property: StyleProperty | StyleProperty[];
   value: string;
   items: { child: JSX.Element; label: string; value: string }[];
   onValueChange?: (value: string) => void;
 };
 
 export const ToggleGroupControl = ({
+  property,
   value = "",
   items = [],
   onValueChange,
-}: ToggleGroupControlProps) => (
-  <ToggleGroup.Root
-    type="single"
-    value={value}
-    onValueChange={onValueChange}
-    css={{ width: "fit-content" }}
-  >
-    {items.map(({ child, label, value }, index) => {
-      return (
-        <ToggleGroup.Item key={index} value={value}>
-          <Tooltip content={"label"} delayDuration={0}>
-            <Flex>{child}</Flex>
-          </Tooltip>
-        </ToggleGroup.Item>
-      );
-    })}
-  </ToggleGroup.Root>
-);
+}: ToggleGroupControlProps) => {
+  const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
+  return (
+    <ToggleGroup.Root
+      type="single"
+      value={value}
+      onValueChange={onValueChange}
+      css={{ width: "fit-content" }}
+    >
+      {items.map(({ child, label, value }, index) => {
+        return (
+          <ToggleGroup.Item
+            key={index}
+            value={value}
+            data-breakpoint={isCurrentBreakpoint}
+          >
+            <Tooltip content={label} delayDuration={0}>
+              <Flex>{child}</Flex>
+            </Tooltip>
+          </ToggleGroup.Item>
+        );
+      })}
+    </ToggleGroup.Root>
+  );
+};

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

@@ -1,5 +1,4 @@
-import { useState } from "react";
-import { Text, Flex, Grid, FloatingPopover } from "@webstudio-is/design-system";
+import { Flex, Grid, FloatingPopover } from "@webstudio-is/design-system";
 import type { RenderCategoryProps } from "../../style-sections";
 import { ToggleGroupControl } from "../../controls";
 import { PropertyName } from "../../shared/property-name";
@@ -27,6 +26,25 @@ export const FlexChildSection = ({
   const setAlignSelf = setProperty("alignSelf");
   const setOrder = setProperty("order");
   const setSizing = createBatchUpdate();
+  const getSizingValue = () => {
+    switch (
+      String(currentStyle.flexGrow?.value) +
+      String(currentStyle.flexShrink?.value)
+    ) {
+      case "00": {
+        return "none";
+      }
+      case "10": {
+        return "grow";
+      }
+      case "01": {
+        return "shrink";
+      }
+      default: {
+        return "";
+      }
+    }
+  };
 
   return (
     <Flex css={{ flexDirection: "column", gap: "$2" }}>
@@ -36,6 +54,7 @@ export const FlexChildSection = ({
           label="Align"
         />
         <ToggleGroupControl
+          property={sectionStyle.alignSelf?.styleConfig.property}
           onValueChange={(value) => setAlignSelf(value)}
           value={String(currentStyle.alignSelf?.value)}
           items={[
@@ -74,10 +93,17 @@ export const FlexChildSection = ({
       </Grid>
       <Grid css={{ gridTemplateColumns: "4fr auto" }}>
         <PropertyName
-          property={sectionStyle.flexGrow?.styleConfig.property}
+          property={[
+            sectionStyle.flexGrow?.styleConfig.property,
+            sectionStyle.flexShrink?.styleConfig.property,
+          ]}
           label="Sizing"
         />
         <ToggleGroupControl
+          property={[
+            sectionStyle.flexGrow?.styleConfig.property,
+            sectionStyle.flexShrink?.styleConfig.property,
+          ]}
           onValueChange={(value) => {
             switch (value) {
               case "none": {
@@ -100,25 +126,7 @@ export const FlexChildSection = ({
               }
             }
           }}
-          value={(() => {
-            switch (
-              String(currentStyle.flexGrow?.value) +
-              String(currentStyle.flexShrink?.value)
-            ) {
-              case "00": {
-                return "none";
-              }
-              case "10": {
-                return "grow";
-              }
-              case "01": {
-                return "shrink";
-              }
-              default: {
-                return "";
-              }
-            }
-          })()}
+          value={getSizingValue()}
           items={[
             {
               child: <CrossSmallIcon />,
@@ -190,6 +198,7 @@ export const FlexChildSection = ({
           label="Order"
         />
         <ToggleGroupControl
+          property={sectionStyle.order?.styleConfig.property}
           onValueChange={(value) => {
             switch (value) {
               case "0":

apps/designer/app/designer/features/style-panel/shared/property-name.tsx

@@ -2,7 +2,6 @@ import { Flex, Label, Tooltip, IconButton } from "@webstudio-is/design-system";
 import { useIsFromCurrentBreakpoint } from "./use-is-from-current-breakpoint";
 import { propertyNameColorForSelectedBreakpoint } from "./constants";
 import type { PropertyProps } from "../style-sections";
-import { iconConfigs } from "./configs";
 import { forwardRef, PointerEventHandler } from "react";
 
 export const PropertyName = ({ property, label, css }: PropertyProps) => {
@@ -33,7 +32,6 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => {
           }}
           variant="contrast"
           size="1"
-          htmlFor={property}
         >
           {label}
         </Label>
@@ -45,12 +43,12 @@ PropertyName.displayName = "PropertyName";
 
 export const PropertyIcon = forwardRef<
   HTMLButtonElement,
-  PropertyProps & { [key: `on${string}`]: PointerEventHandler }
->(({ property, label, ...props }, forwardRef) => {
+  PropertyProps & {
+    children?: JSX.Element;
+    [key: `on${string}`]: PointerEventHandler;
+  }
+>(({ property, label, children, ...props }, forwardRef) => {
   const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
-  const IconType = iconConfigs[property]?.normal;
-  if (!IconType) return null;
-
   return (
     <Tooltip content={label} delayDuration={600} disableHoverableContent={true}>
       <IconButton
@@ -73,7 +71,7 @@ export const PropertyIcon = forwardRef<
           }),
         }}
       >
-        <IconType />
+        {children}
       </IconButton>
     </Tooltip>
   );

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

@@ -31,7 +31,7 @@ import {
 import { PropertyName } from "./shared/property-name";
 
 export type PropertyProps = {
-  property: StyleProperty;
+  property: StyleProperty | StyleProperty[];
   label: string;
   css?: CSS;
 };

packages/design-system/src/components/popover.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, MutableRefObject } from "react";
 import { Cross1Icon } from "@webstudio-is/icons";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Box } from "./box";
@@ -96,6 +96,15 @@ export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverClose = PopoverPrimitive.Close;
 export const PopoverPortal = PopoverPrimitive.Portal;
 
+const useSideOffset = (
+  isOpen: boolean
+): [MutableRefObject<HTMLButtonElement | null>, number] => {
+  const ref = useRef<HTMLButtonElement | null>(null);
+  const sideOffset =
+    isOpen && ref.current !== null ? 240 - ref.current.offsetWidth : 0;
+  return [ref, sideOffset];
+};
+
 export const FloatingPopover = ({
   title,
   content,
@@ -106,20 +115,22 @@ export const FloatingPopover = ({
   children: JSX.Element;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [ref, sideOffset] = useSideOffset(isOpen);
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen} modal>
       <PopoverTrigger
+        ref={ref}
         asChild
         onClick={() => {
           setIsOpen(true);
         }}
       >
-        {children}
+        <Flex>{children}</Flex>
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent
-          sideOffset={220}
+          sideOffset={sideOffset}
           side="right"
           hideArrow
           css={{ backgroundColor: "$loContrast" }}

packages/design-system/src/components/toggle-group.tsx

@@ -20,7 +20,13 @@ export const Item = styled(ToggleGroupPrimitive.Item, {
   justifyContent: "center",
   "&:hover": { backgroundColor: "$slate5" },
   "&:focus": { boxShadow: "0 0 0 2px $colors$blue10", zIndex: 1 },
-  "&[data-state=on]": { backgroundColor: "$slate5" },
+  "&[data-state=on]": {
+    backgroundColor: "$slate5",
+    "&[data-breakpoint=true]": {
+      color: "$colors$blue11",
+      backgroundColor: "$colors$blue4",
+    },
+  },
   // whiteSpace: "nowrap",
   // fontSize: 15,
   // lineHeight: 1,