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.

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

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

Open
Zorin95670 opened this issue May 17, 2023 · 6 comments
Open

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

Zorin95670 opened this issue May 17, 2023 · 6 comments

Comments

@Zorin95670
Copy link

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
Copy link

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
Copy link

@pdanpdan
Copy link
Collaborator

I cannot open it - can you?

@SilvanFux
Copy link

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
Copy link
Collaborator

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:

  • what prop for text
  • what prop for outline
  • what prop for bg
  • how should the colors fall back when one is missing

@SilvanFux
Copy link

SilvanFux commented Nov 30, 2023

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

  • color for the outline because it's the button color
  • text-color for the text color
  • bg color should be stay at transparent by default
  • when text-color is missing the color prop value should be used.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants