AAE-24927 update widgets schema & predefined theme (#10185)

* AAE-24927 update widgets schema * AAE-24927 predefined theme * update theme model and tests * exclude flaky test
2025-05-12 17:04:57 +00:00 · 2024-09-09 14:45:43 +02:00 · 2024-09-09 14:45:43 +02:00 · 4202fa7e90
commit 4202fa7e90
parent 7506c109d8
12 changed files with 239 additions and 63 deletions
--- a/e2e/protractor.excludes.json
+++ b/e2e/protractor.excludes.json
@ -44,5 +44,6 @@
  "C282017": "https://hyland.atlassian.net/browse/ACS-7960",
  "C282010": "https://hyland.atlassian.net/browse/ACS-7960",
  "C261046": "https://hyland.atlassian.net/browse/ACS-7960",
-  "C286508": "https://hyland.atlassian.net/browse/ACS-8733"
+  "C286508": "https://hyland.atlassian.net/browse/ACS-8733",
+  "C286509": "https://hyland.atlassian.net/browse/ACS-8760"
 }
--- a/lib/core/src/lib/form/components/widgets/core/index.ts
+++ b/lib/core/src/lib/form/components/widgets/core/index.ts
@ -46,3 +46,4 @@ export * from './form-field-utils';
 export * from './form-field-variable-options';
 export * from './widget-schema.model';
 export * from './theme.model';
+export * from './predefined-theme';
--- a/lib/core/src/lib/form/components/widgets/core/predefined-theme.ts
+++ b/lib/core/src/lib/form/components/widgets/core/predefined-theme.ts
@ -0,0 +1,117 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PredefinedThemeModel } from './theme.model';
+
+export const predefinedTheme: PredefinedThemeModel = {
+    widgets: {
+        'readonly-text': {
+            normal: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.NORMAL',
+                styles: {
+                    '--adf-readonly-text-font-size': '16px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': 'inherit'
+                }
+            },
+            strong: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.STRONG',
+                styles: {
+                    '--adf-readonly-text-font-size': '16px',
+                    '--adf-readonly-text-font-weight': 'bold',
+                    '--adf-readonly-text-color': 'inherit'
+                }
+            },
+            heading: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.HEADING',
+                styles: {
+                    '--adf-readonly-text-font-size': '20px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': 'inherit'
+                }
+            },
+            title: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.TITLE',
+                styles: {
+                    '--adf-readonly-text-font-size': '24px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': 'inherit'
+                }
+            },
+            annotation: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.ANNOTATION',
+                styles: {
+                    '--adf-readonly-text-font-size': '12px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': 'inherit'
+                }
+            }
+        },
+        group: {
+            normal: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.NORMAL',
+                styles: {
+                    '--adf-header-font-size': '16px',
+                    '--adf-header-font-weight': 'normal',
+                    '--adf-header-color': 'inherit'
+                }
+            },
+            heading: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.HEADING',
+                styles: {
+                    '--adf-header-font-size': '20px',
+                    '--adf-header-font-weight': 'normal',
+                    '--adf-header-color': 'inherit'
+                }
+            },
+            title: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.TITLE',
+                styles: {
+                    '--adf-header-font-size': '24px',
+                    '--adf-header-font-weight': 'normal',
+                    '--adf-header-color': 'inherit'
+                }
+            }
+        },
+        'radio-buttons': {
+            normal: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.NORMAL',
+                styles: {
+                    '--adf-radio-buttons-font-size': '16px',
+                    '--adf-radio-buttons-font-weight': 'normal',
+                    '--adf-radio-buttons-color': 'inherit'
+                }
+            },
+            strong: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.STRONG',
+                styles: {
+                    '--adf-radio-buttons-font-size': '16px',
+                    '--adf-radio-buttons-font-weight': 'bold',
+                    '--adf-radio-buttons-color': 'inherit'
+                }
+            },
+            heading: {
+                name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.HEADING',
+                styles: {
+                    '--adf-radio-buttons-font-size': '20px',
+                    '--adf-radio-buttons-font-weight': 'normal',
+                    '--adf-radio-buttons-color': 'inherit'
+                }
+            }
+        }
+    }
+};
--- a/lib/core/src/lib/form/components/widgets/core/theme.model.ts
+++ b/lib/core/src/lib/form/components/widgets/core/theme.model.ts
@ -35,18 +35,21 @@ export interface ThemeModel {
    };
    widgets?: {
        ['readonly-text']?: {
-            [styleName: string]: {
-                [variable in ReadonlyTextThemeVariable]?: string;
+            [styleKey: string]: {
+                name: string;
+                styles: { [variable in ReadonlyTextThemeVariable]?: string };
            };
        };
        ['group']?: {
-            [styleName: string]: {
-                [variable in HeaderThemeVariable]?: string;
+            [styleKey: string]: {
+                name: string;
+                styles: { [variable in HeaderThemeVariable]?: string };
            };
        };
        ['radio-buttons']?: {
-            [styleName: string]: {
-                [variable in RadioButtonsThemeVariable]?: string;
+            [styleKey: string]: {
+                name: string;
+                styles: { [variable in RadioButtonsThemeVariable]?: string };
            };
        };
    };
@ -54,3 +57,18 @@ export interface ThemeModel {
        [widgetType in SupportedWidgetType]?: string;
    };
 }
+
+export interface WidgetSchemaPredefinedStyle<TFieldVariable extends string> {
+    [styleKey: string]: {
+        name: string;
+        styles: { [key in TFieldVariable]?: string };
+    };
+}
+
+export interface PredefinedThemeModel {
+    widgets?: {
+        ['readonly-text']?: WidgetSchemaPredefinedStyle<ReadonlyTextThemeVariable>;
+        ['group']?: WidgetSchemaPredefinedStyle<HeaderThemeVariable>;
+        ['radio-buttons']?: WidgetSchemaPredefinedStyle<RadioButtonsThemeVariable>;
+    };
+}
--- a/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts
+++ b/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts
@ -19,7 +19,7 @@ import { FormThemeVariable } from './theme.model';

 export type WidgetStylePropertySelector = 'number' | 'options' | 'colorOptions';

-export interface WidgetSchemaModel<TFieldVariable = string, TFormVariable = FormThemeVariable> {
+export interface WidgetSchemaModel<TFieldVariable extends string, TFormVariable = FormThemeVariable> {
    themeProperties: WidgetSchemaThemeProperty<TFieldVariable, TFormVariable>[];
 }

--- a/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts
+++ b/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts
@ -37,11 +37,11 @@ export const displayTextSchema: WidgetSchemaModel<ReadonlyTextThemeVariable> = {
            type: 'options',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.REGULAR',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
                    value: 'normal'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BOLD',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
                    value: 'bold'
                }
            ],
@ -55,31 +55,31 @@ export const displayTextSchema: WidgetSchemaModel<ReadonlyTextThemeVariable> = {
            type: 'colorOptions',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.SYSTEM_COLOR',
+                    name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
                    value: 'inherit'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLACK',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLACK',
                    value: '#000000'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREY',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREY',
                    value: '#9CA3AF'
                },
                {
-                    name: 'FORM.FIELD_STYLE.RED',
+                    name: 'FORM.FIELD_STYLE.COLORS.RED',
                    value: '#DA1500'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREEN',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREEN',
                    value: '#04A003'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLUE',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLUE',
                    value: '#0A60CE'
                },
                {
-                    name: 'FORM.FIELD_STYLE.YELLOW',
+                    name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
                    value: '#FACC15'
                }
            ],
--- a/lib/core/src/lib/form/components/widgets/header/header.schema.ts
+++ b/lib/core/src/lib/form/components/widgets/header/header.schema.ts
@ -37,11 +37,11 @@ export const headerSchema: WidgetSchemaModel<HeaderThemeVariable> = {
            type: 'options',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.REGULAR',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
                    value: 'normal'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BOLD',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
                    value: 'bold'
                }
            ],
@ -55,31 +55,31 @@ export const headerSchema: WidgetSchemaModel<HeaderThemeVariable> = {
            type: 'colorOptions',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.SYSTEM_COLOR',
+                    name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
                    value: 'inherit'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLACK',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLACK',
                    value: '#000000'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREY',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREY',
                    value: '#9CA3AF'
                },
                {
-                    name: 'FORM.FIELD_STYLE.RED',
+                    name: 'FORM.FIELD_STYLE.COLORS.RED',
                    value: '#DA1500'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREEN',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREEN',
                    value: '#04A003'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLUE',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLUE',
                    value: '#0A60CE'
                },
                {
-                    name: 'FORM.FIELD_STYLE.YELLOW',
+                    name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
                    value: '#FACC15'
                }
            ],
--- a/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts
+++ b/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts
@ -23,20 +23,30 @@ const mockTheme: ThemeModel = {
    widgets: {
        'readonly-text': {
            'my-custom-display-text': {
-                '--adf-readonly-text-font-size': '12px',
-                '--adf-readonly-text-font-weight': 'normal',
-                '--adf-readonly-text-color': '#000000'
+                name: 'My Custom Display Text',
+                styles: {
+                    '--adf-readonly-text-font-size': '12px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': '#000000'
+                }
            },
            'my-custom-display-text2': {
-                '--adf-readonly-text-font-size': '15px',
-                '--adf-readonly-text-color': 'green'
+                name: 'My Custom Display Text 2',
+                styles: {
+                    '--adf-readonly-text-font-size': '15px',
+                    '--adf-readonly-text-font-weight': 'normal',
+                    '--adf-readonly-text-color': 'green'
+                }
            }
        },
        'radio-buttons': {
-            'my-custom-radio-buttons2': {
-                '--adf-radio-buttons-font-size': '15px',
-                '--adf-radio-buttons-font-weight': 'normal',
-                '--adf-radio-buttons-color': 'green'
+            'my-custom-radio-buttons': {
+                name: 'My Custom Radio Buttons',
+                styles: {
+                    '--adf-radio-buttons-font-size': '12px',
+                    '--adf-radio-buttons-font-weight': 'normal',
+                    '--adf-radio-buttons-color': '#000000'
+                }
            }
        }
    }
@ -59,7 +69,7 @@ describe('FieldStylePipe', () => {
        };

        const result = pipe.transform(field as FormFieldModel);
-        expect(result).toEqual('--adf-readonly-text-font-size: 12px;--adf-readonly-text-font-weight: normal;--adf-readonly-text-color: #000000');
+        expect(result).toEqual('--adf-readonly-text-font-size:12px;--adf-readonly-text-font-weight:normal;--adf-readonly-text-color:#000000;');
    });

    it('should return empty string when style name is not provided', () => {
--- a/lib/core/src/lib/form/pipes/field-style.pipe.ts
+++ b/lib/core/src/lib/form/pipes/field-style.pipe.ts
@ -18,6 +18,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { FormFieldModel } from '../components/widgets/core/form-field.model';
 import { ContainerModel } from '../components/widgets/core/container.model';
+import { predefinedTheme } from '../components/widgets/core/predefined-theme';

@Pipe({
    name: 'adfFieldStyle',
@ -25,15 +26,20 @@ import { ContainerModel } from '../components/widgets/core/container.model';
 })
 export class FieldStylePipe implements PipeTransform {
    transform(field: FormFieldModel | ContainerModel): string {
-        const theme = field.form?.theme?.widgets[field.type];
-        const style = field.style && theme?.[field.style];
+        if (!field.style) {
+            return '';
+        }

-        return style ? this.flattenStyles(style) : '';
+        const themeStyle = field.form?.theme?.widgets[field.type]?.[field.style];
+        const predefinedThemeStyle = predefinedTheme.widgets[field.type]?.[field.style];
+        const styles = (themeStyle || predefinedThemeStyle)?.styles;
+
+        return styles ? this.flattenStyles(styles) : '';
    }

    private flattenStyles(styles: { [key: string]: string }): string {
        return Object.entries(styles)
-            .map(([key, value]) => `${key}: ${value}`)
-            .join(';');
+            .map(([key, value]) => `${key}:${value};`)
+            .join('');
    }
 }
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@ -75,15 +75,38 @@
      "FONT_SIZE": "Font size",
      "FONT_WEIGHT": "Font weight",
      "FONT_COLOR": "Font color",
-      "REGULAR": "Regular",
-      "BOLD": "Bold",
-      "SYSTEM_COLOR": "System color",
-      "BLACK": "Black",
-      "GREY": "Grey",
-      "RED": "Red",
-      "GREEN": "Green",
-      "BLUE": "Blue",
-      "YELLOW": "Yellow"
+      "FONT_WEIGHTS": {
+        "REGULAR": "Regular",
+        "BOLD": "Bold"
+      },
+      "COLORS": {
+        "SYSTEM_COLOR": "System color",
+        "BLACK": "Black",
+        "GREY": "Grey",
+        "RED": "Red",
+        "GREEN": "Green",
+        "BLUE": "Blue",
+        "YELLOW": "Yellow"
+      },
+      "PREDEFINED": {
+          "HEADER": {
+            "NORMAL": "normal",
+            "HEADING": "heading",
+            "TITLE": "title"
+          },
+          "RADIO_BUTTONS": {
+            "NORMAL": "normal",
+            "STRONG": "strong",
+            "HEADING": "heading"
+          },
+          "READONLY_TEXT": {
+            "NORMAL": "normal",
+            "STRONG": "strong",
+            "HEADING": "heading",
+            "TITLE": "title",
+            "ANNOTATION": "annotation"
+          }
+      }
    }
  },
  "CORE": {
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@ -53,8 +53,8 @@
                                <mat-icon>refresh</mat-icon>
                            </button>
                        </div>
-                        <span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName">
-                            {{form.taskName}}
+                        <span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName"
+                            >{{form.taskName}}
                            <ng-container *ngIf="!form.taskName">
                                {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
                            </ng-container>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts
@ -15,9 +15,9 @@
 * limitations under the License.
 */

-import { WidgetSchemaModel, RadioButtonsThemeVariable } from '@alfresco/adf-core';
+import { RadioButtonsThemeVariable, WidgetSchemaModel } from '@alfresco/adf-core';

-export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
+export const radioButtonsSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
    themeProperties: [
        {
            name: 'FORM.FIELD_STYLE.FONT_SIZE',
@ -36,11 +36,11 @@ export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
            type: 'options',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.REGULAR',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
                    value: 'normal'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BOLD',
+                    name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
                    value: 'bold'
                }
            ],
@ -54,31 +54,31 @@ export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
            type: 'colorOptions',
            options: [
                {
-                    name: 'FORM.FIELD_STYLE.SYSTEM_COLOR',
+                    name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
                    value: 'inherit'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLACK',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLACK',
                    value: '#000000'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREY',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREY',
                    value: '#9CA3AF'
                },
                {
-                    name: 'FORM.FIELD_STYLE.RED',
+                    name: 'FORM.FIELD_STYLE.COLORS.RED',
                    value: '#DA1500'
                },
                {
-                    name: 'FORM.FIELD_STYLE.GREEN',
+                    name: 'FORM.FIELD_STYLE.COLORS.GREEN',
                    value: '#04A003'
                },
                {
-                    name: 'FORM.FIELD_STYLE.BLUE',
+                    name: 'FORM.FIELD_STYLE.COLORS.BLUE',
                    value: '#0A60CE'
                },
                {
-                    name: 'FORM.FIELD_STYLE.YELLOW',
+                    name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
                    value: '#FACC15'
                }
            ],