From 089c1b30f71028b084d2c014e0d5053645e1d077 Mon Sep 17 00:00:00 2001 From: Andrew Hemans Date: Tue, 29 Apr 2025 16:17:35 -0700 Subject: [PATCH 1/5] set up new layout for size section --- .../components/sidebar-tabs/SizeSection.tsx | 290 +++++++----------- 1 file changed, 109 insertions(+), 181 deletions(-) diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx index adb65dbaf07..feda63f6273 100644 --- a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx +++ b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx @@ -126,182 +126,111 @@ class SizeSection_ extends StyleComponent< hasMore data-test-id="size-section" > - {(renderMaybeCollapsibleRows) => ( -
- {isSvg(this.props.expsProvider) && ( - - SVGs have no default size, so setting width to hug or auto - will cause it to stretch to fill the parent container. -
- } - /> - )} - {renderMaybeCollapsibleRows([ - { - collapsible: false, - content: ( - - - - ), - }, - { - collapsible: !isSetOrInherited( - getValueSetState(...this.definedIndicators("min-width")) - ), - content: ( - - - - ), - }, - { - collapsible: !isSetOrInherited( - getValueSetState(...this.definedIndicators("max-width")) - ), - content: ( - - - - ), - }, - { - collapsible: false, - content: ( - <> - - - - - - ), - }, - { - collapsible: !isSetOrInherited( - getValueSetState(...this.definedIndicators("min-height")) - ), - content: ( - - - - ), - }, - { - collapsible: !isSetOrInherited( - getValueSetState(...this.definedIndicators("max-height")) - ), - content: ( - - - - ), - }, - { - collapsible: - !isSetOrInherited( - getValueSetState( - ...this.definedIndicators("flex-grow", "flex-shrink") - ) - ) && - !isSetOrInherited( - getValueSetState(...this.definedIndicators("flex-basis")) - ), - content: , - }, - { - collapsible: !isSetOrInherited( - getValueSetState( - ...this.definedIndicators("flex-grow", "flex-shrink") - ) - ), - content: ( - - ), - }, - { - collapsible: !isSetOrInherited( - getValueSetState(...this.definedIndicators("flex-basis")) - ), - content: ( - - ), - }, - ])} - - )} +
+ {isSvg(this.props.expsProvider) && ( + + SVGs have no default size, so setting width to hug or auto + will cause it to stretch to fill the parent container. +
+ } + /> + )} + + + + + + + + + + + + + + + + + + ); } @@ -473,6 +402,7 @@ const SizeControl = observer(function SizeRow(props: { label={capitalizeFirst(prop)} className={S.dimField} styleName={prop} + labelSize="small" initialMenuItems={() => new DimManip( expsProvider.studioCtx, @@ -642,10 +572,8 @@ const FlexGrowControls = observer(function FlexGrowControls(props: { return ( <> - + {renderSizing("flex-grow", "Grow", "Grow to fill available space")} - - {renderSizing("flex-shrink", "Shrink", "Shrink if not enough space")} @@ -654,7 +582,7 @@ const FlexGrowControls = observer(function FlexGrowControls(props: { function toDisplay(val: string, stretchLabel: string, isRoot: boolean) { if (val === "wrap") { - val = "Hug content"; + val = "Hug"; } else if (val === CONTENT_LAYOUT_FULL_BLEED) { val = "Full bleed"; if (isRoot) { @@ -672,7 +600,7 @@ function toDisplay(val: string, stretchLabel: string, isRoot: boolean) { } function fromDisplay(val: string, stretchLabel: string) { - if (val === "Hug content") { + if (val === "Hug") { val = "wrap"; } else if (val === "Full bleed") { val = CONTENT_LAYOUT_FULL_BLEED; From 59d5ec8f1120fada8c6d2ee0eb6adf579b5c9a67 Mon Sep 17 00:00:00 2001 From: Andrew Hemans Date: Wed, 30 Apr 2025 14:29:21 -0700 Subject: [PATCH 2/5] added in collapsible control --- .../components/sidebar-tabs/SizeSection.tsx | 359 ++++++++++-------- 1 file changed, 193 insertions(+), 166 deletions(-) diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx index feda63f6273..5009fb1b1d6 100644 --- a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx +++ b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx @@ -8,7 +8,6 @@ import { LabeledStyleDimItem, LabeledStyleDimItemRow, LabeledStyleSwitchItem, - SectionSeparator, shouldBeDisabled, } from "@/wab/client/components/sidebar/sidebar-helpers"; import { SidebarSection } from "@/wab/client/components/sidebar/SidebarSection"; @@ -23,7 +22,9 @@ import { useStyleComponent, } from "@/wab/client/components/style-controls/StyleComponent"; import { Icon as IconComponent } from "@/wab/client/components/widgets/Icon"; -import IconButton from "@/wab/client/components/widgets/IconButton"; +import { IconButton } from "@/wab/client/components/widgets/IconButton"; +import { Icon } from "@/wab/client/components/widgets/Icon"; +import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus"; import { DimManip } from "@/wab/client/DimManip"; import { default as PlasmicIcon__Stretch, @@ -66,9 +67,11 @@ import { Alert, Menu } from "antd"; import cn from "classnames"; import { observer } from "mobx-react"; import React from "react"; +import ChevronUpSvgIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__ChevronUpSvg"; +import ChevronDownSvgIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__ChevronDownSvg"; interface SizePanelSectionState { - showMore: boolean; + isOpen: boolean; } class SizeSection_ extends StyleComponent< @@ -78,8 +81,21 @@ class SizeSection_ extends StyleComponent< constructor(props: StyleComponentProps) { super(props); this.state = { - showMore: false, + isOpen: true, }; + this.onClick = this.onClick.bind(this); + } + + async onClick() { + const { isOpen } = this.state; + + if (isOpen) { + await this.studioCtx().change(({ success }) => { + return success(); + }); + } + + this.setState({ isOpen: !isOpen }); } render() { @@ -123,10 +139,18 @@ class SizeSection_ extends StyleComponent< "flex-basis", ]} title={"Size"} - hasMore data-test-id="size-section" + onHeaderClick={this.onClick} + emptyBody={this.state.isOpen ? false : true} + controls={ + + + + } > -
+ <> {isSvg(this.props.expsProvider) && ( )} - - - - - - - - - - - - - - - - - -
+ {this.state.isOpen && ( + <> + + + + + + + + + + + + + + + + + + )} + ); } @@ -412,74 +439,74 @@ const SizeControl = observer(function SizeRow(props: { ).renderConvertMenuItems() } disabledTooltip={disabledTooltip} - rightExtras={ - !isDisabled && ( -
- {value !== "stretch" && ( - setProp("stretch")} - className={cn(S.toggleSizingIcon, { - [S.toggleSizingIcon__height]: prop === "height", - })} - > - - - )} - {value !== "wrap" && value !== "auto" && ( - setProp("wrap")} - className={cn(S.toggleSizingIcon, { - [S.toggleSizingIcon__height]: prop === "height", - })} - > - - - )} - {prop === "width" && isDeepContentLayoutChild && !isRoot && ( - <> - {value !== CONTENT_LAYOUT_WIDE && ( - setProp(CONTENT_LAYOUT_WIDE)} - className={S.toggleSizingIcon} - > - - - )} - {value !== CONTENT_LAYOUT_FULL_BLEED && ( - setProp(CONTENT_LAYOUT_FULL_BLEED)} - className={S.toggleSizingIcon} - > - - - )} - - )} -
- ) - } + // rightExtras={ + // !isDisabled && ( + //
+ // {value !== "stretch" && ( + // setProp("stretch")} + // className={cn(S.toggleSizingIcon, { + // [S.toggleSizingIcon__height]: prop === "height", + // })} + // > + // + // + // )} + // {value !== "wrap" && value !== "auto" && ( + // setProp("wrap")} + // className={cn(S.toggleSizingIcon, { + // [S.toggleSizingIcon__height]: prop === "height", + // })} + // > + // + // + // )} + // {prop === "width" && isDeepContentLayoutChild && !isRoot && ( + // <> + // {value !== CONTENT_LAYOUT_WIDE && ( + // setProp(CONTENT_LAYOUT_WIDE)} + // className={S.toggleSizingIcon} + // > + // + // + // )} + // {value !== CONTENT_LAYOUT_FULL_BLEED && ( + // setProp(CONTENT_LAYOUT_FULL_BLEED)} + // className={S.toggleSizingIcon} + // > + // + // + // )} + // + // )} + //
+ // ) + // } dimOpts={{ disabled: isDisabled || !isResizable, extraOptions, @@ -490,7 +517,7 @@ const SizeControl = observer(function SizeRow(props: { allowedUnits: isRoot ? getLengthUnits("px").filter((x) => x !== "%") : getLengthUnits("px"), - hideArrow: true, + // hideArrow: true, }} tokenType={TokenType.Spacing} vsh={vsh} From 5c57cd7d6a2c5f71de891859551d147058c1e16d Mon Sep 17 00:00:00 2001 From: Andrew Hemans Date: Wed, 30 Apr 2025 14:33:48 -0700 Subject: [PATCH 3/5] removed collapsible toggle --- .../components/sidebar-tabs/SizeSection.tsx | 129 +----------------- 1 file changed, 2 insertions(+), 127 deletions(-) diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx index 5009fb1b1d6..58522e50c31 100644 --- a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx +++ b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx @@ -2,8 +2,6 @@ import { WithContextMenu } from "@/wab/client/components/ContextMenu"; import S from "@/wab/client/components/sidebar-tabs/SizeSection.module.scss"; import { FullRow, - getValueSetState, - isSetOrInherited, LabeledItemRow, LabeledStyleDimItem, LabeledStyleDimItemRow, @@ -22,18 +20,9 @@ import { useStyleComponent, } from "@/wab/client/components/style-controls/StyleComponent"; import { Icon as IconComponent } from "@/wab/client/components/widgets/Icon"; -import { IconButton } from "@/wab/client/components/widgets/IconButton"; -import { Icon } from "@/wab/client/components/widgets/Icon"; -import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus"; import { DimManip } from "@/wab/client/DimManip"; -import { - default as PlasmicIcon__Stretch, - default as StretchIcon, -} from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Stretch"; -import { - default as PlasmicIcon__Wrap, - default as WrapIcon, -} from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Wrap"; +import { default as StretchIcon } from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Stretch"; +import { default as WrapIcon } from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Wrap"; import WidthFullBleedIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__WidthFullBleed"; import WidthStandardStretchIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__WidthStandardStretch"; import WidthWideIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__WidthWide"; @@ -64,11 +53,8 @@ import { capitalizeFirst } from "@/wab/shared/strs"; import { $$$ } from "@/wab/shared/TplQuery"; import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper"; import { Alert, Menu } from "antd"; -import cn from "classnames"; import { observer } from "mobx-react"; import React from "react"; -import ChevronUpSvgIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__ChevronUpSvg"; -import ChevronDownSvgIcon from "@/wab/client/plasmic/plasmic_kit_icons/icons/PlasmicIcon__ChevronDownSvg"; interface SizePanelSectionState { isOpen: boolean; @@ -83,19 +69,6 @@ class SizeSection_ extends StyleComponent< this.state = { isOpen: true, }; - this.onClick = this.onClick.bind(this); - } - - async onClick() { - const { isOpen } = this.state; - - if (isOpen) { - await this.studioCtx().change(({ success }) => { - return success(); - }); - } - - this.setState({ isOpen: !isOpen }); } render() { @@ -104,26 +77,6 @@ class SizeSection_ extends StyleComponent< this.props.vsh ?? makeVariantedStylesHelperFromCurrentCtx(this.studioCtx()); - const isMinMaxWidthSet = isSetOrInherited( - getValueSetState(...this.definedIndicators("min-width", "max-width")) - ); - - const isMinMaxHeightSet = isSetOrInherited( - getValueSetState(...this.definedIndicators("min-width", "max-width")) - ); - - const tpl = - this.props.expsProvider instanceof TplExpsProvider - ? this.props.expsProvider.tpl - : undefined; - const deepLayoutParent = tpl - ? $$$(tpl).layoutParent({ throughSlot: true }).maybeOneTpl() - : undefined; - const isDeepContentLayoutChild = - !!deepLayoutParent && isContentLayoutTpl(deepLayoutParent); - const isDeepContentLayout = - !!tpl && isContentLayoutTpl(tpl, { deep: true }); - return ( - - - } > <> {isSvg(this.props.expsProvider) && ( @@ -439,74 +383,6 @@ const SizeControl = observer(function SizeRow(props: { ).renderConvertMenuItems() } disabledTooltip={disabledTooltip} - // rightExtras={ - // !isDisabled && ( - //
- // {value !== "stretch" && ( - // setProp("stretch")} - // className={cn(S.toggleSizingIcon, { - // [S.toggleSizingIcon__height]: prop === "height", - // })} - // > - // - // - // )} - // {value !== "wrap" && value !== "auto" && ( - // setProp("wrap")} - // className={cn(S.toggleSizingIcon, { - // [S.toggleSizingIcon__height]: prop === "height", - // })} - // > - // - // - // )} - // {prop === "width" && isDeepContentLayoutChild && !isRoot && ( - // <> - // {value !== CONTENT_LAYOUT_WIDE && ( - // setProp(CONTENT_LAYOUT_WIDE)} - // className={S.toggleSizingIcon} - // > - // - // - // )} - // {value !== CONTENT_LAYOUT_FULL_BLEED && ( - // setProp(CONTENT_LAYOUT_FULL_BLEED)} - // className={S.toggleSizingIcon} - // > - // - // - // )} - // - // )} - //
- // ) - // } dimOpts={{ disabled: isDisabled || !isResizable, extraOptions, @@ -517,7 +393,6 @@ const SizeControl = observer(function SizeRow(props: { allowedUnits: isRoot ? getLengthUnits("px").filter((x) => x !== "%") : getLengthUnits("px"), - // hideArrow: true, }} tokenType={TokenType.Spacing} vsh={vsh} From 7085192ca69e42df69089c010f178c9c04d439c7 Mon Sep 17 00:00:00 2001 From: Andrew Hemans Date: Thu, 1 May 2025 08:14:28 -0700 Subject: [PATCH 4/5] added a bit more gap in the two column layout for menu buttons --- .../wab/src/wab/client/components/sidebar/sidebar-helpers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx index 3660699a511..84799e7fa45 100644 --- a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx +++ b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx @@ -1028,7 +1028,7 @@ export const FullRow = React.forwardRef(function FullRow( ? { display: "grid", gridTemplateColumns: "1fr ".repeat(props.children.length), - gridColumnGap: 24, + gridColumnGap: 28, } : {}), ...(props.hidden ? { visibility: "hidden" } : {}), From 7c0433b1ff053287debc08069fe9123c91166e74 Mon Sep 17 00:00:00 2001 From: Andrew Hemans Date: Tue, 6 May 2025 09:31:10 -0700 Subject: [PATCH 5/5] updated size section to remove unnecessary fragments --- .../components/sidebar-tabs/SizeSection.tsx | 222 ++++++++---------- .../components/sidebar/sidebar-helpers.tsx | 2 +- 2 files changed, 104 insertions(+), 120 deletions(-) diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx index 58522e50c31..3da90ecbbe5 100644 --- a/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx +++ b/platform/wab/src/wab/client/components/sidebar-tabs/SizeSection.tsx @@ -56,19 +56,9 @@ import { Alert, Menu } from "antd"; import { observer } from "mobx-react"; import React from "react"; -interface SizePanelSectionState { - isOpen: boolean; -} - -class SizeSection_ extends StyleComponent< - StyleComponentProps, - SizePanelSectionState -> { +class SizeSection_ extends StyleComponent { constructor(props: StyleComponentProps) { super(props); - this.state = { - isOpen: true, - }; } render() { @@ -94,114 +84,108 @@ class SizeSection_ extends StyleComponent< title={"Size"} data-test-id="size-section" > - <> - {isSvg(this.props.expsProvider) && ( - - SVGs have no default size, so setting width to hug or auto - will cause it to stretch to fill the parent container. - - } - /> - )} - {this.state.isOpen && ( - <> - - - - - - - - - - - - - - - - - - )} - + {isSvg(this.props.expsProvider) && ( + + SVGs have no default size, so setting width to hug or auto will + cause it to stretch to fill the parent container. + + } + /> + )} + + + + + + + + + + + + + + + + ); } diff --git a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx index 84799e7fa45..3660699a511 100644 --- a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx +++ b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx @@ -1028,7 +1028,7 @@ export const FullRow = React.forwardRef(function FullRow( ? { display: "grid", gridTemplateColumns: "1fr ".repeat(props.children.length), - gridColumnGap: 28, + gridColumnGap: 24, } : {}), ...(props.hidden ? { visibility: "hidden" } : {}),