Semantic-ui: [Label] Basic label has same colored background since 2.3.2

[j5k]

Steps

https://semantic-ui.com/elements/label.html -> Basic

Expected Result

up to version 2.3.1

Actual Result

colored background, if color was defined

Version

2.3.2

Testcase

https://semantic-ui.com/elements/label.html -> Basic

[ColinFrick]

Caused by https://github.com/Semantic-Org/Semantic-UI/pull/6220
background-color: @basicBackground !important; should most likely be background: @basicBackground !important;

[miguelcaravantes]

same issue

[adamkewley]

I'm also experiencing this issue on a few deployments (e.g. jobson-ui). Seems .ui.green.label's background-color is overriding .ui.basic.label's background color.

It's visible on the current SemanticUI documentation site (see basic section):

https://semantic-ui.com/elements/label.html

[ppetrone86]

same issue. I installed semantic ui 2.3.2 via npm in my angular app

[llturro]

@basicBackground equals to none @white; becoming a background-color invalid property value, caused by none.

Since specific attribute have precedence over combined, a possible solution would be adding a new variable for specific background attribute @basicBackgroundColor: @white; in label.variables and change

.ui.basic.[color].label { background-color: @basicBackground !important; ... }

for

.ui.basic.[color].label { background-color: @basicBackgroundColor !important; ... }

in label.less.

[OwenPattison]

Same issue

[kaesar]

Same issue. thanks

[jlukic]

I'll fix in patch

[alvaro-canepa]

Same problem for 2.3.3

@llturro Thanks for your comment. I fixed in a more simple way.
From site/elements/label.variables Add:

/* Basic */
@basicBackground: @white;

And voila!

[fridzema]

Are there any updates on this?
Really like to use the last release without manual hacks.

[hammy2899]

@fridzema Fixed in FUI https://github.com/hammy2899/Fomantic-UI

[hisuwh]

This is on your demo site guys. This is embarassing get it fixed:

[james-ff]

This is still an issue in 2.3.3.

• Important text in basic labels with a color cannot be read!

IMO this is high priority.

[dreaming-augustin]

As noted by hammy2899, it fixed in https://github.com/hammy2899/Fomantic-UI .

For those interested in a patch, I found the commit reference:
https://github.com/fomantic/Fomantic-UI/commit/2bbd88060e30c3791e1b2c182b8071758761595c

It's part of Version 2.4.0, released June 19, 2018:
https://github.com/fomantic/Fomantic-UI/pull/32

[james-ff]

Is there a Formantic-React?

[hammy2899]

@james-ff No but you can use fomantic with semantic react you just can use any of the new features which require implementation.

Can we also keep this issue on topic. If you have any questions about fomantic feel free to open an issue on the fomantic repo or join our discord.

[james-ff]

"No but you can use fomantic with semantic react you just can use any of the new features which require implementation."

I'm not quite sure what you mean here. If you can use fomantic with this library https://github.com/Semantic-Org/Semantic-UI-React (assuming you mean using just fomantic css), how? and where do I find the info on how to? (I can't find anything on the repo linked).

To be clear, I'm using https://github.com/Semantic-Org/Semantic-UI-React and have been required to come to this library to discuss this issue because the issue can't be fixed in the react version, as the css is determined here. https://github.com/Semantic-Org/Semantic-UI-React/issues/2995.

[hammy2899]

@james-ff I mean any bugs which are fixed in fomantic like this label one will be fixed in if you use fomantic with semantic-ui-react however if you want to use any new features which require new classes you will need to add them manually with className="some new class names" or if a new component is released like the calendar or range slider (coming in 2.5) the react library will not have support for these since they only implement features from the main semantic repo.

I have also just made a CSS only repo for easy integrations like react. https://github.com/fomantic/Fomantic-UI-CSS

I hope this clears things up if not please make an issue on the fomantic repo.

[ThiefMaster]

Any plans to make a new release of semantic-ui-css that includes this fix?

[J2BB]

It would be great ! There has been no release since July 9... the problem is quite urgent, this type of label is often used for error messages on forms for example.

Can a Semantic-UI staff member tell us more about the date of the next release ?

Thanks ;)

[hammy2899]

@J2BB There is no exact date when this will be fixed, this will be fixed when @jlukic merges the PR and creates a release.

@ThiefMaster The CSS repo will be updated once this repo gets a new release.

[awansoekamto]

Any workaround for web app? I use this semantic via the CDN.

[jralison]

@awansoekamto, I added the following code in my main css file:

// WORKAROUND - Fixing basic labels text colors in semantic-ui v2.3.1+
.ui.basic.label {
  background: none #FFFFFF !important;
}

I think it worth to mention that this stylesheet is loaded by last in my app.

[awansoekamto]

Thank you so much!

[jlukic]

I've fixed this in next.

[awansoekamto]

I've fixed this in next.
Thanks!
Let us know when this fix is pushed to CDNs.

[jlukic]

I just released 2.4.0 with new goodies, is live on NPM

[awansoekamto]

Awesome! Thanks team.

[ppetrone86]

Perfect. Everything works!!! Thank you.

[james-ff]

Hi, Coming from Semantic UI React and Next.js. Easiest way to use this library for my case is via CDN, can we get 2.4.0 added to the CDN?