From e7dad502dbec97d7a0301bdf7b9c14f9b443903b Mon Sep 17 00:00:00 2001 From: victor Date: Wed, 26 Feb 2025 09:41:37 +0530 Subject: [PATCH 1/5] feat: replaced overflow hidden with overflow clip in styles panel (#4203) --- .../style-panel/sections/size/size.tsx | 6 ++-- packages/icons/icons/crop.svg | 11 ++++++++ .../icons/src/__generated__/components.tsx | 28 +++++++++++++++++++ packages/icons/src/__generated__/svg.ts | 2 ++ 4 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 packages/icons/icons/crop.svg diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx index 74d7b213ebd2..884620cae261 100644 --- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx @@ -15,10 +15,10 @@ import { import { PositionControl, SelectControl, TextControl } from "../../controls"; import { EyeOpenIcon, - EyeClosedIcon, ScrollIcon, AutoScrollIcon, EllipsesIcon, + CropIcon, } from "@webstudio-is/icons"; import { StyleSection } from "../../shared/style-section"; import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control"; @@ -124,10 +124,10 @@ export const Section = () => { value: "visible", }, { - child: , + child: , description: "Content that exceeds the container's size is clipped and hidden without scrollbars.", - value: "hidden", + value: "clip", }, { child: , diff --git a/packages/icons/icons/crop.svg b/packages/icons/icons/crop.svg new file mode 100644 index 000000000000..54e74c3aef35 --- /dev/null +++ b/packages/icons/icons/crop.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/packages/icons/src/__generated__/components.tsx b/packages/icons/src/__generated__/components.tsx index d4103dd8e236..c8262e82ba3a 100644 --- a/packages/icons/src/__generated__/components.tsx +++ b/packages/icons/src/__generated__/components.tsx @@ -1855,6 +1855,34 @@ export const CopyIcon: IconComponent = forwardRef( ); CopyIcon.displayName = "CopyIcon"; +export const CropIcon: IconComponent = forwardRef( + ({ fill = "none", size = 16, ...props }, forwardedRef) => { + return ( + + + + + + + ); + } +); +CropIcon.displayName = "CropIcon"; + export const DashedBorderIcon: IconComponent = forwardRef( ({ fill = "none", size = 16, ...props }, forwardedRef) => { return ( diff --git a/packages/icons/src/__generated__/svg.ts b/packages/icons/src/__generated__/svg.ts index c9d4cdb72dad..721c360827ef 100644 --- a/packages/icons/src/__generated__/svg.ts +++ b/packages/icons/src/__generated__/svg.ts @@ -138,6 +138,8 @@ export const ContentIcon = ``; +export const CropIcon = ``; + export const DashedBorderIcon = ``; export const DescriptionIcon = ``; From 34a599ac17f04a5a81d2ef78be16714ed8b961dc Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 27 Mar 2025 10:15:21 +0000 Subject: [PATCH 2/5] update icon via figma --- packages/icons/icons/crop.svg | 15 +++++++++------ packages/icons/src/__generated__/components.tsx | 10 +++------- packages/icons/src/__generated__/svg.ts | 2 +- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/icons/icons/crop.svg b/packages/icons/icons/crop.svg index 54e74c3aef35..3b823212ec88 100644 --- a/packages/icons/icons/crop.svg +++ b/packages/icons/icons/crop.svg @@ -1,11 +1,14 @@ - - - - - + diff --git a/packages/icons/src/__generated__/components.tsx b/packages/icons/src/__generated__/components.tsx index c8262e82ba3a..90580122be0d 100644 --- a/packages/icons/src/__generated__/components.tsx +++ b/packages/icons/src/__generated__/components.tsx @@ -1867,16 +1867,12 @@ export const CropIcon: IconComponent = forwardRef( {...props} ref={forwardedRef} > - - - - + d="M4.167 1.5v9.333A1.333 1.333 0 0 0 5.5 12.167h9.333m-2.666 2.666V5.5a1.333 1.333 0 0 0-1.334-1.333H1.5" + /> ); } diff --git a/packages/icons/src/__generated__/svg.ts b/packages/icons/src/__generated__/svg.ts index 721c360827ef..add35be6d867 100644 --- a/packages/icons/src/__generated__/svg.ts +++ b/packages/icons/src/__generated__/svg.ts @@ -138,7 +138,7 @@ export const ContentIcon = ``; -export const CropIcon = ``; +export const CropIcon = ``; export const DashedBorderIcon = ``; From 6c55610e2f9a217d46ab92471f308621dfcc88bd Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 29 Apr 2025 15:58:28 +0400 Subject: [PATCH 3/5] Bring back hidden and drop scroll --- .../style-panel/sections/size/size.tsx | 9 ++-- packages/icons/icons/scroll.svg | 44 ------------------- .../icons/src/__generated__/components.tsx | 24 ---------- packages/icons/src/__generated__/svg.ts | 2 - 4 files changed, 4 insertions(+), 75 deletions(-) delete mode 100644 packages/icons/icons/scroll.svg diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx index 884620cae261..608c1b9659e5 100644 --- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx @@ -15,10 +15,10 @@ import { import { PositionControl, SelectControl, TextControl } from "../../controls"; import { EyeOpenIcon, - ScrollIcon, AutoScrollIcon, EllipsesIcon, CropIcon, + EyeClosedIcon, } from "@webstudio-is/icons"; import { StyleSection } from "../../shared/style-section"; import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control"; @@ -130,12 +130,11 @@ export const Section = () => { value: "clip", }, { - child: , + child: , description: - "Scrollbars are added to the container, allowing users to scroll and view the exceeding content.", - value: "scroll", + "Content that exceeds the container's size is clipped and hidden without scrollbars.", + value: "hidden", }, - { child: , description: diff --git a/packages/icons/icons/scroll.svg b/packages/icons/icons/scroll.svg deleted file mode 100644 index 25777929ba43..000000000000 --- a/packages/icons/icons/scroll.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - diff --git a/packages/icons/src/__generated__/components.tsx b/packages/icons/src/__generated__/components.tsx index 90580122be0d..85139186056a 100644 --- a/packages/icons/src/__generated__/components.tsx +++ b/packages/icons/src/__generated__/components.tsx @@ -4150,30 +4150,6 @@ export const ResourceIcon: IconComponent = forwardRef( ); ResourceIcon.displayName = "ResourceIcon"; -export const ScrollIcon: IconComponent = forwardRef( - ({ fill = "none", size = 16, ...props }, forwardedRef) => { - return ( - - - - ); - } -); -ScrollIcon.displayName = "ScrollIcon"; - export const SearchIcon: IconComponent = forwardRef( ({ fill = "none", size = 16, ...props }, forwardedRef) => { return ( diff --git a/packages/icons/src/__generated__/svg.ts b/packages/icons/src/__generated__/svg.ts index add35be6d867..506b399bb5f1 100644 --- a/packages/icons/src/__generated__/svg.ts +++ b/packages/icons/src/__generated__/svg.ts @@ -308,8 +308,6 @@ export const ResetIcon = ``; -export const ScrollIcon = ``; - export const SearchIcon = ``; export const SectionLinkIcon = ``; From c6a1741dc4b774b027613805a8f55b540eea9092 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 29 Apr 2025 15:59:56 +0400 Subject: [PATCH 4/5] Tweak descriptions --- .../app/builder/features/style-panel/sections/size/size.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx index 608c1b9659e5..082842d96ae1 100644 --- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx @@ -126,13 +126,13 @@ export const Section = () => { { child: , description: - "Content that exceeds the container's size is clipped and hidden without scrollbars.", + "Content that exceeds the container's size is clipped without scrollbars.", value: "clip", }, { child: , description: - "Content that exceeds the container's size is clipped and hidden without scrollbars.", + "Content that exceeds the container's size is hidden without scrollbars.", value: "hidden", }, { From f750c5d9835c24cf577a09abcf5f4a3baa013fb9 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 29 Apr 2025 16:08:15 +0400 Subject: [PATCH 5/5] Trigger rebuild