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.

[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

Docs

• 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

Docs

• 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

Docs

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

[7.2.4] - 2022-12-14

Docs

• 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

Docs

• 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

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

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

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

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