0.52 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

  • Platform table getRowsInViewport() function renamed to getCurrentlyRenderedRows()
  • Platform table setRowsInViewport() function renamed to setCurrentlyRenderedRows()

Notifications - #12476

  • Significant markup updates for both Notification and Notification Group components.
  • Removed the fd-notification-indicator directive. The Icon component with color is now used for priority/status indicators.

Before:

<fd-notification-header>
    <div fd-notification-indicator type="success"></div>
    <h2 fd-notification-title [unread]="true">...</h2>
</fd-notification-header>

After:

<fd-notification-header>
    <fd-icon glyph="error" color="negative"></fd-icon>
    <h4 fd-notification-title [unread]="true">...</h4>
</fd-notification-header>
  • Notification Message Strip is now placed inside a container div with the fd-notification-message-strip-container directive.

Before:

<fd-notification>
    <fd-message-strip type="warning" marginBottom="1rem"></fd-message-strip>
    ........
</fd-notification>

After:

<fd-notification>
    <div fd-notification-message-strip-container>
        <fd-message-strip type="error"> A dismissible error message strip. </fd-message-strip>
    </div>
   .....
</fd-notification>
  • The mobile property has been removed from fd-notification, previously used for displaying Notifications in Popover dialogs.
  • Introduced the new fd-notification-popover directive, which wraps the Notification Group content inside the Popover body.
  • Notification Groups are no longer displayed in Tabs.
  • The Notification Popover now includes a Toolbar for user-defined actions (e.g., clear all, settings, sort).
  • Message Strip can now be placed inside the Notification Popover, wrapped in a div with the fd-notification-message-strip directive applied.
  • Added the new fd-notification-list directive, applied to a ul element, for holding Notification Groups.
  • Removed the expanded property from fd-notification-group-header.
  • Introduced the new fd-notification-group-header-title directive for the Notification Group title.
  • Removed the fd-notification-limit component. Use the new fd-notification-group-growing-item component instead.
  • Removed the fd-notification-limit-title directive. Use the fd-notification-group-growing-item-title directive.
  • Removed the fd-notification-limit-description directive.

Before:

<fd-notification-group>
    <fdp-icon-tab-bar>
        <fdp-icon-tab-bar-tab>
            <fd-notification-group-list>
                <fd-notification-group-header [(expanded)]="...">
                    <fd-notification-header>
                        <h2 fd-notification-title [unread]="true">...</h2>
                    </fd-notification-header>
                    <fd-notification-actions>...</fd-notification-actions>
                </fd-notification-group-header>
                <fd-notification-body>...</fd-notification-body>
                <fd-notification-limit>
                    <h1 fd-notification-limit-title>...</h1>
                    <p fd-notification-limit-description>...</p>
                </fd-notification-limit>
            </fd-notification-group-list>
        </fdp-icon-tab-bar-tab>
        ....
    </fdp-icon-tab-bar>
</fd-notification-group>

After:

<fd-popover-body>
    <div fd-notification-popover>
        <fd-toolbar>...</fd-toolbar>
        <div fd-notification-message-strip>
            <fd-message-strip type="warning">...</fd-message-strip>
        </div>
        <ul fd-notification-list>
            <fd-notification-group [expanded]="true">
                <fd-notification-group-header>
                    <span fd-notification-group-header-title>...</span>
                </fd-notification-group-header>
                <fd-notification-group-list>
                    <fd-notification>...</fd-notification>
                </fd-notification-group-list>
                <fd-notification-group-growing-item>
                    <span fd-notification-group-growing-item-title>More</span>
                </fd-notification-group-growing-item>
            </fd-notification-group>
            
            <fd-notification-group>...</fd-notification-group>
        </ul>
    </div>
</fd-popover-body>
⚠️ **GitHub.com Fallback** ⚠️