[ADF-2296] Background color on form buttons (#2953)

* add a targeting ID for any Form button

* custom outcome style ID

docs/form.component.md

@@ -269,6 +269,40 @@ formService.formEvents.subscribe((event: Event) => {
 });
 ```
 
+#### Customize form outcomes (buttons) styles
+
+If you want custtomize the outcoumes style of your form you can do it using plain css selectors.
+Any outcome has an Id that is composed in the following way:
+
+
+```
+  adf-form-YOUR_OUTCAME_NAME
+```
+
+Using the CSS you can target any outcome ID and change the style as in this example:
+
+```css
+#adf-form-complete {
+    background-color: blue !important;
+    color: white;
+}
+
+
+#adf-form-save {
+    background-color: green !important;
+    color: white;
+}
+
+#adf-form-customoutcome {
+    background-color: yellow !important;
+    color: white;
+}
+```
+
+![](docassets/images/form-style-sample.png)
+
+
+
 ## See also
 
 -   [Stencils](stencils.md)

lib/core/form/components/form.component.html

@@ -30,7 +30,7 @@
         </mat-card-content>
         <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
             <!--[class.mdl-button--colored]="!outcome.isSystem"-->
-            <button *ngFor="let outcome of form.outcomes" 
+            <button [id]="'adf-form-'+ outcome.name  | lowercase" *ngFor="let outcome of form.outcomes"
                     [color]="getColorForOutcome(outcome.name)"
                     mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"