RFC: [ngx-inform] Should panelClasses add up or should there be a hierarchy system?

[WHeirstrate]

Authors: @WHeirstrate
Package: ngx-inform
Posted: 25 september 2024
Status: Open

If multiple panel classes are provided to modal implementations, only the most globally defined class gets set onto each panel. This is by design, as it follows the pattern all other properties follow. This is, however, not ideal for the end-user.

Scenario

Consider a project in which both a succes and an error modal should have the same border radius and font-family. Providing the class in the globalmost configuration would ensure each modal shares this same global style. If the error modal should have a larger container than the success modal, a different panelClass could be added to both modals. This would make it possible to implement 1 modal component, provide it to both the success and error modal and provide two different panelClasses.

provideNgxModalConfiguration({
    modals: {
         success: {
            component: StatusModalComponent,
            panelClass: 'success-modal-panel-class',
            ...
        },
         error: {
            component: StatusModalComponent,
            panelClass: 'error-modal-panel-class',
            ...
        },

    },
    panelClass: 'global-panel-class',

This is currently not possible and breaks the general pattern set by the package.

Current implementation

The NgxModalGlobalCDKConfiguration provides a panelClass property. This provides a way for a modal to have a class applied not to the host of the provided modal component, but to its parent. This can be done in three distinct ways:

1. Within the global configuration object:

// main.ts
provideNgxModalConfiguration({
    modals: {
        ...
    },
    panelClass: 'global-panel-class',
}),

2. Within a modal configuration object in the same global config:

// main.ts
provideNgxModalConfiguration({
    modals: {
         example: {
            component: ExampleModalComponent,
            panelClass: 'global-example-modal-panel-class',
            ...
        }
    },
    ...
})

3. Within a modal opened in a component:

// custom.component.ts
this.modalService
    .open<'Test'>({
        component: CustomModalComponent,
        panelClass: 'custom-modal-panel-class'
    })

At the moment, the implementation follows a hierarchical system. If a class in example 2 is provided, classes in 3 are ignored. 1 has no current implementation.
This is a related bug, but will mean that setting a class for each panel will require overwrites in the modal components themselves.

Proposals

Current implementations of the ngx-inform configuration follow a hierarchical pattern: global config first, then later configurations. Implementing this same logic to the aforementioned example in Current implementation: if a panelClass is provided in 1, the class is set and 2 and 3 will have no effect. Initially, this was by design.

The suggested change is appending the classes provided in each step to the global one (addition). If step 1 and 2 would be combined into something like below, the resulting value would be an array of classes resulting in both classes being added to the panel DOM element (in hierarchical order): global-panel-class global-example-modal-panel-class.

// main.ts
provideNgxModalConfiguration({
    modals: {
         example: {
            component: ExampleModalComponent,
            panelClass: 'global-example-modal-panel-class',
            ...
    },
    panelClass: 'global-panel-class',
})

Impact

Option 2 would not require a major overhaul. In fact, the impact would be rather minimal. This would, however, break the hierarchical pattern established by other packages and properties of the same configuration. See modal.service.ts:230-248 for such an example.

Question

Should the classes

1. be added in hierarchical order (specified in Current implementation)
2. not be added in favour of a top-down approach (hierarchical order specified in Current implementation)