Skip to main contentSkip to site searchSkip to component search
Honeycomb

Changelog

All notable changes to Honeycomb will be reflected in this file.

The format is inspired by Keep a Changelog, and this project adheres to Semantic Versioning.

[13.5.0] - 2025-01-13

Added

  • Set of custom color palette design tokens for charts and labeling;
  • Option to export design tokens in android kotlin compose format;

Under the hood

  • Reorganizes design tokens build script

[13.4.3] - 2025-01-09

Docs

  • Updated Contributing.md and developers-guide.md docs;

Under the hood

  • Uninstalls eslint-plugin-wdio plugin;
  • Patch up: @fontsource/roboto, dotenv, html-webpack-plugin, postcss, sass-loader;

[13.4.2] - 2025-01-06

Under the hood

  • Updated logo asset links in the examples and component stories to point to new logos library;
  • Updated confluence links in the docs;

[13.4.1] - 2024-12-04

Fixed

  • Improved animation for the centered panel;

[13.4.0] - 2024-12-04

Added

  • New positioning variation center for panel component;

[13.3.0] - 2024-11-22

Changed

  • flix-header navigation and widget areas containers made flexible, this allows fitting more widget content if navigation size allows for that;

Under the hood

  • Updates Storybook to 8.4.5

[13.2.1] - 2024-11-12

Fixed

  • Input labels with a lot of text overlapping the content of the input;

[13.2.0] - 2024-11-06

Added

  • flix-language-switcher-popup__region--columns modifier for language switcher allowing ordering of items in columns;

[13.1.3] - 2024-10-24

Fixed

  • Duplicating icons for date/time inputs in webkit if a custom icon was provided;
  • Icon colors in documentation for the Input and Select components;

[13.1.2] - 2024-10-22

Fixed

  • Corrects panel and dropdown examples to be initialized with a hidden attribute;
  • Adjusts image box examples to include valid honeycomb components class names;

[13.1.1] - 2024-10-17

Fixed

  • Removed hardcoded pixel sizing from quantity component allowing it to scale better;

Under the hood

  • Adjusts tooltip docs to advice against tooltips around input elements;

[13.1.0] - 2024-10-10

Added

  • New "TVM" themes with scaled components, targeting ticket vending machines and similar devices;
  • Adds font-size-base design token allowing for easily scalable typography elements;
  • Adds grid-gutter-2 and grid-gutter-4 design tokens allowing for grid theming;
  • skeleton components will now scale according to the browser font size.

Fixed

  • Adjusted sizing calculations to scale better for a number of components, such as connection, switch and progress tracker;
  • Updated green color value on Flix favicon meta tags;

Under the hood

  • Removes Saucelabs tests and configuration in favour of Chromatic;

[13.0.5] - 2024-10-07

Fixed

  • Select field transparent background;
  • Button loading spinner size shifting makes the button content shift when toggling the loading state;

[13.0.4] - 2024-09-26

Fixed

  • Tooltip bottom-end arrow not positioned correctly;
  • Popup plugin focusing the wrong target when closing with Escape key;

Documentation

  • Fixes various formatting issues on component docs;

Under the hood

  • Adds separate deploy and test jobs for major and hardcodes dev namespace for branches;

[13.0.3] - 2024-09-25

Fixed

  • Encoding issue with gulp for images and font assets on dist folder;

[13.0.2] - 2024-09-24

Fixed

  • Possible compatibility errors for popup plugin if used with older browsers;

Docs

  • Removes CRA example links from the docs, since create-react-app is no longer endorsed by the React team;

Under the hood

  • Introduces chromatic based visual regression tests;

[13.0.1] - 2024-09-19

Fixed

  • Style dictionary script not building dark theme tokens;

[13.0.0] - 2024-09-18

Added

  • Icon and inline label support for select component;
  • Highlighting of the "current" day for the calendar component;

Breaking changes

  • Colors across themes were updated (includes header and button color changes, as well as dark theme palette adjustments);
  • select component markup has changed, similarly to input it requires a container element now;
  • button with very long text content will break line instead of cropping the text;

Changed

  • Increased space between icon and label on header-nav, footer-nav and nav-side navigation components;
  • quantity borders and styles improved (removed double borders between buttons and input and unified border colors);
  • flix-form-row now adds margins when wrapper with a grid column or other container;

Docs

  • Added documentation for all available plugins;

Removed

  • Unused --centered, --right and --left modifiers on nav-horizontal component;
  • brand-secondary-color design token;
  • flag images in favor of the dedicated flag library see: Honeycomb Flags - Static for more info;

Under the hood

  • Upgrade to sass 1.78.0 and handle all rule declarations mixed with nested selectors in scss files;
  • Upgrade @fontsource/roboto to 5.1.0;
  • Upgrade gulp from 4 to 5 and del from 6 to 7.1.1 and migrate gulpfile to ESM;
  • Replace lodash with lodash-es to be used with ESM modules;
  • Upgrade style-dictionary from 3 to 4.1.1 and migrate build-tokens to ESM;
  • Refactored CSS of ballooon/dropdown/tooltip components to leverage more on shared styles;
  • Simplified header mixins;
  • Refactored list-wrapper styles to use component variables;
  • Replaced many instances of @at-root rules with :is css pseudo selector;

[12.6.0] - 2024-09-02

Changed

  • Dynamic font sizes for apple mobile devices;

[12.5.0] - 2024-08-08

Added

  • Support for panel components on popup.js plugin;
  • Support for data-closePopup attribute on popup.js to allow users to configure close controls other than the __close button;
  • Focus styles to panel and popup content areas when they receive keyboard focus for better accessibility for keyboard users;

Changed

  • data-firstFocusable and data-lastFocusable attributes are now optional and popup.js plugin will search through a list of interactive elements to create the tab trap when these attributes are not provided;
  • Panel and Popup __content sections, when they have scroll bar, will now receive tabindex="0" from the popup.js plugin to enable keyboard users to focus and scroll the content;

Deprecated

  • popup.js plugin handling closing the popup or panel on buttons with __close class name. Use data-closePopup="true" instead;

[12.4.1] - 2024-07-29

Fixed

  • reverts recent changes to flix-connection slot elements due to increased complexity of component API and rare use cases;

[12.4.0] - 2024-07-26

Added

  • --first and --last modifiers for flix-connection__item allowing for fine grain control on where connection markers are displayed;
  • Design tokens for iOS;

[12.3.0] - 2024-08-16

Added

  • New logos with a green background embedded;

Changed

  • Updated logos and favicons according to the latest brand guidelines;

Under the hood

  • Updates how storybook fetches icons and illustrations libraries;

[12.2.1] - 2024-07-12

Changes

  • Updates email assets;

Documentation

  • Fixed infobox small icon class name in the component example;

[12.2.0] - 2024-07-12

Added

  • --strong and --small-icon infobox variations;

Fixed

  • Wrong Notification container top/bottom paddings;

Under the hood

  • Refactored box state color mixins to use background-image gradients instead of box shadow;
  • Exports box state colors as sass placeholder selector to extend them from infobox;

[12.1.1] - 2024-07-02

Fixed

  • connection__item not hiding even with "hidden" attribute;

[12.1.0] - 2024-06-21

Added

  • Support for dropdown items with divider content;
  • Support for dropdown items without interactive content (e.g.: span);
  • container-content-color variable setting on header and header-bar;
  • Support for container-content-color for the following components:
    • button--link
    • text
    • heading
    • fineprint

Deprecated

  • dropdown-item class name. Use dropdown__item instead;
  • dropdown-item__link class name. Use dropdown__link instead;

Fixed

  • select-group label color not using cssvar mixin;
  • .npmignore config to exclude redundant files from the package;

[12.0.4] - 2024-06-12

Fixed

  • data-table last row styles applying to children rows down the tree and covering the border radius;
  • footer-nav items applying button styles to span elements;
  • language-switcher close button misaligned;

Documentation

  • Improved design tokens documentation;
  • Added Pixel vs. EM guide;
  • Fixed broken markup on language switcher example;

[12.0.3] - 2024-06-06

Documentation

  • Corrects mistakes in ver. 12 migration guide;

[12.0.2] - 2024-06-05

Fixed

  • Corrupted roboto fonts from honeycomb-fonts endpoint;

Under the hood

  • Downgraded dependency: Gulp 5 -> 4

[12.0.1] - 2024-06-03

Documentation

  • Fixed popup examples on migration guide;

[12.0.0] - 2024-06-03

Migrating from 11 to 12? Read the migration guide.

Added

  • cyrillic subset for Roboto font family;
  • kamil-dark and neptune-dark themes;
  • {theme}-full.[scss,css] theme endpoints containing brand + brand-dark themes;
  • Support to fixed or unfixed popup __icon and __title by putting them inside or outside of the __content section;

Breaking changes

  • Icon mask scss mixins renamed from icon to flix-icon-mask and the specific icon mixins got flix prefix on their names as well;
  • Themes classes and files renamed:
    • theme-default -> theme-flix,
    • theme-dark -> theme-flix-dark;
  • Footer illustrations:
    • flix-footer__illustration wrapper around the illustrations is required to accommodate web components as well as img tags;
  • Following design tokens were renamed:
    • primary-brand-color -> brand-primary-color,
    • secondary-brand-color -> brand-secondary-color;
  • Helper CSS classes and styles removed from honeycomb-tools, please use the dedicated honeycomb-helpers.scss file instead;
  • Button (btn):
    • btn-group is now required to set the gap and orientation between groups of buttons, they do not set side margins between siblings anymore;
    • --primary background color updated to use previous secondary color (e.g.: in flix primary buttons are now green);
    • --secondary modifier updated to match previous tertiary color;
  • Popup component:
    • The body (__body) is no longer scrollable, but __content is,
    • The (__actions) section is always fixed at the bottom,
    • The hidden attribute is now required to effectively hide the popup,
    • The --active modifier is used to animate the popup in and out, following the same standard set by the panel;
  • Nav tab bar:
    • The tab (flix-nav-tab-bar__tab) markup changed to also include stacked button classes and modifiers, check the migration guide for more details;

Changed

  • font-weight-semibold changed from 400 to 500;
  • Increased checkmark size for select-group;
  • Heading components (flix-h#) now use bottom margins instead of paddings, allowing the usage of spacing helpers;
  • Updated flag of India (in.svg);
  • Dark mode themes add color-scheme: dark rule;
  • Following components updated to scale according to user-defined font size:
    • calendar
    • connection
    • infobox
    • input
    • nav-tab-bar
    • notification
    • select-group
    • select
    • tag
    • textarea

Deleted

  • _theme-colors.scss file;
  • legacy theme;
  • button-secondary-color token and variable;
  • button btn--tertiary class modifier;

Deprecated

  • Flag illustrations end points will be removed in the next major release, consider updating to use the new honeycomb-flags-static assets library;

Documentation

  • Example for auto detecting user preferred color scheme on Themes docs page,
  • Adds examples of footer with illustration web components,
  • All components using flags endpoints updated to use honeycomb-flags-static library urls;

Under the hood

  • Move footer-nav inside footer component folder;
  • Move reference screenshots from test to inside of each component folder;
  • Update dependencies:
    • Storybook 7 -> 8.1
    • Gulp 4 -> 5
    • css-loader 7 -> 7.1
    • postcss-loader 7 -> 8.1
    • stylelint 15 -> 16
    • eslint 8 -> 9
  • Removed dependencies:
    • React, react-dom, @mdx-js/react

[11.7.0] - 2024-05-22

Added

  • Favicon assets for Flixbus and Flixtrain;

[11.6.0] - 2024-05-08

Added

  • flix and flix-dark themes, since we're removing default and dark themes in the next major release, these are added to make the migration easier;

Deprecated

  • default and dark theme names. Please use flix and flix-dark instead.

[11.5.0] - 2024-04-29

Added

  • Flix Marketplace and Level Accessibility logos;

Documentation

  • Fix spacing on honeycomb examples titles;
  • Adds order meta data to accessibility docs;
  • Improves design token documentation;

Under the hood

  • Removes storybook styles from docs visualization in dev environment;
  • Removes unused hashtag anchor from guidelines docs;
  • Removes unused storybook assets;

[11.4.2] - 2024-04-25

Fixed

  • No space between label and picker on quantity--inline variation; picker breaking to a new line when the label was too long;

[11.4.1] - 2024-04-11

Documentation

  • Replace large arrow icons with regular arrow icons on input controllers examples;

[11.4.0] - 2024-04-05

Added

  • Button group --wrap modifier to allow buttons to break into new line when there is not enough horizontal space;

[11.3.2] - 2024-04-04

Fixed

  • Decorated inputs (e.g.: date and time inputs) too small;

[11.3.1] - 2024-04-03

Fixed

  • Increased Input controllers specificity when setting the inline margins;

[11.3.0] - 2024-04-03

Added

  • Input controllers (e.g.: next and previous date arrow buttons);

[11.2.2] - 2024-03-22

Fixed

  • Dropdown item icons shrinking whey they are followed by long text;
  • Long text (e.g.: urls) causing notification and infobox content to overflow;

[11.2.1] - 2024-03-06

Fixed

  • Icons and close controls shrinking in notification and infobox on very small screens;

[11.2.0] - 2024-02-19

Added

  • stacked modifier for button;

Under the hood

  • button styles refactored to work with component custom properties;
  • show-as-interactive-text mixin;

[11.1.1] - 2024-02-08

Fixed

  • Missaligned checkmark on checkbox and radio when user selects bigger font size;
  • Missing highlighted background on plain data-table selected rows;

[11.1.0] - 2024-01-17

Added

  • Support for custom tag colors using css variables: --flix-tag-color and --flix-tag-text-color;

Under the hood

  • tag styles refactored to work with component custom properties;

[11.0.3] - 2024-01-17

Fixed

  • Checkmark positioned wrong for small checkboxes and radios;

[11.0.2] - 2024-01-16

Fixed

  • Close button aligned wrong for smaller flix-balloon and flix-tooltip with content fit size;
  • Wrong size for close button for flix-tag;
  • flix-btn styles being duplicated in resulting CSS bundle;

[11.0.1] - 2023-12-01

Fixed

  • Updated color of the "X" email asset;

[11.0.0] - 2023-11-28

Migrating from 10 to 11? Read the migration guide.

Added

  • flix-tag--subtle modifier for tags;
  • --no-clamp modifier for breadcrumbs links;
  • breadcrumbs links support for button elements;

Breaking changes

  • flix-checkbox--no-label modifier required for checkboxes with visually hidden labels;
  • flix-textarea--no-label modifier required for textareas with visually hidden labels;
  • switch no longer supports implicit label;
  • Following tokens and theme variables were removed:
    • --flix-font-size-button,
    • --flix-input-border-radius,
    • --flix-icon-arrow-down,
    • --flix-icon-arrow-right,
    • --flix-icon-attention,
    • --flix-icon-attention-solid,
    • --flix-icon-burger,
    • --flix-icon-calendar,
    • --flix-icon-checkmark,
    • --flix-icon-checkmark-strong,
    • --flix-icon-checkmark-strong-solid,
    • --flix-icon-circle-solid,
    • --flix-icon-close,
    • --flix-icon-crossed,
    • --flix-icon-crossed-solid,
    • --flix-icon-info,
    • --flix-icon-info-solid,
    • --flix-icon-minus,
    • --flix-icon-plus,
    • --flix-icon-time,

Changed

  • Increased inner spacing for list-wrapper and image-box;
  • Increased size of the checkmark for smaller checkbox;
  • Adjusted size of the "close" button in panel, tooltip/balloon, notification and language-switcher;
  • list item bullets scale with font size;
  • tag colors changed to use darker version;
  • space helpers now have !important to override any component styles;
  • switch checked state icon changed from checkmark to checkmark-strong-solid;
  • Following components updated to scale according to user-defined font size:
    • list item bullets scale with font size;
    • button, tag;
    • input, select, select-group, textarea;
    • checkbox, radio, choice-wrapper;
    • quantity, switch;
    • breadcrumbs;
    • header and all their children;
    • Added selected item highlighted background to the following componments:
      • nav-side;
      • language-switcher;
      • header-burger-menu;
      • header-nav-subnav;
      • dropdown;
      • select-group;
    • Day buttons can now stretch when flix-calendar width increases.

Fixed

  • Icon colors not matching the state colors in infobox and notification components in dark theme;
  • Arrows displayed wrong when start and end date are the same in flix-calendar;

Removed

  • Redundant clndr class names for calendar component;
  • icon-twitter.png email asset was replaced with icon-x.png

Under the hood

  • switch styles refactored to use grid instead of absolute positioning;
  • capitalized component files renamed to lowercase due to issues with unix environments;
  • icons sass mixins for generating reusable svg icons (replacement of the deleted icon tokens);

[10.3.4] - 2023-11-14

Fixed

  • Broken tooltip example in the docs;
  • Fixes select error appearance for "multiple" variation;

[10.3.3] - 2023-10-12

Fixed

  • Wrong links in the documentation;

[10.3.2] - 2023-09-27

Documentation

  • Restores missing input design docs;

[10.3.1] - 2023-09-14

Fixed

  • Wrong margins on horizontal footer nav links, and links not wrapping;

[10.3.0] - 2023-09-13

Added

  • data-toggle-timeout attribute to enable re-toggle for classToggler plugin;
  • Support for button elements for footer nav and dropdown items;
  • --horizontal layout modifier for Footer nav component;

Documentation

  • Toggles toast notification with classToggler plugin in Notification examples;

Fixed

  • Incorrect vertical alignment of active pager item;
  • Incorrect cursor: pointer for all List wrapper items;

[10.2.0] - 2023-09-08

Added

  • calendar component;

[10.1.6] - 2023-09-01

Fixed

  • data-toggle-self not working on classToggler.js plugin;

Under the hood

  • Updates Storybook to 7.4;
  • Adds interaction tests to plugins:
    • classToggler.js
    • dropdown.js
    • popup.js
    • tabs.js
    • tooltip.js

[10.1.5] - 2023-08-23

Fixed

  • Highlight color not applied to selected data table row with zebra appearance;
  • data-table-controls applying margin only to pager component (now applies on data-table-wrapper);
  • Clickable progress tracker items missing padding;

Under the hood

  • Updates Storybook to 7.3;
  • Updates WebDriveIO to 8.15;

[10.1.4] - 2023-08-15

Changed

  • Greyhound favicon archive;

Fixed

  • Hexa code for theme color in head meta tag, from favicons docs;

[10.1.3] - 2023-08-08

Fixed

  • Adjusts Connection element styles improving icon position within a slot container;

[10.1.2] - 2023-08-03

Documentation

  • Updates link to Level Access Platform;

[10.1.1] - 2023-08-02

Documentation

  • Adds Neptune and Kamil favicon documentation;

[10.1.0] - 2023-07-26

Added

  • --left and --right modifiers for controlling header sub navigation (and user widget) position;

Fixed

  • Balloon arrows (and associated components) 1px gap;

Under the hood

  • Makes deploy and tests-axe jobs run manually for branches;

[10.0.5] - 2023-07-25

Fixed

  • Accordion not adding border-radius when it had other sibling elements;

[10.0.4] - 2023-07-24

Fixed

  • Balloon arrows showing outside of balloon area on really small balloons;

Documentation

  • Fixed examples with toast notification;

Under the hood

  • Enable axe-playwright testing in the pipeline;
  • Adds axe test results percentage of passes to coverage graph;
  • Refactors gitlab jobs and moves all pipeline variable declaration to before_script;

[10.0.3] - 2023-07-13

Fixed

  • form-row and fieldset missing space helpers for default space to be used on the last item when needed;

[10.0.2] - 2023-07-04

Documentation

  • Adds date to migration guides front matter for sorting;

[10.0.1] - 2023-07-03

Documentation

  • Fixed code examples in fieldset, form-row and panel docs;

[10.0.0] - 2023-06-29

Migrating from 9 to 10? Read the migration guide.

Added

  • SCSS partials have been exposed in the dist folder, this allows you to create custom bundles out of them;
  • fieldset__item--space-<value> modifiers for overriding margins;
  • form-row--space-<value> modifiers for overriding margin;

Breaking changes

  • Updated design and structure of the flix-connection element;

Changed

  • page-container with a fixed header no longer provides additional spacing;
  • baloon, dropdown and tooltip will stretch to fit the content inside;
  • nav-side and footer-nav links stretch to fill available space and increase click area;
  • header-nav-subnav links allow line break on white space;
  • panel allows multiple lines inside the header, tall footer and the min-width is em based instead of px;
  • popup max-height was reduced to allow for easier interaction with the overflow layer even on the smaller screens;
  • Removed outside margins from the following components:
    • box,
    • image-box,
    • infobox,
    • notification,
    • text,
    • form-row,
    • fieldset;

Documentation

  • Added fieldset component;

Removed

  • flix-time-input component;
  • --is-last modifier on form-row (now form row does not apply margins when it is the last child);
  • baloon and tooltip:
    • --small modifier;
    • --error modifier;
  • Following color tokens:
    • primary-ui-color,
    • primary-ui-light-color,
    • primary-ui-dark-color,
    • primary-bg-color,
    • secondary-bg-color,
    • primary-bg-transparent-color,
    • primary-line-color,
    • primary-icon-color,
    • secondary-icon-color;

Under the hood

  • Upgraded dependency major versions:
    • Storybook 6 -> 7 (and MDX 1 -> 2)
    • React 16 -> 18
    • stylelint-config-standard-scss 7 -> 9
    • fontsource/roboto 4 -> 5

[9.2.1] - 2023-06-23

Under the hood

  • Replaces Browserstack visual tests with SauceLabs, updates developers guide on testing;

[9.2.0] - 2023-06-06

Deprecated

  • The following color design tokens were renamed to better align them with our naming structure. Please take your time to rename them, since the values in the left column will be removed in the next major:
    • primary-ui-color -> ui-primary-color,
    • primary-ui-light-color -> ui-primary-light-color,
    • primary-ui-dark-color -> ui-primary-dark-color,
    • primary-bg-color -> bg-primary-color,
    • secondary-bg-color -> bg-secondary-color,
    • primary-bg-transparent-color -> bg-primary-transparent-color,
    • primary-line-color -> line-primary-color,
    • primary-icon-color -> icon-primary-color,
    • secondary-icon-color -> icon-secondary-color;

[9.1.5] - 2023-06-05

Documentation

  • Updates majority of readme-design.md files;

[9.1.4] - 2023-05-10

Fixed

  • Tabs plugin throwing an error in certain cases;
  • Extends .npmignore to exclude more development related files;

[9.1.3] - 2023-05-10

Documentation

  • Updates Examples guide with Honeycomb-React Vite tutorial;

[9.1.2] - 2023-04-20

Documentation

  • Removes "hover" event from header examples;

Fixed

  • Header navigation sub menus controlled by dropdown.js plugin not closing after clicking outside of the dropdown;

[9.1.1] - 2023-04-18

Fixed

  • Missing tabs.js plugin in webpack configuration;

[9.1.0] - 2023-04-18

Added

  • tabs.js plugin to be used together with nav-horizontal;

[9.0.1] - 2023-04-13

Fixed

  • Added a color for input wrapper so icons can inherit the right color independently of where it's include;

[9.0.0] - 2023-04-03

Added

  • Kâmil Koç new logos;

Changed

  • Kâmil Koç primary brand color;

[8.4.1] - 2023-03-31

Fixed

  • Missing padding: 0 to btn-reset mixin;

[8.4.0] - 2023-03-30

Added

  • flix-reset-btn, flix-reset-list and flix-reset-list--inline utility classes;
  • Reset helper sass functions to honeycomb-tools.scss;

[8.3.0] - 2023-03-23

Added

  • Page container modifier: --has-fixed-header-no-nav

[8.2.0] - 2023-03-15

Added

  • Flags have been added for: Azores islands, Balearic islands, Basque country, British columbia, Canary islands, Ceuta, Cook islands, Corsica, Galapagos islands, Kosovo, Madeira, Melilla, Orkney islands, Rapa nui, Saba island, Salvador, Sardinia, Somaliland, St barts, St Lucia, St vincent and the grenadines.

[8.1.0] - 2023-03-14

Added

  • Support for buttons on list-wrapper items;

Fixed

  • list-wrapper overrides line height from content;

[8.0.0] - 2023-02-22

For a smooth transition from HC7.2.x to HC8, read the migration guide.

Added

  • --completed modifier for progress tracker items;
  • btn-group component to control button groups;
  • Design tokens exported in JSON format;

Breaking changes

  • progress-tracker redesigned and refactored;
  • Removed support to old connection markup that used table captions for title;

Changed

  • New error styles for form elements;
  • Typography units from px to rem;
  • Spinner color for loading button;
  • nav-tab-bar font size, text color and fixed height;
  • box, image-box, button, data-table and select-group components now use box-bg-color variable;
  • tooltip.js keyboard navigation no longer reacts with "focus" when openOnHover is set to true;
  • dropdown.js implements menu and menuitem roles, has improved keyboard navigation (arrows, tab and focus management);
  • header-widgets centrally aligns itself by default;
  • Focus state has box shadow for "double outline" effect to increase contrast;
  • Dark theme secondary-bg-color from #292929 to #202020;
  • Popup actions no longer reverted on mobile;

Deprecated

  • time-input component, use select or input with type="time" instead;
  • btn (button) setting margins to sibling buttons when outside of button groups;

Under the hood

  • Removed honey-cli scripts;
  • Upgrade to Node v18 and NPM v9;
  • Upgrade to Webpack v5;
  • Upgrade to WebdriverIO v8;

[7.3.1] - 2023-02-16

Fixed

  • Forces headings to be block level so the class names can be applied to strong element;
  • Labeless checkbox unable to be clicked;

[7.3.0] - 2023-02-15

Added

  • Support for buttons to be used as language switcher items;

Changed

  • Language switcher links width fill available space;

[7.2.14] - 2023-02-02

Fixed

  • flix-header-widgets "no-responsive-rendering" modifier styles placed in a wrong file;
  • Broken panel example in the docs.

[7.2.13] - 2023-01-24

Fixed

  • Reverts back old favicons archive;
  • Replaces dark logo style in all the Header component examples;

[7.2.12] - 2023-01-20

Fixed

  • Renamed width: fill-available; to width: stretch; on header navigation styles, because spec had been changed.

[7.2.11] - 2023-01-19

Fixed

  • Nav tab bar icon color on Safari browsers;

[7.2.10] - 2023-01-11

Fixed

  • Language switcher close button now sticks to the top when scrolling;
  • Language switcher popup height increased and uses dvh to not be overlapped by Safari UI at the bottom;
  • Navigation links have same height and width when using button elements;
  • Input placeholder text no longer has opacity on FF;

[7.2.9] - 2023-01-03

Documentation

  • Typos on accessibility guides;

[7.2.8] - 2023-01-03

Fixed

  • Removed paddings from empty notification-container;
  • Removed vertical borders from progress-tracker mid items;

[7.2.7] - 2023-01-03

Documentation

  • Added introduction, screen reader text and skip links accessibility guides;

[7.2.6] - 2022-12-16

Fixed

  • Restored position: static to unfixed header (instead of relative);
  • Missing text color for burger menu panel to enable language switcher to inherit the right color;

[7.2.5] - 2022-12-15

Documentation

  • Added image-box component example for images with captions or credits;

[7.2.4] - 2022-12-14

Documentation

  • Added language switcher to header examples;
  • Updated and fixed various examples;

Fixed

  • ESC handler on popup plugin added to document instead of popup;
  • Missing overlay click handler on popup plugin;

[7.2.3] - 2022-12-12

Fixed

  • Slightly wrong Checkbox and Radio checkmark color;

[7.2.2] - 2022-12-12

Fixed

  • Missing popup plugin in production bundle;

[7.2.1] - 2022-12-08

Fixed

  • Wrong package.json version;

[7.2.0] - 2022-12-08

Added

  • Language switcher component;
  • list-reset utility;
  • popup.js plugin;

Under the hood

  • nav-side-link styles extracted to nav-side utility file;
  • header-button-commons styles extracted to header utility file;

[7.1.4] - 2022-12-05

Fixed

  • Inline Grid columns missing flex-basis property;
  • Allows button elements inside header sub navigation;

[7.1.3] - 2022-12-01

Documentation

  • Updates color and theme related docs with the latest theme setup;

[7.1.2] - 2022-11-28

Fixed

  • Header text color;
  • Burger menu nav item border radius on hover;

[7.1.1] - 2022-11-21

Documentation

  • Fixed migration guide broken links;

[7.1.0] - 2022-11-21

Added

  • --stretch modifier to flix-nav-horizontal;
  • --content-fit modifier to flix-pager;
  • theme-high-contrast: high contrast theme to be offered as an option for users;
  • New Flix favicons archive with updated colors;

Changed

  • Updated markup of the connection component to use "presentation" tables;

[7.0.7] - 2022-11-08

Fixed

  • Danger button text color for "dark" theme;
  • Outdated package versions in the docs.

[7.0.6] - 2022-11-04

Fixed

  • Header navigation arrows having wrong colors on certain themes;
  • List wrapper focus state styles;

[7.0.5] - 2022-11-04

Documentation

  • Fixed header-bar example using header-color variable for custom items;

[7.0.4] - 2022-11-01

Documentation

  • Fixed header and migration guide examples;

[7.0.3] - 2022-10-24

Fixed

  • Migration guide examples;
  • logo URLs in Header component examples;

[7.0.2] - 2022-10-18

Fixed

  • Close icon being styles absent for flix-tag;

Deprecated

  • __text element around the text is no longer required for flix-tag and flix-btn;
  • --has-icon modifier is no longer required for flix-tag and flix-btn;

Under the hood

  • Utilizes column-gap for icon margins for buttons and tags;

[7.0.1] - 2022-10-13

Fixed

  • Removes unwanted margin from input infos when they are empty.

[7.0.0] - 2022-10-12

Migration guide.

Added

  • New breakpoint at 390px called xs;
  • Button sizes;
  • Focus styles on flix-avatar when it's a link;
  • header-burger-menu component (as a replacement for the mobile style of the header navigation);
  • header-brand, header-nav, header-skip-links and header-widgets extracted as individual components with dedicated documentation for each;
  • --no-responsive-rendering modifier to flix-header-widgets to disable the showing and hiding based on screen size;
  • ESC key handler to close tooltips and dropdowns on their respective plugins;
  • New button related design tokens: button-primary-color, button-secondary-color, button-label-color;
  • New colorful box variations: --dimmed, --neutral, --warning, --success, --danger;
  • flix-input__icon--click-through modifier to disable pointer events;
  • Possibility to control the position of input icons and inline-labels based on DOM order;
  • secondary-icon-color, icon-close-inverted design tokens;
  • more logos, including the ones for kamil and neptune;

Changed

  • New default theme, renames old one to "legacy";
  • Updated icon styles with thicker stroke;
  • Updated styles for tertiary flix-button variation;
  • Updated styles for flix-progress and flix-pager;
  • flix-tag default appearance (solid instead of outlined);
  • flix-tag now uses darker state colors;
  • toast variation of flix-notification has an updated "inverted" look;
  • Renamed xs breaking point to zero;
  • meadow theme color setup;
  • flix-label uses content-secondary-color at all times;
  • flix-accordion__content has bigger padding top;
  • __info text and error messages have increased margin top from fields;
  • Custom "close" controls replaced with flix-btn component in flix-panel, flix-header, flix-balloon, flix-notification and flix-tooltip;
  • icon-panel-close design token renamed to icon-close-white;
  • Select arrow and validation icons changed position to be aligned with other input fields;
  • State colors for "success", "warning" and "danger" aligned across themes;

Breaking changes

  • flix-button--link no longer has appearance variations;
  • Changes naming for the following design tokens:
    • primary-content-color to content-primary-color;
    • secondary-content-color to content-secondary-color;
  • header refactored, please check the migration guide for details;
  • input refactored, please check the migration guide for details;

Fixed

  • Dropdown and tooltip on mouseleave event closing the balloon if cursor moved too slowly;

Removed

  • Internet Explorer 11 support;
  • danger-content-color design token please use danger-dark-color instead;
  • secondary-ui-color token and it's variations, please use primary-ui-color or button-primary-color (for button components only);
  • header-bottom-border-color, header-nav-border-color-tablet design tokens;
  • Dedicated "close" element for Tag, please use button with icon instead;
  • *--active modifiers on navigation components, please use aria-current attribute with adequate value instead;
  • Mobile styles for header-nav, replaced with header-burger-menu separate component;

Under the hood

  • Adds axe-based accessibility tests for components;

[6.5.2] - 2022-09-05

Fixed

  • Text color for table captions;

[6.5.1] - 2022-08-26

Fixed

  • highlight-color for Kamil and Neptune themes;

[6.5.0] - 2022-08-26

Added

  • Support for button element in nav-horizontal and nav-side;

Documentation

Updated documentation on the navigation components above with more details on how to handle active items and sub menus;

[6.4.1] - 2022-08-23

Fixed

  • Hover/active state border radius for Choice-wrapper;

[6.4.0] - 2022-08-09

Added

  • Content writing guides;
  • "Active" state styling based on aria-current attribute for navigation components;
  • tfoot and caption support to flix-table and flix-data-table components;
  • footer component;
  • smaller footer image asset for mobile;

Changed

  • List wrapper background color aligned with box component;

[6.3.12] - 2022-08-04

Documentation

  • Fixed broken links;

Under the hood

  • Fixed outdated honey-cli tool setup and its docs;

[6.3.11] - 2022-08-04

Documentation

  • Fixed accessibility guides markup;

[6.3.10] - 2022-08-03

Documentation

  • Added accessibility docs error handling, headings, landmarks and semantics;

[6.3.9] - 2022-08-01

Fixed

  • SVG icons when used inside header navigation on mobile not centralized;

[6.3.8] - 2022-07-27

Fixed

  • header-skip-links z-index value too low;

[6.3.7] - 2022-07-21

Fixed

  • IE11 Syntax errors on tooltip.js and dropdown.js plugins;

[6.3.6] - 2022-07-07

Changed

  • Formatting fixes for guides;

Fixed

  • Wrong url for favicons in the docs;

[6.3.5] - 2022-07-04

Changed

  • Improved CDN configuration with terraform;

Updated documentation

  • Adds documentation on design tokens;

[6.3.4] - 2022-06-30

Fixes

  • Vertical alignment on flix-btn--block applied to anchor elements;
  • Shows cursor: not-allowed on anchors with flix-tag--disabled;

[6.3.3] - 2022-06-23

Fixes

  • Text overflow issues for Header nav items with sub-navigation on mobile;

Updated documentation

  • General updates on related components and design docs;

Under the hood

  • Move helpers to independent stories inside helpers folder;

[6.3.2] - 2022-06-09

Added Documentation

  • Updates README versions;
  • Adds honeycomb examples guide;

[6.3.1] - 2022-06-09

Fixed

  • Text overflow not working for Header mobile nav;

[6.3.0] - 2022-06-02

Added

  • New footer image for email templates;
  • list-description component;
  • page-container--has-fixed-header variation;
  • support for usage of buttons in pager;
  • data-table pagination;
  • choice-wrapper expandable content;
  • switch tokens android export name to snake case;

[6.2.4] - 2022-05-23

Fixed

  • choice-wrapper error border when has only 1 item;

[6.2.3] - 2022-05-11

Fixed

  • checkbox with invisible label had incorrect paddings;

[6.2.2] - 2022-04-27

Fixed

  • choice-wrapper border radius when it has only 1 item;

[6.2.1] - 2022-04-27

Fixed

  • flix-header-skip-links markup documentation;

[6.2.0] - 2022-04-26

Added

  • --medium and --large size modifiers to Balloon and Tooltip;
  • --content-fit modifier to Balloon and Tooltip;
  • --multiple modifier for Select component with multiple attribute;
  • New breakpoint zero;
  • flix-skip-link component;
  • flix-header-skip-links container for the flix-header component;
  • Archive with favicons;
  • "Flix" logos;
  • dropdown.js plugin;

Updated Guidelines

  • Header menu dropdown guidelines for keyboard navigation;
  • Table and Data Table scope guidelines;
  • SVG Avatar requires a title similar to IMG Avatar requires alt text;

Deprecated

  • --small modifier from Balloon and Tooltip;
  • Breakpoint xs value will change to 390px in next major, see newly added zero breakpoint to replace it;

Fixed

  • Bug in tooltip.js plugin that closed the tooltip when tabbing inside multiple interactive elements inside of it;

[6.1.5] - 2022-04-19

Fixed

  • Redundant icon mixin inclusion breaking SASS file inclusion in 3rd party projects;

[6.1.4] - 2022-04-13

Fixed

  • Quantity incorrect label spacing on mobile;

[6.1.3] - 2022-04-08

Fixed

  • Balloon z-index value missing;

[6.1.2] - 2022-04-06

Fixed

  • added ProgressTracker left border on first time if it's not active;

[6.1.1] - 2022-04-01

Fixed

  • ChoiceWrapper breaking layout on smaller screens;

[6.1.0] - 2022-03-31

Added

  • Image box component;
  • Input icons:
    • Can be placed inside of buttons to add functionality;
    • Can be positioned to the right of the input by adding --right modifier;
  • Tooltip plugin new listener to close active tooltips when user clicks outside of them;
  • --gutter-4 modifier to grid component;

Fixed

  • A problem with tooltip delays that stopped screen readers from reading tooltip content when the target was focused;

Deprecated

  • Image link component;

[6.0.2] - 2022-03-23

Documentation

  • Updated various broken links with new url structure;
  • Removed redundant "related to" section from design-readme files;
  • Fixed heading hierarchy on design-readme files;

[6.0.1] - 2022-03-18

Documentation

  • New Panel documentation covering modal and non-modal features;
  • Updated Popup documentation with modal accessibility features;
  • Fixed Dropdown documentation examples;
  • Fixed various modifier definition lists that had broken markup;

Under the hood

  • Renamed toggleAria to toggleDropdown to better represent the function effects;

[6.0.0] - 2022-03-03

Migration guide.

Added

  • Padding options for Box and Infobox components;
  • "Docs" section has been expanded with "basics" docs that are now part of Honeycomb;
  • New multiplier based spacing variables schema;
  • Design tokens! Honeycomb can now generate design tokens for various platforms;
  • close control to Tag component;
  • More skeleton component variations;
  • Roboto font distribution via Honeycomb;
  • Neptune theme;
  • Balloon component;
  • Honeycomb 6.0 migration guide;

Changed

  • Reimagined state variations for most of the components;
  • Makes overlay color darker, extracts it as overlay-bg-color theme variable;
  • connection now uses button link variation instead of deprecated arrow button;
  • Applies new box shadow style for components;
  • panel redesigned;
  • Updated spacing helpers based on the new spacing schema.
  • Updated header mobile navigation with close control.
  • Markup changes to improve semantics and accessibility:
    • connection;
    • header;
    • pager;
    • progress-tracker;
    • quantity;
    • switch;
  • control renamed to form-row;
  • updated layout for progress-tracker;
  • range redesigned, added steps and --small variations;
  • aligns modifier naming for Notification with other components to "success/warning/danger" scheme;
  • Dark theme secondary-bg-color is now #444;
  • progress-tracker refactored to use counters;
  • fineprint usage of <small> HTML tag now required;
  • accordion redesigned, allowing for custom content inside and "expandable" box behavior;

Deleted

  • icon font and icon components were removed and extracted to be a part of honeycomb-icons-static library;
  • radio-wrapper in favour of a more functional ChoiceWrapper;
  • button-arrow in favour of Button component link variation;
  • hint in favour of a more robust Tooltip implementation;
  • list-linked, use list-wrapper instead;
  • list-simple, use list-wrapper--simple instead;
  • Following theme variables were removed:
    • data-table-row-select-bg-color
    • input-active-border-color
    • input-bg-color
    • input-error-text-color
    • input-error-border-color
    • input-info-color
    • input-placeholder-color
    • strong-highlight-color

Deprecated

  • Removes responsive padding change for Box and Infobox components.

Under the hood

  • Integrates Storybook as development environment;
  • Adds storybook instance deployments for components early access and testing;
  • Removes component.ejs templates;
  • Makes readme.md files as main source of documentation for styleguide;
  • Adds frontmatter data block to readme.md;
  • Migrates all the visual regression testing to WebdriverIO/Browserstack tools combination;
  • Upgrade to Node v14 and NPM v8.2;
  • Upgrade from node-sass to dart-sass;

[5.3.0] - 2022-04-11

Added

  • Spacing classes and variables according to honeycomb v6 spacing schema
  • form-row component alias for deprecated control

Deprecated

  • Spacing classes and variables (xxxs - xl), use honeycomb v6 spacing schema instead
  • control component, use form-row instead

[5.2.3] - 2022-02-18

Changed

  • New recommendations on Roboto font inclusion

[5.2.2] - 2022-01-18

Fixed

  • Loading spinner position for input with inline label

[5.2.1] - 2021-12-22

Fixed

  • Select right padding increased to avoid text overlap with arrow.

[5.2.0] - 2021-12-14

Added

  • Indeterminate State for Checkboxes.

[5.1.3] - 2021-12-12

Fixed

  • Fixes loading spinner position for square buttons;

[5.1.2] - 2021-12-02

Fixed

  • Fineprint line-height limited by parent's line-height.

[5.1.1] - 2021-11-26

Fixed

  • Cursor not applied properly for individually disabled items in select group.

[5.1.0] - 2021-11-25

Added

  • Added option for SelectGroup which allows for individually disabled items

[5.0.1] - 2021-11-24

Fixed

  • Misleading font values in Heading code examples;
  • Wrong icon colors for meadow theme;
  • Wrong spacing between radio and checkbox fieldset groups;
  • Wrong label color for SelectGroup on desktop;

[5.0.0] - 2021-10-27

Migration guide.

Added

  • list-wrapper element with --small modifier to replace both list-linked and list-simple;
  • 28 New icons!

Changed

  • New "Default" theme with updated typography - preparing for next major color update coming in a future version;
  • Updated Header and HeaderBar layout for Dark and Meadow themes;

Deprecated

  • list-linked element, use list-wrapper instead;
  • list-simple element, use list-wrapper--simple instead;

[4.5.1] - 2021-10-14

Changed

  • breadcrumbs now have a max width with ellipsis;

[4.5.0] - 2021-09-13

Added

  • tooltip.js plugin;
  • "inline" grid column variation;
  • horizontal alignment for checkboxes and radios;
  • 17 New icons!
  • honeycomb icons to native time and date input decorations;
  • --small variation for Text component and show-as-small-text mixin;
  • new theme variables:
    • font-size-fineprint,
    • line-height-fineprint,
    • font-size-button;

Changed

  • Following icons got updated:
    • icon-capacity-one,
    • icon-capacity-two,
    • icon-capacity-three,
    • icon-capacity-zero,
    • icon-refresh,
    • icon-reset;
  • Following components now support and document icon usage:
    • accordion,
    • dropdown,
    • footer-nav,
    • header,
    • nav-horizontal,
    • nav-side;
  • flix-fineprint moved into its own component folder;

Fixed

  • tooltip --small variation CSS adjustments;
  • select optgroup on dark theme background color;

Under the Hood

  • choice, checkbox and radio refactoring;
  • show-as-fineprint now uses its own theme variables;
  • meadow theme secondary ui and warning colors;

[4.4.1] - 2021-08-02

Fixed

  • border-radius for linked list was wrong when there only was one item

[4.4.0] - 2021-06-16

Added

  • choice-wrapper component;
  • Image assets for email templates;
  • flix-sr-only and flix-sr-only-focusable accessibility helpers;
  • --error and --small variations to tooltip;

Changed

  • An assortment of accessibility improvements in several components;
  • Experimental "Meadow" theme typography and colors;

Deprecated

  • radio-wrapper component;
  • button-arrow component;
  • hint component;

Fixed

  • background and text color for select options now respect theme variables;

Under the hood

  • changed node_modules cache ID to be unique per branch to avoid conflicts during simultaneous deployments;

[4.3.1] - 2021-05-11

Fixed

  • data-table CSS rules are specific to direct children;

[4.3.0] - 2021-04-14

Added

  • +33 new icons!
  • Design Docs for Header bar;
  • Breadcrumbs component;

Fixed

  • Tooltip styles for onMouseEnter/Leave implementation;
  • Wrong quantity label color on desktop screens;

Under the hood

  • Added possibility to run tests on a given set of screen sizes;

[4.2.1] - 2021-02-17

Fixed

  • side paddings in header-bar component;

[4.2.0] - 2021-02-10

Added

  • Header-bar component;
  • flix-grid--justify-space-between flexbox proxy class has been added to Grid;
  • Panel --bottom and --full modifiers;
  • Tooltip new modifiers --start and --end to control alignment;
  • Additional icon positioning options for Tags;
  • Tooltip --inline modifier for inline targets;
  • MainWrapper --full making the component to occupy the whole viewport area;

Changed

  • Panel no longer changes from side to bottom on small screens;

Fixed

  • Panel header visual bug in case one of the action controls gets omitted.

[4.1.4] - 2020-12-04

Fixed

  • Radio-Wrapper only adds error color ro the first info text

[4.1.3] - 2020-11-27

Fixed

  • Radio-Wrapper config prefixes

[4.1.2] - 2020-11-24

Fixed

  • Input with Inline Label on very small spaces on FF<=82

[4.1.1] - 2020-11-24

Fixed

  • Input with Inline Label on very small spaces;
  • Input with Inline Label with info text;

[4.1.0] - 2020-11-20

Added

  • Data table component;
  • Divider component;
  • Link button variation;
  • Added .nvmrc;
  • Support for icons to the right of labels inside buttons;
  • Outlined and Small modifiers for tags;
  • Radio Wrapper component;
  • Inline-label input variation;
  • 15 new icons.

Changed

  • Accessibility improved tooltip documentation;

Fixed

  • Icon position on user-resized textareas;

[4.0.1] - 2020-10-19

Fixed

  • Adjusts quantity picker styles to fight possible CSS partials order loading issues;
  • Input loading spinner styles adjusted to not break when processed with cssnano.

[4.0.0] - 2020-09-16

Migration guide.

Added

  • Say "Hi!" to themes in Honeycomb!
  • Neutral states for buttons and tags;
  • Smaller form elements variation for Switch, Checkbox and Radio;
  • More info feedback text elements are now possible for form inputs (this particularly handy if you need an error and info texts displayed together);
  • All form elements can now have info text, including switch and range elements;
  • Brings Layout components to Honeycomb

Changed

  • Updated switch component;
  • Updated linked list component (state variations are available now as well as putting rich text content inside items is now possible);
  • Updated select group component (this one now includes state variations along with other goodness);
  • Skeletons are animated now;
  • Icons were repainted from scratch and never looked that beautiful!
  • Changes how disabled state looks and applies to form elements;
  • Updated error variations of Notification and Infobox components;
  • Adjusts how base styles are applied, moving them from the "body" element to Theme wrappers;
  • Header nav layout has been slightly changed (nav item separators removed);
  • Active dropdown and subnavigation links are now colored;
  • All components now inherit font family setting from the base styles;
  • Brand new icon documentation!

Fixed

  • Inconsistent arrow sizes for tooltips, dropdowns and hints.
  • Panel header not having a z-index set;
  • Non working HTMLhint linter;

Deleted

  • Removed visibility helpers without css class prefix (us .flix-hidden-sm instead of .hidden-sm)
  • SASS theme variables were replaced with CSS custom properties (see related theme documentation for more details)
  • Certain icons got deprecated: bus-night-solid, icon-connection, icon-connection-solid, icon-copy-solid, icon-link-solid, icon-list-solid, icon-logout-solid, icon-luggage-additional-bulky, icon-luggage-additional-bulky-solid, icon-new-tab-solid, icon-reset-solid
  • font-primary-normal SASS mixin has been removed.

Under the hood

  • Updated build script to Gulp 4;
  • Changed npm scripts structure to utilize standard npm start and npm test commands;
  • Development server has index page now with some useful tips and links to get development started;

[3.8.1] - 2020-05-01

Fixed

  • Increased max-height for header sub navigation on mobile in order to hold bigger items like language switcher

[3.8.0] - 2020-03-30

Added

  • Nav tab bar component;
  • Time input component;
  • "Toast like" notification component variation;
  • A "no label" variation of form inputs, selects and textareas;
  • Dropdown can now be displayed on top of the source element;
  • "Hover" states for pager component;
  • Heading component variation with no vertical spacing;
  • "flix-hidden" helper class to completely hide that stuff you don't need on your screens by default;
  • Secondary page background color;

Changed

  • Flags were updated, new version has round SVG sources and in many cases has less file size;
  • Developers docs;
  • Header navigation subnav arrow now changes it's direction on hover;

Fixed

  • Arrows in pager element are now properly aligned vertically;
  • Header component causing horizontal scroll on iPhone 5/SE and similar screen resolutions;
  • wrong class name prefix in honeycomb-flags.css

[3.7.0] - 2019-12-13

Added

  • Avatar component;
  • Header user profile widget;
  • Dropdown component;
  • New spacing values! Whole list now includes:
    • xxxs: 3px; // Micro
    • xxs: 6px; // Tiny
    • xs: 12px; // Extra small
    • smxs: 18px; // Medium small
    • sm: 24px; // Small
    • md: 36px; // Medium
    • lg: 48px; // Large
    • xl: 72px; // Extra large
  • Panel positioned to the left component variation;
  • CONTRIBUTING.md docs;
  • new icons!

Changed

  • Developers docs;

Fixed

  • label text color for range component;
  • missing config includes in helper partials;
  • form input label text alignment behaving wrong in certain cases;

[3.6.0] - 2019-10-01

Added

  • Footer nav component;
  • UI/design documentation for components;
  • error state for checkbox and radio components;
  • info feedback elements for checkboxes, radios and fieldset groups;
  • no release comes without new icons, this one is no exception.

Changed

  • cleans up documentation for components removing duplication in both design and technical docs;
  • adjusts top spacing for form input feedback elements;

Fixed

  • fixes layout bugs in connection element;

[3.5.2] - 2019-09-03

Fixed

  • wrong cursor on select group input.

[3.5.1] - 2019-08-15

Fixed

  • fixes input icon styles broken in React when the order of CSS files loaded changes;
  • fixes line height for input and select info elements.

[3.5.0] - 2019-08-13

Added

  • Disabled state variation for checkboxes and radios;
  • Modifier allowing widgets stay in the header on mobile as well!
  • New icons! Yeah, one can't simply not update the icon font...
  • FlixCar logo has been added to logos package;

Fixed

  • mispositioned arrow in tooltip and hint element;
  • fixed invalid HTML in some of the HTML examples;

[3.4.0] - 2019-07-31

Added

  • Input feedback element. yes, we listened to your request and now there is honeycomb-powered way of displaying additional information related to form inputs, as well as validation errors;
  • Square branding variation for Header component, if you project has a fancy square logo, we got you covered, no need for custom styling any more!
  • New icons! Yeah, we know there are quite some people waiting for them, there you go, enjoy!

Changed

  • Slightly changed line color for radio and checkboxes, this will now match all the other input fields. Consistency FTW!

Deprecated

Nothing here

Fixed

  • We spotted some invalid HTML in code examples, sorry for that, this is fixed now.

[3.3.1] - 2019-06-26

Fixed

Addressing few bugs with the header:
  • subnav arrow is now flipping when subnav opens;
  • prevents accidental mobile menu link clicking by adding a short animation delays, preventing click event to fire on a wrong menu item;

[3.3.0] - 2019-06-04

Added

  • Icon SVG background mixins are here, so now if you need an icon as a background image it's just a matter of adding @include flix-svg-icon-info-solid($your-color-value); to your styles, this will add an inlined SVG background of the icon specified.

Changed

  • We've did a major icon font cleanup in all of the components replacing the font icons with SVG background images.
This allows component partials to not rely on icons and their styles to be fully selfcontained.

Deprecated

  • With this release we deprecate icon component usages in other components, advised way is to use SVG backgrounds. Icon font should only be used where icon customization is possible (e.g. buttons with icons, tags, inputs with icons).

Fixed

  • Wrong CDN urls in dev's docs;
  • As usual some CS fixes here and there, just because we like polishing things;

Under the hood

  • Icon component file structure changed, we've also extracted font-face declaration to a separate file to allow more flexibility in configurations;
  • We now test interaction with Checkbox, Radio, Switch and Linked list components;

[3.2.0] - 2019-04-10

Added

  • New variations of sizes for spinner component, all the kinds of spinners to satisfy your sophisticated spinner needs;
  • flix-input element got a new --loading variation, so now you can notify people to grab a coffee while your code is busy processing all the stuff of highest importance;
  • Improved accessibility for flix-notification components, closing icons are now provided as button elements and this is something we really recommend to do to make your apps more accessible;
  • Accordion has gotten a focus indication, so it can stay focused and you can stay focused on that precious item you wanna interact with;

Changed

  • no changes, we really like adding and fixing stuff :D

Fixed

  • We've squashed a few bugs related to text overflow in form elements;

Under the hood

  • Set of platforms for visual regression tests was changed, tests now run in Chrome for Windows, Firefox 46 and our beloved IE 11;

[3.1.0] - 2019-03-11

Added

  • select-group component making it possible to provide streamlined and compact multiselecting options;
  • simple pager component;
  • mobile widget container element for the header component to provide a cozy home for all your header widgets on mobile views;
  • a --fullwidth modifier to the header component to cover all your big screens header stretching needs;
  • flag icons! yay! go grab the ones you need from the CDN!
  • FlixTrain logos are now included, choo choo...

Changed

  • box shadow of header's mobile menu is now overlaying the content blocking the interaction;

Fixed

As usual we squashed some nasty bugs in our code, we hope you never faced those but our bees inspecting every corner as precise as possible, making sure you have zero problems. What was fixed specifically:
  • few annoying header z-index and positioning issues were resolved;
  • connection element can now stress even more edge cases, we ensured --live mode works great with no intermediate stations provided as well as all those long station names issues were addressed;
  • _grid.scss now includes all the SASS vars it needs

Under the hood

  • Added possibility to publish pre-release builds to npm and CDN via CI jobs;
  • We now have some handy typography SASS mixins to simplify sharing the common typography styles between components;
  • Added grouped component tests to optimize tests running time in CI;
  • Adds flag icons converting script to handle all the SVG-to-PNG conversion burden;

[3.0.0] - 2019-01-29

Added

  • We now providing a fully featured complimentary versioned design UI kit which allows teams to prototype and implement features even faster being sure that all the components provided by designer are in Honeycomb.
  • New layout for checkboxes and radios, they've never been so beautiful! This also changes HTML structure for both;
  • Grid alignment utility classes, we aligned with your needs so you can align your grid elements in many ways:
    • flix-grid--align-top aligns grid columns to the bottom (finally your horizontal forms can be properly aligned with no custom styles);
    • flix-grid--align-bottom aligns grid columns to the top;
    • flix-grid--align-center aligns grid columns to the center;
    • flix-grid--justify-left distributes columns from left to right;
    • flix-grid--justify-right distributes columns from right to left;
    • flix-grid--justify-center distributes columns from center;
  • Infobox success state has been added;
  • New updated flix-progress-tracker element;
  • New updated flix-range element;
  • flix-header now has a place for mobile widgets (flix-header-widgets--mobile);
  • New refined color abstractions combined in reusable theme files;
  • Visual regression testing now also tests different component states with actions;
  • Adds CHANGELOG.md file that holds all the release notes in a semantic versioned manner.

Changed

  • Honeycomb now has ZERO dependencies, you npm install has never been so fast ;)
  • New spacing values! "Even" makes it less odd when you wanna divide or combine things! New values are:
    • xs: 12px;
    • sm: 24px;
    • md: 36px;
    • lg: 48px;
  • Refined grid! We did few major changes to thee grid under the hood so now it supports proper column wrapping, based on the new spacing values and provides an additional flix-grid-container element.
  • Updated layout for flix-switch element
  • Buttons (flix-btn) now only support one line of text
  • Blockquote layout updated
  • Notification elements updated their layout (breaking);
  • flix-fieldset items no longer require flix-control class for checkboxes and radios
  • Renames flix-link-list to flix-list-linked
  • Renames flix-list-general to flix-list-simple
  • Changes appearance of required inputs, all required fields now must have (Mandatory) word in their labels. This deprecates the —required modifier. Which is no longer provided.
  • Changes HTML structure and updates states appearance for form inputs (flix-input, flix-select, flix-textarea). All of those inputs are now selfcontained and doesn't require flix-control class to be present in order for them, to display properly.
  • Inputs validation states are now using the actual icons (consistency FTW!)
  • flix-input-number renamed to flix-quantity
  • Aligned disabled elements behavior across all elements, there is now a better visual feedback with cursor: not-allowed in place.
  • Updated flix-connection element, this is now based on tables and has a cleaner and leaner structure;

Deprecated

  • Grid mixins become deprecated so we are not advising using them in your code. Every use case will trigger a warning in the console output to make you aware of the change.

Removed

  • We've removed outdated FlixUI css endpoints, please change all your CDN or filesystem endpoints to point to honeycomb-***.scss/css files
  • With this release we are removing redundant flix-include and flix-event libraries (transclusion is dead... hail to transclusion!). libraries are still available in CDN in older versions of Honeycomb.
  • --required modifier for labels is now removed, all the required fields must have "(Mandatory)" text in the labels.

Fixed

  • bug with autofill inputs validation states in Chrome was brutally squashed;
  • on-range() SASS mixin now works as expected;
  • some more bugs here and there that we can't actually remember but they for sure make your experience using Honeycomb way better and less stressful.

Under the hood:

  • Changes naming of platforms for visual regression testing (we are now not bound to specific browser versions)
  • Changes CI jobs steps to allow us do flexible testing and publishing right from our CI

[2.5.0] - 2018-11-27

Added

UI

  • Introducing the square button component: useful for all those places where a button is just too much.
  • Refined and polished color abstraction layer providing you with all SASS based color vars needs.
  • New icons: as with every release we have new icons for you to enjoy. We also unified appearance of previous icons to seep consistency rolling.

Contribution model

  • We split our small monolith: to allow fellow contributors to focus more on the actual components we removed our style guide website from the main repo. Less dependency. Less noise, more focus for you to contribute with your great UI tooling.
  • Honey-cli, your development companion: checkout the new honey cli tool we provide to bootstrap your Honeycomb components, just pull and run npm run honey-cli -- add my-fancy-component and start developing straight on.

Changed

Testing

Automated interactive screen regression testing: we exploit gemini test framework to provide even deeper and more reliant screen regression testing.

Fixed

  • drastically reduced css map sizes
  • panel component IE fixes (Kudos Marco)
  • honeycomb-tools.scss won't be generating any css, only SASS goodness is included, we squashed all of those CSS lines!
  • updated dependencies that include support for Node 10;

[2.4.0] - 2018-10-22

  • Honeycomb FTW!, with this release we are starting slowly deprecating FlixUI naming pattern, which means CDN endpoints change from: https://honeycomb.flixbus.com/dist/2.4.0/css/flixui.min.css to https://honeycomb.flixbus.com/dist/2.4.0/css/honeycomb.min.css (notice honeycomb.min.css file name in the end), flixui.css files will be deprecated and removed starting from ver. 3.0, please update URLs of your CDN integration to be compatible with future changes.
  • New repo! Yay! Our beloved honeycomb has been moved and now feels very well in his new home at [https://git.flix.tech/hive/honeycomb]
  • Honeycomb now advices best a11y patterns in code examples (we’ve updated our example code to have all those a11y friendly recommendations like proper semantic HTML elements and aria-labels so you can get used to those part that make part of our users happy);
  • New component flix-panel for all that “sliding from the side” goodness you might need in your project;
  • Documentation was updated to include docs for classToggler.js plugin;
  • New icons, so it’s now possible to display ferry in a tunnel with icons only, we sure many of your were waiting for that! 😄
  • And of course some nice bugfixes and improvements to make your honeycomb experience as sweet as possible

[2.3.0] - 2018-09-25

Features

  • Adds flix-infobox component;
  • Adds flix-img-link component;
  • Updates styles for flix-notification component;
  • New icons!!!

Bugfixes

  • arrow buttons font family issue;

Under the hood:

  • cleaner npm package with dev-only files and contents stripped out;
  • CSS animations extracted;
  • SCSS utils refactoring;
  • updated dependencies;
  • updated “Adding new component” docs;
  • fixes sourcemaps for flixui files in dist;

[2.2.0] - 2018-08-29

Features

  • adds a good old accordion element for all your accordion needs;
  • provides SVG icons - yay! (those can be either downloaded as files or copied to be inlined into your awesome applications);
  • adds new css entry points in CDN to help you save some space in case you don’t need all the features:
  • flixui-no-icons.min.css all of Honeycomb, without flix-font icons;
  • flixui-icons.min.css an icon-only special edition to fulfill all your “iconic” wishes;
  • flixui-sm.css all of Honeycomb components, but in limited, mobile only version (that has styles for sm breakpoint and bellow);
  • flixui-sm-no-icons.css same as above but without flix-font icons;
  • improves tag component (you can now use it in links);
  • improves notification component (kudos go to Marco Karaula for this one);
  • fixes and improves connection element (special thanks to Egor Skorobogatov for spotting the issues);

Tooling

  • modularised components never were so self contained (it’s now easier to include component .scss files right into your React components for example)
  • publishing to jfrog as npm package;
  • defines browser support rules via browserlist;

Under the hood

  • automatized version tracking in styleguide;
  • fixed outstanding problems with visual regression testing in IE;
  • proper support for regression testing of components that exceed normal screen hight;
  • and many other bug fixes and improvements to make your experience with Honeycomb as sweet as possible!

[2.1.1] - 2018-08-13

Bugfixes

  • fixes bug with select box arrows in IE;
  • adds white background to Notifications;
  • fixes issue with link height in linked lists;
  • fixes bug with stop-environment CI job;

Under the hood

  • changes name to @flixbus/honeycomb
  • adds jFrog repo configuration;

[2.1.0] - 2018-07-30

Added

  • added skeleton loading components;
  • added numbered list (lists are now split in several components);
  • icons updated - yay!!
  • button --loading variation added;
  • added loading spinner component;
  • added connection element;
  • added helper classes;
    • grid alignment;
    • visibility helpers renamed;
    • text alignment helpers;
    • spacing helpers;

Under-the-hood improvements

  • improved component integration (SASS dependencies are now included in component stylesheets);
  • SMACCS order added;
  • restructured components list;
  • visual tests part rewritten from scratch as a lightweight express based app with browserstack in place to cover all the platforms;
  • mandatory visual regression tests added in CI;

[2.0.0-alpha] - 2018-05-15

UI kit changes

  • normalize.css removed;
  • All global styles except of box-sizing: border-box; removed - yay!
  • Gemini visual regression tests added;
  • Breakpoints changed: xs: 0; sm: 600px; md: 768px; lg: 1024px; xl: 1200px;
  • Icon font updated (more icons including the most useful one flix-icon-beer);
  • Added icon elements like CTA with icon and input with icon;
  • flix-control—is-last modifier added;
  • Header component changed, flix-navbar-wrapper element added to header to hold main nav or progress elements;
  • Progress component added;
  • Hints and tooltips added;
  • Side navigation component subnavigation class names changed to flix-nav-side-subnav;
  • Popup component changed, now includes separate overlay element;
  • Tag element added;
  • XD web template added to "Prototypes" section;

Under the hood improvements

  • Javascript building process re-thought, js is now bundled with Webpack using ES modules;
  • Folder structure within assets was changed, config folder with all the settings and vars has been added;
  • Icon font automatization have been added;
  • color variables renamed, each color now has unique name, utility color abstraction layer added;
  • ejs template injection script added (allows us syncing actual colors and icon classes or vars bteween the styleguide portal and UI kit lib itself)

[1.3.1-alpha] - 2018-05-16

  • Adjusts icon size within the input elements;
  • Addresses numerous IE related bugs including grid layout bugs;
  • Removes Susy dependency (damn IE);
  • Various under the hood fixes and improvements;

[1.3.0-alpha] - 2018-03-23

  • extended and refined icon font for all your flixbus and flixtrain related icon goodness;
  • more button variations (full width one, danger one);
  • new header component including the new main navigation tablet and mobile versions;
  • new branding, all obey the Honeycomb! :hive:
  • new styleguide layout which is now easier to read and navigate;
  • documentation portal versioning, there is a new version switcher on top, allows you to switch the documentation portal to according versions of the library you use (starting from 1.2.1);

[1.2.1-alpha] - 2018-03-09

  • Grid has been added (yay! :dancing_pengu:), includes grid class based bootstrap-like CSS framework and SASS grid mixins, for details check Grid section here: https://flixvisual.mfb.io/styleguide.html#grid
  • Quantity picker element styling has been added (no js yet, for visual reference only, basic vanilla js plugin to be provided later). For details checkout this link https://flixvisual.mfb.io/styleguide.html#forms-input-number
  • Developers documentation has been updated, adding components section was rewritten to reflect latest changes in UI kit architecture;

[1.1.0-alpha] - 2018-01-18

FlixUI kit version 1.1.0-alpha

[1.0.0-alpha] - 2018-01-09

FlixUI kit version 1.0.0-alpha

[0.0.1-alpha] - 2018-09-29

FlixUI kit version 0.0.1-alpha