Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] Text color does not change for disabled button w/ >1 text color property

See original GitHub issue

Environment

Vuetify Version: 2.0.1 Vue Version: 2.6.10 Browsers: Chrome 75.0.3770.100 OS: Mac OS 10.13.6

Steps to reproduce

Create a <v-btn> instance. Assign multiple text color modifiers. Disable it, e.g.

<v-btn
  color="primary--text text--darken-2"
  :disabled="true"
/>

Expected Behavior

The text of the button gets greyed out.

Actual Behavior

The text of the button does not change color.

Reproduction Link

https://codepen.io/morphatic/pen/eqJwEP

Other comments

May have been caused by and/or be related to https://github.com/vuetifyjs/vuetify/commit/c5dae24d

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

phil-rwcommented, Aug 15, 2019

Got it! Thank you for the detailed explanation @morphatic - makes sense. 👍

0reactions

morphaticcommented, Aug 14, 2019

Yes, it is a bug because it deviates from the official Material 2.0 spec for button styles. Vuetify specifically aims to hew as close to this spec as possible. The spec is clear and explicit about what the disabled state should look like for all button styles. It’s totally fine if you want to deviate from the spec in your own app, but the buggy version unexpectedly fails to grey out the button text when developers specify colors with more than one rule.

You’re still able to override the default style with your own custom CSS. Here’s an (admittedly awful to look at) example using the latest, non-buggy version: https://codepen.io/morphatic/pen/jONWeEG