godotengine / godot-proposals

Godot Improvement Proposals (GIPs)
MIT License
1.13k stars 93 forks source link

RichTextLabel - Add `Font Hover Color` to Theme options #8446

Closed samuelfine closed 10 months ago

samuelfine commented 10 months ago

Describe the project you are working on

A 2D RPG with a dynamic inventory system, featuring a list of items in the player's inventory that they can scroll through and hover over and/or focus on to see more details about.

Describe the problem or limitation you are having in your project

Currently, Button and RichTextLabel controls have many similar customization options in-editor, but a few that are unique for reasons that are not clear to me. For example, Button text does not have a Font Shadow but RichTextLabel does. (This is being addressed in https://github.com/godotengine/godot-proposals/issues/4909.) Similarly, Buttons do have a Font Hover Color setting, but RichTextLabel does not.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

HTML is a good analogue here, comparing <a> links vs. form <button>s. RichTextLabels and Buttons have many similar use-cases and very similar interaction functionality—hover, focus, click, etc—but with different semantic purposes. Adding Font Hover Color to RichTextLabel will allow for better usability and accessibility by allowing developers to easily visually indicate which control is currently hovered, and will bring that Control closer to parity with other text-based Controls.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

Today, Button controls have a Font Hover Color property under clr (Color) section of Theme customization, and in Theme Overrides > Colors in the Inspector panel, but RichTextLabels have neither. This proposal would add that property for RichTextLabels as well.

If this enhancement will not be used often, can it be worked around with a few lines of script?

Technically yes, it could be worked around using mouse_entered() and mouse_exited() signals. However, any other user interaction events could also be handled strictly in code like this—Button hover events, for example—and most of those already have in-editor properties for making customization faster and easier, and reducing the amount of glue code required for basic and frequently used UI actions.

Is there a reason why this should be core and not an add-on in the asset library?

The functionality already exists for other Controls, and is a very common behavior in most user interface systems. (Again, HTML is a prime example.) Adding this will help RichTextLabel customization match what is already available to other Controls that a player can interact with.

AThousandShips commented 10 months ago

The theme override doesn't exist for Label, I don't see how the theaming of RichTextLabel should be in any way aligned with or tied to Button, and none of the other text editing or text display controls have this, like Label, TextEdit, or LineEdit

samuelfine commented 10 months ago

@AThousandShips That's a fair point, though RichTextLabel already does have some properties related to user interactivity (focus styles and meta_hover_started/ended Signals, for example) and my presumption is that the "Rich" part of RichTextLabel implies a superset of features beyond Label. In my opinion, a Font Hover Color color would fit nicely within that definition.

At the risk of exploding the scope of my own proposal, curious if there's a reason why all text-based Controls couldn't have the full range of available styles for normal/hover/focus/active? My interpretation of the primary (user-facing) difference between Label vs. RichTextLabel is that one is for plaintext content, and the other is for rich text content, but the visual styling and event/signal handling of both Controls could be very similar. Even something like TextEdit, though it's definitely used for a different purpose from text labels and buttons, might benefit from additional event-driven styling. I'm imagining something like a simulated 80s-style computer terminal where text could increase or decrease in brightness on hover/focus.

Calinou commented 10 months ago

There is no default semantic meaning to hovering a Label or RichTextLabel (nothing special will happen if you single-click one by default), so I don't think this should be provided by Godot itself.

We could have a way to define a hovered (and pressed) text color for [url] tags though. This is currently missing for a good UX when using links in RichTextLabel. LinkButton already has this functionality available.

AThousandShips commented 10 months ago

curious if there's a reason why all text-based Controls couldn't have the full range of available styles for normal/hover/focus/active?

Simply because we don't add styles and details without good reason, adding things that few would need or use (haven't seen any issues raised over the lack of them) bloats the engine and adds performance costs that aren't used by most people

If a user needs to have focus based visual updates you can easily work around it with scripting and signals, for focus and mouse enter/exit, and unlike Button the overhead of adding that for your unusual use case is small, as compared to having to write it for every button you use

samuelfine commented 10 months ago

Simply because we don't add styles and details without good reason, adding things that few would need or use (haven't seen any issues raised over the lack of them) bloats the engine and adds performance costs that aren't used by most people

I appreciate this sentiment but I'm not really sure how my ask isn't similar in spirit, effort, and "bloat" to https://github.com/godotengine/godot-proposals/issues/4909. My ask is piggybacking off existing event functionality (mouse enter/exit is already part of the Control base) and Theme customization options already cover a large number of edge-cases that are infrequently used. Plus, the exact functionality already exists for text inside of Button controls. I'm not looking to move mountains here. 😄

That said, it's clear that I'm trying to use RichTextLabel against the grain here. Coming from a web development background, there is very high flexibility in how any GUI content can be customized with CSS. All fundamental user interaction events (:hover, :focus, :active, etc) can be triggers for style changes to any type of element. With Godot, it sounds like hover as an event for Theme styling in-editor is only available to Button controls, so I'll investigate what my options are there.