## 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
1. What is this PR about (link the issue and add a short description)
**Important** The PR adds tooltips only for HTML attributes.
Fixes https://github.com/webstudio-is/webstudio-builder/issues/2027
## Steps for reproduction
1. Add a few components to the canvas
3. Select one
4. Go to the Settings tab in the right sidebar
5. Hover over the labels
HTML attributes should show a tooltip with a description
## Code Review
- [ ] @taylornowotny please review the descriptions in the
props-descriptions.ts file
- test it on preview
- [ ] @istarkov check the first commit that is where the implementation
and integration are done. The idea behind this is that we have a central
file with HTML attributes descriptions and when generating components
props we pick the descriptions from there if the property doesn't have a
custom description. Essentially we use props-descriptions as a fallback.
Do we need tests for this feature?
## Before requesting a review
- [ ] made a self-review
## 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
---------
Co-authored-by: Giuseppe Gurgone <ggurgone@users.noreply.github.com>
Co-authored-by: istarkov <istarkov@gmail.com>
Before when start dragging we searched for closest rich editor under
cursor and did nothing when the instance is not detachable (for example
select value or switch indicator).
Here I changed the behavior to also look for closest detachable instance
and drag whole thing. This way we do not need toast like in navigator
and can canvas dnd just work.
Also fixed placeholder in "Select Value" component. Before was no way to
change it.
## Description
Now we are showing each component description in a tooltip
## Steps for reproduction
1. hover any component in components panel
2. see tooltip text
## Code Review
- [ ] hi @istarkov , 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
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
Menu items without content (just with Link)
<img width="707" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/63cf6a84-08bc-4f8f-b307-41323921c78c">
## 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
---------
Co-authored-by: Bogdan Chadkin <opensource@trysound.io>
## 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
Setting max-w-max we are forcing menu to be left aligned.
## 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 #2151https://discord.com/channels/955905230107738152/1143789794426638377
Also made that scrollbars are not intersected
<img width="111" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/e103e4b1-40e3-4328-b698-8cdb7b43ae4b">
## Steps for reproduction
Add a lot of elements into the tree.
Be sure last element has a long long label.
See it can be selected,
See both scrolls work
## 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/2151
Input and Textarea components are just native input and textarea with
additional styling. Considering this styling does not bring any value
for user we better remove such components.
Ref https://github.com/webstudio-is/webstudio-builder/issues/2151
Button component in radix library is useless because duplicates the
button we already have. The only difference is styles we can add with
templates for other radix components.
Variants and sizes are provided with code. No need in tokens anymore.
## Description
On onmount outdated onSave were used. What cause creation of additional
href property on instance.
- [x] - Fix duplication on unmount (1st commit)
- [x] - Fix save, to validate if multiple properties with same name
exists. (2nd commit)
- [x] - Use latest prop in resolveUrlProp (3rd commit)
Use hide whitespaces.
<img width="303" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/156fc5a4-c697-4b05-8caf-7a3b7fa29264">
## 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
If the parent component has `meta.stylable = false`, we need to skip it
to get the correct style of the parent.
## Steps for reproduction
Create the Box and add the Sheet to it.
When you go to the sheet/trigger/button, you will notice that it does
not have a 'Flex Child' section or a 'zIndex' property.
To add these, add 'display: flex' to the box you created initially. When
you go back to the sheet/trigger/button, you will see that it now has a
'Flex Child' section and a 'zIndex' property.
## 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
Originally started in
https://github.com/webstudio-is/webstudio-builder/pull/2132
Closes https://github.com/webstudio-is/webstudio-builder/issues/2039
## Description
Help dialog in builder and dashboard
## Steps for reproduction
1. open builder
2. open help dialog in the left sidebar
3. open dashboard
4. click help button
## Code Review
- [ ] hi @istarkov , 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
---------
Co-authored-by: wasimTQ <wasimthoufiq21@gmail.com>
Ref https://github.com/webstudio-is/webstudio-builder/issues/2151
Here added alt+click or opt+click support to navigator chevron to expand
whole tree and simplify user navigation into hidden contents.
Also changed accordion hooks behaviour. Now only selecting accordion
content expands its item. Before was possible to expand on item select.
Alt+click will help to reach accordion contents faster.
## Description
This speedups my remix dev rebuilds from 42s to 1s
The issue was that chokidar watched my whole fs and seems like something
on my machine makes it very slow.
Also enabled `v2_dev: true,` doesn't affect perf, just to be modern
## 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 https://github.com/webstudio-is/webstudio-builder/issues/2151
Exclude following props from radix components
```
-e asChild -e modal -e defaultValue -e defaultOpen
```
## 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
This is a workaround because we don't have a resizable panel yet. With
deep nested trees we need more space
## Steps for reproduction
1. nest radix components with a lot of depth
2. see that you can scroll both vertically and horizontally
3. horizontal bar is invisible, its a separate problem, not sure why
## Code Review
- [ ] hi @istarkov , 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 added chevron to accordion trigger
by using css custom properties for cascade.
We still do not support css custom properties in style panel though here
used only for transform which does not have ui too.
## Description
Small fix to allow dialog to be scrollable in case of content overflow
## 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
Closes https://github.com/webstudio-is/webstudio-builder/issues/2118
## Description
Added cite tag to Text component as well as cite prop in initial props
to Blockquote component
Now you can create same html structure as
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
```html
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
<footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
```
## 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
- renamed "Execute script on canvas" to "Run script on canvas"
(https://github.com/webstudio-is/webstudio-builder/issues/2104)
- execute in preview
(https://github.com/webstudio-is/webstudio-builder/issues/2107)
## 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
Here made meta.label optional to simplify adding new stuff. Most of the
time label is just a "humanized" version of component name. With radix
there is an additional action to strip namespace. But still would be
less repetition if the name is just inferred.
Here moved code generation of utilities from saas into sdk.
Now InstanceRoot accepts utils object with these 3 fields
- indexesWithinAncestors,
- executeComputingExpressions,
- executeEffectfulExpression,
Generation utility can be shared between cli and saas to simplify
maintenance.
Ivan Starkov