UI-272 Add warning class to radial chart in stencil library Signed-of…

[tarablack01]

…f-by: Tara Black [email protected]

🔩 Description

Add warning class to radial chart in stencil library.

👍 Definition of Done

⛓️ Related Resources

https://chefio.atlassian.net/browse/A2-792

✅ Checklist

• [x ] Necessary docs added/updated?

[susanev]

we are trying to move away from hsl, because the hex(1) -> hsl -> hex(2) conversion results in different hex values for (1) and (2) which makes it more difficult for the ux team to collaborate with the engineers. is there any way we could change this component to start using hex instead of hsl in this pr?

[tarablack01]

@susanev Updated PR to replace HSL with HEX :)

[apriofrost]

Hi Tara! Thanks for working on the issue!
The comment is related to the color palette change work planned for the future. I noticed that the warning color is using chef-primary, we tried to stay away from using this color because it looks very similar to chef-critical when they are near each other in the chart.

The proposed colors for the mini donut chart are:

• chef-critical for critical services count
• #FF9654 (new color to be added to the palette) for warning services count
• #3DA5FF (new color to be added to the palette) for OK services count
• #B7BCBC (new color to be added to the palette) for unknown services count.

Last time when we chatted in the UI team backlog grooming, we decided to add the colors for now without turning them into variables. There is a spike (#309) planned for the color palette work (#275). But I'm open to other suggestions you might have on how we implement these color changes. Thank you! :)

[scottopherson]

If we're removing all usages of chef-hsl in this PR we should go ahead and remove the function definitions as well:

automate/components/chef-ui-library/stencil.config.js

Lines 22 to 31 in ec27cd4

	sass({
	functions: {
	'chef-hsl($hueSatLight)': function (hsl) {
	return new sassLib.types.String(`hsl(${hsl.getValue()})`);
	},
	'chef-hsla($hueSatLight, $alpha: 1)': function (hsl, alpha) {
	return new sassLib.types.String(`hsla(${hsl.getValue()}, ${alpha.getValue()})`);
	}
	}
	})

👍

[tarablack01]

@apriofrost I've added the new colors to be used within the chart components and updated the examples to utilize the new chart colors. I've also picked up story #275 to implement the color palette work when it's ready.
@scottopherson The unused hsl, hsla functions have been removed.

[susanev]

@tarablack01 we had intended that #309 would be done before #275 so we can get an idea of the amount of engineering effort will be involved.