Commit Graph
18 Commits
Author SHA1 Message Date
Oleg Isonen 04188dbbf4 feat: CSS Grid UI (#5614)
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2026-03-08 10:52:21 +01:00
Bogdan Chadkin 4abb7cf3e2 feat: support svg properties in style panel (#5332)
Ref https://github.com/webstudio-is/webstudio/issues/5258

Newer mdn-data contains all stylable svg properties (they finally got
through some documentation and implementation process).

Tweaked all experimental stuff and ditched obsolete properties.

<img width="286" height="538" alt="image"
src="https://github.com/user-attachments/assets/1e579be0-0a12-4013-ab04-09d5e008aeed"
/>
2025-07-18 18:04:26 +02:00
Bogdan Chadkin 5637e71287 refactor: migrate css-data to hyphenated properties (#5031)
All parsers/generators accept and produce hyphenated css property. Camel
case is only used for StyleProperty type.
2025-03-22 22:38:59 +07:00
Bogdan Chadkin af653fa002 refactor: hyphenate keyword values (#4987)
Regenerated keyword values data with hyphenated properties. Since the
new object is strictly typed we can use it directly without
styleConfigByName utility which I removed.
2025-03-13 22:44:57 +07:00
Ivan Starkov 62a6d939d8 experimental: Animate UI (#4851)
## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2025-02-24 14:27:50 +05:00
Ivan StarkovandOleg Isonen 3c42f8ca4b experimental: View Animations support (#4817)
## Description

ref  #2645

- [x] - Add view-timeline-name and scroll-timeline-name support, and
prefixer (use custom property for unsupported browsers)
- [x] - Add initial story

## Steps for reproduction


https://6382151c8b47d4399fb9fc69-uljkhwtbmc.chromatic.com/iframe.html?args=&globals=&id=sdk-components-animation-view-animations--in-out&viewMode=story

## 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:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2025-02-04 06:02:55 +03:00
Bogdan Chadkin adadbe3aa2 refactor: enable isolated declatations in css data (#4476)
Moved transition related stuff into builder, simplified mdn-data and
added missing types to exports, removed popularity index.
2024-11-30 16:47:26 +07:00
Jaya Krishna Namburu d1bd5df4e1 feat: add links to mdn documentation inside tooltips for sections and properties (#4416)
## Description

fixes #4383 
Tweaked the `__generated__/properties.ts` that is generated at build
time to store `mdn_url` in it. And use these url's to show on the
tooltips for the properties and sections.

## Steps for reproduction
- Open any property, and the tooltip opens
- Inside the tooltip, you should be able to click on the external link
icon.
- The link should take you to a mdn link of the same.


![external-links](https://github.com/user-attachments/assets/9b81d2da-7d5f-4d7f-abdb-e0eaa5902a14)


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
 
## Before requesting a review

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
2024-11-15 10:20:55 +05:30
Bogdan Chadkin 8d7cf574fc fix: generate text-wrap-style: auto (#4321)
Fixes https://github.com/webstudio-is/webstudio/issues/4218

Turned out text-wrap-style got removed but supported alternative
text-wrap: wrap was not generated instead.
Now all should work.

Also removed invalid text-wrap-mode: auto
2024-10-20 11:50:41 +03:00
Bogdan Chadkin c81b3d502f experimental: add css custom properties support to advanced styles (#4117)
Ref https://github.com/webstudio-is/webstudio/issues/3399

- added custom properties autocomplete in advanced styles
- fixed unit value detecting to not break var()
- show inherited custom properties in advanced styles
- dropped "types" from properties meta
- parse not top level var(), for example inside layers or function as
unparsed for now

<img width="239" alt="image"
src="https://github.com/user-attachments/assets/640690d4-a52e-43a4-a3a2-6032d30c600f">
<img width="871" alt="Screenshot 2024-09-12 at 21 53 38"
src="https://github.com/user-attachments/assets/f50e52a6-1307-4554-9ee2-cb2f20dd0e2c">
<img width="862" alt="Screenshot 2024-09-12 at 21 53 47"
src="https://github.com/user-attachments/assets/09788e29-df58-41ee-a96e-c28c4006dabb">
2024-09-14 01:37:10 +02:00
Jaya Krishna Namburu 99851a40d6 feat: Add tooltips for individual properties in style panels by the descriptions generated by ai (#3964)
## Description

This PR adds tooltips for all the layer based sections in the transform
property. The rest of the properties already have their tooltips managed
by the `PropertyName` component. I have taken our previous tooltips as
based and used a AI suggested one and proof read those. So, please let
me know if there are any suggestions to change.

## Steps for reproduction

- verify tooltips for `translate`, `scale`, `rotate` and `skew`,
`box-shadow`, `text-shadow`, `drop-shadow` properties.

## 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 and on preview environment (preview dev login:
5de6)
2024-09-03 21:23:57 +05:30
Bogdan Chadkin a7676c5042 feat: support -webkit-line-clamp (#3640)
Ref https://github.com/webstudio-is/webstudio/issues/2647 Closes
https://github.com/webstudio-is/webstudio/issues/3427

Here added -webkit-line-clamp and -webkit-box-orient properties support
which is the only way to add multiline truncation at the moment.

All properties with prefixes are stored without camel casing. With font
smoothing as the only exception because added very early.

<img width="911" alt="Screenshot 2024-06-28 at 17 48 08"
src="https://github.com/webstudio-is/webstudio/assets/5635476/ca773cf0-81f0-47d7-97c8-5f78751332d4">
2024-06-28 20:13:19 +03:00
Bogdan Chadkin dfc216723a refactor: upgrade mdn-data (#3578)
Ref https://github.com/webstudio-is/webstudio/issues/2647

Here upgraded to the latest mdn data and improved properties detection.
Excluded experimental and undocumented css properties.

- font-synthesis got longhands in mdn data
- background-position-x/y got excluded as experimental (though support
is good) but we anyway write as shorthand
- excluded white-space-collapse, text-wrap and text-wrap-* until decide
how to maintain them in the future
- field-sizing and zoom are new additions
2024-06-17 14:35:38 +03:00
Oleg Isonen 9b08f1dbbc fix: Properties like animation-name were receiving unneeded px suffix (#3543)
Closes https://github.com/webstudio-is/webstudio/issues/3529

## Description

Values that can have custom identifiers (user defined string) were
tested to accept a unit value and they did, because anything is valid.

Now they are not tested with units any more

## Steps for reproduction

1. add animation-name in advanced panel
2. use any name it should stay as-is
3. previously we would add a "px"

## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2024-06-12 19:41:01 +02:00
Oleg Isonen 6887463746 feat: Scrub improvements (#2904)
## Description

1. Allow scrub on any css value that can be numeric, no matter what
current keyword value might be selected
2. Adjust scrub speed depending on the unit

## Steps for reproduction

1. try scrubing any css value 
3. backdrop fill in the effects section won't allow to scrub , which is
correct
4. try changing dfferent units and see how it feels, if the speed is
appropriate

## 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/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
2024-02-13 20:12:09 +01:00
Bogdan Chadkin 87e69b2e85 Move style schema into css-engine (#2251)
Css-data now responsible for generated data and parsers which requires
heavy dependencies like csstree and openai.

Here moved style schema into css-engine which makes is responsible for
own input representation. So now schema and serialization are co-located
in single package.

Cli install size

```diff
du -ck node_modules
- 42680
+ 35516
```
2023-09-06 15:55:41 +04:00
Bogdan Chadkin 7f53be7b2d Add list item section to style panel (#2077)
Fix https://github.com/webstudio-is/webstudio-builder/pull/2063
https://github.com/webstudio-is/webstudio-builder/issues/2079
https://github.com/webstudio-is/webstudio-builder/issues/2060

Here added new "List Item" section specifically for List and ListItem
components. Now user can cutomize list item markers for whole list or
per each item.

Changed behavior of Select Control to put current value into the list of
options if not present. This way display shows "List Item" instead of
nothing.
2023-08-09 22:58:50 +04:00
Oleg Isonen 57417c7a58 Add font smoothing by default to the body (#1972)
## Description

Adding font smoothing by default to the Body component


https://discord.com/channels/955905230107738152/955907787299360788/1132882679189229649

```
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
```

## Steps for reproduction

1. open any project, see in dev tools these 2 added (or check visually)

## 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
2023-07-25 12:38:58 +02:00