0.19.0 Breaking Changes

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>