## Description
1. Add scroll area to the to ds
2. Add scroll area to add components panel
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1335
Here I replaced assetContainersStore with assetsStore. Now deleting and
uploading states are maintained locally in assets provider. To preserve
the order of uploading assets assetsStore map has value as undefined.
This way assets.get(id) provides the same value. Though when iterating
we see missing asset.
Here removed from project package everything not related to project
mannagement.
- project no longer depends on sdk
- style updates types moved to builder
- CanvasData no longer necessary, Data from react-sdk is same
## Description
closes#877
- [x] - Seems like Esc when layer window is open broken, probably this
PR (not this, just broken will create an issue)
added `focusManagerOptions` to ArrowFocus handleKeyDown
what allows us to create nested focus navigation.
## Steps for reproduction
Create a few background layers and use arrows to navigate.
## Code Review
- [ ] hi @rpominov , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Here add check to have formatting always applied in case git hook was
ignored or not run for some reason.
Cached prettier for whole project is run within 2-3 seconds.
## Description
closes#1304
To not expose computed style or do hard currentColor recalculation. I
added currentColor: StyleValue to the styleInfo color property.
## Steps for reproduction
Set currentColor on border or background or color, see in color picker
it works
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/807
We gonna have more complicated selected state with style source "states"
so better split it into separate prop and simplify disabled state with
boolean.
Also dropped "state" style source.
## Description
To enable copy-pasting instances from webflow without creating new
breakpoints, we decided to switch by default to the breakpoints webflow
uses.
User can still switch to mobile-first breakpoints like we had before
once we have a new breakpoints editor, but then when copy/pasting from
webflow they will get the missing breakpoints added if the copied styles
are using those.
I had to temporarily hide the breakpoints editor behind a feature flag
because we need the new editor to allow editing min or max width, so
instead of adjusting this current UI, we need a new one.
I think its not a big deal right now to not have the breakpoints editor,
webflow never had one.
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/807
Moved style source menu up to style source input. This way we will not
need to drill a lot of callbacks and only pass menu element.
Later we will add even more callbacks. So this just simplifies further
development.
This option forces all type imports to have "type" specifier even though
there are other value imports.
TS 5 forces it when new verbatimModuleSyntax is enabled.
## Description
1. Enabling the popover by default now, users need it asap (still
unstyled)
2. Adding cmd+click for quick access to reset
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
closes#473
`${tag}:where([${componentAttribute}=${component}])` where is used to
not increase specificity
- [ ] todo remove from getInheritedInfo, as we don't know ancestor
tagName
## Steps for reproduction
See box-sizing etc props for newly created items
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
1. Fixed panel color. Closes#1245
2. Also fixed backgrounds in TextField and ToggleGroup
## Steps for reproduction
1. Check a panel with controls like Style Panel
2. Background of the panel have changed and all controls have white
background
Here a little refactored copy paste instance plugin.
Now we copy all data including slots and tokens though paste write them
as is or do not write at all if already exist.
This let us to not do unnecessary patches for copy paste within project
while still have whole UI pasted in different project.
There is still a problem with pasting styles which always have different
breakpoint ids in each project. We will need to implement merging in
other PR.
## Description
1. What is this PR about (link the issue and add a short description)
This PR contains the changes for the Gradient color for the button
component
Here is an example of share button with `gradient` color:
https://user-images.githubusercontent.com/74011196/228329202-54f1b143-cc99-47d5-bd17-decf170fbe82.mov
## Steps for reproduction
1. Create a Button component
2. set `color="gradient"` in Button Component
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Change case is a cool collection of string utilities. See
https://github.com/blakeembrey/change-case
Here replaced lodash snakecase and capitlize used for humanizeString
with single title-case from that collection.
Also dropped other unused lodash packages.
Scroll state in builder used only to hide select, hover and text toolbar
while scrolling. Though they all already track scrolling to do the same
and more importantly restore state after scroll. So there is no need to
have it builder.
## Description
Atom data leaked into the server canvas.
ref #1313
## Steps for reproduction
Open Vercel app. Any project. Reload a few times not fast to avoid
scaling.
Get the iframe link, then open it. Should be empty.
New relic logs must contain:
```
{
assetsStore: 0,
pagesStore: 0,
instancesStore: 0,
}
```
New relic query
`"proxy.path":"*71f88d3e-9231-489e-8ba0-8adc10215335*"
"message":"*assetsStore*"`
where `71f88d3e-9231-489e-8ba0-8adc10215335` is your project id
(add vercel host
## 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
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
One cyclic case I missed. When paste slot into itself as target then
check miss unresolved fragment inside. Here added additional check
before copying and covered with tests.
For slots show only settings panel.
## Description
ref #1169
BorderStyle now is toggle group
<img width="225" alt="image"
src="https://user-images.githubusercontent.com/5077042/228191674-83d8dd64-490a-4a15-8307-c64ae425d74f.png">
## Steps for reproduction
Open borders, set
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
This is in preparation for supporting webflow breakpoints which use a
combination of min and max width
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
If this looks good, I will not merge it right away, but open a PR in
`webstudio-saas`
## Description
- #993
1. Added a new type of Prop `{type: "page"}`, similar to `{type:
"asset"}`
2. Added `pagesStore` to `ReactSdkContext` (will need to make changes to
`webstudio-saas` as well to support this)
3. Added a new control type `{control: "url"}` and corresponding
`<UrlControl>`
4. Updated Link components:
- set `{control: "url"}` for the `href` prop
- made them support `{type: "page"}` as `href`
- simplified / cleaned up
## Steps for reproduction
1. Add a link
2. Set a page as `href` in props panel
3. Try clicking on the link in preview mode
## Description
npm version changes
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Object position doesn't fit the grid layout like other elements have in
size section
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
Slot is copy pastable part of the tree which is always in sync. Kinda
like primitive components.
The idea is the following. Slot is copy pasted as any other instance
though its children are preserved as is without cloning with new ids.
This lead to the problem with multiple slot children. While copy paste
they are preserved as is though when add new child to slot, the other
instance of it will not get new child.
To workaround this we add another Fragment component which groups all
children into single one and new children are always reflected in all
slot copies.
## Description
ref #877
- [x] - Use + in the title instead of "Add background" button
- [x] - Label colors should be moved somewhere outside of Layer items
- [x] - Fix theme.spacing, do not use px values
## Steps for reproduction
Open backgrounds play with it.
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- [ ] hi @kof I want you
- test it on preview
## Before requesting a review
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Slots have display: contents to not affect layout. So we need a way to
show correct hover and selected state. Here's added utility to traverse
all descendants and get their rects and then compute the sum of those
rects.
Bogdan Chadkin
