Feature #55922
Updated by Ernesto Puerta almost 2 years ago
h3. What The use case would be to achieve what is described "here":https://github.com/ceph/ceph/pull/46201#discussion_r868263244: h4. Current !https://user-images.githubusercontent.com/71764184/167565911-98fce8c1-1cc4-4990-b5d5-8322f143f699.png! h4. Proposed !https://user-images.githubusercontent.com/37327689/167466706-b79cbc4b-3dda-4cab-b56a-8146d6fd07c9.png! !https://user-images.githubusercontent.com/37327689/167468354-20b48d3e-ba0e-46bb-9dc5-6cbd9a2b7ce0.png! "here":https://github.com/ceph/ceph/pull/46201#discussion_r868263244. h3. How New Angular component or directive that creates a "Bootstrap badge":https://getbootstrap.com/docs/4.0/components/badge/ with a background color that depends on the text of the badge: <pre><code class="html"> <cd-label>Primary</cd-label> <cd-label>Secondary</cd-label> </code></pre> In the above example, the @primary@ and @secondary@ labels would have different background colors. The color depends on the contents (text) of the label. There's a specific use case here: sometimes badges/labels can be used for key-value expressions. In that very case, probably we might not want to change the color with the value, and only with the key. And example of this would be labels like @mon: 1@, where we want the @mon@ part to be colored always with the same colour even if the count is 1, 2, 3... For that latter use case we could derive a new component from the above: <pre><code class="html"> <cd-kv-label key="mon">1</cd-kv-label> <cd-kv-label key="osd">100</cd-kv-label> </code></pre> For deriving the color from the text there could be multiple approaches: * Random color based on the hash, like "colorhash library":https://www.npmjs.com/package/color-hash and "demo":https://zenozeng.github.io/color-hash/demo/. * However the above will result in potentially any color (even those not matching our current theme), so a solution would be to provide a bucketed solution. The input to the component is the string to hash a max-colors input (e.g.: 10). Then: @hash(string) mod max-colors@. Instead of directly setting the CSS background color property, the component sets a class @cd-label-color-0@, @cd-label-color-1@ ... @cd-label-color-9@, and then we can customize the colors by defining that CSS classes.