Skip to content

0.13.0 Breaking Changes and Features

Jump to bottom
jmarkowski edited this page Jan 17, 2020 · 3 revisions

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. 

### SideNavigation
* Added NestedList directives, most of side-navigation components/directives are removed

Before:
```html
<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>

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.

Clone this wiki locally