Nimble theme for select Material 15+ components

[fredvisser]

😯 Problem to Solve

See related AzDO issue: Feature 2579998: Remove Angular Material 14 dependency from SystemLink apps

SystemLink continues to use a handful of Angular Material components that have been themed with the SystemLink Angular Theme (SLAT). With the upgrade to Angular 15, Material components were restructured so that the existing theme is broken. We are continuing to use the Material 14 components in our Angular 15 apps today, but this requires force installing the NPM dependencies, and breaks existing Renovate workflows.

We should theme the Angular Material (version 15) components that are still being used in SystemLink Enterprise to fix Renovate workflows, and to unblock the upgrade to Angular 16+.

💁 Proposed Solution

Create a new Angular theme package with 'nimble-like' styles for:

• mat-form-field (systems, asset-manager, sl-notebook-execution-form, security, asset-details, labmanagement)

  • matInput type="text" (systems, asset-manager)
  • class="slat-readonly-field" (systems, sl-notebook-execution-form)
  • matInput type="password" (systems)

• mat-label (systems, asset-manager, sl-notebook-execution-form)

• mat-autocomplete (systems, sl-notebook-execution-form)

• mat-option (asset-manager, systems, sl-notebook-execution-form, security)

• mat-optgroup (systems, sl-notebook-execution-form)

• mat-error (systems, sl-notebook-execution-form, security)

• mat-hint (systems, sl-notebook-execution-form, labmanagement)

• mat-menu (asset-manager, sl-action-menu, security)

• mat-accordion (systems, security)

• mat-expansion-panel (systems)

• mat-expansion-panel-header (systems)

• mat-panel-description (systems)

• mat-panel-title (systems)

• mat-icon (asset-manager, systems, sl-action-menu, security)

• mat-icon-button (security)

• mat-datepicker-toggle (asset-details, labmanagement, routinemanager)

• mat-datepicker (labmanagement)

• ngx-mat-datetime-picker (asset-details, labmanagement, routinemanager)

• mat-dialog-content (security)

• mat-dialog-actions (security)

• mat-divider (systems)

• mat-table (upload files grid)

Search query used

Not needed / no longer used / can remove styles for:

• mat-toolbar (asset-manager)
• mat-tab-group (asset-manager)
• mat-tab (asset-manager)
• mat-checkbox (asset-manager)
• mat-chip-list (asset-manager)
• mat-chip (asset-manager)
• mat-slide-toggle (asset-manager)
• mat-sidenav-container (asset-manager)
• mat-sidenav (asset-manager)
• mat-sidenav-content (asset-manager)
• mat-select (asset-manager)
• mat-card (styles in SLAT, used for InsightCM?)

Consider - enabled, disabled, readonly

📋 Tasks

• [ ] nimble-{name} visual design issue
• [ ] nimble-{name} Storybook tests
• [ ] nimble-{name} Storybook docs
• [ ] nimble-{name} Angular wrapper
• [ ] Add to Angular example app

[rajsite]

Possible approaches discussed at stand-up:

Create a supported alternates library

• Nimble doesn't provide every component yet (notably date picker and missing features in combobox and select)
• Create a library that can be used broadly (all NI users as general open, nimble-maintained package) with angular material styled nimbly
• As far as possible only use supported theming options in angular material (disable ripple, density, color, integrate with theme-provider)
• Push back hard on jumping through hoops / internal apis for extra custom behavior. Prefer passable and prefer nimble investment instead of spending more time on workarounds.
• Validate and focus style only on nimble gaps (i.e. missing components)
• @ni/nimble-angular-theme-for-material and even NimbleBlazorThemeForFluent potentially (a kinda funky name to cause pause and consideration :P)
• Gives a stronger message around "Use Nimble first, and use our suggested alternate libraries for missing pieces"

Create a Skyline only library

• slatv2 similar to above but from systemlinkshared
• still prefer being as close as possible to support angular material theming only
• separate library from slat original to encourage apps to migrate at their pace
• not highly advertised as a general solution (npm package under ni-kismet, not managed in nimble repo)

Migrate existing slat

• Make changes directly in slat instead of as a separate library
• May be a stronger forcing function, may be harder to coordinate

Want to avoid

• Generally want to avoid investing in using internal / unsupported apis for very custom formatting of angular material components
• Want to enable teams to control their migration (but push for them to do it quickly)

[mollykreis]

At least within SLE, I don't think we can avoid coordinating the update across all applications since SystemLinkShared has a dependency on Material. I think we'd need all apps to update to Material 15 + styling library at the same time.

[fredvisser]

@NIbokeefe - We should discuss using the Material Theme Builder to create a Material theme so that key components are compatible with Nimble.

[msmithNI]

On the SLE side, we've upgraded systemlink-angular-theme to support Angular Material 15 / MDC components, and updated SystemLinkShared for those updates. See AzDo feature for more info.

Currently we don't have plans to put anything on the Nimble side for Material component theming.