0.36.0 Breaking changes

Breadcrumbs #8402

• Breadcrumbs component is now uses Overflow Layout component to render items with responsive behaviour. User's markup hasn't been changed but rendered markup has changed:

Before:

<fd-breadcrumb _ngcontent-tpu-c938="" class="fd-breadcrumb">
    <fd-menu>
    </fd-menu>
    <fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
        <div style="display: inline;">
            <a _ngcontent-tpu-c938="" fd-link="" routerlink="../../avatar" class="fd-link" href="#/core/avatar">
                <span class="fd-link__content"> Breadcrumb Level <span _ngcontent-tpu-c938="" style="font-weight: bold;">1</span></span>
            </a>
        </div>
    </fd-breadcrumb-item>
    <fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
        <div style="display: inline;">
            <a _ngcontent-tpu-c938="" fd-link="" routerlink="../../alert" class="fd-link" href="#/core/alert">
                <span class="fd-link__content">Breadcrumb Level 2</span>
            </a>
        </div>
    </fd-breadcrumb-item>
    <fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
        <div style="display: inline;">
            <a _ngcontent-tpu-c938="" fd-link="" routerlink="../../bar" class="fd-link" href="#/core/bar">
                <span class="fd-link__content">Breadcrumb Level 3</span>
            </a>
        </div>
    </fd-breadcrumb-item>
    <fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
        <div style="display: inline;"><span _ngcontent-tpu-c938="">Breadcrumb Level 4</span></div>
    </fd-breadcrumb-item>
</fd-breadcrumb>

After:

<fd-breadcrumb _ngcontent-ayq-c930="" class="fd-breadcrumb">
    <fd-overflow-layout showmoreposition="left" class="fd-overflow-layout">
        <div class="fd-overflow-layout__more ng-star-inserted" style="display: none;">
            <fd-menu class="ng-star-inserted">
            </fd-menu>
        </div>
        <div class="fd-overflow-layout__items-container">
            <div class="fd-overflow-layout__items">
                <div fdoverflowlayoutitemcontainer="" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--first">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-ayq-c930="" class="fd-breadcrumb__item">
                            <a _ngcontent-ayq-c930="" fd-link="" routerlink="../../avatar" class="fd-link" href="#/core/avatar">
                                <span class="fd-link__content"> Breadcrumb Level <span _ngcontent-ayq-c930="" style="font-weight: bold;">1</span></span>
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" class="fd-overflow-layout__item ng-star-inserted">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-ayq-c930="" class="fd-breadcrumb__item">
                            <a _ngcontent-ayq-c930="" fd-link="" routerlink="../../alert" class="fd-link" href="#/core/alert">
                                <span class="fd-link__content">Breadcrumb Level 2</span>
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" class="fd-overflow-layout__item ng-star-inserted">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-ayq-c930="" class="fd-breadcrumb__item">
                            <a _ngcontent-ayq-c930="" fd-link="" routerlink="../../bar" class="fd-link" href="#/core/bar">
                                <span class="fd-link__content">Breadcrumb Level 3</span>
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--last">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-ayq-c930="" class="fd-breadcrumb__item"><span _ngcontent-ayq-c930="">Breadcrumb Level 4</span></fd-breadcrumb-item>
                    </div>
                </div>
            </div>
        </div>
    </fd-overflow-layout>
</fd-breadcrumb>

Schematics #8465

• Previously created assets & styles are outdated now. To remove them automatically use ng update.
• After update please run ng add @fundamental-ngx/core schematics once again to automatically setup things in the new way.

Notice: Currently, we don't automatically remove the deprecated Themes approach. If you have it applied you have to remove it by yourself.