Feat/add schematics for ghost button naming convention

[mistrykaran91]

See #1882

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request removes migration data for class members, component properties, selectors, and symbols. Feedback indicates these deletions break the upgrade path from version 48 to 49. Existing migration rules must be preserved to maintain backward compatibility while adding the new button class changes.

I am having trouble creating individual review comments. Click here to see my feedback.

projects/element-ng/schematics/migrations/data/class-member-replacement.ts (20)

It appears that existing migration data for SiResponsiveContainerDirective and ModalOptions is being removed. This will break the migration path for users upgrading from version 48 to 49. If these migrations are still relevant, they should be preserved. This pattern of removing existing migration data is observed across multiple files in this PR.

export const CLASS_MEMBER_REPLACEMENTS_MIGRATION: ClassMemberReplacementInstruction[] = [
  {
    module: /@(siemens|simpl)\/element-ng(\/resize-observer)?/,
    typeNames: ['SiResponsiveContainerDirective'],
    propertyReplacements: [
      { property: 'isXs', replacement: '${expression}.xs()' },
      { property: 'isSm', replacement: '${expression}.sm()' },
      { property: 'isMd', replacement: '${expression}.md()' },
      { property: 'isLg', replacement: '${expression}.lg()' },
      { property: 'isXl', replacement: '${expression}.xl()' },
      { property: 'isXxl', replacement: '${expression}.xxl()' }
    ]
  },
  {
    module: /@(siemens|simpl)\/element-ng(\/modal)?/,
    typeNames: ['ModalOptions'],
    propertyReplacements: [{ property: 'initialState', replacement: '${expression}.inputValues' }]
  }
];

projects/element-ng/schematics/migrations/data/component-property-names.ts (16)

Existing migration data for si-filtered-search, si-chart-gauge, and si-unauthorized-page is being removed. These should be preserved to maintain support for version upgrades.

export const COMPONENT_PROPERTY_NAMES_MIGRATION: ComponentPropertyNamesInstruction[] = [
  // Input name changes
  // v48 to v49
  {
    module: /@(siemens|simpl)\/element-ng/,
    elementSelector: 'si-filtered-search',
    propertyMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
  },
  {
    module: /@(siemens|simpl)\/charts-ng/,
    elementSelector: 'si-chart-gauge',
    propertyMappings: [
      { replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
    ]
  },
  {
    module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
    elementSelector: 'si-unauthorized-page',
    propertyMappings: [
      { replace: 'heading', replaceWith: 'titleText' },
      { replace: 'subHeading', replaceWith: 'copyText' },
      { replace: 'description', replaceWith: 'instructions' }
    ]
  }
];

projects/element-ng/schematics/migrations/data/element-class-changes.ts (33-45)

The migration rules for btn-circle have been removed. These should be kept alongside the new ghost button migrations to ensure a complete migration path for users.

  // btn-circle with btn-sm should have btn-sm removed
  {
    requiredClasses: ['btn', 'btn-circle', 'btn-sm'],
    removeClasses: ['btn-sm'],
    addClasses: []
  },
  // btn-circle with btn-xs should migrate to btn-sm
  {
    requiredClasses: ['btn', 'btn-circle', 'btn-xs'],
    removeClasses: ['btn-xs'],
    addClasses: ['btn-sm']
  },
  // btn-circle without size modifier should get btn-lg
  {
    requiredClasses: ['btn', 'btn-circle'],
    excludedClasses: ['btn-lg', 'btn-sm', 'btn-xs'],
    removeClasses: [],
    addClasses: ['btn-lg']
  },
  // Non-circle buttons with btn-xs should migrate to btn-sm
  {
    requiredClasses: ['btn', 'btn-xs'],
    excludedClasses: ['btn-circle'],
    removeClasses: ['btn-xs'],
    addClasses: ['btn-sm']
  },
  // btn-ghost now represents the primary ghost style; old btn-ghost (tertiary ghost) must become btn-tertiary-ghost
  {
    requiredClasses: ['btn-ghost'],
    removeClasses: ['btn-ghost'],
    addClasses: ['btn-tertiary-ghost']
  },
  // btn-primary-ghost (transitional class from v49.5.0) must become btn-ghost
  {
    requiredClasses: ['btn-primary-ghost'],
    removeClasses: ['btn-primary-ghost'],
    addClasses: ['btn-ghost']
  }
];

projects/element-ng/schematics/migrations/data/element-selectors.ts (14)

Existing migration data for si-unauthorized-page is being removed. This should be preserved.

export const ELEMENT_SELECTORS_MIGRATION: ElementSelectorInstruction[] = [
  // v48 to v49
  {
    replace: 'si-unauthorized-page',
    replaceWith: 'si-info-page',
    defaultAttributes: [
      { name: 'icon', value: 'element-warning-filled' },
      { name: 'iconColor', value: 'status-warning' }
    ]
  }
];

projects/element-ng/schematics/migrations/data/symbol-removals.ts (16)

Existing migration data for si-map and si-landing-page is being removed. This should be preserved.

export const SYMBOL_REMOVALS_MIGRATION: SymbolRemovalInstruction[] = [
  // v48 to v49
  {
    module: /@(siemens|simpl)\/maps-ng/,
    elementSelector: 'si-map',
    names: ['onResize']
  },
  {
    module: /@(siemens|simpl)\/element-ng/,
    elementSelector: 'si-landing-page',
    names: ['registerNowIntroText']
  }
];

projects/element-ng/schematics/migrations/data/symbol-renaming.ts (11)

Existing migration data for multiple modules (dashboards, toast, info-page, charts, etc.) is being removed. This should be preserved.

export const SYMBOL_RENAMING_MIGRATION: SymbolRenamingInstruction[] = [
  // v48 to v49
  {
    module: /@(siemens|simpl)\/dashboards-ng/,
    symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
  },
  {
    module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
    symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
    toModule: '@siemens/element-ng/common'
  },
  {
    module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
    symbolRenamings: [
      { replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
    ],
    toModule: '@siemens/element-ng/info-page'
  },
  {
    module: /@siemens\/charts-ng/,
    symbolRenamings: [
      { replace: 'SimplChartsNgModule', replaceWith: 'SiChartsNgModule' },
      { replace: 'SimplSeriesOption', replaceWith: 'SiSeriesOption' },
      { replace: 'SimplLineSeriesOption', replaceWith: 'SiLineSeriesOption' },
      { replace: 'SimplBarSeriesOption', replaceWith: 'SiBarSeriesOption' },
      { replace: 'SimplHeatmapSeriesOption', replaceWith: 'SiHeatmapSeriesOption' },
      { replace: 'SimplScatterSeriesOption', replaceWith: 'SiScatterSeriesOption' },
      { replace: 'SimplCandlestickSeriesOption', replaceWith: 'SiCandlestickSeriesOption' }
    ]
  },
  {
    module: /@siemens\/live-preview/,
    symbolRenamings: [
      { replace: 'SimplLivePreviewRoutingModule', replaceWith: 'SiLivePreviewRoutingModule' },
      { replace: 'SimplLivePreviewModule', replaceWith: 'SiLivePreviewModule' }
    ]
  },
  {
    module: /@siemens\/maps-ng/,
    symbolRenamings: [{ replace: 'SimplMapsNgModule', replaceWith: 'SiMapsNgModule' }]
  },
  {
    module: /@siemens\/native-charts-ng/,
    symbolRenamings: [
      { replace: 'SimplNativeChartsNgModule', replaceWith: 'SiNativeChartsNgModule' }
    ]
  }
];