## 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
## Description
closes#1378
## Steps for reproduction
Take any css property, see it contains
initial, inherit, unset
## 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
Ref. #993
## Description
1. Added phone and email options in the URL control
## Steps for reproduction
1. Open a Link's props
3. See new options in the "Href" control
## 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
We probably don't need to have chromatic in dependencies.
Especially since the latest version is getting 20MB bigger
https://packagephobia.com/result?p=chromatic
Also removed builds from chromatic workflows, "source" export condition
allows to avoid it.
## 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
background/topbar-hover
background/gradient/horizontal-reverse
and some misc updates
---------
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
## 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
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
## 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>
## 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
## 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
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.
- got rid of unused esbuild-node-externals package
- removed esbuild override/resolution to old version
- deduplicateed webpack 4 and 5 into single 4 instance
- upgraded esbuild to the latest version with "context" api instead of
incremental flag which potentially forces to fix the issue with remix
once they upgrade
Esbuild bump fixed the issue with remix going infinite watch loop after
any changes in packages and looks like esbuild in remix no longer blocks
parallel turbo run!!!
Ivan Starkov
