## Description
1. What is this PR about (link the issue and add a short description)
Do not show flex properties in the style panel when a layout is not flex
closes#687
<img width="272" alt="image"
src="https://user-images.githubusercontent.com/5077042/210067036-4571be1d-4745-48a3-be7f-45f91791a6a9.png">
Here I patched `appliesTo` of properties `alignItems`, `justifyItems`
see https://github.com/mdn/data/issues/585
## Steps for reproduction
Opens designer panel, check no flex props in display: block layout
## 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
closes#465
Select option names are now "Pascal Cased"
`+` now `Select` sets `StyleValue` instead of deprecated `string` in
`setParams`
## Steps for reproduction
see #465
## Code Review
- [x] 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
- [ ] 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
Adds option / shift support to scrub in spacing. Closes#668
## Steps for reproduction
- Try to scrub in spacing while holding SHIFT or OPTION (ALT in Windows)
- Try to press and release SHIFT / OPTION multiple times during scrub
- Try to press SHIFT / OPTION while hovering over a property (other
properties will highlight even without scrub)
Issue:
Breakpoints panel suggests delete currently selected instead of specific
breakpoint #691
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click edit breakpoint in top bar
2. delete other breakpoint than the currently selected
3. expect to show the message to delete the breakpoint and not the
currently selected in the confirm message
## 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
## Before merging
- [x] tested locally
- [x] tested on preview link
Set at VERCEL env
<img width="930" alt="image"
src="https://user-images.githubusercontent.com/5077042/209917100-86d1f7e9-a5ca-4aaa-a877-456850fa5153.png">
## Description
Restrict assets by MAX_ASSETS_PER_PROJECT env variable.
## Steps for reproduction
- [x] - set MAX_ASSETS_PER_PROJECT = 4 as env variable for Vercel
Try upload more than 4 files.
Get Error: "`Max ${count} assets per project reached`"
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- test it on preview
- [ ] hi @TrySound plz check code
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] 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 #465 for css-value-input
Add beauty names to keywords, a little bit better search for keywords.
+ Fixes non-working scrub.
+ Fixes jumping cursor.
## Steps for reproduction
1.
Write `min-content` inside `width` field - All options you see must have
`Pascal Case`
Select value through menu - inputValue must be also in `Pascal Case`
2.
Edit width input, write `Min Content`, and click Enter - must be saved
with `Min Content` value.
(internally must be keyword with value=`min-content`)
3.
Edit width input, write `min-content`, and click Enter - must be saved
with `Min Content` value.
(internally must be keyword with value=`min-content`)
4.
Write `min content`, click tab - must be saved with `Min Content` value.
(internally must be keyword with value=`min-content`)
5. Edit input in any place of cursor it must not jump to the end.
## Code Review
- [ ] hi @kof, I need you to do
- 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
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
#422
## Description
This PR adds the StyleSourceInput component. It's not complete yet and
when we are finished we might move a lot of this logic to combobox, not
sure yet, because it depends on how much custom stuff we are going to
need in this input. MUI implements it using combobox and `multiple`
property but we may need some stuff that won't fit.
- [x] Add new items
- [x] Delete items with backspace
- [x] Truncate too long items
- [x] Autocomplete
Follow up PR will include
- [ ] Use color coding for background color
- [ ] Create a token from style panel
- [ ] Select an existing token from style panel
- [ ] Delete Token from style panel with backspace
- [ ] Sort tokens
- [ ] Enable/disable a source
- [ ] Rename using menu
- [ ] Delete using menu
- [ ] Disable deleting local source
- [ ] Sort the sources using d&d
## Steps for reproduction
1. Go to
https://www.chromatic.com/component?appId=6382151c8b47d4399fb9fc69&csfId=designer-features-style-panel-style-source-input--initial&buildNumber=532&k=63ab0f47f9dfa67d6ee09558-1200-interactive-true&h=17&b=-4
## 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
- [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
This is a simplification. Since we already pass style info everywhere it
can be used to color labels, buttons and icons in blue instead of
recomputing local state with hook.
## 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
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
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
- 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
This PR moves most of the Storybook configs into a single, private,
package that can be imported/required by your packages. It aims to keep
the config the same for all of them as much as possible - so, for
example, all of the packages are now using Webpack 5 in their
Storybooks.
Ivan Starkov
