Ref https://github.com/webstudio-is/webstudio/issues/4093
Here's refactoring to unlock resource UI in webhook form
Need to test in builder and on published site
1. Create webhook form in main and try to update it on this branch. So
legacy text prop should automatically migrate to resource.
2. New webhook form should create resource when type anything in action
prop
## Description
- Use mutation observer on AnimateText to check subtree changes.
- Add last resort animation restart - unpin/pin animation.
## 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
## Description
See corresponding linked PR
## 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
## Description
1. What is this PR about (link the issue and add a short description)
## 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
## Description
1. Allow matching "gr te co" -> "grid-template-columns" when searching
2. Same thing when adding a new property/value
## Steps for reproduction
1. click button
3. 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
## Description
Fixes an issue in DEV MODE where, if text is center-aligned inside
Flex/Grid,
the code below causes Chrome to scroll the editable text block to the
center of the view.
## 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
# Description
This PR introduces prototypes for a set of versatile animation
components:
• AnimateProxy: A wrapper component supporting staggered animations and
integrations with third-party animation engines.
• AnimateTextProgress: Demonstrates per-character staggered text
animations.
👉 [View Storybook
Preview](https://6382151c8b47d4399fb9fc69-uyomckzwfj.chromatic.com/iframe.html?args=&globals=&id=sdk-components-animation-animate-proxy--in-out&viewMode=story)
Features
• Added Storybook examples showcasing text animation capabilities.
• Supports custom CSS properties within keyframes for enhanced animation
flexibility.
Upcoming PRs
Future PRs will introduce more specialized animation components
utilizing the AnimateProxy:
```jsx
// Example usage of AnimateText
<AnimateProxy>
{($progress, getStylesAt) => (
<AnimateTextProgress
$progress={$progress}
getStylesAt={getStylesAt}
charWindow={50}
easing="easeInQuart"
>
{children}
</AnimateTextProgress>
)}
</AnimateProxy>
// Example usage of AnimateStager
<AnimateProxy>
{($progress, getStylesAt) => (
<Stager
$progress={$progress}
getStylesAt={getStylesAt}
// Additional props...
/>
)}
</AnimateProxy>
// Example usage of AnimateLottie
<AnimateProxy>
{($progress, getStylesAt) => (
<Lottie
$progress={$progress}
getStylesAt={getStylesAt}
// Additional props...
/>
)}
</AnimateProxy>
```
See corresponding PR: (link to be added)
## 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
Slightly refactored both space and position sections. Moved property
maps from scrub and keyboard to dedicated sections.
Also fixed keyboard highlighting in space and inset controls.
properties data are now more type safe and can accept any CssProperty
name though in case of custom properties (--string) will return
undefined.
This also removes a lot of `keyof typeof properties` castings.
Color thumb should be a button only inside of color picker when it is
clickable. In case of repeated style it is just a visual indicator.
This fixes huge react warnings about button rendered inside of another
button.
[Discussion](https://discord.com/channels/955905230107738152/1347444065402224691)
## Description
When advanced css editor is used in the style panel, we are avoiding
jumps by preserving the scroll height, but in advanced mode when there
is no parent scroll - we don't need that, so we can avoid blank space
scrollbar.
## 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
Migrated two more sections and made ComputedStyleDecl['property'] more
strict instead of just a string, now can get rid from `as StyleProperty`
casting all over the codebase.
## Description
1. What is this PR about (link the issue and add a short description)
## 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
## Description
Select the state, see it stays selected
## 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
## Description
<img width="518" alt="image"
src="https://github.com/user-attachments/assets/9326dd07-2244-4f57-ae93-a9ab3bf0f38d"
/>
When you are creating a binding from inside a variable dialog and having
popover opened from a popover, when you click outside, binding won't be
saved
## Steps for reproduction
1. create resource variable
2. close
3. edit that variabel
4. bind url
5. click outside of both popovers
6. see changes were saved
## 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
## Description
When we switched to 24px height of inputs, I forgot to update navigator
items. Currently complex components are hard to navigate because they
don't fit in the panel and you are always scrolling too much
<img width="284" alt="image"
src="https://github.com/user-attachments/assets/86800211-7290-433d-8c73-081f3fdcbb3a"
/>
<img width="283" alt="image"
src="https://github.com/user-attachments/assets/971428cf-1117-4bbf-b0e0-548e6c5bd8fa"
/>
## 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
## Description
The little link icon button
<img width="276" alt="image"
src="https://github.com/user-attachments/assets/5553a892-a3b7-46ae-b00a-c56c1a7833cf"
/>
## 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
## Description
1. What is this PR about (link the issue and add a short description)
## 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
## Description
1. added additional way to delete a declaration in addition to cmd+click
2. delete all declarations
## Steps for reproduction
1. click button
3. 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
## Description
For using in animations UI we need a reusable css editor.
## Steps for reproduction
This PR should not have changed how advanced section works at all. This
is pure refactoring.
## 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
We don't really need anything from asset object on published sites
except the name to resolve the file.
Here got rid from Asset objects for favicon, fonts and backgrounds. This
should reduce client bundle where a lot of assets are used.
User reported in discord.
Radix components like accordion does not open first item by default when
use with content block. The reason was in our default detection.
We used indexes within ancestor and when put item inside of content
block template it gets 0 but not rendered.
Here improved the logic to reset index when render inside of block
template.
<img width="837" alt="Screenshot 2025-03-01 at 21 14 09"
src="https://github.com/user-attachments/assets/788df39a-b7c5-466b-a80e-09cc40de9e3f"
/>
## Description
closes https://github.com/webstudio-is/webstudio/issues/4844
As a user when I don't know about option+click shorthand, and try to
reset spacing, only other way is to wait for the tooltip to come. If you
click, like you do on other labels - input will come but no way to
reset.
Solution: show a label next to the input.
## Steps for reproduction
1. click on any spacing value
2. see label next to input
3. test usual label functionality
## 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
Fixes https://github.com/webstudio-is/webstudio/issues/4830
Remix incorrectly navigates hashes and clear search params. Here fixed
this by using native `<a>` and tweaked the logic in builder.
Test navigating hashes (when search params are present) in builder and
on published site.
## Description
Use case 1
1. add a property
2. copy all
3. paste into any text editor
4. see that recent one is not copied
Use case 2
1. add 2 properties
2. use backspace to reset the second property
3. focus should be on the first value after deleting the second one
4. use backspace to delete the first property
5. see focus jumped to search
## Steps for reproduction
1. click button
6. 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
## Description
1. What is this PR about (link the issue and add a short description)
## 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
## Description
## 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
Bogdan Chadkin