-
Notifications
You must be signed in to change notification settings - Fork 129
0.52 Breaking Changes
Inna Atanasova edited this page Sep 26, 2024
·
3 revisions
- Platform
table getRowsInViewport()
function renamed togetCurrentlyRenderedRows()
- Platform
table setRowsInViewport()
function renamed tosetCurrentlyRenderedRows()
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 thefd-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 fromfd-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 thefd-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 fromfd-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 newfd-notification-group-growing-item
component instead. - Removed the
fd-notification-limit-title
directive. Use thefd-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>