0.15.0 Breaking Changes and Features

Breaking Changes

List

• List Component now fully follows fiori3 rules
• There are a lot of new directives, list component now uses list styles, instead of list-group
• ListActionDirective is removed.

Popover

• fd-popover-body-subheader directive is now REMOVED. Use the Bar component with [barDesign]="'subheader'"
• fd-popover-body-header directive - removed the [hasSubheader] and [compact] Inputs

Before:

   <fd-popover placement="bottom">
        <fd-popover-control>
            <span fd-identifier [size]="'l'" [glyph]="'money-bills'" [colorAccent]='3'></span>
        </fd-popover-control>
        <fd-popover-body *ngIf="menu1 && menu1.length">
            <div fd-popover-body-header [hasSubheader]="true">Header</div>
            <div fd-popover-body-subheader [compact]="true">Compact Subheader</div>
            <fd-menu>
                <ul fd-menu-list>
                    <li *ngFor="let option of menu1">
                        <a fd-menu-item [attr.href]="option.url">{{option.text}}</a>
                    </li>
                </ul>
            </fd-menu>
            <div fd-popover-body-footer>Footer</div>
        </fd-popover-body>
    </fd-popover>

After:

   <fd-popover [placement]="rightPlacement$ | async">
        <fd-popover-control>
            <button fd-button>Button</button>
        </fd-popover-control>
        <fd-popover-body *ngIf="menu1 && menu1.length">
            <div fd-popover-body-header>
                <div fd-bar [barDesign]="'header-with-subheader'" [cosy]="true">
                    <div fd-bar-left>
                        <fd-bar-element>Cosy Header</fd-bar-element>
                    </div>
                </div>
                <div fd-bar [barDesign]="'subheader'" [cosy]="true">
                    <div fd-bar-middle>
                        <fd-bar-element [fullWidth]="true">SubHeader Middle section with Full Width Element
                        </fd-bar-element>
                    </div>
                </div>
            </div>
            <fd-menu>
                <ul fd-menu-list>
                    <li *ngFor="let option of menu1">
                        <a fd-menu-item [attr.href]="option.url">{{option.text}}</a>
                    </li>
                </ul>
            </fd-menu>
            <div fd-popover-body-footer>
                <div fd-bar [barDesign]="'footer'" [cosy]="true">
                    <div fd-bar-right>
                        <fd-bar-element>
                            <button fd-button [options]="'emphasized'" [compact]="true">Save</button>
                        </fd-bar-element>
                        <fd-bar-element>
                            <button fd-button [options]="'light'" [compact]="true">Cancel</button>
                        </fd-bar-element>
                    </div>
                </div>
            </div>
        </fd-popover-body>
    </fd-popover>

• fd-popover-body-footer directive - removed the [compact] Input. The footer is Bar component with [barDesign]="'footer'" wrapped inside <div fd-popover-body-footer>...</div>. The default mode for Bar is desktop. For mobile and tablets use [cosy]="true" property of the Bar component.

Before:

   <fd-popover placement="right">
        <fd-popover-control>
            <button fd-button>Button</button>
        </fd-popover-control>
        <fd-popover-body *ngIf="menu1 && menu1.length">
            <div fd-popover-body-header [compact]="true">Compact Header</div>
            <fd-menu>
                <ul fd-menu-list>
                    <li *ngFor="let option of menu1">
                        <a fd-menu-item [attr.href]="option.url">{{option.text}}</a>
                    </li>
                </ul>
            </fd-menu>
            <div fd-popover-body-footer [compact]="true">Compact Footer</div>
        </fd-popover-body>
    </fd-popover>

After:

<fd-popover [placement]="rightPlacement$ | async">
        <fd-popover-control>
            <button fd-button>Button</button>
        </fd-popover-control>
        <fd-popover-body *ngIf="menu1 && menu1.length">
            <div fd-popover-body-header>
                <div fd-bar [barDesign]="'header-with-subheader'" [cosy]="true">
                    <div fd-bar-left>
                        <fd-bar-element>Cosy Header</fd-bar-element>
                    </div>
                </div>
                <div fd-bar [barDesign]="'subheader'" [cosy]="true">
                    <div fd-bar-middle>
                        <fd-bar-element [fullWidth]="true">SubHeader Middle section with Full Width Element
                        </fd-bar-element>
                    </div>
                </div>
            </div>
            <fd-menu>
                <ul fd-menu-list>
                    <li *ngFor="let option of menu1">
                        <a fd-menu-item [attr.href]="option.url">{{option.text}}</a>
                    </li>
                </ul>
            </fd-menu>
            <div fd-popover-body-footer>
                <div fd-bar [barDesign]="'footer'" [cosy]="true">
                    <div fd-bar-right>
                        <fd-bar-element>
                            <button fd-button [options]="'emphasized'" [compact]="true">Save</button>
                        </fd-bar-element>
                        <fd-bar-element>
                            <button fd-button [options]="'light'" [compact]="true">Cancel</button>
                        </fd-bar-element>
                    </div>
                </div>
            </div>
        </fd-popover-body>
    </fd-popover>