add FontAwesomeOption + fix BuilderColorPicker

addons/html_builder/static/src/builder/builder_components/builder_colorpicker.js

@@ -21,29 +21,38 @@ export class BuilderColorPicker extends Component {
     setup() {
         useBuilderComponent();
         this.currentColors = useDomState((editingElement) => ({
-            backgroundColor: editingElement
-                ? getComputedStyle(editingElement).backgroundColor
+            [this.props.styleAction]: editingElement
+                ? getComputedStyle(editingElement)[this.props.styleAction]
                 : undefined,
         }));
         this.colorButton = useRef("colorButton");
         onMounted(this.updateColorButton.bind(this));
         this.applyColor = this.env.editor.shared.history.makePreviewableOperation(
             ({ color, mode }) => {
                 for (const element of this.env.getEditingElements()) {
-                    this.env.editor.shared.color.colorElement(element, color, "backgroundColor");
+                    this.env.editor.shared.color.colorElement(
+                        element,
+                        color,
+                        this.props.styleAction
+                    );
                 }
 
                 this.updateColorButton();
             }
         );
     }
+
+    get colorType() {
+        return this.props.styleAction === "color" ? "foreground" : "background";
+    }
+
     updateColorButton() {
         const editingElement = this.env.getEditingElement();
         if (!this.colorButton.el || !editingElement) {
             return;
         }
         const color =
-            this.env.editor.shared.color.getElementColors(editingElement)["backgroundColor"];
+            this.env.editor.shared.color.getElementColors(editingElement)[this.props.styleAction];
         this.env.editor.shared.color.colorElement(this.colorButton.el, color, "backgroundColor");
     }
 }

addons/html_builder/static/src/builder/builder_components/builder_colorpicker.xml

@@ -5,7 +5,7 @@
     <BuilderComponent dependencies="props.dependencies">
         <div>
             <ColorSelector
-                type="'background'"
+                type="this.colorType"
                 getSelectedColors='() => this.currentColors'
                 getUsedCustomColors='() => []'
                 applyColor='this.applyColor.commit'

addons/html_builder/static/src/builder/options/font_awesome_option.js

@@ -0,0 +1,16 @@
+import { Plugin } from "@html_editor/plugin";
+import { registry } from "@web/core/registry";
+
+class FontAwesomeOptionPlugin extends Plugin {
+    static id = "FontAwesomeOptionPlugin";
+    resources = {
+        builder_options: [
+            {
+                template: "html_builder.FontAwesomeOption",
+                selector: "span.fa, i.fa",
+                exclude: "[data-oe-xpath]",
+            },
+        ],
+    };
+}
+registry.category("website-plugins").add(FontAwesomeOptionPlugin.id, FontAwesomeOptionPlugin);

addons/html_builder/static/src/builder/options/font_awesome_option.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.FontAwesomeOption">
+    <BuilderRow label.translate="Color">
+        <BuilderColorPicker styleAction="'color'"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Background Color">
+        <BuilderColorPicker styleAction="'backgroundColor'"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Size">
+        <BuilderButtonGroup>
+            <BuilderButton classAction="''" title="'Size 1x'">1x</BuilderButton>
+            <BuilderButton classAction="'fa-2x'" title="'Size 2x'">2x</BuilderButton>
+            <BuilderButton classAction="'fa-3x'" title="'Size 3x'">3x</BuilderButton>
+            <BuilderButton classAction="'fa-4x'" title="'Size 4x'">4x</BuilderButton>
+            <BuilderButton classAction="'fa-5x'" title="'Size 5x'">5x</BuilderButton>
+
+            <!-- TODO: nothing use it ??? Hidden buttons which allows to automatically remove other fa
+                sizing class we do not suggest.
+                TODO: implement a param to add those extra classes to remove
+                via selectClass (also fixes the fact that nothing is selected
+                if fa-1x is actually used on the icon in this case) -->
+            <!-- <BuilderButton classAction="'fa-1x'" dependencies="'fake'"/>
+            <BuilderButton classAction="'fa-lg'" dependencies="'fake'"/> -->
+        </BuilderButtonGroup>
+    </BuilderRow>
+</t>
+
+</templates>

addons/html_builder/static/src/builder/options/progress_bar_option.xml

@@ -14,7 +14,7 @@
         </BuilderSelect>
     </BuilderRow>
     <BuilderRow label.translate="Colors">
-        <BuilderColorPicker applyTo="'.progress-bar'" styleAction="'background-color'"/>
+        <BuilderColorPicker applyTo="'.progress-bar'" styleAction="'backgroundColor'"/>
     </BuilderRow>
     <BuilderRow label.translate="Striped">
         <BuilderCheckbox id="'striped_option'" classAction="'progress-bar-striped'" applyTo="'.progress-bar'"/>

addons/html_builder/static/src/builder/options/section_background_option.xml

@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.SectionBackgroundOption">
     <BuilderRow label.translate="Background">
-        <BuilderColorPicker />
+        <BuilderColorPicker styleAction="'backgroundColor'"/>
     </BuilderRow>
 </t>
 

addons/html_builder/static/tests/custom_tab/builder_components/builder_colorpicker.test.js

@@ -6,10 +6,10 @@ import { addOption, defineWebsiteModels, setupWebsiteBuilder } from "../../helpe
 
 defineWebsiteModels();
 
-test("should apply color to the editing element", async () => {
+test("should apply backgroundColor to the editing element", async () => {
     addOption({
         selector: ".test-options-target",
-        template: xml`<BuilderColorPicker/>`,
+        template: xml`<BuilderColorPicker styleAction="'backgroundColor'"/>`,
     });
     await setupWebsiteBuilder(`<div class="test-options-target">b</div>`);
     await contains(":iframe .test-options-target").click();
@@ -19,6 +19,21 @@ test("should apply color to the editing element", async () => {
     await click(".o-overlay-item [data-color='o-color-1']");
     expect(":iframe .test-options-target").toHaveClass("test-options-target bg-o-color-1");
 });
+
+test("should apply color to the editing element", async () => {
+    addOption({
+        selector: ".test-options-target",
+        template: xml`<BuilderColorPicker styleAction="'color'"/>`,
+    });
+    await setupWebsiteBuilder(`<div class="test-options-target">b</div>`);
+    await contains(":iframe .test-options-target").click();
+    expect(".options-container").toBeDisplayed();
+    await click(".we-bg-options-container .dropdown");
+    await animationFrame();
+    await click(".o-overlay-item [data-color='o-color-1']");
+    expect(":iframe .test-options-target").toHaveClass("test-options-target text-o-color-1");
+});
+
 test("hide/display base on applyTo", async () => {
     addOption({
         selector: ".parent-target",