## Description
Somehow we forgot to add object-position
## Steps for reproduction
1. select instance
2. go to sizes section in style panel
## Code Review
- [ ] hi @istarkov I need you to do
- conceptual review (architecture, feature-correctness)
## 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
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
ref #534
PR atop of #701
Next PR: image-set support
Ability to select background image from asset
<img width="496" alt="image"
src="https://user-images.githubusercontent.com/5077042/209625480-f0b4b5a0-8ca7-438d-bbd8-3b4874f9428d.png">
## Steps for reproduction
Create a div, and select an asset for the background image.
## 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
- [x] made a self-review
- [ ] 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
ref #534
Next PR #705
Db support for ImageValue style.
Having that ImageValue can contain assets we need to transform assets to
`assetId` and back during save/load.
`zod + dataloader` is used for transform for simplicity, allows avoiding
tree traversal, and highly simplifies code.
_I want to merge it to not make one huge PR, it has no breaking changes,
just a new feature save/load support_
## Steps for reproduction
## Code Review
- [x] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [x] hi @TrySound, I need
- detailed review (read every line)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
The logic does not work correctly and not really used because we never
set values to "inherit".
Later new logic will be added to show the source of values.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
Click into css-input, delete everything - menu occured
Click tab - must show red rectangle instead of just tabbing into new
control
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Found an issue when hover a few elements fast and then move cursor out
of iframe hover gets stuck on some element. This is because we use
combination of mouseover and mouseout events.
So when we move out of one instance to another it looks like this
over
out
over
out
Which may lead to race conditions. So here out is canceled by every
hover and delayed a little to always emit last.
## Description
Add delay to spacing control tooltip.
## Steps for reproduction
1. Hover spacing controls, see tooltip delayed
## Code Review
- [ ] hi @kof, I need you to do
- test it on preview
- [ ] hi @rpominov just your code changed a little, FYI
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
closes#656
Following test case at #673 didn't work:
Click unit px
Hover over items
Press ESC - instead of closing menu it resets input and only 2nd ESC
closes the menu.
*The issue is Tooltip + UnitSelect.*
UnitSelect set 'focus" on Item on hover.
So hovering over the menu causes a lot of blur/focus events dispatched
to the ancestors.
Tooltip at the top closes/opens very fast (not visible but internally it
is).
That cause
https://github.com/radix-ui/primitives/blob/e861c16f20fe8e2e440983355edf2ec78cc2a51c/packages/react/dismissable-layer/src/DismissableLayer.tsx#L105
to think that Tooltip popover is now at the top layer. And prevent
`onEscapeKeyDown` to be executed.
Current hack somehow improves the situation. But seems like better would
be to disable the tooltip in case of focus/blur of the whole control.
Not sure it's needed at all as we have the label.
## 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
- [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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. Remove unused components, some of which will be reintroduced once we
start using them with designed styles, right now its confusing because
they were copied from modulz example repo and never adjusted with our
design system
2. Deprecated consistently
## Code Review
- [ ] hi @istarkov , I need you to do
- conceptual review (architecture, feature-correctness)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
Ref https://github.com/webstudio-is/webstudio-designer/issues/625
Frequently changed style values with for example scrub makes outline
look laggy because of latency between iframe and designer (where outline
is rendered).
Here I subscribed to previewStyle and send undefined to hide rect. We do
the same when scroll canvas and cannot update outline fast.
Fixes https://github.com/webstudio-is/webstudio-designer/issues/631
## Description
Can't change width of a copied box
## Steps for reproduction
1. Add a Box
2. Select the Box and copy it (cmd+c)
3. Select Body
4. Paste (cmd+v)
5. Select the copy you've just pasted
6. Try to change its width
7. Observe that even though the number in input changes the actual width
of the Box on canvas stays the same
https://user-images.githubusercontent.com/825702/207803118-5b6fedd8-ded4-4a03-97b9-d4d6cff6710a.mov
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Pnpm supports yarn shell emulator under flag which fixes a few shell
bugs and works the same on all operating systems.
Here it replaced huge concurrently library.
```diff
du -ck node_modules
-829592
+813384
```
- all workspace dependencies are use with `workspace:^` protocol which
on publish is replaced with `^VERSION`. This will let us to upgrade
transitive packages in saas without shaman dancing around package.json
and lockfile.
- publish-to-npm script is replaced with `pnpm -r publish` which
recursively publishes all packages if version does not exist in npm
- dropped yarn lockfile
ref #656closes#644
## 1 Case is not fixed in this PR
Click unit px
Hover over items
Press ESC - instead of closing menu it resets input and only 2nd ESC
closes the menu.
Will do in next PR
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
### Save behavior
**Case 1.**
Click into "resetted" input field
Click outside - no Blue background at the input label should appear.
**Case 2.**
Start typing something in "resetted" input field.
Click ESC,
Click outside - no Blue background at the input label should appear.
**Case 3.**
Open menu in "resetted" input field.
Hover over menu items.
Click outside - no Blue background at the input label should appear.
**Case 4.**
Start typing "au" in "resetted" input field.
Hover over menu items.
Click ESC - menu closes.
Click ESC - value resetted.
Click outside - no Blue background at the input label should appear.
** Case 5.**
Click into the "resetted" field with `unit` value.
Delete all with delete button.
Click ESC - menu closes.
Click "ESC" - should reset to prev value
Click ouside - no Blue background at the input label should appear.
** Case 6 **
Click into the "resetted" field
Click ENTER - Blue background should appear
** Case 7 **
Click into the "resetted" field
Edit value so after Edit it will the same
Click outside - Blue background should appear
### ESC
**Case 1**
find a numeric CSS value input
change the value with some number
press ESC
number resets to the initial value
**Case 2**
find a keyword CSS value input
start typing
autocomplete list is shown
press ESC
list is closed
press ESC
value resets to initial value
**Case 3**
find a numeric CSS value input
type some number
click on unit button - list shows
press ESC - list closes
press ESC - value resets to initial value
**Case 4**
Write `autoblabla` in input
press ESC - value resets to initial value
**Case 5**
Click on menu open button
Click ESC - menu should be closed
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
- setup corepack for pnpm and forbid yarn usage with "engines" field
- converted yarn lockfile into pnpm lockfile with `pnpm import` command
- replaced yarn with pnpm in scripts and github actions, had to use
custom cache to support corepack
This PR is only migration. Will use new pnpm features in other PRs.
```diff
du -ckd1 node_modules (yarn)
- 1125032
du -ckd1 node_modules/.pnpm
+ 857456
```
Install time (including cache downloads) in github actions reduced from
42s to 23s
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [x] conceptual
- [X] detailed
- [ ] with testing
## Test cases
- [ ] step by step interaction description and what is expected to
happen
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
Extracted this from #550 as @istarkov needs this too:
https://github.com/webstudio-is/webstudio-designer/pull/550#discussion_r1053432597
## Code Review
- [ ] hi @istarkov, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/651
We want to normalize our tree structure and need to distinct text
children with ids. Now instead of string its respresented as
```
{
type: 'text',
value: string
}
```
This also gives us a little type safety because typeof child ===
'string' ignores when child cannot be string.
closes#610
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [ ] conceptual
- [ ] detailed
- [x] with testing
## Test cases
- [ ] step by step interaction description and what is expected to
happen
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
closes#546
fixes image flicker on upload
fixes that uploading animation stopped and not properly centered
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [x] conceptual
- [ ] detailed
- [x] with testing
## Test cases
- [x] Check that images in Image manager are resized
- [x] Check that not flick of image on upload happens
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Oleg Isonen
