From 40c48e798fbc31482bb186bfb953375cb56a3b09 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 25 Sep 2022 06:21:59 +0300 Subject: [PATCH 01/17] add default sections for all sections, init toggle-control --- .../features/style-panel/controls/index.ts | 1 + .../controls/toggle/toggle-control.tsx | 24 ++++ .../sections/backgrounds/backgrounds.tsx | 19 +++ .../style-panel/sections/borders/borders.tsx | 19 +++ .../style-panel/sections/effects/effects.tsx | 19 +++ .../sections/flexChild/flexChild.tsx | 21 ++++ .../sections/gridChild/gridChild.tsx | 19 +++ .../features/style-panel/sections/index.ts | 9 ++ .../style-panel/sections/layout/layout.tsx | 108 ++++++++---------- .../style-panel/sections/other/other.tsx | 19 +++ .../sections/position/position.tsx | 19 +++ .../style-panel/sections/size/size.tsx | 19 +++ .../sections/typography/typography.tsx | 19 +++ .../features/style-panel/style-sections.tsx | 48 +++++--- .../features/style-panel/style-settings.tsx | 10 +- 15 files changed, 288 insertions(+), 85 deletions(-) create mode 100644 apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/other/other.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/position/position.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/size/size.tsx create mode 100644 apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx diff --git a/apps/designer/app/designer/features/style-panel/controls/index.ts b/apps/designer/app/designer/features/style-panel/controls/index.ts index 23066cea02..b2c1fc3e34 100644 --- a/apps/designer/app/designer/features/style-panel/controls/index.ts +++ b/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"; diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx new file mode 100644 index 0000000000..f49a3f0626 --- /dev/null +++ b/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 = () => ( + + + + + + + + + + + +); diff --git a/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx b/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx new file mode 100644 index 0000000000..c0c66b8dfe --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx b/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx new file mode 100644 index 0000000000..9ed390754b --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx b/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx new file mode 100644 index 0000000000..59cb2fc213 --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx b/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx new file mode 100644 index 0000000000..f09d23207f --- /dev/null +++ b/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 ( + <> + + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx b/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx new file mode 100644 index 0000000000..543ed0e8e5 --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/index.ts b/apps/designer/app/designer/features/style-panel/sections/index.ts index ceb46300a7..4a750c30bc 100644 --- a/apps/designer/app/designer/features/style-panel/sections/index.ts +++ b/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"; 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 422fb8867d..d36cb8ace5 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 @@ -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 ( - - - - - + <> - - - - - - - - - - - - - {alignContent && ( - - - + {( + [ + "flexDirection", + "flexWrap", + "alignItems", + "justifyContent", + "alignContent", + ] as const + ).map( + (type) => + sectionStyle[type] && ( + + + + ) )} - + - + - + ); }; @@ -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 ( + + + + + - ); - } - - return ( - <> - - renderProperty(entry) - )} - /> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - + ); }; diff --git a/apps/designer/app/designer/features/style-panel/sections/other/other.tsx b/apps/designer/app/designer/features/style-panel/sections/other/other.tsx new file mode 100644 index 0000000000..ac4b9548b7 --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/position/position.tsx b/apps/designer/app/designer/features/style-panel/sections/position/position.tsx new file mode 100644 index 0000000000..41fc379430 --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/size/size.tsx b/apps/designer/app/designer/features/style-panel/sections/size/size.tsx new file mode 100644 index 0000000000..2d558697e8 --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx new file mode 100644 index 0000000000..a71078d2ec --- /dev/null +++ b/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))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 8b7947ba4a..755c9b8db9 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/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; @@ -64,7 +78,7 @@ export const renderProperty = ({ if (!Control) return null; return ( - + { - const Category = sections[category]; - if (!Category) { - return ( - <> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - - renderProperty(entry) - )} - /> - - ); - } - + const Section = sections[category]; return ( - 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: { diff --git a/apps/designer/app/designer/features/style-panel/style-settings.tsx b/apps/designer/app/designer/features/style-panel/style-settings.tsx index 83cba01833..10889df162 100644 --- a/apps/designer/app/designer/features/style-panel/style-settings.tsx +++ b/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 = []; const moreStyleConfigsByCategory: Array = []; From 015fa13f21b02c69eec53af673a97e06010c7db3 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Fri, 7 Oct 2022 19:27:31 +0300 Subject: [PATCH 02/17] hook into application state, add icons from figma --- .../controls/toggle/toggle-control.tsx | 42 ++-- .../sections/flex-child/flex-child.tsx | 193 ++++++++++++++++++ .../sections/flexChild/flexChild.tsx | 21 -- .../grid-child.tsx} | 0 .../features/style-panel/sections/index.ts | 4 +- .../style-panel/sections/layout/layout.tsx | 7 +- .../features/style-panel/style-sections.tsx | 1 - .../src/components/toggle-group.tsx | 50 +++-- packages/icons/src/align-self-baseline.tsx | 47 +++++ packages/icons/src/align-self-center.tsx | 27 +++ packages/icons/src/align-self-end.tsx | 35 ++++ packages/icons/src/align-self-start.tsx | 27 +++ packages/icons/src/align-self-stretch.tsx | 41 ++++ packages/icons/src/cross-large.tsx | 26 +++ packages/icons/src/cross-small.tsx | 26 +++ packages/icons/src/ellipses.tsx | 23 +++ packages/icons/src/flex-sizing-grow.tsx | 34 +++ packages/icons/src/flex-sizing-shrink.tsx | 30 +++ packages/icons/src/index.ts | 12 ++ packages/icons/src/order-first.tsx | 47 +++++ packages/icons/src/order-last.tsx | 48 +++++ 21 files changed, 667 insertions(+), 74 deletions(-) create mode 100644 apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx delete mode 100644 apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx rename apps/designer/app/designer/features/style-panel/sections/{gridChild/gridChild.tsx => grid-child/grid-child.tsx} (100%) create mode 100644 packages/icons/src/align-self-baseline.tsx create mode 100644 packages/icons/src/align-self-center.tsx create mode 100644 packages/icons/src/align-self-end.tsx create mode 100644 packages/icons/src/align-self-start.tsx create mode 100644 packages/icons/src/align-self-stretch.tsx create mode 100644 packages/icons/src/cross-large.tsx create mode 100644 packages/icons/src/cross-small.tsx create mode 100644 packages/icons/src/ellipses.tsx create mode 100644 packages/icons/src/flex-sizing-grow.tsx create mode 100644 packages/icons/src/flex-sizing-shrink.tsx create mode 100644 packages/icons/src/order-first.tsx create mode 100644 packages/icons/src/order-last.tsx diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx index f49a3f0626..23d1555cb9 100644 --- a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx +++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx @@ -1,24 +1,30 @@ -import { ToggleGroup } from "@webstudio-is/design-system"; -import { - TextAlignLeftIcon, - TextAlignCenterIcon, - TextAlignRightIcon, -} from "@webstudio-is/icons"; +import { ToggleGroup, Tooltip } from "@webstudio-is/design-system"; -export const ToggleGroupControl = () => ( +export type ToggleGroupControlProps = { + value: string; + items: { child: JSX.Element; label: string; value: string }[]; + onValueChange?: (value: string) => void; +}; + +export const ToggleGroupControl = ({ + value = "", + items = [], + onValueChange, +}: ToggleGroupControlProps) => ( - - - - - - - - - + {items.map(({ child, label, value }, index) => { + return ( + + + {child} + + + ); + })} ); diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx new file mode 100644 index 0000000000..3c29a8a0c1 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -0,0 +1,193 @@ +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 { + CrossSmallIcon, + AlignSelfStartIcon, + AlignSelfEndIcon, + AlignSelfCenterIcon, + AlignSelfBaselineIcon, + AlignSelfStretchIcon, + FlexSizingShrinkIcon, + FlexSizingGrowIcon, + OrderFirstIcon, + OrderLastIcon, + EllipsesIcon, +} from "@webstudio-is/icons"; + +export const FlexChildSection = ({ + setProperty, + createBatchUpdate, + currentStyle, + sectionStyle, +}: RenderCategoryProps) => { + const setAlignSelf = setProperty("alignSelf"); + const setOrder = setProperty("order"); + const setSizing = createBatchUpdate(); + + return ( + + + + setAlignSelf(value)} + value={String(currentStyle.alignSelf?.value)} + items={[ + { + child: , + label: "Do not align items", + value: "auto", + }, + { + child: , + label: "align-items: flex-start", + value: "start", + }, + { + child: , + label: "align-items: flex-end", + value: "end", + }, + { + child: , + label: "align-items: center", + value: "center", + }, + { + child: , + label: "align-items: stretch", + value: "stretch", + }, + { + child: , + label: "align-items: baseline", + value: "baseline", + }, + ]} + /> + + + + { + 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; + } + default: { + alert("@todo render sizing popup"); + } + } + }} + value={(() => { + switch ( + String(currentStyle.flexGrow?.value) + + String(currentStyle.flexShrink?.value) + ) { + case "00": { + return "none"; + } + case "10": { + return "grow"; + } + case "01": { + return "shrink"; + } + default: { + return ""; + } + } + })()} + items={[ + { + child: , + label: "Don't grow or shrink", + value: "none", + }, + { + child: , + label: "Grow if possible", + value: "grow", + }, + { + child: , + label: "Shrink if needed", + value: "shrink", + }, + { + child: , + label: "More sizing options", + value: "", + }, + ]} + /> + + + + { + switch (value) { + case "0": + case "1": + case "-1": { + setOrder(value); + break; + } + default: { + alert("@todo render order popup"); + } + } + }} + value={String(currentStyle.order?.value)} + items={[ + { + child: , + label: "Dont't change", + value: "0", + }, + { + child: , + label: "Make first", + value: "1", + }, + { + child: , + label: "Make last", + value: "-1", + }, + { + child: , + label: "Customize order", + value: "", + }, + ]} + /> + + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx b/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx deleted file mode 100644 index f09d23207f..0000000000 --- a/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx +++ /dev/null @@ -1,21 +0,0 @@ -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 ( - <> - - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - - renderProperty(entry) - )} - /> - - ); -}; diff --git a/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx b/apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.tsx similarity index 100% rename from apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx rename to apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.tsx diff --git a/apps/designer/app/designer/features/style-panel/sections/index.ts b/apps/designer/app/designer/features/style-panel/sections/index.ts index 4a750c30bc..6e82bdbb6e 100644 --- a/apps/designer/app/designer/features/style-panel/sections/index.ts +++ b/apps/designer/app/designer/features/style-panel/sections/index.ts @@ -1,6 +1,6 @@ export * from "./layout/layout"; -export * from "./flexChild/flexChild"; -export * from "./gridChild/gridChild"; +export * from "./flex-child/flex-child"; +export * from "./grid-child/grid-child"; export * from "./spacing/spacing"; export * from "./size/size"; export * from "./position/position"; 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 d36cb8ace5..b8f2b22988 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 @@ -2,12 +2,7 @@ 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 { - MenuControl, - SelectControl, - TextControl, - ToggleGroupControl, -} from "../../controls"; +import { MenuControl, SelectControl, TextControl } from "../../controls"; import { PropertyName } from "../../shared/property-name"; const LayoutSectionFlex = ({ diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 755c9b8db9..71f24fe578 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -15,7 +15,6 @@ import { MenuControl, FontFamilyControl, } from "./controls"; -import { ShowMore } from "./shared/show-more"; import { LayoutSection, FlexChildSection, diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index d3b86afd09..c16781252c 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -3,38 +3,36 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; export const Root = styled(ToggleGroupPrimitive.Root, { display: "inline-flex", - backgroundColor: "$slate5", - borderRadius: 4, - boxShadow: `0 2px 10px $blackA7`, + borderRadius: "$1", + boxShadow: `0 0 0 1px $colors$slate7`, + padding: 2, }); export const Item = styled(ToggleGroupPrimitive.Item, { all: "unset", - backgroundColor: "$panel", + backgroundColor: "$loContrast", color: "$hiContrast", display: "flex", - whiteSpace: "nowrap", - fontSize: 15, - lineHeight: 1, + width: "$5", + height: "$5", + borderRadius: 2, alignItems: "center", justifyContent: "center", - marginLeft: 1, - "&": { - px: "$2", - py: "$1", - }, - "&:first-child": { - marginLeft: 0, - borderTopLeftRadius: 4, - borderBottomLeftRadius: 4, - }, - "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, - "&:hover": { backgroundColor: "$slateA3" }, - "&[data-state=on]": { - backgroundColor: "$slateA5", - }, - "&:focus": { - position: "relative", - boxShadow: `0 0 0 2px black`, - }, + "&:hover": { backgroundColor: "$slate5" }, + "&:focus": { boxShadow: "0 0 0 2px $colors$blue10", zIndex: 1 }, + "&[data-state=on]": { backgroundColor: "$slate5" }, + // whiteSpace: "nowrap", + // fontSize: 15, + // lineHeight: 1, + // marginLeft: 1, + // "&": { + // px: "$2", + // py: "$1", + // }, + // "&:first-child": { + // marginLeft: 0, + // borderTopLeftRadius: 4, + // borderBottomLeftRadius: 4, + // }, + // "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, }); diff --git a/packages/icons/src/align-self-baseline.tsx b/packages/icons/src/align-self-baseline.tsx new file mode 100644 index 0000000000..806450615b --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + + + + ); + } +); +AlignSelfBaselineIcon.displayName = "AlignSelfBaselineIcon"; diff --git a/packages/icons/src/align-self-center.tsx b/packages/icons/src/align-self-center.tsx new file mode 100644 index 0000000000..5b8f8e0a37 --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfCenterIcon.displayName = "AlignSelfCenterIcon"; diff --git a/packages/icons/src/align-self-end.tsx b/packages/icons/src/align-self-end.tsx new file mode 100644 index 0000000000..0c99ee9245 --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfEndIcon.displayName = "AlignSelfEndIcon"; diff --git a/packages/icons/src/align-self-start.tsx b/packages/icons/src/align-self-start.tsx new file mode 100644 index 0000000000..b705dd7827 --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfStartIcon.displayName = "AlignSelfStartIcon"; diff --git a/packages/icons/src/align-self-stretch.tsx b/packages/icons/src/align-self-stretch.tsx new file mode 100644 index 0000000000..26c738d71c --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +AlignSelfStretchIcon.displayName = "AlignSelfStretchIcon"; diff --git a/packages/icons/src/cross-large.tsx b/packages/icons/src/cross-large.tsx new file mode 100644 index 0000000000..0b1c591b1c --- /dev/null +++ b/packages/icons/src/cross-large.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const CrossLargeIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +CrossLargeIcon.displayName = "CrossLargeIcon"; diff --git a/packages/icons/src/cross-small.tsx b/packages/icons/src/cross-small.tsx new file mode 100644 index 0000000000..f930d59adf --- /dev/null +++ b/packages/icons/src/cross-small.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const CrossSmallIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +CrossSmallIcon.displayName = "CrossSmallIcon"; diff --git a/packages/icons/src/ellipses.tsx b/packages/icons/src/ellipses.tsx new file mode 100644 index 0000000000..bcca0255fb --- /dev/null +++ b/packages/icons/src/ellipses.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const EllipsesIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +EllipsesIcon.displayName = "EllipsesIcon"; diff --git a/packages/icons/src/flex-sizing-grow.tsx b/packages/icons/src/flex-sizing-grow.tsx new file mode 100644 index 0000000000..a91ba276fd --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +FlexSizingGrowIcon.displayName = "FlexSizingGrowIcon"; diff --git a/packages/icons/src/flex-sizing-shrink.tsx b/packages/icons/src/flex-sizing-shrink.tsx new file mode 100644 index 0000000000..db9977fe43 --- /dev/null +++ b/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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +FlexSizingShrinkIcon.displayName = "FlexSizingGrowIcon"; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index a15ffb67ce..48a3c9f430 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -48,3 +48,15 @@ export { TrashIcon } from "./trash"; export { SizeIcon } from "./size"; export { UploadIcon } from "./upload"; export { GearIcon, gearIconCssVars } from "./gear"; +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"; diff --git a/packages/icons/src/order-first.tsx b/packages/icons/src/order-first.tsx new file mode 100644 index 0000000000..d001f8eb38 --- /dev/null +++ b/packages/icons/src/order-first.tsx @@ -0,0 +1,47 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const OrderFirstIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + + + + + + + ); + } +); +OrderFirstIcon.displayName = "OrderFirstIcon"; diff --git a/packages/icons/src/order-last.tsx b/packages/icons/src/order-last.tsx new file mode 100644 index 0000000000..2d90e443a3 --- /dev/null +++ b/packages/icons/src/order-last.tsx @@ -0,0 +1,48 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const OrderLastIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + + + + + + + ); + } +); +OrderLastIcon.displayName = "OrderFirstIcon"; From e6a955b93b636e24552e8ff660f8bd0fef39b190 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Fri, 7 Oct 2022 22:07:18 +0300 Subject: [PATCH 03/17] render popover with text-controls for order, shrink, grow --- .../sections/flex-child/flex-child.tsx | 79 ++++++++++++++++--- 1 file changed, 70 insertions(+), 9 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index 3c29a8a0c1..af4ee0658e 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -1,7 +1,19 @@ -import { Flex, Grid } from "@webstudio-is/design-system"; +import { useState } from "react"; +import { + Text, + Flex, + Grid, + Popover, + PopoverTrigger, + PopoverContent, + PopoverHeader, + PopoverPortal, + IconButton, +} 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, @@ -16,6 +28,38 @@ import { EllipsesIcon, } from "@webstudio-is/icons"; +// @todo abstract to design-system component +export const MorePopover = ({ + title, + content, + children, +}: { + title: string; + content: JSX.Element; + children: JSX.Element; +}) => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + { + setIsOpen(true); + }} + > + {children} + + + + + {content} + + + + ); +}; + export const FlexChildSection = ({ setProperty, createBatchUpdate, @@ -96,9 +140,6 @@ export const FlexChildSection = ({ setSizing.publish(); break; } - default: { - alert("@todo render sizing popup"); - } } }} value={(() => { @@ -137,7 +178,19 @@ export const FlexChildSection = ({ value: "shrink", }, { - child: , + child: ( + + + + + } + > + + + ), label: "More sizing options", value: "", }, @@ -158,9 +211,6 @@ export const FlexChildSection = ({ setOrder(value); break; } - default: { - alert("@todo render order popup"); - } } }} value={String(currentStyle.order?.value)} @@ -181,7 +231,18 @@ export const FlexChildSection = ({ value: "-1", }, { - child: , + child: ( + + + + } + > + + + ), label: "Customize order", value: "", }, From 2488f5b7b33721881b6a4e083c02b475bd94bcb8 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 10 Oct 2022 23:20:24 +0300 Subject: [PATCH 04/17] refactor popover into popover component file, match figma design style, fix tooltip issue --- .../controls/toggle/toggle-control.tsx | 6 +- .../sections/flex-child/flex-child.tsx | 101 ++++++++---------- .../design-system/src/components/popover.tsx | 48 ++++++++- 3 files changed, 96 insertions(+), 59 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx index 23d1555cb9..5d4dacdcaa 100644 --- a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx +++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx @@ -1,4 +1,4 @@ -import { ToggleGroup, Tooltip } from "@webstudio-is/design-system"; +import { Flex, ToggleGroup, Tooltip } from "@webstudio-is/design-system"; export type ToggleGroupControlProps = { value: string; @@ -20,8 +20,8 @@ export const ToggleGroupControl = ({ {items.map(({ child, label, value }, index) => { return ( - - {child} + + {child} ); diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index af4ee0658e..aaff896993 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -1,15 +1,5 @@ import { useState } from "react"; -import { - Text, - Flex, - Grid, - Popover, - PopoverTrigger, - PopoverContent, - PopoverHeader, - PopoverPortal, - IconButton, -} from "@webstudio-is/design-system"; +import { Text, Flex, Grid, ModalPopover } from "@webstudio-is/design-system"; import type { RenderCategoryProps } from "../../style-sections"; import { ToggleGroupControl } from "../../controls"; import { PropertyName } from "../../shared/property-name"; @@ -28,38 +18,6 @@ import { EllipsesIcon, } from "@webstudio-is/icons"; -// @todo abstract to design-system component -export const MorePopover = ({ - title, - content, - children, -}: { - title: string; - content: JSX.Element; - children: JSX.Element; -}) => { - const [isOpen, setIsOpen] = useState(false); - - return ( - - { - setIsOpen(true); - }} - > - {children} - - - - - {content} - - - - ); -}; - export const FlexChildSection = ({ setProperty, createBatchUpdate, @@ -179,17 +137,46 @@ export const FlexChildSection = ({ }, { child: ( - - - - + + + + + + + + + + + + + + } > - + ), label: "More sizing options", value: "", @@ -232,16 +219,22 @@ export const FlexChildSection = ({ }, { child: ( - - - + + + + + + } > - + ), label: "Customize order", value: "", diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 1e7bf750f0..7582c862e8 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Cross1Icon } from "@webstudio-is/icons"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Box } from "./box"; @@ -74,7 +74,15 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { > {title} - + @@ -87,3 +95,39 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverClose = PopoverPrimitive.Close; export const PopoverPortal = PopoverPrimitive.Portal; + +export const ModalPopover = ({ + title, + content, + children, +}: { + title: string; + content: JSX.Element; + children: JSX.Element; +}) => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + { + setIsOpen(true); + }} + > + {children} + + + + + {content} + + + + ); +}; From 1d9ddcd7ea94c340e02c9ee51b898339ead959f6 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 10 Oct 2022 23:34:36 +0300 Subject: [PATCH 05/17] bikeshed: FloatingPopover to closer align with design spec naming convention --- .../style-panel/sections/flex-child/flex-child.tsx | 10 +++++----- packages/design-system/src/components/popover.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index aaff896993..76b26d6f17 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { Text, Flex, Grid, ModalPopover } from "@webstudio-is/design-system"; +import { Text, Flex, Grid, FloatingPopover } from "@webstudio-is/design-system"; import type { RenderCategoryProps } from "../../style-sections"; import { ToggleGroupControl } from "../../controls"; import { PropertyName } from "../../shared/property-name"; @@ -137,7 +137,7 @@ export const FlexChildSection = ({ }, { child: ( - - + ), label: "More sizing options", value: "", @@ -219,7 +219,7 @@ export const FlexChildSection = ({ }, { child: ( - @@ -234,7 +234,7 @@ export const FlexChildSection = ({ } > - + ), label: "Customize order", value: "", diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 7582c862e8..569c2c2784 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -96,7 +96,7 @@ export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverClose = PopoverPrimitive.Close; export const PopoverPortal = PopoverPrimitive.Portal; -export const ModalPopover = ({ +export const FloatingPopover = ({ title, content, children, From abedcd2f43a74ccc9636cccf5982481535dc6daf Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sat, 15 Oct 2022 23:14:05 +0300 Subject: [PATCH 06/17] show when is current breakpoint, refactor --- .../controls/toggle/toggle-control.tsx | 47 +++++++++------- .../sections/flex-child/flex-child.tsx | 53 +++++++++++-------- .../style-panel/shared/property-name.tsx | 14 +++-- .../features/style-panel/style-sections.tsx | 2 +- .../design-system/src/components/popover.tsx | 17 ++++-- .../src/components/toggle-group.tsx | 8 ++- 6 files changed, 88 insertions(+), 53 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx index 5d4dacdcaa..2ccc5251f1 100644 --- a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx +++ b/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) => ( - - {items.map(({ child, label, value }, index) => { - return ( - - - {child} - - - ); - })} - -); +}: ToggleGroupControlProps) => { + const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property); + return ( + + {items.map(({ child, label, value }, index) => { + return ( + + + {child} + + + ); + })} + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index 76b26d6f17..28fe43a641 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/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 ( @@ -36,6 +54,7 @@ export const FlexChildSection = ({ label="Align" /> setAlignSelf(value)} value={String(currentStyle.alignSelf?.value)} items={[ @@ -74,10 +93,17 @@ export const FlexChildSection = ({ { 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: , @@ -190,6 +198,7 @@ export const FlexChildSection = ({ label="Order" /> { switch (value) { case "0": 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 b60de2eaf7..0f986777d5 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 @@ -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} @@ -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 ( - + {children} ); diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 71f24fe578..04f1a367cf 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/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; }; diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 569c2c2784..fa1a5a017b 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/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, number] => { + const ref = useRef(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 ( { setIsOpen(true); }} > - {children} + {children} Date: Sun, 16 Oct 2022 11:22:50 +0300 Subject: [PATCH 07/17] nit --- .../design-system/src/components/toggle-group.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index 97a02f83ca..98984118e6 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -27,18 +27,4 @@ export const Item = styled(ToggleGroupPrimitive.Item, { backgroundColor: "$colors$blue4", }, }, - // whiteSpace: "nowrap", - // fontSize: 15, - // lineHeight: 1, - // marginLeft: 1, - // "&": { - // px: "$2", - // py: "$1", - // }, - // "&:first-child": { - // marginLeft: 0, - // borderTopLeftRadius: 4, - // borderBottomLeftRadius: 4, - // }, - // "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, }); From 493843bf1ad132a78836c4a47b257eb5ae4b74f5 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Thu, 3 Nov 2022 20:59:35 +0300 Subject: [PATCH 08/17] fix merge conflicts --- .../style-panel/sections/layout/layout.tsx | 49 +++++++++++-------- .../features/style-panel/style-sections.tsx | 8 +-- .../design-system/src/components/panel.tsx | 2 +- 3 files changed, 30 insertions(+), 29 deletions(-) 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 eca26820ce..7529e48ee3 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 @@ -2,6 +2,8 @@ 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 { PropertyName } from "../../shared/property-name"; @@ -10,6 +12,16 @@ const LayoutSectionFlex = ({ sectionStyle, createBatchUpdate, }: RenderCategoryProps) => { + const { + display, + flexDirection, + flexWrap, + alignItems, + justifyContent, + alignContent, + columnGap, + rowGap, + } = sectionStyle; const batchUpdate = createBatchUpdate(); const hasMenuItems = [ flexDirection, @@ -112,7 +124,7 @@ const LayoutSectionFlex = ({ )} - + ); }; @@ -126,26 +138,10 @@ export const LayoutSection = ({ styleConfigsByCategory, moreStyleConfigsByCategory, }: RenderCategoryProps) => { - const ActiveLayout = - layouts.get(String(currentStyle.display?.value)) ?? (() => null); + const ActiveLayout = layouts.get(String(currentStyle.display?.value)); - return ( - - - - - + if (ActiveLayout) { + return ( - + ); + } + + return ( + <> + + renderProperty(entry) + )} + /> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + ); }; diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 2b9c630640..55dd03d609 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -8,13 +8,7 @@ import { } from "@webstudio-is/react-sdk"; import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data"; import type { InheritedStyle } from "./shared/get-inherited-style"; -import { - ColorControl, - TextControl, - SelectControl, - MenuControl, - FontFamilyControl, -} from "./controls"; +import * as controls from "./controls"; import { LayoutSection, FlexChildSection, diff --git a/packages/design-system/src/components/panel.tsx b/packages/design-system/src/components/panel.tsx index 414018ad6e..348cb789bc 100644 --- a/packages/design-system/src/components/panel.tsx +++ b/packages/design-system/src/components/panel.tsx @@ -5,7 +5,7 @@ export const panelStyles = css({ backgroundColor: "$slate4", borderRadius: "$1", 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$slate1, 0 0 0 1px $colors$slate8", + "0px 2px 7px rgba(0, 0, 0, 0.1), 0px 5px 17px rgba(0, 0, 0, 0.15), inset 0 0 1px 1px $colors$slate1, 0 0 0 1px $colors$slate7", }); export const Panel = styled("div", panelStyles); From 74a0ca4ac0da2fb9c06f9fed07bdf33dec7daf33 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Thu, 3 Nov 2022 21:06:27 +0300 Subject: [PATCH 09/17] fix merge conflicts cross icon name --- packages/design-system/src/components/popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 130cb8e192..7e4acb7347 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, MutableRefObject } from "react"; -import { Cross1Icon } 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"; @@ -84,7 +84,7 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { aria-label="Close" autoFocus={false} > - + From c7b921427fd5b498ffcfe8651a4bbb61eae41576 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:24:04 +0300 Subject: [PATCH 10/17] refactor to use new tokens, use value-picker-popover instead --- .../sections/flex-child/flex-child.tsx | 39 +++++++++------ .../shared/value-picker-popover.tsx | 1 + .../design-system/src/components/popover.tsx | 49 +------------------ .../src/components/toggle-group.tsx | 10 ++-- 4 files changed, 33 insertions(+), 66 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index 28fe43a641..b950e30bc7 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -1,4 +1,4 @@ -import { Flex, Grid, FloatingPopover } from "@webstudio-is/design-system"; +import { Flex, Grid } from "@webstudio-is/design-system"; import type { RenderCategoryProps } from "../../style-sections"; import { ToggleGroupControl } from "../../controls"; import { PropertyName } from "../../shared/property-name"; @@ -16,6 +16,7 @@ import { OrderLastIcon, EllipsesIcon, } from "@webstudio-is/icons"; +import { ValuePickerPopover } from "../../shared/value-picker-popover"; export const FlexChildSection = ({ setProperty, @@ -47,7 +48,7 @@ export const FlexChildSection = ({ }; return ( - + - + - + - + } > - - + + + + ), label: "More sizing options", value: "", @@ -228,10 +237,10 @@ export const FlexChildSection = ({ }, { child: ( - + } > - - + + + + ), label: "Customize order", value: "", diff --git a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx index 0195cfadd7..f2cad9a0d2 100644 --- a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx +++ b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx @@ -4,6 +4,7 @@ import { PopoverContent, PopoverHeader, PopoverPortal, + Flex, } from "@webstudio-is/design-system"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { MutableRefObject, useRef, useState } from "react"; diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 7340fecee6..980b54d517 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -78,7 +78,7 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { { export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverClose = PopoverPrimitive.Close; export const PopoverPortal = PopoverPrimitive.Portal; - -const useSideOffset = ( - isOpen: boolean -): [MutableRefObject, number] => { - const ref = useRef(null); - const sideOffset = - isOpen && ref.current !== null ? 240 - ref.current.offsetWidth : 0; - return [ref, sideOffset]; -}; - -export const FloatingPopover = ({ - title, - content, - children, -}: { - title: string; - content: JSX.Element; - children: JSX.Element; -}) => { - const [isOpen, setIsOpen] = useState(false); - const [ref, sideOffset] = useSideOffset(isOpen); - - return ( - - { - setIsOpen(true); - }} - > - {children} - - - - - {content} - - - - ); -}; diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index 1431a0ac1f..421cfc312a 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -3,8 +3,8 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; export const Root = styled(ToggleGroupPrimitive.Root, { display: "inline-flex", - borderRadius: "$1", - boxShadow: `0 0 0 1px $colors$slate7`, + borderRadius: "$spacing$3", + boxShadow: `0 0 0 $spacing$1 $colors$slate7`, padding: 2, }); @@ -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,6 +31,7 @@ export const Item = styled(ToggleGroupPrimitive.Item, { }, "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, "&:hover": { backgroundColor: "$slateA3" }, + "&:focus": { boxShadow: "0 0 0 $spacing$2 $colors$blue10", zIndex: 1 }, "&[data-state=on]": { backgroundColor: "$slate5", "&[data-breakpoint=true]": { From 047029a3214dbc10a15f9c47b2bb1105047dae32 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:49:45 +0300 Subject: [PATCH 11/17] typescript nits --- .../app/designer/features/style-panel/shared/property-name.tsx | 1 - .../features/style-panel/shared/value-picker-popover.tsx | 1 - .../app/designer/features/style-panel/style-sections.tsx | 2 +- packages/design-system/src/components/popover.tsx | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) 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 d667541bad..303d86d708 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 @@ -28,7 +28,6 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => { color: "$hiContrast", }), }} - htmlFor={property} > {label} diff --git a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx index f2cad9a0d2..0195cfadd7 100644 --- a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx +++ b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx @@ -4,7 +4,6 @@ import { PopoverContent, PopoverHeader, PopoverPortal, - Flex, } from "@webstudio-is/design-system"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { MutableRefObject, useRef, useState } from "react"; diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 55dd03d609..04112db691 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -43,7 +43,7 @@ export type RenderCategoryProps = { createBatchUpdate: CreateBatchUpdate; currentStyle: Style; sectionStyle: { - [Property in keyof Style]: RenderPropertyProps; + [Property in Required]: RenderPropertyProps; }; inheritedStyle: InheritedStyle; category: Category; diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 980b54d517..215c7b2506 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, MutableRefObject } from "react"; +import React from "react"; import { CrossLargeIcon } from "@webstudio-is/icons"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Box } from "./box"; From 23f1cd40571b78b79d9ca7f5517fd7e36a099cd7 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 14 Nov 2022 18:46:00 +0300 Subject: [PATCH 12/17] address review comments --- .../controls/toggle/toggle-control.tsx | 37 +- .../sections/flex-child/flex-child.tsx | 494 +++++++++--------- .../text-toolbar/text-toolbar.tsx | 38 +- .../src/components/toggle-group.tsx | 12 +- packages/design-system/src/index.ts | 2 +- packages/icons/src/order-first.tsx | 45 +- packages/icons/src/order-last.tsx | 48 +- 7 files changed, 343 insertions(+), 333 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx index 2ccc5251f1..6005155e93 100644 --- a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx +++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx @@ -1,4 +1,10 @@ -import { Flex, ToggleGroup, Tooltip } from "@webstudio-is/design-system"; +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"; @@ -17,7 +23,7 @@ export const ToggleGroupControl = ({ }: ToggleGroupControlProps) => { const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property); return ( - {items.map(({ child, label, value }, index) => { return ( - {child} - + ); })} - + ); }; + +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", + }, + }, + }, + }, +}); diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index b950e30bc7..1674ae2135 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -18,250 +18,260 @@ import { } from "@webstudio-is/icons"; import { ValuePickerPopover } from "../../shared/value-picker-popover"; -export const FlexChildSection = ({ - setProperty, - createBatchUpdate, - currentStyle, - sectionStyle, -}: RenderCategoryProps) => { - 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 ""; - } - } - }; - +export const FlexChildSection = (props: RenderCategoryProps) => { return ( - - - setAlignSelf(value)} - value={String(currentStyle.alignSelf?.value)} - items={[ - { - child: , - label: "Do not align items", - value: "auto", - }, - { - child: , - label: "align-items: flex-start", - value: "start", - }, - { - child: , - label: "align-items: flex-end", - value: "end", - }, - { - child: , - label: "align-items: center", - value: "center", - }, - { - child: , - label: "align-items: stretch", - value: "stretch", - }, - { - child: , - label: "align-items: baseline", - value: "baseline", - }, - ]} - /> - - - - { - 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()} - items={[ - { - child: , - label: "Don't grow or shrink", - value: "none", - }, - { - child: , - label: "Grow if possible", - value: "grow", - }, - { - child: , - label: "Shrink if needed", - value: "shrink", - }, - { - child: ( - - - - - - - - - - - - - - - } - > - - - - - ), - label: "More sizing options", - value: "", - }, - ]} - /> - - - - { - switch (value) { - case "0": - case "1": - case "-1": { - setOrder(value); - break; - } - } - }} - value={String(currentStyle.order?.value)} - items={[ - { - child: , - label: "Dont't change", - value: "0", - }, - { - child: , - label: "Make first", - value: "1", - }, - { - child: , - label: "Make last", - value: "-1", - }, - { - child: ( - - - - - - - } - > - - - - - ), - label: "Customize order", - value: "", - }, - ]} - /> - + + + ); }; + +const FlexChildSectionAlign = (props: RenderCategoryProps) => { + const { setProperty, currentStyle, sectionStyle } = props; + const setAlignSelf = setProperty("alignSelf"); + + return ( + + + setAlignSelf(value)} + value={String(currentStyle.alignSelf?.value)} + items={[ + { + child: , + label: "Do not align items", + value: "auto", + }, + { + child: , + label: "align-items: flex-start", + value: "start", + }, + { + child: , + label: "align-items: flex-end", + value: "end", + }, + { + child: , + label: "align-items: center", + value: "center", + }, + { + child: , + label: "align-items: stretch", + value: "stretch", + }, + { + child: , + label: "align-items: baseline", + value: "baseline", + }, + ]} + /> + + ); +}; + +const FlexChildSectionSizing = (props: RenderCategoryProps) => { + const { createBatchUpdate, currentStyle, sectionStyle } = props; + const setSizing = createBatchUpdate(); + + return ( + + + { + 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: , + label: "Don't grow or shrink", + value: "none", + }, + { + child: , + label: "Grow if possible", + value: "grow", + }, + { + child: , + label: "Shrink if needed", + value: "shrink", + }, + { + child: , + label: "More sizing options", + value: "", + }, + ]} + /> + + ); +}; + +const FlexChildSectionSizingPopover = ({ + sectionStyle, +}: RenderCategoryProps) => { + return ( + + + + + + + + + + + + + + + } + > + + + + + ); +}; + +const FlexChildSectionOrder = (props: RenderCategoryProps) => { + const { setProperty, currentStyle, sectionStyle } = props; + const setOrder = setProperty("order"); + + return ( + + + { + switch (value) { + case "0": + case "1": + case "-1": { + setOrder(value); + break; + } + } + }} + value={String(currentStyle.order?.value)} + items={[ + { + child: , + label: "Dont't change", + value: "0", + }, + { + child: , + label: "Make first", + value: "1", + }, + { + child: , + label: "Make last", + value: "-1", + }, + { + child: , + label: "Customize order", + value: "", + }, + ]} + /> + + ); +}; + +const FlexChildSectionOrderPopover = (props: RenderCategoryProps) => { + const { sectionStyle } = props; + return ( + + + + + + + } + > + + + + + ); +}; + +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 ""; +}; diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx index 149dc43b91..85d80606f1 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx +++ b/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 ( - { ...css, }} > - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + ); }; diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index 421cfc312a..25806f1486 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -1,14 +1,14 @@ 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", 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: "$loContrast", color: "$hiContrast", @@ -32,11 +32,5 @@ export const Item = styled(ToggleGroupPrimitive.Item, { "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, "&:hover": { backgroundColor: "$slateA3" }, "&:focus": { boxShadow: "0 0 0 $spacing$2 $colors$blue10", zIndex: 1 }, - "&[data-state=on]": { - backgroundColor: "$slate5", - "&[data-breakpoint=true]": { - color: "$colors$blue11", - backgroundColor: "$colors$blue4", - }, - }, + "&[data-state=on]": { backgroundColor: "$slate5" }, }); diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index a158012adc..a8646bfce6 100644 --- a/packages/design-system/src/index.ts +++ b/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"; diff --git a/packages/icons/src/order-first.tsx b/packages/icons/src/order-first.tsx index d001f8eb38..319d43a83b 100644 --- a/packages/icons/src/order-first.tsx +++ b/packages/icons/src/order-first.tsx @@ -5,41 +5,30 @@ export const OrderFirstIcon = React.forwardRef( ({ color = "currentColor", ...props }, forwardedRef) => { return ( - - - - - - - - + - ); } diff --git a/packages/icons/src/order-last.tsx b/packages/icons/src/order-last.tsx index 2d90e443a3..d5a0ea57f8 100644 --- a/packages/icons/src/order-last.tsx +++ b/packages/icons/src/order-last.tsx @@ -5,44 +5,32 @@ export const OrderLastIcon = React.forwardRef( ({ color = "currentColor", ...props }, forwardedRef) => { return ( - - - - - - - - + - ); } ); -OrderLastIcon.displayName = "OrderFirstIcon"; +OrderLastIcon.displayName = "OrderLastIcon"; From 2de82e3c191fc854c859a7b74c0b0d41cde26da4 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 14 Nov 2022 20:05:53 +0300 Subject: [PATCH 13/17] add back htmlFor, and comments about zIndex usage --- .../app/designer/features/style-panel/shared/property-name.tsx | 1 + packages/design-system/src/components/toggle-group.tsx | 1 + 2 files changed, 2 insertions(+) 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 303d86d708..260911c56a 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 @@ -28,6 +28,7 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => { color: "$hiContrast", }), }} + htmlFor={String(property)} > {label} diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index 25806f1486..8cb67c13c7 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -31,6 +31,7 @@ export const ToggleGroupItem = styled(ToggleGroupPrimitive.Item, { }, "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, "&:hover": { backgroundColor: "$slateA3" }, + // @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" }, }); From dd04df23d88dfef3f32f8f296f76d5fb20cfcafb Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Tue, 15 Nov 2022 18:07:29 +0300 Subject: [PATCH 14/17] use size 2 icon for close button size one seems to revert focus/hover states --- packages/design-system/src/components/popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 215c7b2506..1793570576 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -76,7 +76,7 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { {title} Date: Tue, 15 Nov 2022 19:21:05 +0300 Subject: [PATCH 15/17] remove focus reset styles on close popover button --- packages/design-system/src/components/popover.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 1793570576..81275980fa 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -79,7 +79,6 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { size="2" css={{ marginRight: "$spacing$5", - "&:not(:hover):focus": { background: "none" }, }} aria-label="Close" autoFocus={false} From f0fd60ef8e895773919497d10498de21cf49ac4d Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Tue, 15 Nov 2022 19:33:21 +0300 Subject: [PATCH 16/17] autoFocus false doesn't event do anything in this context --- packages/design-system/src/components/popover.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 81275980fa..dda4c1c1d6 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -81,7 +81,6 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => { marginRight: "$spacing$5", }} aria-label="Close" - autoFocus={false} > From 6604ee349a2db7d00a0157c4b78fe6724050b726 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Tue, 15 Nov 2022 19:46:12 +0300 Subject: [PATCH 17/17] always have content semantically on-top for proper focus state --- .../features/style-panel/shared/value-picker-popover.tsx | 2 +- packages/design-system/src/components/popover.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx index 0195cfadd7..816b4d4bfe 100644 --- a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx +++ b/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 }} > - {content} + diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index dda4c1c1d6..def00764ee 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -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 ( - <> + { - + ); };