0.13.0 Breaking Changes and Features

Breaking Changes

Checkbox

• New component CheckboxComponent
• FormControlDirective does not support input type="checkbox" elements

Dropdown

• Dropdown is marked as deprecated, will be removed in 0.14.0
• Instead of it we recommend to use button with menu option.

Forms

• FormControlDirective does not support input type="checkbox" and input type="radio" elements, there are new component related to these elements.

InputGroup

• InputGroupSearchComponent is removed. It can be replaced by basic InputGroupComponent with close icon.

Radio

• There is completely new module RadioModule with fd-radio component.
• FormControlDirective does not support input type="radio" elements anymore.

SideNavigation

• Added NestedList directives, most of side-navigation components/directives are removed Before:

<fd-side-nav>
    <div fd-side-nav-list>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
        <fd-side-nav-item>
            <a [attr.href]="'#'" fd-side-nav-link>
                <fd-icon [glyph]="'home'" [size]="'l'"></fd-icon>
            </a>
        </fd-side-nav-item>
    </div>
</fd-side-nav>

After

<fd-side-nav>
    <div fd-side-nav-main>
        <ul fd-nested-list [textOnly]="false">
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'menu'"></span>
                    <span fd-nested-list-title>Link 1</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'home'"></span>
                    <span fd-nested-list-title>Link 2</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'settings'"></span>
                    <span fd-nested-list-title>Link 3</span>
                </a>
            </li>
            <li fd-nested-list-item>
                <a fd-nested-list-link>
                    <span fd-nested-list-icon [glyph]="'settings'"></span>
                    <span fd-nested-list-title>Link 4</span>
                </a>
            </li>
        </ul>
    </div>

    <div fd-side-nav-utility>
        <ul fd-nested-list [textOnly]="false">
            <li fd-nested-list-item><a fd-nested-list-link>
                <span fd-nested-list-icon [glyph]="'menu'"></span>
                <span fd-nested-list-title>Link 1</span>
            </a></li>
            <li fd-nested-list-item><a fd-nested-list-link>
                <span fd-nested-list-icon [glyph]="'home'"></span>
                <span fd-nested-list-title>Link 2</span>
            </a></li>
        </ul>
    </div>
</fd-side-nav>

Features

Busy Indicator

• new component

Combobox

• new [state] option is added
• resetDisplayedValues method introduction.
• New [buttonFocusable] flag added

Datepicker

• new [state] option is added
• new [locale] and [format] options added. Introduction of angular's DatePipe, to deal with formatting values from FdDate to string.
• New [buttonFocusable] flag added

DateTimePicker

• new [state] option is added
• new [locale] and [format] options added. Introduction of angular's DatePipe, to deal with formatting values from FdTimeDate to string.
• New [buttonFocusable] flag added
• New [keepTwoDigitsTime] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

Forms

• FormMessage component has got changed [state] to 'success' | 'error' | 'warning' | 'information'
• FormControl component, now it supports the compact mode and has changed [type]: 'valid' | 'invalid' | 'warning' | 'information'
• FormLabel got new [checkbox], [radio] and [toggle] options, to define if it's used along with these input elements

InputGroup

• new [state] option is added
• Now it allow to use more than 1 addon per side.

LocalizationEditor

• new [state] option is added
• New [buttonFocusable] flag added

MultiInput

• new [state] option is added
• New [buttonFocusable] flag added

Popover

• Added new [additionalClasses] option, which is ist of additional classes, that will be added to popover container element

Select

• Added unselectMissingOption option to prevent removing chosen option, when option array is still not present.

Shellbar

• Added ShellbarSideNavigationDirective, to integrate side navigation with shellbar.

Time

• New [keepTwoDigits] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

TimePicker

• new [state] option is added
• New [buttonFocusable] flag added
• New [keepTwoDigitsTime] flag, to keep two digits for less than 10 values on hours/minutes/seconds input.

Toggle

• Now have semantic and compact modes.