Hi,
I am developing some components for a site, and have set up my own button component wrapped around the button element in Cornerstone.
I have a few simple controls set up as below:
And I am piping these parameters from the component into the button.
The issue occurs with the colour of the Icon in the button.
As you can see in the controls, there is just one Color control, which I then insert into both the text color and icon color to keep things simple.
This selected colour is not being applied to the icon at all, despite being applied to the text. You can see in the screenshot below that the color selected above is not being applied to the icon.
Strangely, the hover or alt color is being applied correctly to both text and icon.
When inspecting the component, there is no color being applied to the .x-graphic-icon element at all. Below are the styles for the this element:
Compared to a fresh button element without any customisation except for turning on the graphic:
Strangely, when I remove the parameter dynamic content from the Graphic Icon » Color control, there is still no color applied, and it is just receiving the default color for a link.
This is the copied JSON for the component, copied from the Dev Tools, and which can be pasted onto a regular Button element to replicate the issue.
{"_type":"button","_bp_base":"4_4","_c_export":true,"_c_id":"ZxtxB5Kv42Fcpjp1G0","_label":"Button Inline","_p_json":"{\n \"setup\" : {\n \"type\" : \"group\",\n \"params\" : {\n \"text\" : \"text|Button text\",\n \"url\" : \"text|#\",\"include_icon\" : {\n \"type\" : \"choose\",\n \"label\" : \"Icon\",\n \"initial\" : \"no\",\n \"options\" : [\n {\"value\" : \"yes\", \"icon\" : \"check\"},\n {\"value\" : \"no\", \"icon\" : \"times\"}\n ]\n },\n \"icon\" : {\n \"type\" : \"fa-icon\",\n \"label\" : \" \",\n \"initial\" : \"angle-right\",\n \"when\" : \"eq(include_icon,'yes')\"\n },\n \"color\" : { \n\t \"type\" : \"color-pair\",\n \"initial\" : {\n \"base\" : \"global-color:link\",\n \"alt\" : \"global-color:link\"\n }\n },\n \"font-size\" : {\n \"type\" : \"font-size\",\n \"initial\" : \"1em\",\n \"isVar\" : true\n }\n }\n },\n \"design\" : {\n \"type\" : \"group\",\n \"params\" : {\n \"margin\" : {\n \"type\" : \"group\",\n \"noPicker\" : true,\n \"params\" : {\n \"top\" : {\n \"type\" : \"margin\",\n \"default\" : \"0px\",\n \"isVar\" : true,\n \"labelBefore\" : \"css:margin-top\"\n },\n \"bottom\" : {\n \"type\" : \"margin\",\n \"default\" : \"0px\",\n \"label\" : \"bttm\",\n \"isVar\" : true,\n \"labelBefore\" : \"css:margin-top\"\n }\n }\n },\n \"typography\" : {\n \"type\" : \"group\",\n \"noPicker\" : true,\n \"params\" : {\n \"font-family\" : \"font-family|global-ff:body\",\n \"font-weight\" : {\n \"type\" : \"font-weight\",\n \"initial\" : \"global-fw:body|fw-normal\"\n },\n \"line-height\" : \"line-height|inherit\",\n \"transform\" : {\n \"type\" : \"choose\",\n \"offValue\" : \"\",\n \"initial\" : \"\",\n \"options\" : [\n { \"value\" : \"uppercase\", \"label\" : \"TT\" },\n { \"value\" : \"capitalize\", \"label\" : \"Tt\" },\n { \"value\" : \"lowercase\", \"label\" : \"tt\" }\n ]\n }\n }\n }\n }\n },\n \"effects\" : {\n \"type\" : \"group\",\n \"params\" : {\n \"enable-scroll-effect\" : \"boolean-numerical|1\"\n }\n }\n}","_p_local":{"design":{"typography":[],"caret":[]},"setup":{"color":{"base":"global-color:link","alt":"global-color:link"},"include_icon":"yes"}},"anchor_base_font_size":"{{dc:p:setup.font-size}}","anchor_bg_color":"transparent","anchor_border_radius":"!0.35em","anchor_box_shadow_dimensions":"!0em 0.15em 0.65em 0em","anchor_flex_align":"baseline","anchor_flex_direction":"row-reverse","anchor_graphic":true,"anchor_graphic_icon":"{{dc:p:setup.icon}}","anchor_graphic_icon_color":"{{dc:p:setup.color.base}}","anchor_graphic_icon_color_alt":"{{dc:p:setup.color.alt}}","anchor_graphic_icon_font_size":"0.85em","anchor_graphic_icon_type":"svg","anchor_graphic_icon_width":"1em","anchor_graphic_interaction":"x-anchor-scale-up","anchor_graphic_margin":"0.35em 0.2em 0.35em 0.2em","anchor_href":"{{dc:p:setup.url}}","anchor_margin":"{{dc:p:design.margin.top}} 0em {{dc:p:design.margin.bottom}} -0.2em","anchor_padding":"!0.575em 0.85em 0.575em 0.85em","anchor_primary_font_family":"{{dc:p:design.typography.font-family}}","anchor_primary_font_weight":"{{dc:p:design.typography.font-weight}}","anchor_primary_particle":true,"anchor_primary_particle_color":"{{dc:p:setup.color.alt}}","anchor_primary_particle_height":"0.1em","anchor_primary_particle_location":"b_l","anchor_primary_particle_scale":"scale-x","anchor_primary_particle_transform_origin":"0% 50%","anchor_primary_particle_width":"calc(100% - 1.2em)","anchor_primary_text_color":"{{dc:p:setup.color.base}}","anchor_primary_text_color_alt":"{{dc:p:setup.color.alt}}","anchor_primary_text_transform":"{{dc:p:design.typography.transform}}","anchor_text_margin":"0.35em 0.2em 0.35em 0.2em","anchor_text_primary_content":"{{dc:p:setup.text}}","css":"{% if p.setup.include_icon == 'no' %}\n$el.x-anchor .x-graphic {\n display: none;\n}\n\n$el > .is-primary {\n width: 100%;\n}\n{% endif %}","effects_opacity_exit":"calc(1 - {{dc:p:effects.enable-scroll-effect fallback=\"1\"}})","effects_scroll":true,"effects_transform_exit":"translate(0px, calc(1rem * {{dc:p:effects.enable-scroll-effect fallback=\"1\"}}))"}
I have tried copying the above code across to another website, and the issue persists.
I have also tested setting up a new component, with a new button and only adding the color control, and the issue is not present.
I’m not sure what has happened to the code of my component, but something has broken, and I cannot figure it out!
Any help would be greatly apprecaited
Thanks