1641978 - Reset button on input[type=date] should inherit color

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[silverwind]

Example: https://jsfiddle.net/silverwind/j716y8tm/

A simple fix could be this in toolkit/content/widgets/datetimebox.css:

.datetime-reset-button {
  color: inherit;
}

I don't know why it does not inherit by default, might be something shadow-dom specific.

Comment 1

[silverwind]

Attachment: example rendering

Comment 2

[Cameron McCormack (:heycam)]

This is a regression from bug 1317581.

Comment 3

[Cameron McCormack (:heycam)]

(In reply to silverwind from comment #0)

A simple fix could be this in toolkit/content/widgets/datetimebox.css:

.datetime-reset-button {
  color: inherit;
}

I don't know why it does not inherit by default, might be something shadow-dom specific.

It's because the button matches a rule from the UA style sheet that sets color: buttontext.

I didn't realize that the reset button is rendered as a single SVG path with opacity. I'm not sure if that is the desired appearance (i.e. something that adapts to the color of the text), but if it is, then your fix is correct.

Comment 4

[Cameron McCormack (:heycam)]

Attachment: Bug 1641978 - Fix reset button appearance on datetime inputs.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/427465df9327
Fix reset button appearance on datetime inputs. r=jaws

Comment 6

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/427465df9327

Comment 7

[silverwind]

I'm not sure if that is the desired appearance (i.e. something that adapts to the color of the text), but if it is, then your fix is correct.

I think it's generally desirable that these indicators follow the text color to give authors some leverage over its color which is important for dark themes where black on near-black will not give sufficient contrast. Notably, Blink also seems to have the same issue with the date icon on the same fiddle.

Ideally, I'd like to see a way for authors to style these elements. I think it could be done by exposing Shadow-DOM parts using <button part="reset-button"> that authors can then target using input[type="date"]::part(reset-button).

Comment 8

[Cameron McCormack (:heycam)]

(In reply to silverwind from comment #7)

Ideally, I'd like to see a way for authors to style these elements. I think it could be done by exposing Shadow-DOM parts using <button part="reset-button"> that authors can then target using input[type="date"]::part(reset-button).

Yes, I think some way of styling the reset button -- or inserting your own into an unstyled control -- is needed. Discussion about stylability of form controls is happening as part of https://github.com/WICG/open-ui.

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:heycam, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Comment 10

[Cameron McCormack (:heycam)]

Not important enough.