0.19.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

0.19.0 Breaking Changes

Action Bar(Platform)

  • Adopted fiori3 styles
  • Significant markup changes - fd-action-bar-back and fd-action-bar-actions now children of fd-action-bar- header. fd-action-bar-description no longer child of fd-action-bar-header, requires [withBackBtn]="true" if used with back button.
  • Removed edit title functionality.
  • Made internal design changes to support i18n.
  • Added new component called ActionButtonGroup to control the overflow actions for Action Bar, Shell Bar, and Panel platform components in future.

Panel

  • The Panel component has been refactored in Fundamental-styles. The "old" panel is now called Layout Panel and a new Panel that follows Fiori 3 guidelines has been introduced.

Before:

<fd-panel>
    <fd-panel-header>
        <fd-panel-head>
            <h2 fd-panel-title>Panel Title</h2>
            <fd-panel-description>Panel Description</fd-panel-description>
        </fd-panel-head>
        <fd-panel-actions>
            Panel Actions
        </fd-panel-actions>
    </fd-panel-header>
    <fd-panel-filters>
        Panel Filters
    </fd-panel-filters>
    <fd-panel-body>
        Panel Body
    </fd-panel-body>
    <fd-panel-footer>
        Panel Footer
    </fd-panel-footer>
</fd-panel>

After:

<fd-layout-panel>
    <fd-layout-panel-header>
        <fd-layout-panel-head>
            <h2 fd-layout-panel-title>Layout Panel Title</h2>
            <fd-layout-panel-description>Layout Panel Description</fd-layout-panel-description>
        </fd-layout-panel-head>
        <fd-layout-panel-actions>
            Layout Panel Actions
        </fd-layout-panel-actions>
    </fd-layout-panel-header>
    <fd-layout-panel-filters>
        Layout Panel Filters
    </fd-layout-panel-filters>
    <fd-layout-panel-body>
        Layout Panel Body
    </fd-layout-panel-body>
    <fd-layout-panel-footer>
        Layout Panel Footer
    </fd-layout-panel-footer>
</fd-layout-panel>

Split Button

  • Creating split button with menu

Before:

<fd-split-button [mainActionTitle]="'Action Button'">
    <div fd-split-button-menu>
        <fd-menu>
            <ul fd-menu-list>
                <li fd-menu-item (click)="itemClicked()">
                    option 1
                </li>
                <li fd-menu-item (click)="itemClicked()">
                    option 2
                </li>
            </ul>
        </fd-menu>
    </div>
</fd-split-button>

After:

<fd-split-button [mainActionTitle]="'Action Button'">
    <fd-menu>
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 1</span>
            </div>
        </li>
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 2</span>
            </div>
        </li>
    </fd-menu>
</fd-split-button>
  • Controlling popover state Programmatically

Before

<fd-split-button [(isOpen)]="isOpen" [mainActionTitle]="'Action Button'">
    <div fd-split-button-menu>
        <fd-menu>
            <ul fd-menu-list>
                <li fd-menu-item (click)="itemClicked()">
                    option 1
                </li>
                <li fd-menu-item (click)="itemClicked()">
                    option 2
                </li>
            </ul>
        </fd-menu>
    </div>
</fd-split-button>

<button class="docs-button" fd-button (click)="isOpen = true">Open</button>
<button class="docs-button" fd-button (click)="isOpen = false">Close</button>

After

<fd-split-button [mainActionTitle]="'Action Button'">
    <fd-menu #menu [closeOnOutsideClick]="false">
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 1</span>
            </div>
        </li>
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 2</span>
            </div>
        </li>
    </fd-menu>
</fd-split-button>

<button class="docs-button" fd-button (click)="menu.open()">Open</button>
<button class="docs-button" fd-button (click)="menu.close()">Close</button>
  • Configuring popover

Before:

<fd-split-button [triggers]="['click']" [closeOnOutsideClick]="false">
    <div fd-split-button-menu>
        <fd-menu>
            <ul fd-menu-list>
                <li fd-menu-item (click)="itemClicked()">
                    option 1
                </li>
                <li fd-menu-item (click)="itemClicked()">
                    option 2
                </li>
            </ul>
        </fd-menu>
    </div>
</fd-split-button>

After:

<fd-split-button>
    <fd-menu [triggers]="['click']" [closeOnOutsideClick]="false">
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 1</span>
            </div>
        </li>
        <li fd-menu-item>
            <div fd-menu-interactive>
                <span fd-menu-title>Option 2</span>
            </div>
        </li>
    </fd-menu>
</fd-split-button>

Menu

  • Creating simple Menu with Popover

Before:

<fd-popover>
    <fd-popover-control>
        <button>Trigger</button>
    </fd-popover-control>
    <fd-popover-body>
        <fd-menu>
            <ul fd-menu-list>
                <li>
                    <a fd-menu-item> Menu Item</a>
                </li>
            </ul>
        </fd-menu>
    </fd-popover-body>
</fd-popover>

After:

<button [fdMenuTrigger]="menu">Trigger</button>

<fd-menu #menu="fdMenu">
    <li fd-menu-item>
        <a href="#" fd-menu-interactive>
            <span fd-menu-title>Option 1</span>
        </a>
    </li>
</fd-menu>
  • Create menu with separator

Before:

<fd-menu [separator]="true">
    <ul fd-menu-list>
        <li fd-menu-item>
            Option 1
        </li>
        <li fd-menu-item>
            Option 2
        </li>
    </ul>
</fd-menu>

After:

<fd-menu>
    <li fd-menu-item>
        <a href="#" fd-menu-interactive>
            <span fd-menu-title>Save Current</span>
        </a>
    </li>

    <fd-menu-separator></fd-menu-separator>

    <li fd-menu-item>
        <a href="#" fd-menu-interactive>
            <span fd-menu-title>Export As</span>
        </a>
    </li>
</fd-menu>
  • Create Menu with addon Before:
<fd-menu fd-menu-addon>
    <ul fd-menu-list>
        <li>
            <a href="" fd-menu-item>
                <fd-icon fd-menu-item-addon [glyph]="'cart-5'"></fd-icon>
                Option 1
            </a>
        </li>
        <li>
            <a href="" fd-menu-item>
                Option 2
                <fd-icon fd-menu-item-addon [glyph]="'accept'"></fd-icon>
            </a>
        </li>
    </ul>
</fd-menu>

After:

<fd-menu>
    <li fd-menu-item>
        <a fd-menu-interactive href="#">
            <fd-icon fd-menu-addon position="before" [glyph]="'cart'"></fd-icon>
            <span fd-menu-title>Option 1</span>
        </a>
    </li>

    <li fd-menu-item>
        <a fd-menu-interactive href="#">
            <span fd-menu-title>Option 2</span>
            <fd-icon fd-menu-addon [glyph]="'decline'"></fd-icon>
        </a>
    </li>
</fd-menu>
⚠️ **GitHub.com Fallback** ⚠️