0.30.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

Card Footer PR #5158

  • Card Footer component has been removed

Before

<fd-card-footer>
   <fd-toolbar size="compact" fdType="transparent" [clearBorder]="true">
       <button fd-toolbar-item fd-button [compact]="true">Assign to Project</button>
   </fd-toolbar>
</fd-card-footer>

After

<div fd-bar barDesign="footer" [cozy]="false">
     <div fd-bar-right>
          <fd-toolbar size="compact" fdType="transparent" [clearBorder]="true">
                <button fd-toolbar-item fd-button [compact]="true">Assign to Project</button>
          </fd-toolbar>
     </div>
</div>

Notifications PR #5186

  • Changes in markup:

Before:

fd-notification
  - fd-notification-header
     - fd-notification-title
  - fd-notification-body  
     - fd-notification-content
          - fd-notification-avatar
          - fd-notification-text 
               - fd-notification-description
               - fd-notification-metadata
     - fd-notification-footer
          - fd-notification-actions

Now:

fd-notification
  - fd-notification-body
     - fd-notification-content
         - fd-notification-header
              - fd-notification-indicator 
              - fd-notification-title 
         - fd-notification-paragraph
         - fd-notification-footer
              - fd-notification-footer-content
              - fd-notification-separator
     - fd-notification-actions

Before:

<fd-notification>
    <fd-notification-header>
        <h3 fd-notification-title></h3>
    </fd-notification-header>
    <fd-notification-body>
        <div fd-notification-content>
            <div fd-notification-avatar>
                <fd-avatar></fd-avatar>
            </div>
            <div fd-notification-text>
                <div fd-notification-description></div>
                <div fd-notification-metadata></div>
            </div>
        </div>
        <fd-notification-footer>
            <div fd-notification-actions></div>
        </fd-notification-footer>
   </fd-notification-body>
</fd-notification>

Now:

<fd-notification>
    <fd-notification-body>
        <fd-avatar></fd-avatar>
        <fd-notification-content>
            <fd-notification-header>
                <div fd-notification-indicator type="success"></div>
                <h2 fd-notification-title [unread]="true"></h2>
            </fd-notification-header>
            <p fd-notification-paragraph></p>
            <fd-notification-footer>
                <span fd-notification-footer-content></span>
                <span fd-notification-separator></span>
                <span fd-notification-footer-content></span>
            </fd-notification-footer>
        </fd-notification-content>
        <fd-notification-actions></fd-notification-actions>
    </fd-notification-body>
</fd-notification>
  • Removed fd-notification-avatar directive.

Before:

<div fd-notification-avatar>
    <fd-avatar></fd-avatar>
</div>

Now:

<fd-avatar></fd-avatar>
  • The directive fd-notification-actions is now a component

Before:

<div fd-notification-actions>
  <button fd-button</button>
  <button fd-button</button>
</div>

Now:

<fd-notification-actions>
   <button fd-button</button>
   <button fd-button</button>
</fd-notification-actions>
  • Removed fd-notification-text directive
  • Removed fd-notification-description directive
  • Removed fd-notification-metadata directive
  • Removed the Notifications From Object option together with the NotificationDefault.
  • Notifications Group is no longer a banner displayed in the right corner but displayed inside a popover triggered by clicking the bell icon in the shell bar at the top right of the screen.
⚠️ **GitHub.com Fallback** ⚠️