From 350b9f3355a287304551515eae933f91d0bdb1bd Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 11 May 2025 11:18:59 +0100 Subject: [PATCH 1/5] build: Release 11-05-2025 From 7745c5f3a0e57f7c77cfea3f80737da1e602b29c Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 11 May 2025 16:16:53 +0100 Subject: [PATCH 2/5] fix: Rewrite overflow clip and hidden description (#5201) ## Description Rewrite overflow clip and hidden description and move it to css-data ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file --- .../style-panel/sections/size/size.tsx | 12 ++++------- .../property-value-descriptions.ts | 21 +++++++++++-------- 2 files changed, 16 insertions(+), 17 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 082842d96ae1..b8fbbe7352fc 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 @@ -119,26 +119,22 @@ export const Section = () => { items={[ { child: , - description: - "Content is fully visible and extends beyond the container if it exceeds its size.", + description: propertyDescriptions["overflowX:visible"], value: "visible", }, { child: , - description: - "Content that exceeds the container's size is clipped without scrollbars.", + description: propertyDescriptions["overflowX:clip"], value: "clip", }, { child: , - description: - "Content that exceeds the container's size is hidden without scrollbars.", + description: propertyDescriptions["overflowX:hidden"], value: "hidden", }, { child: , - description: - "Scrollbars are added to the container only when necessary, based on the content size.", + description: propertyDescriptions["overflowX:auto"], value: "auto", }, ]} diff --git a/packages/css-data/src/__generated__/property-value-descriptions.ts b/packages/css-data/src/__generated__/property-value-descriptions.ts index 3f5c22cff54a..a01152545928 100644 --- a/packages/css-data/src/__generated__/property-value-descriptions.ts +++ b/packages/css-data/src/__generated__/property-value-descriptions.ts @@ -3109,25 +3109,28 @@ export const declarationsGenerated = { "overflowWrap:inherit": "Inherits a property from its parent element.", "overflowWrap:unset": "Resets to its default value.", "overflowX:visible": - "The content is not clipped and may be rendered outside the content box.", - "overflowX:hidden": "The content is clipped and not visible.", + "Content is fully visible and extends beyond the container if it exceeds its size.", + "overflowX:hidden": + "Content that exceeds the container’s size is hidden without scrollbars. It can be scrolled with JavaScript or via a scroll-timeline animation.", "overflowX:clip": - "Creates no scrolling mechanism but clips the content at the borders of the element.", + "Content that exceeds the container’s size is clipped without scrollbars. It can not be scrolled with JavaScript or via a scroll-timeline animation.", "overflowX:scroll": "Creates a scrolling mechanism for the content outside the box.", "overflowX:auto": - "Adds a horizontal scrollbar when the content exceeds the borders of the element.", + "Scrollbars are added to the container only when necessary, based on the content size.", "overflowX:initial": "Sets the default value of a property.", "overflowX:inherit": "Inherits a property from its parent element.", "overflowX:unset": "Resets to its default value.", "overflowY:visible": - "The content is not clipped and may be rendered outside the content box.", - "overflowY:hidden": "Hides any content that overflows the element.", - "overflowY:clip": "Clips any content that overflows the element.", + "Content is fully visible and extends beyond the container if it exceeds its size.", + "overflowY:hidden": + "Content that exceeds the container’s size is hidden without scrollbars. It can be scrolled with JavaScript or via a scroll-timeline animation.", + "overflowY:clip": + "Content that exceeds the container’s size is clipped without scrollbars. It can not be scrolled with JavaScript or via a scroll-timeline animation.", "overflowY:scroll": - "Adds a vertical scrollbar when content overflows the element.", + "Creates a scrolling mechanism for the content outside the box.", "overflowY:auto": - "Adds a vertical scrollbar when content overflows the element, only when necessary.", + "Scrollbars are added to the container only when necessary, based on the content size.", "overscrollBehavior:contain": "Prevents pull-to-refresh and rubber band scrolling outside of the element.", "overscrollBehavior:none": From 482d37745410a2bbf80d167b33919b0c53d5a95b Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sun, 11 May 2025 22:29:34 +0400 Subject: [PATCH 3/5] fix: set correct date time property in Time component All html attributes all converted to react style though in case of Time property was converted. The easiest solution is to rename the actual property to accept converted time. --- .../sdk-components-react/src/__generated__/time.props.ts | 2 +- packages/sdk-components-react/src/time.tsx | 6 +++--- packages/sdk-components-react/src/time.ws.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/sdk-components-react/src/__generated__/time.props.ts b/packages/sdk-components-react/src/__generated__/time.props.ts index 54f507eff194..407addcda34b 100644 --- a/packages/sdk-components-react/src/__generated__/time.props.ts +++ b/packages/sdk-components-react/src/__generated__/time.props.ts @@ -215,7 +215,7 @@ export const props: Record = { defaultValue: "medium", options: ["full", "long", "medium", "short", "none"], }, - datetime: { + dateTime: { required: false, control: "text", type: "string", diff --git a/packages/sdk-components-react/src/time.tsx b/packages/sdk-components-react/src/time.tsx index 761ac784f58d..2f7961efaeb9 100644 --- a/packages/sdk-components-react/src/time.tsx +++ b/packages/sdk-components-react/src/time.tsx @@ -346,7 +346,7 @@ const parseDate = (datetimeString: string) => { }; type TimeProps = { - datetime?: string; + dateTime?: string; language?: Language; country?: Country; dateStyle?: DateStyle; @@ -360,7 +360,7 @@ export const Time = forwardRef, TimeProps>( country = DEFAULT_COUNTRY, dateStyle = DEFAULT_DATE_STYLE, timeStyle = DEFAULT_TIME_STYLE, - datetime = INITIAL_DATE_STRING, + dateTime = INITIAL_DATE_STRING, ...props }, ref @@ -375,7 +375,7 @@ export const Time = forwardRef, TimeProps>( }; const datetimeString = - datetime === null ? INVALID_DATE_STRING : datetime.toString(); + dateTime === null ? INVALID_DATE_STRING : dateTime.toString(); const date = parseDate(datetimeString); let formattedDate = datetimeString; diff --git a/packages/sdk-components-react/src/time.ws.ts b/packages/sdk-components-react/src/time.ws.ts index fac7407f7b73..bd772e6ee0a4 100644 --- a/packages/sdk-components-react/src/time.ws.ts +++ b/packages/sdk-components-react/src/time.ws.ts @@ -23,5 +23,5 @@ export const meta: WsComponentMeta = { export const propsMeta: WsComponentPropsMeta = { props, - initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"], + initialProps: ["dateTime", "language", "country", "dateStyle", "timeStyle"], }; From 9b2108df6c24ac7fd2a8ca23c1324c94dc734ad7 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sun, 11 May 2025 23:00:41 +0400 Subject: [PATCH 4/5] Actually proper fix --- .../sdk-components-react/src/__generated__/time.props.ts | 7 ------- packages/sdk-components-react/src/time.tsx | 6 +++--- packages/sdk-components-react/src/time.ws.ts | 2 +- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/sdk-components-react/src/__generated__/time.props.ts b/packages/sdk-components-react/src/__generated__/time.props.ts index 407addcda34b..852f06d4a71f 100644 --- a/packages/sdk-components-react/src/__generated__/time.props.ts +++ b/packages/sdk-components-react/src/__generated__/time.props.ts @@ -215,13 +215,6 @@ export const props: Record = { defaultValue: "medium", options: ["full", "long", "medium", "short", "none"], }, - dateTime: { - required: false, - control: "text", - type: "string", - defaultValue: "dateTime attribute is not set", - description: "Machine-readable value", - }, language: { required: false, control: "select", diff --git a/packages/sdk-components-react/src/time.tsx b/packages/sdk-components-react/src/time.tsx index 2f7961efaeb9..44df0070c87c 100644 --- a/packages/sdk-components-react/src/time.tsx +++ b/packages/sdk-components-react/src/time.tsx @@ -1,4 +1,4 @@ -import { forwardRef, type ElementRef } from "react"; +import { forwardRef, type ComponentProps, type ElementRef } from "react"; const languages = [ "af", @@ -345,8 +345,7 @@ const parseDate = (datetimeString: string) => { } }; -type TimeProps = { - dateTime?: string; +type TimeProps = Pick, "dateTime"> & { language?: Language; country?: Country; dateStyle?: DateStyle; @@ -360,6 +359,7 @@ export const Time = forwardRef, TimeProps>( country = DEFAULT_COUNTRY, dateStyle = DEFAULT_DATE_STYLE, timeStyle = DEFAULT_TIME_STYLE, + // native html attribute in react style dateTime = INITIAL_DATE_STRING, ...props }, diff --git a/packages/sdk-components-react/src/time.ws.ts b/packages/sdk-components-react/src/time.ws.ts index bd772e6ee0a4..fac7407f7b73 100644 --- a/packages/sdk-components-react/src/time.ws.ts +++ b/packages/sdk-components-react/src/time.ws.ts @@ -23,5 +23,5 @@ export const meta: WsComponentMeta = { export const propsMeta: WsComponentPropsMeta = { props, - initialProps: ["dateTime", "language", "country", "dateStyle", "timeStyle"], + initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"], }; From 29a2cf0ad512427ee73353f018c476e0d5e12457 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Fri, 16 May 2025 14:55:27 +0300 Subject: [PATCH 5/5] fix: handle autoplay property in youtube and vimeo We have issue with distincting html attributes and component properties. I have an idea for proper fix. For now fast fix with just aliasing autoplay and autoPlay. --- packages/sdk-components-react/src/vimeo.tsx | 5 ++++- packages/sdk-components-react/src/youtube.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/sdk-components-react/src/vimeo.tsx b/packages/sdk-components-react/src/vimeo.tsx index bac64c6f8cc5..643dffe73b6a 100644 --- a/packages/sdk-components-react/src/vimeo.tsx +++ b/packages/sdk-components-react/src/vimeo.tsx @@ -352,6 +352,8 @@ type Props = Omit, keyof VimeoOptions> & * Example: "Video about web development tips". */ title?: string | undefined; + // temporary prop until props render is fixed + autoPlay?: boolean; }; type Ref = ElementRef; @@ -360,7 +362,8 @@ export const Vimeo = forwardRef( { url, loading = "lazy", - autoplay = false, + autoPlay, + autoplay = autoPlay ?? false, autopause = true, showByline = false, showControls = true, diff --git a/packages/sdk-components-react/src/youtube.tsx b/packages/sdk-components-react/src/youtube.tsx index 1c6e5d58a934..77e1344d1114 100644 --- a/packages/sdk-components-react/src/youtube.tsx +++ b/packages/sdk-components-react/src/youtube.tsx @@ -470,6 +470,8 @@ type Props = Omit< * Example: "Video about web development tips". */ title?: string | undefined; + // temporary prop until props render is fixed + autoPlay?: boolean; }; type Ref = ElementRef; @@ -478,7 +480,8 @@ export const YouTube = forwardRef( { url, loading = "lazy", - autoplay, + autoPlay, + autoplay = autoPlay ?? false, showPreview, showAnnotations, showCaptions,