Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explain where the value comes from and allow resetting it #29

Closed
4 tasks done
kof opened this issue May 2, 2022 · 7 comments
Closed
4 tasks done

Explain where the value comes from and allow resetting it #29

kof opened this issue May 2, 2022 · 7 comments
Assignees
@taylornowotny
Labels
area:styles Style Panel is the CSS panel on the right complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:enhancement New feature or request

Comments

@kof
Copy link
Member

kof commented May 2, 2022 •
edited by taylornowotny

When clicking on the property name

  • show a popover that explains the property was defined:
    • inherited from parents
    • set locally
    • token (bound to a token, this will come later once we have done tokens)
  • show a link to a full mdn article (we have the links from mdn data)
  • ideally show a short simple description (probably has to be written or copied from mdn partially) - lets leave it for later
  • reset button that will unset the local value and the value becomes either inherited or defined by default styles or browser styles

Since we don't have designs for it yet, I am attaching examples from webflow. We will have a new design later, it seems easy to change.

Screenshot 2022-11-30 at 12 46 44

Screenshot 2022-11-30 at 12 46 24
@kof kof added type:enhancement New feature or request area:styles Style Panel is the CSS panel on the right complexity:medium Up to 1 week of work labels May 2, 2022
@kof kof mentioned this issue May 2, 2022
Closed
34 tasks
@kof kof assigned kof and natlusyht and unassigned kof May 26, 2022
@kof kof added the prio:2 Always look for prio:1 issues first before working on prio:2 label Jun 16, 2022
@kof kof changed the title Explain where property value is coming from Color coding value Nov 8, 2022
@kof kof changed the title Color coding value Explainer for value origins Nov 8, 2022
@kof kof assigned TrySound and unassigned natlusyht Nov 30, 2022
@kof kof changed the title Explainer for value origins Explain where the value comes from and allow resetting it Nov 30, 2022
@kof kof added prio:1 The most important thing to work on and removed prio:2 Always look for prio:1 issues first before working on prio:2 labels Nov 30, 2022
TrySound added a commit that referenced this issue Dec 10, 2022
@TrySound
Add proprety reset button in popover
be87db4 
Ref #29
@TrySound TrySound mentioned this issue Dec 10, 2022
Merged
12 tasks
TrySound added a commit that referenced this issue Dec 10, 2022
@TrySound
Add proprety reset button in popover
17da4ab 
Ref #29
TrySound added a commit that referenced this issue Dec 12, 2022
@TrySound
Add proprety reset button in popover (#583)
aba5506 
Ref #29

<img width="281" alt="Screenshot 2022-12-10 at 12 03 54"
src="https://user-images.githubusercontent.com/5635476/206842519-5812b7d5-2c60-4941-93a7-8a980f6abae0.png">
@kof
Copy link
Member Author

kof commented Dec 22, 2022

  • reset spacing properties

cc @taylornowotny it seems like we don't have a design for where to put the spacing property reset and also the value origins info

@taylornowotny
Copy link
Contributor

taylornowotny commented Dec 23, 2022 •
edited

cc @taylornowotny it seems like we don't have a design for where to put the spacing property reset and also the value origins info

Well spacing values don't inherit so there's no need to show the value origins.

To reset the the property the user can option+click the value.

We may also need to show a clickable reset button. I can add this below the input that pops up. I'll design this when I re-design tooltips.
Screenshot 2022-12-23 at 11 16 57 AM

@taylornowotny
Copy link
Contributor

In case it wasn't clear, I am going to re-design tooltips to address the needs outlined in this issue. I am tracking what we need, this is just on hold while I work on tokens

TrySound added a commit that referenced this issue Dec 24, 2022
@TrySound
Compute style property source
8282194 
Ref #29

Rewritten inherited style logic and fixed inheriting from all parents
not only one. Added cascaded style logic to provide additional insight
where the value comes from.
@TrySound TrySound mentioned this issue Dec 24, 2022
Closed
8 tasks
TrySound added a commit that referenced this issue Dec 26, 2022
@TrySound
Add style info with source data
c73a339 
This is a step toward #29

When merge browser style and local styles we can specify the source of
the style. Later we can add additional info about inherited and cascaded
styles.
@TrySound TrySound mentioned this issue Dec 26, 2022
Merged
8 tasks
TrySound added a commit that referenced this issue Dec 27, 2022
@TrySound
Add style info with source data
26ac2ea 
This is a step toward #29

When merge browser style and local styles we can specify the source of
the style. Later we can add additional info about inherited and cascaded
styles.
TrySound added a commit that referenced this issue Dec 27, 2022
@TrySound
Add style info with source data (#704)
fc25ad1 
This is a step toward
#29

When merge browser style and local styles we can specify the source of
the style. Later we can add additional info about inherited and cascaded
styles.
TrySound added a commit that referenced this issue Dec 27, 2022
@TrySound
Fallback to cascaded and inherited when value not set
7a38ff0 
Ref #29 #649

Now instead of showing computed styles which come from parent
instances or other breakpoints we can show actual value we set there.
@TrySound TrySound mentioned this issue Dec 27, 2022
Merged
8 tasks
TrySound added a commit that referenced this issue Dec 28, 2022
@TrySound
Fallback to cascaded and inherited when value not set (#712)
6f1df53 
Ref #29
#649

Now instead of showing computed styles which come from parent instances
or other breakpoints we can show actual value we set there.
TrySound added a commit that referenced this issue Dec 28, 2022
@TrySound
Show in popover where remote style comes from
2421f4a 
Ref #29

Here added info in popover where cascaded and inherited styles come
from.
@TrySound TrySound mentioned this issue Dec 28, 2022
Merged
7 tasks
TrySound added a commit that referenced this issue Dec 31, 2022
@TrySound
Show in popover where remote style comes from (#715)
eacbd7d 
Ref #29

Here added info in popover where cascaded and inherited styles come
from.

<img width="304" alt="Screenshot 2022-12-28 at 14 47 01"
src="https://user-images.githubusercontent.com/5635476/209816321-edeebc17-c905-497e-8501-f5eb02103c60.png">
<img width="243" alt="Screenshot 2022-12-28 at 14 47 07"
src="https://user-images.githubusercontent.com/5635476/209816325-abdc766d-f8cb-415d-b784-ed70940aa150.png">
<img width="281" alt="Screenshot 2022-12-28 at 14 47 19"
src="https://user-images.githubusercontent.com/5635476/209816327-cc5bc70b-3c76-4273-867b-b13c32c1522a.png">
<img width="268" alt="Screenshot 2022-12-28 at 14 47 47"
src="https://user-images.githubusercontent.com/5635476/209816329-dd2d674f-39bd-4565-ab43-249c853909b3.png">
@TrySound TrySound assigned taylornowotny and unassigned TrySound Dec 31, 2022
@TrySound
Copy link
Member

Implementation is ready

@kof
Copy link
Member Author

kof commented Jan 27, 2023

@taylornowotny this is waiting for design

@taylornowotny
Copy link
Contributor

taylornowotny commented Jan 27, 2023 via email

@taylornowotny
Copy link
Contributor

Design is done! #1730

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@taylornowotny taylornowotny

Labels
area:styles Style Panel is the CSS panel on the right complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:enhancement New feature or request
Projects
No open projects
Webstudio Beta
Status: Done
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kof @TrySound @taylornowotny @natlusyht