0.15.0 Breaking Changes and Features - SAP/fundamental-ngx GitHub Wiki

Breaking Changes

List

  • ListActionDirective is removed. The list component can be customized by adding additional information in additional columns.

Before:

<ul fd-list>
    <li fd-list-item>List item 1
        <fd-list-action>
            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
        </fd-list-action>
    </li>
    <li fd-list-item>List item 2
        <fd-list-action>
            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
        </fd-list-action>
    </li>
    <li fd-list-item>List item 3
        <fd-list-action>
            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
        </fd-list-action>
    </li>
    <li fd-list-item>List item 4
        <fd-list-action>
            <button fd-button [options]="'light'" [glyph]="'edit'"></button>
        </fd-list-action>
    </li>
</ul>

After:

<ul fd-list>
    <li fd-list-item>
        <span fd-list-title>
            List item 1
        </span>
        <span fd-list-secondary>
            1
        </span>
    </li>
    <li fd-list-item>
        <span fd-list-title>
            List item 2
        </span>
        <span fd-list-secondary>
            2
        </span>
    </li>
    <li fd-list-item>
        <span fd-list-title>
            List item 3
        </span>
        <span fd-list-secondary>
            3
        </span>
    </li>
    <li fd-list-item>
        <span fd-list-title>
            List item 4
        </span>
        <span fd-list-secondary>
            4
        </span>
    </li>
</ul>

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. The header is Bar component with [barDesign]="'header'", [barDesign]="'header-with-subheader'" or [barDesign]="'subheader'" wrapped inside <div fd-popover-body-header>...</div> . The default mode for Bar is desktop. For mobile and tablets use [cosy]="true" property of the Bar component.

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>
⚠️ **GitHub.com Fallback** ⚠️