Design systém4.2

Seznam změn

v4.2.7 ​

Změny ​

Opravy ​

v4.2.6 ​

Změny ​

  • Resetován margin a padding na úrovni <html> tagu.
  • Výchozí styl <hr/> tagu;

Opravy ​

v4.2.5 ​

Změny ​

  • gov-banner: Aktualizováno logo lva ve Foreground.
  • Figma kit gov-icons:
    • Complex Icons: Aktualizováno logo lva v příslušných ikonách.
    • Logos: Aktualizováno logo lva, ponechána loga značek DIA a Nakit, ponechány také pomocné badge Google Play a App Store, ostatní loga odstraněna.

v4.2.4 ​

Opravy ​

  • gov-control-group - Oprava zakulacení komponenty.
  • gov-form-label - Opravena barva hvězdičky označující povinnou položku.
  • gov-form-label - Odstranění resetu marginu.
  • gov-card - Odstranění resetu marginu.

Změny ​

  • gov-empty: Přidána horizontální varianta.
  • gov-button: Přidán parametr expanded-mobile pro zobrazení tlačítka na 100% šířky v mobilním zobrazení.

v4.2.3 ​

Opravy ​

  • gov-tabs: Oprava generování gov-tabs při vnořených záložkách.

Změny ​

  • gov-tabs: Definování atributu type pro položky záložek.

v4.2.2 ​

Opravy ​

  • Aktualizována specifikace závislostí – změna z ~ na ^ u @gov-design-system-ce/icons pro lepší správu verzí a kompatibilitu s budoucími minor verzemi.

v4.2.1 ​

Změny ​

  • Opravy překlepů v CSS3 proměnných.
    • background-overlay-tranparent => background-overlay-transparent
    • text-terciary => text-tertiary
  • Přidán token text-status-warning.
  • Podpůrné třídy s barvami již nereferencují konkrétní barvu ale její token.
  • Změna barvy formulářových rámečků border.
  • gov-card: Úprava vnitřního odsazení a stínu při hover stavu.
  • gov-link: Přidána podpora ořezu na jeden řádek.

Opravy ​

v4.2.0 ​

Novinky ​

  • gov-banner: Nová komponenta k vizuálnímu upoutání uživatele na webu. Banner je k dispozici ve více variantách a velikostech pro specifické účely.
  • gov-blockquote: Nová komponenta pro vizuální odlišení textu citovaného z jiného zdroje od ostatního textu.
  • Přidání výchozích stylů pro seznamy (ve Figma jako Text List).
  • Odstranění přípony „Gov“ z názvů komponent: Tato změna byla provedena za účelem zlepšení čitelnosti a snazšího rozpoznání názvů komponent ve Figma. Názvy jsou nyní kratší a přehlednější, což usnadňuje práci designérům.

Změny ​

Typografie ​

Původní pojmenování velikostí typografie používali názvy inspirované velikostmi oblečení, jako například gov-text--m, gov-text--xl. Nově design systém nabízí sémantické pojmenování, které lépe odráží jejich funkční využití v designu. Typografie je nyní označována názvy jako font-size-body-m, font-size-headline-lapod., což usnadňuje orientaci a přispívá k lepší konzistenci v návrhu i implementaci.

Více v sekci typografie.

Grid ​

  • Přidán atribut columns.
  • Přidán atribut align-items.
  • Přidán atribut justify-items.
  • Přidán atribut gap.
  • Odebrán atribut align-x.
  • Odebrán atribut align-y.

Grid item ​

  • Přidán atribut col-span.
  • Přidán atribut col-span-sm.
  • Přidán atribut col-span-md.
  • Přidán atribut col-span-lg.
  • Přidán atribut col-span-xl.
  • Přidán atribut row-span.
  • Přidán atribut row-span-sm.
  • Přidán atribut row-span-md.
  • Přidán atribut row-span-lg.
  • Přidán atribut row-span-xl.
  • Odebrán atribut size.
  • Odebrán atribut size-sm.
  • Odebrán atribut size-md.
  • Odebrán atribut size-lg.
  • Odebrán atribut size-xl.

Flex ​

  • Přidáno responzivní chování.

Stepper ​

  • Přepracování vzhledu komponenty.

Tag ​

  • Úpravy vlastností tokenů.
  • Přidány responsivní velikosti tokenů.
  • Odstraněny class --size-XX.
  • Odstaněny primitive size tokeny.

Form group ​

  • Upraveny hodnoty gap.

Form radio ​

  • Refaktorováno CSS komponenty

Container ​

  • Změna velikostí a mezer.
  • Přidána podpora CSS3 priměnných.

Layout ​

  • Změna velikostí.

Opravy ​

Tag ​

  • Oprava odsazení při použítí atributu expanded.

Form label ​

  • Opravení kurzoru nad elementem legend.

Form switch ​

  • Opraven focus stav.
  • Oprava odsazení okolo tlačítek.

Form checkbox ​

  • Oprava zobrazení komponenty v rámci accordion.

Layout ​

  • Oprava zobrazení aside layoutu.

v4.1.2 ​

Změny ​

Card ​

  • Změna struktury komponenty gov-card.
  • Odstraněny třídy gov-card__title, gov-card__main, gov-card__btns.
  • Přidána třída gov-card__content.

Flex ​

  • Přidání atributu gap na úroveň komponenty.
  • Atribut align-self rozšířen o možnosti normal, self-start, self-end a anchor-center.

Chip ​

  • Změna barvy orámování (border) u type="outlined".

Tag ​

  • Přidán atribut expanded.

Styles ​

  • Odstraněno spodní odsazení (margin) z komponent.
  • Přidány nové třídy pro texty.
  • Proměnná --roboto změněna na --font-family a vložena do theme.scss.

Opravy ​

Pagination ​

  • Oprava css display, které vkládalo komponentu s nežádoucí mezerou.

Switch ​

  • Oprava vnitřního odsazení padding u vnitřního tlačítka button.

Theme switch ​

  • Oprava zobrazení popisů.

v4.1.1 ​

  • Byla přidána kontrola typu načteného obsahu do komponenty gov-icon, aby se zajistilo, že se renderují pouze SVG soubory. Dříve načtení jiného formátu mohlo způsobit problémy s vykreslením obsahu.

v4.1.0 ​

  • Tokenizace: Usnadňuje přizpůsobení barev a velikostí pro různé produkty a módy. Zajišťuje konzistenci napříč produkty.
  • Podpora customizace: Úpravy pomocí tokenů bez narušení konzistence designu.
  • Dark Mode: Lepší přístupnost uživatelského rozhraní díky podpoře tmavého režimu.
  • Sekundární barva: Přidání Secondary brandové barvy. Upraveny šedé odstíny jako Neutral.
  • Figma soubor gov-icons: Nový soubor gov-icons ve Figmě nyní obsahuje nejen všechny Bootstrap ikony, což usnadňuje designérům jejich použití.

Nové komponenty ​

Změny komponent ​

gov-attachments-item

  • wcag-remove-label nahrazen za accessible-remove-label
  • wcag-remove-labelled-by nahrazen za accessible-remove-labelledby
  • slot left-icon přejmenován na icon-start

gov-backdrop

  • přidán disabled
  • wcag-label nahrazen za accessible-label
  • wcag-labelled-by nahrazen za accessible-labelledby

gov-breadcrumbs

  • wcag-label nahrazen za accessible-label
  • wcag-labeled-by nahrazen za accessible-labelledby
  • wcag-toggle-label nahrazen za accessible-toggle-label
  • collapsed nahrazen za expanded

gov-button

  • variant nahrazen za color
  • odstraněn inverse
  • odstraněn wcag-active-descendant, nyní podporuje aria atributy
  • odstraněn wcag-controls, nyní podporuje aria atributy
  • odstraněn wcag-described-by, nyní podporuje aria atributy
  • odstraněn wcag-description, nyní podporuje aria atributy
  • odstraněn wcag-details, nyní podporuje aria atributy
  • odstraněn wcag-expanded, nyní podporuje aria atributy
  • odstraněn wcag-label, nyní podporuje aria atributy
  • odstraněn wcag-labelled-by, nyní podporuje aria atributy
  • odstraněn wcag-owns, nyní podporuje aria atributy
  • odstraněn wcag-has-popup, nyní podporuje aria atributy
  • odstraněn wcag-pressed, nyní podporuje aria atributy
  • odstraněn wcag-current, nyní podporuje aria atributy
  • slot left-icon přejmenován na icon-start
  • slot right-icon přejmenován na icon-end

gov-card

  • odstraněn label
  • expanded nahrazen za open
  • odstraněn headline-tag
  • wcag-trigger-label nahrazen za accessible-label
  • wcag-trigger-labelled-by nahrazen za accessible-labelledby
  • přidán slot headline

gov-chip

  • odstraněn inverse
  • icon-left přejmenován na icon-start
  • icon-right přejmenován na icon-end
  • variant přejmenován na color
  • odstraněn wcag-label, nyní podporuje aria parametry
  • odstraněn wcag-controls, nyní podporuje aria parametry
  • odstraněn wcag-selected, nyní podporuje aria parametry

gov-control-group

  • variant nahrazen za color
  • přidán fit-content

gov-dialog

  • nahrazuje gov-modal a gov-prompt

gov-empty

  • přidán size
  • přidán slot headline

gov-error-code

  • přidán slot headline

gov-form-autocomplete

  • odstraněn variant
  • odstraněn message-loading
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • odstraněn wcag-owns, nyní podporuje aria parametry
  • přidán slot list-item-left
  • přidán slot list-item-right

gov-form-checkbox

  • přidán indeterminate
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry

gov-form-file

  • odstraněn attachments-label, nyní podporuje aria parametry
  • wcag-attachments-label přejmenován na accessible-attachments-label
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • wcag-remove-label přejmenován na accessible-remove-label

gov-form-input

  • odstraněn variant
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • odstraněn wcag-owns, nyní podporuje aria parametry
  • odstraněn wcag-autocomplete, nyní podporuje aria parametry
  • odstraněn wcag-expanded, nyní podporuje aria parametry
  • přidán accessible-show-password-label
  • přidán accessible-hide-password-label
  • left-icon přejmenován na icon-start
  • right-icon přejmenován na icon-end

gov-form-message

  • variant nahrazen za color
  • přidán size

gov-form-multi-select

  • odstraněn variant
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • odstraněn wcag-owns, nyní podporuje aria parametry

gov-form-radio

  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry

gov-form-search

  • variant nahrazen za color
  • přidán size
  • přidán slot button-erase

gov-form-select

  • odstraněn variant
  • odstraněn wcag-active-descendant, nyní podporuje aria parametry
  • odstraněn wcag-controls, nyní podporuje aria parametry
  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • odstraněn wcag-owns, nyní podporuje aria parametry

gov-form-switch

  • odstraněn wcag-described-by, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry

gov-icon

  • přidán color
  • přidán size

gov-infobar

  • odstraněn headline
  • variant nahrazen za color
  • přidán type
  • odstraněn inverse
  • wcag-close-label přejmenován na accessible-close-label
  • wcag-toggle-label přejmenován na accessible-toggle-label
  • přidán slot headline

gov-loading

  • přidán size

gov-skeleton

  • variant nahrazen za color
  • přidán size
  • odstraněn wcag-label, nyní podporuje aria parametry

gov-message

  • variant nahrazen za color
  • přidán type

gov-modal

  • nahrazen za gov-dialog
  • přidán blockButtonClose
  • odstraněn label
  • wcag-labelled-by nahrazen za accessible-labelled-by
  • wcag-described-by nahrazen za accessible-described-by
  • wcag-close-label nahrazen za accessible-close-label
  • wcag-close-labelled-by nahrazen za accessible-close-labelled-by
  • přidán slot title

gov-pagination

  • odstraněn inverse
  • variant nahrazen za color
  • odstraněn wcag-label, nyní podporuje aria parametry
  • odstraněn wcag-labelled-by, nyní podporuje aria parametry
  • wcag-select-label přejmenován na accessible-select-label
  • wcag-page-label přejmenován na accessible-page-label

gov-prompt

  • nahrazen za gov-dialog
  • odstraněn label
  • wcag-labelled-by nahrazen za accessible-labelled-by
  • wcag-described-by nahrazen za accessible-described-by
  • wcag-close-label nahrazen za accessible-close-label
  • wcag-close-labelled-by nahrazen za accessible-close-labelled-by
  • přidán slot title
  • slot actions přejmenován na footer

gov-stepper-item

  • variant nahrazen za color
  • odstraněn label
  • odstraněn annotation
  • odstraněn trigger-tag
  • přidán slot headline
  • přidán slot annotation

gov-tabs

  • variant nahrazen za color
  • přidán direction
  • odstraněn wcag-label
  • odstraněn wcag-select-label
  • odstraněn wcag-labelled-by

gov-tabs-item

  • přidán icon-start
  • přidán icon-end

gov-tag

  • odstraněn inverse
  • icon-left přejmenován na icon-start
  • icon-right přejmenován na icon-end
  • variant nahrazen za color
  • přidán type

gov-tile

  • přidán size
  • přidán orientation
  • přidán no-border
  • přidán clickable
  • přidán slot button

gov-tiles

  • odstraněn no-border

gov-toast

  • variant nahrazen za color
  • wcag-close-label přejmenován na accessible-close-label

gov-tooltip

  • variant nahrazen za color

gov-tooltip-content

  • variant nahrazen za color

gov-wizzard-item

  • variant nahrazen za color
  • odstraněn label
  • odstraněn annotation
  • odstraněn label-tag
  • přidán slot headline
  • přidán slot annotation

Odebrané komponenty ​

  • gov-nav
  • gov-side-nav
  • gov-statsbar

v4.0.0 ​

Vylepšená verze design systému nyní představuje webové komponenty, které lze snadno začlenit do různých frontendových frameworků. Její nové zpracování nenavazuje na předchozí verze a není s nimi kompatibilní.

Tímto krokem se nám podařilo výrazně zdokonalit možnosti integrace a vytvořit nástroj, který je mnohem univerzálnější a přizpůsobitelnější pro vaše projektové potřeby.

v3.4.0 ​

Novinky ​

  • Přidání nové komponenty Pruh statistik.
  • Přidání nové komponenty Nápověda.
  • Přidání klasických variant formulářových prvků Textové pole, Rozbalovací seznam.
  • Rozšíření formulářových prvků o oznámení stavu validní hodnoty.
  • Nové klasické a komplexní ikony.

Změny ​

  • Přepracování komponenty Boční menu do tříúrovňové navigace.
  • Upravení přístupnosti komponent.
  • Srovnání velikostí komponent do 8px stupnice.

v3.3.0 ​

Novinky ​

  • Přidání nové komponenty Cookie lišta.

Opravy ​

v3.2.0 ​

Novinky ​

  • Přidání nové komponenty Boční menu.

Rozšíření ​

  • Přidání nových velikostí pro Akordeon, konkrétně .gov-accordion--large a .gov-accordion--small. Původní akordeon je nyní roven velikosti large.
  • Přidána podpora ikon pro komponentu Akordeon.

Změny ​

  • Nahrazení komponent Výběr data a Výběr času nativní podporou prohlížečů.
  • Oddělení komponent určených pro Portál veřejné správy.
  • Změna inicializace JavaScript komponent na specifické třídy s prefixem gov-js určené pouze pro navázání funkcionality.

Pro udržení dosavadní funkcionality je zapotřebí rozšířit definice komponent následovně:

Původní definiceNová definice
[class="gov-sortable-table"][class="gov-sortable-table gov-js-sortable-table"]
[class="gov-fileinput"][class="gov-fileinput gov-js-fileinput"]
[class="gov-select"][class="gov-select gov-js-select"]
[class="gov-tabs"][class="gov-tabs gov-js-tabs"]
[class="gov-accordion"][class="gov-accordion gov-js-accordion"]
[class="gov-calendar"][class="gov-calendar gov-js-calendar"]
input, textarea[class="gov-js-input"]

v3.1.2 ​

Opravy ​

  • Oprava komponenty Kalendář. Chyba ve vykreslování pozic jednotlivých dnů v daném týdnu.

v3.1.1 ​

  • Přidání autoformátu hodnoty pro komponentu Výběr času.
  • Drobné úpravy stylů na základě Figma stylesheetu.

Opravy ​

  • Oprava komponenty Výběr data. Při změně měsíce docházelo k zavírání celého kalendáře.
  • Opravení chování komponenty Rozbalovací seznam při předvybrané možnosti.

v3.1.0 ​

Opravy ​

  • Opravena vynucená výchozí hodnota formulářového prvku <select>.

v3.0.1 ​

  • U komponenty gov-lang-switch byly u select elementu nahrazeny třídy gov-select a gov-select--lang za třídu gov-lang-switch__select.
  • Uvedení nové komponenty Odznak.
  • Přidána validace formátu pro komponentu Výběr data při ručním vkládání.
  • Oprava zobrazení komponent Menu, Výběr data a Rozbalovací seznam.

v3.0.0 ​

  • Kompletní přepracování design systému.