quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.53k stars 3.45k forks source link

Q-chip text-color not working on outline option #15850

Open Zorin95670 opened 1 year ago

Zorin95670 commented 1 year ago

What happened?

On this example, present on https://quasar.dev/vue-components/chip#example--outline:

<q-chip outline square color="deep-orange" text-color="white" icon="directions">
      Get directions
</q-chip>

We specify the text-color to white but it still deep-orange

What did you expect to happen?

The text have to be white as specify in attribute.

Reproduction URL

https://quasar.dev/vue-components/chip#example--outline

How to reproduce?

Look at the Outline example, the bug is present :)

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System        Linux(5.15.0-70-generic) - linux/x64
NodeJs                  18.16.0

Global packages
  NPM                   8.19.3
  yarn                  Not installed
  @quasar/cli           1.3.2
  @quasar/icongenie     Not installed
  cordova               Not installed

Networking
  Host                  vmoittie-ThinkStation-P340-Tiny
  eno2                  192.168.1.13

Relevant log output

No response

Additional context

No response

github-actions[bot] commented 1 year ago

Hi @Zorin95670! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

SilvanFux commented 7 months ago

use this as valid reproduction URL: https://codepen.io/pen?&editors=101&prefill_data_id=0a1b95b8-b4e0-441c-978e-b8cea0765322

pdanpdan commented 7 months ago

I cannot open it - can you?

SilvanFux commented 7 months ago

Sorry just find out that the "edit in codepen" liks are dynamicly generated with the template instread of a static link. Here is my fork: https://codepen.io/Silinator/pen/GRzYpgM

pdanpdan commented 7 months ago

Yes, for outlined there is only one color used (color if provided, else text-color). The question is what would you expect/want to colors to do:

SilvanFux commented 7 months ago

I would expect the following (would also expect this from the outline button):

the bg color can be set like this by default:

.q-chip--outline {
    background: unset;
    ...
}

without !important. so it overwrites the .q-chip background but also can be overwritten by own styles.