Skip to content

0.36.0 Breaking changes

N1XUS edited this page Jul 26, 2022 · 9 revisions

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-vsw-c915="" class="fd-breadcrumb">
    <fd-overflow-layout showmoreposition="left" ng-reflect-show-more-position="left" ng-reflect-reverse-hidden-items="false" ng-reflect-enable-keyboard-navigation="false" class="fd-overflow-layout">
        <div class="fd-overflow-layout__more ng-star-inserted" style="display: none;">
            <fd-menu ng-reflect-close-on-escape-key="true" ng-reflect-focus-auto-capture="true" ng-reflect-placement="bottom-start" class="ng-star-inserted">
            </fd-menu>
        </div>
        <div class="fd-overflow-layout__items-container">
            <div class="fd-overflow-layout__items">
                <div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--first" ng-reflect-first="true" ng-reflect-last="false">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
                            <a _ngcontent-vsw-c915="" fd-link="" routerlink="../../avatar" ng-reflect-router-link="../../avatar" class="fd-link" href="#/core/avatar">
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted" ng-reflect-first="false" ng-reflect-last="false">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
                            <a _ngcontent-vsw-c915="" fd-link="" routerlink="../../alert" ng-reflect-router-link="../../alert" class="fd-link" href="#/core/alert">
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted" ng-reflect-first="false" ng-reflect-last="false">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
                            <a _ngcontent-vsw-c915="" fd-link="" routerlink="../../bar" ng-reflect-router-link="../../bar" class="fd-link" href="#/core/bar">
                            </a>
                        </fd-breadcrumb-item>
                    </div>
                </div>
                <div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--last" ng-reflect-first="false" ng-reflect-last="true">
                    <div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
                        <fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item"><span _ngcontent-vsw-c915="">Breadcrumb Level 4</span></fd-breadcrumb-item>
                    </div>
                </div>
            </div>
        </div>
    </fd-overflow-layout>
</fd-breadcrumb>
Clone this wiki locally