Merge pull request #304 from webstudio-is/feature-style-panel-flexChild-section

Feature style panel flex child section

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

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

@@ -5,3 +5,4 @@ export * from "./menu/menu-control";
 export * from "./font-family/font-family-control";
 export * from "./font-weight/font-weight-control";
 export * from "./image/image-control";
+export * from "./toggle/toggle-control";

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

@@ -0,0 +1,66 @@
+import {
+  styled,
+  Flex,
+  Tooltip,
+  ToggleGroupRoot,
+  ToggleGroupItem,
+} 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) => {
+  const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
+  return (
+    <ToggleGroupRoot
+      type="single"
+      value={value}
+      onValueChange={onValueChange}
+      css={{ width: "fit-content" }}
+    >
+      {items.map(({ child, label, value }, index) => {
+        return (
+          <ToggleGroupControlItem
+            key={index}
+            value={value}
+            state={isCurrentBreakpoint ? "set" : undefined}
+          >
+            <Tooltip content={label} delayDuration={0}>
+              <Flex>{child}</Flex>
+            </Tooltip>
+          </ToggleGroupControlItem>
+        );
+      })}
+    </ToggleGroupRoot>
+  );
+};
+
+const ToggleGroupControlItem = styled(ToggleGroupItem, {
+  variants: {
+    state: {
+      set: {
+        "&[data-state=on]": {
+          color: "$colors$blue11",
+          backgroundColor: "$colors$blue4",
+        },
+      },
+      inherited: {
+        "&[data-state=on]": {
+          color: "$colors$orange4",
+          backgroundColor: "$colors$orange4",
+        },
+      },
+    },
+  },
+});

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/flex-child/flex-child.tsx

@@ -0,0 +1,277 @@
+import { Flex, Grid } from "@webstudio-is/design-system";
+import type { RenderCategoryProps } from "../../style-sections";
+import { ToggleGroupControl } from "../../controls";
+import { PropertyName } from "../../shared/property-name";
+import { TextControl } from "../../controls";
+import {
+  CrossSmallIcon,
+  AlignSelfStartIcon,
+  AlignSelfEndIcon,
+  AlignSelfCenterIcon,
+  AlignSelfBaselineIcon,
+  AlignSelfStretchIcon,
+  FlexSizingShrinkIcon,
+  FlexSizingGrowIcon,
+  OrderFirstIcon,
+  OrderLastIcon,
+  EllipsesIcon,
+} from "@webstudio-is/icons";
+import { ValuePickerPopover } from "../../shared/value-picker-popover";
+
+export const FlexChildSection = (props: RenderCategoryProps) => {
+  return (
+    <Flex css={{ flexDirection: "column", gap: "$spacing$5" }}>
+      <FlexChildSectionAlign {...props} />
+      <FlexChildSectionSizing {...props} />
+      <FlexChildSectionOrder {...props} />
+    </Flex>
+  );
+};
+
+const FlexChildSectionAlign = (props: RenderCategoryProps) => {
+  const { setProperty, currentStyle, sectionStyle } = props;
+  const setAlignSelf = setProperty("alignSelf");
+
+  return (
+    <Grid css={{ gridTemplateColumns: "4fr auto" }}>
+      <PropertyName
+        property={sectionStyle.alignSelf?.styleConfig.property}
+        label="Align"
+      />
+      <ToggleGroupControl
+        property={sectionStyle.alignSelf?.styleConfig.property}
+        onValueChange={(value) => setAlignSelf(value)}
+        value={String(currentStyle.alignSelf?.value)}
+        items={[
+          {
+            child: <CrossSmallIcon />,
+            label: "Do not align items",
+            value: "auto",
+          },
+          {
+            child: <AlignSelfStartIcon />,
+            label: "align-items: flex-start",
+            value: "start",
+          },
+          {
+            child: <AlignSelfEndIcon />,
+            label: "align-items: flex-end",
+            value: "end",
+          },
+          {
+            child: <AlignSelfCenterIcon />,
+            label: "align-items: center",
+            value: "center",
+          },
+          {
+            child: <AlignSelfStretchIcon />,
+            label: "align-items: stretch",
+            value: "stretch",
+          },
+          {
+            child: <AlignSelfBaselineIcon />,
+            label: "align-items: baseline",
+            value: "baseline",
+          },
+        ]}
+      />
+    </Grid>
+  );
+};
+
+const FlexChildSectionSizing = (props: RenderCategoryProps) => {
+  const { createBatchUpdate, currentStyle, sectionStyle } = props;
+  const setSizing = createBatchUpdate();
+
+  return (
+    <Grid css={{ gridTemplateColumns: "4fr auto" }}>
+      <PropertyName
+        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": {
+              setSizing.setProperty("flexGrow")("0");
+              setSizing.setProperty("flexShrink")("0");
+              setSizing.publish();
+              break;
+            }
+            case "grow": {
+              setSizing.setProperty("flexGrow")("1");
+              setSizing.setProperty("flexShrink")("0");
+              setSizing.publish();
+              break;
+            }
+            case "shrink": {
+              setSizing.setProperty("flexGrow")("0");
+              setSizing.setProperty("flexShrink")("1");
+              setSizing.publish();
+              break;
+            }
+          }
+        }}
+        value={getSizingValue(
+          String(currentStyle.flexGrow?.value),
+          String(currentStyle.flexShrink?.value)
+        )}
+        items={[
+          {
+            child: <CrossSmallIcon />,
+            label: "Don't grow or shrink",
+            value: "none",
+          },
+          {
+            child: <FlexSizingGrowIcon />,
+            label: "Grow if possible",
+            value: "grow",
+          },
+          {
+            child: <FlexSizingShrinkIcon />,
+            label: "Shrink if needed",
+            value: "shrink",
+          },
+          {
+            child: <FlexChildSectionSizingPopover {...props} />,
+            label: "More sizing options",
+            value: "",
+          },
+        ]}
+      />
+    </Grid>
+  );
+};
+
+const FlexChildSectionSizingPopover = ({
+  sectionStyle,
+}: RenderCategoryProps) => {
+  return (
+    <ValuePickerPopover
+      title="Sizing"
+      content={
+        <Grid
+          css={{
+            gridTemplateColumns: "1.5fr 1fr 1fr",
+            gap: "$spacing$9",
+            padding: "$spacing$9",
+          }}
+        >
+          <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
+            <PropertyName
+              property={sectionStyle.flexBasis?.styleConfig.property}
+              label="Basis"
+            />
+            <TextControl {...sectionStyle.flexBasis} />
+          </Grid>
+          <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
+            <PropertyName
+              property={sectionStyle.flexGrow?.styleConfig.property}
+              label="Grow"
+            />
+            <TextControl {...sectionStyle.flexGrow} />
+          </Grid>
+          <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
+            <PropertyName
+              property={sectionStyle.flexShrink?.styleConfig.property}
+              label="Shrink"
+            />
+            <TextControl {...sectionStyle.flexShrink} />
+          </Grid>
+        </Grid>
+      }
+    >
+      <Flex>
+        <EllipsesIcon />
+      </Flex>
+    </ValuePickerPopover>
+  );
+};
+
+const FlexChildSectionOrder = (props: RenderCategoryProps) => {
+  const { setProperty, currentStyle, sectionStyle } = props;
+  const setOrder = setProperty("order");
+
+  return (
+    <Grid css={{ gridTemplateColumns: "4fr auto" }}>
+      <PropertyName
+        property={sectionStyle.order?.styleConfig.property}
+        label="Order"
+      />
+      <ToggleGroupControl
+        property={sectionStyle.order?.styleConfig.property}
+        onValueChange={(value) => {
+          switch (value) {
+            case "0":
+            case "1":
+            case "-1": {
+              setOrder(value);
+              break;
+            }
+          }
+        }}
+        value={String(currentStyle.order?.value)}
+        items={[
+          {
+            child: <CrossSmallIcon />,
+            label: "Dont't change",
+            value: "0",
+          },
+          {
+            child: <OrderFirstIcon />,
+            label: "Make first",
+            value: "1",
+          },
+          {
+            child: <OrderLastIcon />,
+            label: "Make last",
+            value: "-1",
+          },
+          {
+            child: <FlexChildSectionOrderPopover {...props} />,
+            label: "Customize order",
+            value: "",
+          },
+        ]}
+      />
+    </Grid>
+  );
+};
+
+const FlexChildSectionOrderPopover = (props: RenderCategoryProps) => {
+  const { sectionStyle } = props;
+  return (
+    <ValuePickerPopover
+      title="Order"
+      content={
+        <Grid css={{ padding: "$spacing$9" }}>
+          <Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
+            <PropertyName
+              property={sectionStyle.order?.styleConfig.property}
+              label="Order"
+            />
+            <TextControl {...sectionStyle.order} />
+          </Grid>
+        </Grid>
+      }
+    >
+      <Flex>
+        <EllipsesIcon />
+      </Flex>
+    </ValuePickerPopover>
+  );
+};
+
+const getSizingValue = (flexGrow: string, flexShrink: string) => {
+  if (flexGrow === "0" && flexShrink === "0") return "none";
+  if (flexGrow === "1" && flexShrink === "0") return "grow";
+  if (flexGrow === "0" && flexShrink === "1") return "shrink";
+  return "";
+};

apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.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 "./flex-child/flex-child";
+export * from "./grid-child/grid-child";
 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/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/shared/property-name.tsx

@@ -28,7 +28,7 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => {
                   color: "$hiContrast",
                 }),
           }}
-          htmlFor={property}
+          htmlFor={String(property)}
         >
           {label}
         </Label>

apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx

@@ -56,8 +56,8 @@ export const ValuePickerPopover = ({
           align="start"
           css={{ width: PANEL_WIDTH }}
         >
-          <PopoverHeader title={title} />
           {content}
+          <PopoverHeader title={title} />
         </PopoverContent>
       </PopoverPortal>
     </Popover>

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

@@ -9,12 +9,23 @@ import {
 import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data";
 import type { InheritedStyle } from "./shared/get-inherited-style";
 import * as controls 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 = {
-  property: StyleProperty;
+  property: StyleProperty | StyleProperty[];
   label: string;
   css?: CSS;
 };
@@ -32,7 +43,7 @@ export type RenderCategoryProps = {
   createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
   sectionStyle: {
-    [Property in keyof Style]: RenderPropertyProps;
+    [Property in Required<keyof Style>]: RenderPropertyProps;
   };
   inheritedStyle: InheritedStyle;
   category: Category;
@@ -60,7 +71,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}
@@ -83,22 +94,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}
@@ -126,8 +124,17 @@ 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,
 };

apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx

@@ -5,7 +5,11 @@ import {
   type TextToolbarState,
   useTextToolbarState,
 } from "~/designer/shared/nano-states";
-import { ToggleGroup, type CSS } from "@webstudio-is/design-system";
+import {
+  type CSS,
+  ToggleGroupRoot,
+  ToggleGroupItem,
+} from "@webstudio-is/design-system";
 import {
   FontBoldIcon,
   FontItalicIcon,
@@ -105,7 +109,7 @@ const Toolbar = ({ css, rootRef, state, onToggle }: ToolbarProps) => {
     value.push("span");
   }
   return (
-    <ToggleGroup.Root
+    <ToggleGroupRoot
       ref={rootRef}
       type="multiple"
       value={value}
@@ -142,28 +146,28 @@ const Toolbar = ({ css, rootRef, state, onToggle }: ToolbarProps) => {
         ...css,
       }}
     >
-      <ToggleGroup.Item value="bold">
+      <ToggleGroupItem value="bold">
         <FontBoldIcon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="italic">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic">
         <FontItalicIcon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="superscript">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="superscript">
         <SuperscriptIcon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="subscript">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="subscript">
         <SubscriptIcon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="link">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="link">
         <Link2Icon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="span">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="span">
         <BrushIcon />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="clear">
+      </ToggleGroupItem>
+      <ToggleGroupItem value="clear">
         <FormatClearIcon />
-      </ToggleGroup.Item>
-    </ToggleGroup.Root>
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CrossIcon } from "@webstudio-is/icons";
+import { CrossLargeIcon } from "@webstudio-is/icons";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Box } from "./box";
 import { panelStyles } from "./panel";
@@ -25,6 +25,8 @@ const StyledContent = styled(PopoverPrimitive.Content, panelStyles, {
   "&:focus": {
     outline: "none",
   },
+  display: "flex",
+  flexDirection: "column",
 });
 
 type PopoverContentPrimitiveProps = React.ComponentProps<
@@ -67,7 +69,7 @@ type PopoverHeaderProps = {
 
 export const PopoverHeader = ({ title }: PopoverHeaderProps) => {
   return (
-    <>
+    <Box css={{ order: -1 }}>
       <Flex
         css={{ height: 40, paddingLeft: "$spacing$9" }}
         align="center"
@@ -77,15 +79,17 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => {
         <PopoverClose asChild>
           <IconButton
             size="2"
-            css={{ marginRight: "$spacing$5" }}
+            css={{
+              marginRight: "$spacing$5",
+            }}
             aria-label="Close"
           >
-            <CrossIcon />
+            <CrossLargeIcon />
           </IconButton>
         </PopoverClose>
       </Flex>
       <Separator />
-    </>
+    </Box>
   );
 };
 

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

@@ -1,16 +1,16 @@
 import { styled } from "../stitches.config";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
-export const Root = styled(ToggleGroupPrimitive.Root, {
+export const ToggleGroupRoot = styled(ToggleGroupPrimitive.Root, {
   display: "inline-flex",
-  backgroundColor: "$slate6",
-  borderRadius: 4,
-  boxShadow: `0 2px 10px $blackA7`,
+  borderRadius: "$spacing$3",
+  boxShadow: `0 0 0 $spacing$1 $colors$slate7`,
+  padding: 2,
 });
 
-export const Item = styled(ToggleGroupPrimitive.Item, {
+export const ToggleGroupItem = styled(ToggleGroupPrimitive.Item, {
   all: "unset",
-  backgroundColor: "$panel",
+  backgroundColor: "$loContrast",
   color: "$hiContrast",
   display: "flex",
   whiteSpace: "nowrap",
@@ -19,9 +19,10 @@ export const Item = styled(ToggleGroupPrimitive.Item, {
   alignItems: "center",
   justifyContent: "center",
   marginLeft: 1,
+  borderRadius: 2,
+  height: "$spacing$11",
   "&": {
-    px: "$spacing$5",
-    py: "$spacing$3",
+    px: "$spacing$3",
   },
   "&:first-child": {
     marginLeft: 0,
@@ -30,11 +31,7 @@ export const Item = styled(ToggleGroupPrimitive.Item, {
   },
   "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 },
   "&:hover": { backgroundColor: "$slateA3" },
-  "&[data-state=on]": {
-    backgroundColor: "$slateA5",
-  },
-  "&:focus": {
-    position: "relative",
-    boxShadow: `0 0 0 2px black`,
-  },
+  // @note because the outline is outside of the element others can end up covering it
+  "&:focus": { boxShadow: "0 0 0 $spacing$2 $colors$blue10", zIndex: 1 },
+  "&[data-state=on]": { backgroundColor: "$slate5" },
 });

packages/design-system/src/index.ts

@@ -7,7 +7,7 @@ export * as Portal from "@radix-ui/react-portal";
 export * from "@radix-ui/react-id";
 export { Container } from "./components/container";
 export { Label } from "./components/label";
-export * as ToggleGroup from "./components/toggle-group";
+export * from "./components/toggle-group";
 export * from "./components/progress-radial";
 export * from "./components/select";
 export * from "./components/text-field";

packages/icons/src/align-self-baseline.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfBaselineIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <mask id="a" fill="#fff">
+          <rect width="3" height="10" x="6.5" y="3" rx=".8" />
+        </mask>
+        <rect
+          width="3"
+          height="10"
+          x="6.5"
+          y="3"
+          stroke={color}
+          strokeWidth="2"
+          mask="url(#a)"
+          rx=".8"
+        />
+        <rect
+          width="3"
+          height="5.73926"
+          x="6.5"
+          y="7.25977"
+          fill={color}
+          rx=".8"
+        />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfBaselineIcon.displayName = "AlignSelfBaselineIcon";

packages/icons/src/align-self-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfCenterIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <rect width="3" height="10" x="6.5" y="3" fill={color} rx=".8" />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfCenterIcon.displayName = "AlignSelfCenterIcon";

packages/icons/src/align-self-end.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfEndIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M14.5 14.2004c0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7 0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+        <rect
+          width="3"
+          height="9"
+          x="9.5"
+          y="12.4004"
+          fill={color}
+          rx=".8"
+          transform="rotate(-180 9.5 12.4004)"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfEndIcon.displayName = "AlignSelfEndIcon";

packages/icons/src/align-self-start.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfStartIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 1.79961c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+        <rect width="3" height="9" x="6.5" y="3.59961" fill={color} rx=".8" />
+      </svg>
+    );
+  }
+);
+AlignSelfStartIcon.displayName = "AlignSelfStartIcon";

packages/icons/src/align-self-stretch.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfStretchIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M14.5 14.2004c0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7 0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+        <rect
+          width="3"
+          height="9"
+          x="9.5"
+          y="12.5"
+          fill={color}
+          rx=".8"
+          transform="rotate(-180 9.5 12.5)"
+        />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M14.5 1.8c0 .3866-.3439.7-.7682.7H2.26818C1.84393 2.5 1.5 2.1866 1.5 1.8c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfStretchIcon.displayName = "AlignSelfStretchIcon";

packages/icons/src/cross-large.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossLargeIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.6"
+          d="M13 3 7.99998 8.00002m0 0L3 13m4.99998-4.99998L3 3.00008m4.99998 4.99994L13 13"
+        />
+      </svg>
+    );
+  }
+);
+CrossLargeIcon.displayName = "CrossLargeIcon";

packages/icons/src/cross-small.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossSmallIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M11 5 7.99999 8.00001m0 0L5 11m2.99999-2.99999L5 5.00005m2.99999 2.99996L11 11"
+        />
+      </svg>
+    );
+  }
+);
+CrossSmallIcon.displayName = "CrossSmallIcon";

packages/icons/src/ellipses.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const EllipsesIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <circle cx="2.5" cy="8" r="1.5" fill={color} />
+        <circle cx="8" cy="8" r="1.5" fill={color} />
+        <circle cx="13.5" cy="8" r="1.5" fill={color} />
+      </svg>
+    );
+  }
+);
+EllipsesIcon.displayName = "EllipsesIcon";

packages/icons/src/flex-sizing-grow.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexSizingGrowIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          d="M10.7641 5.54038c-.2539-.25384-.6654-.25384-.91928 0-.25384.25384-.25384.6654 0 .91924l.91928-.91924ZM12.3044 8l.4597.45962c.2538-.25384.2538-.6654 0-.91924L12.3044 8ZM9.84482 9.54038c-.25384.25384-.25384.66542 0 .91922.25388.2539.66538.2539.91928 0l-.91928-.91922ZM7.80469 7.35c-.35899 0-.65.29101-.65.65 0 .35899.29101.65.65.65v-1.3Zm2.04013-.89038 1.99998 2 .9193-.91924-2-2-.91928.91924Zm1.99998 1.08076-1.99998 2 .91928.91922 2-1.99998-.9193-.91924ZM7.80469 8.65h4.49971v-1.3H7.80469v1.3Z"
+        />
+        <path
+          fill={color}
+          d="m3.69531 8-.45962-.45962c-.25384.25384-.25384.6654 0 .91924L3.69531 8Zm2.45962-1.54038c.25384-.25384.25384-.6654 0-.91924-.25384-.25384-.6654-.25384-.91924 0l.91924.91924Zm-.91924 3.99998c.25384.2539.6654.2539.91924 0 .25384-.2538.25384-.66538 0-.91922l-.91924.91922ZM8.19556 8.65c.35898 0 .65-.29101.65-.65 0-.35899-.29102-.65-.65-.65v1.3Zm-4.04063-.19038 2-2-.91924-.91924-2 2 .91924.91924Zm-.91924 0 2 1.99998.91924-.91922-2-2-.91924.91924Zm.45962.19038h4.50025v-1.3H3.69531v1.3Z"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M1.5 2.5v11m13-11v11"
+        />
+      </svg>
+    );
+  }
+);
+FlexSizingGrowIcon.displayName = "FlexSizingGrowIcon";

packages/icons/src/flex-sizing-shrink.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexSizingShrinkIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M7.95312 2.5v11"
+        />
+        <path
+          fill={color}
+          d="m5.42188 8 .51745.47143c.2434-.26716.2434-.6757 0-.94286L5.42188 8ZM3.0823 9.52857c-.26036.28578-.23976.72853.04602.98883.28578.2604.72852.2398.98888-.046l-1.0349-.94283Zm1.0349-4c-.26036-.28578-.7031-.30638-.98888-.04602-.28578.26036-.30638.7031-.04602.98888l1.0349-.94286ZM1.32188 7.3c-.386604 0-.700005.3134-.700005.7 0 .3866.313401.7.700005.7V7.3Zm3.58255.22857-1.82213 2 1.0349.94283 1.82213-1.99997-1.0349-.94286Zm1.0349 0-1.82213-2-1.0349.94286 1.82212 2 1.03491-.94286ZM5.42188 7.3h-4.1v1.4h4.1V7.3Zm6.41672 3.1776c.2638.2827.7068.2979.9894.0341.2826-.2638.2979-.70672.0341-.98934l-1.0235.95524ZM10.4836 8l-.51173-.47764c-.25103.26895-.25103.68633 0 .95528L10.4836 8Zm2.3785-1.52236c.2638-.28262.2485-.72557-.0341-.98937-.2826-.26379-.7256-.24853-.9894.03409l1.0235.95528ZM14.6836 8.7c.3866 0 .7-.3134.7-.7 0-.3866-.3134-.7-.7-.7v1.4Zm-1.8215.82236-1.8668-2-1.02343.95528 1.86673 1.99996 1.0235-.95524Zm-1.8668-1.04472 1.8668-2-1.0235-.95528-1.86673 2 1.02343.95528ZM14.6836 7.3h-4.2v1.4h4.2V7.3Z"
+        />
+      </svg>
+    );
+  }
+);
+FlexSizingShrinkIcon.displayName = "FlexSizingGrowIcon";

packages/icons/src/index.ts

@@ -65,3 +65,15 @@ export * from "./cross-circled-filled";
 export * from "./cross";
 export * from "./magnifying-glass";
 export * from "./menu";
+export * from "./align-self-start";
+export * from "./align-self-end";
+export * from "./align-self-center";
+export * from "./align-self-stretch";
+export * from "./align-self-baseline";
+export * from "./flex-sizing-grow";
+export * from "./flex-sizing-shrink";
+export * from "./order-first";
+export * from "./order-last";
+export * from "./cross-small";
+export * from "./cross-large";
+export * from "./ellipses";

packages/icons/src/order-first.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const OrderFirstIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M2.10022 2.5C1.54794 2.5 1.10022 2.94771 1.10022 3.5L1.10022 12.5C1.10022 13.0523 1.54793 13.5 2.10022 13.5H3.90022C4.4525 13.5 4.90022 13.0523 4.90022 12.5L4.90022 3.5C4.90022 2.94772 4.45251 2.5 3.90022 2.5L2.10022 2.5Z"
+          fill={color}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.9 4C11.3477 4 10.9 4.44771 10.9 5L10.9 11C10.9 11.5523 11.3477 12 11.9 12H13.9C14.4523 12 14.9 11.5523 14.9 11L14.9 5C14.9 4.44772 14.4523 4 13.9 4L11.9 4ZM12 5.1L12 10.9H13.8L13.8 5.1H12Z"
+          fill={color}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.10022 4C6.54794 4 6.10022 4.44771 6.10022 5L6.10022 11C6.10022 11.5523 6.54794 12 7.10022 12H9.10022C9.65251 12 10.1002 11.5523 10.1002 11L10.1002 5C10.1002 4.44771 9.65251 4 9.10022 4L7.10022 4ZM7.20022 5.1L7.20022 10.9H9.00022L9.00022 5.1L7.20022 5.1Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+OrderFirstIcon.displayName = "OrderFirstIcon";

packages/icons/src/order-last.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const OrderLastIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M13.8998 13.5C14.4521 13.5 14.8998 13.0523 14.8998 12.5L14.8998 3.5C14.8998 2.94772 14.4521 2.5 13.8998 2.5H12.0998C11.5475 2.5 11.0998 2.94771 11.0998 3.5L11.0998 12.5C11.0998 13.0523 11.5475 13.5 12.0998 13.5H13.8998Z"
+          fill={color}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.89978 12C6.57826 12 6.29219 11.8483 6.10925 11.6125C5.97795 11.4433 5.89978 11.2308 5.89978 11L5.89978 5C5.89978 4.76923 5.97795 4.55672 6.10925 4.3875C6.29219 4.15173 6.57826 4 6.89978 4H8.89978C9.45207 4 9.89978 4.44772 9.89978 5V11C9.89978 11.5523 9.45206 12 8.89978 12H6.89978ZM8.79978 5.1V10.9H6.99978L6.99978 5.1L8.79978 5.1Z"
+          fill={color}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.89051 4.3875C5.02181 4.55672 5.09998 4.76923 5.09998 5L5.09998 11C5.09998 11.2308 5.02181 11.4433 4.89051 11.6125C4.70757 11.8483 4.42149 12 4.09998 12H2.09998C1.54769 12 1.09998 11.5523 1.09998 11V5C1.09998 4.44771 1.54769 4 2.09998 4H4.09998C4.42149 4 4.70757 4.15173 4.89051 4.3875ZM3.99998 5.1L3.99998 10.9H2.19998L2.19998 5.1L3.99998 5.1Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+OrderLastIcon.displayName = "OrderLastIcon";