Upgraden

Een nieuwe major release gaat gepaard met enkele breaking changes

Uno 4.x → Uno 5

Per component worden de breaking changes beschreven

Badges & labels

Badges en labels zijn samengevoegd. We behouden alleen .badge. Wijzig daarom alle elementen met een .label class naar .badge.

Tooltips & popovers

Het popover element verdwijnd en is samengevoegd met de Tooltip. We behouden alleen .tooltip. Wijzig daarom alle Popover componenten naar een Tooltip component.

Pagination

De volgorde van de html elementen is aangepast vanwege een toegankelijkheidsprobleem. .pagination__item--previous staat ook daadwerkerlijk als eerste in de hiƫrarchie (ipv als laatste). Zet voor een juiste werking van de paginering de HTML elementen als volgt neer:


    <nav aria-label="pagination">
        <ul class="pagination">
            <li class="pagination__item pagination__item--previous"><a href="#" class="pagination__link"><span>Vorige</span><span class="screenreader-only">pagina</span></a></li>
            <li class="pagination__item pagination__item--first"><a href="#" class="pagination__link"><span class="screenreader-only">pagina</span>1</a></li>
            <li class="pagination__item"><a href="#" class="pagination__link"><span class="screenreader-only">pagina </span>10</a></li>
            <li class="pagination__item pagination__item--active"><span class="screenreader-only">U bevindt zich op pagina </span>12</li>
            <li class="pagination__item"><a href="#" class="pagination__link"><span class="screenreader-only">pagina </span>14</a></li>
            <li class="pagination__item pagination__item--last"><a class="pagination__link" href="#"><span class="screenreader-only">pagina </span>20</a></li>
            <li class="pagination__item pagination__item--next"><a href="#" class="pagination__link"><span>Volgende</span><span class="screenreader-only">pagina</span></a></li>
        </ul>
    </nav>

Notification

De oude classes van het notification component zijn verwijderd. Vanaf nu kun je alleen de nieuwe notification gebruiken.

Lists

De niet langer gebruikte Alpha en Roman lijsten zijn verwijderd. Deze kunnen niet meer gebruikt worden.

Icons

Niet langer gebruikte iconen zijn verwijderd.

Buttons

Buttons die niet aan de BEM standaarden voldoen, werken vanaf deze versie niet meer. Update alle buttons naar de BEM standaarden volgens de voorbeelden bij het button component.



Uno 3.x → Uno 4

Per component worden de breaking changes beschreven

Javascript

De configuratie voor SystemJS is gewijzigd. Update de config naar:

System.config({
    packages: {
        '/': {defaultExtension: 'js'}
    }
});

Fonts

De serif varianten van het Rijksoverheid font worden niet meer meegeleverd met Uno.

Footer

De opmaak & structuur van de footer is gewijzigd. Daarnaast is er een nieuwe payoff geĆÆntroduceerd.

  • Onderwijs mogelijk makenOntwikkeling mogelijk maken
  • nieuw Engelse vertaling voor de payoff: Making development possible
  • Het element .payoff verwijderen
  • .footer__content moet een .background-- modifier krijgen.
  • De payoff komt als eerste kolom in de footer:
    <div class="col-xs-12 col-md-5 col-md-offset-1">
        <span class="footer__header footer__header--title">Ontwikkeling mogelijk maken</span>
    </div>
  • De andere kolommen hebben een titel dmv <span class="footer__header">
  • Eventuele navigatie plaats je in een .list--links met als extra class .footer__nav

Lijsten

De classnames van alle lijsten zijn gewijzigd. De BEM methodiek wordt nu strikter gevolgd, dus een base class .list met een modifier

  • Alle ‘Uno’ lijsten krijgen de classname .list
  • Alle <li> binnen .list → class .list__item toevoegen

Core

  • .decimal.list--decimal
  • .link-list.list--links
  • .link-list--chevrons.list--chevrons
  • .decimal--circled.list--decimal-circled.
    Nieuw Dit is een op zichzelf staande modifier. Dus niet combineren met .list--decimal

Bestanden

Bestanden kunnen nu ook zonder lijst gebruikt worden. In plaats van in een ul / li kun je het bestand bijvoorbeeld in een div plaatsen.
nieuw .file is een losstaand component geworden.

  • .list-files.list.list--files
  • .list-files__file.file
  • .list-files__data.file__data
  • .list-files__filename.file__filename
  • .list-files__title.file__title
  • .list-files__icon.file__icon
  • .list-files__button.file__button

Timeline

  • .list-timelime.list.list--timeline
  • .list-timelime--compact.list.list--compact
  • .list-timeline--large.list.list--timeline.list--timeline-large

Link list

  • .link-list.list.list--links
  • .link-list--chevrons.list.list--links.list--chevrons

Notification list

  • .list-notification.list.list--notification
  • .list-notification__item.list__item

Filter list

De filter list is uit de core van uno verwijderd. Wanneer je Uno met de losse css files gebruikt, dien je /components/list/filter.css extra in te laden
nieuw Voor een filter met sluit knop de modifier .list--filter-closable ook nog toevoegen.

  • .filter-list.list.list--filter
  • .filter-list--inline.list.list--filter.list--filter-inline

Subject list

  • .list-subject.list.list--subjects
  • .list-subject__link.list__link
  • .list-subject__description.list__description

In-page navigatie

De html structuur van in-page navigatie is gewijzigd.

  • De blauwe achtergrond is verwijderd.
  • De .content div krijgt een modifier .content--inpage-nav-header
  • De .content div dient binnen een <div class="col-xs-12"> te staan
  • De lijst met pagina's heeft de classes list list--decimal list--decimal-with-dot columns
  • De footer nav staat in het .content element
  • De footer nav heeft de volgende structuur:
    <div class="prev-next">
        <a href="#" class="prev-next__prev">
            <span class="prev-next__meta">VORIGE</span>
            <span class="prev-next__text">1. Wat moet je doen</span>
        </a>
        <a href="#" class="prev-next__next">
            <span class="prev-next__meta">VOLGENDE</span>
            <span class="prev-next__text">3. Hoe het werkt</span>
        </a>
    </div>

Tabellen

Tabellen hebben nu standaard een witte achtergrond. .table--striped voegt afwisselende achtergronden toe, in plaats van strepen tussen de rijen. Voor alleen strepen is de class .table afdoende.