What’s new?

1.20 – Mar 2022

New

• Added Steps component.
• Added Surface button and Surface field components.
• Added Surface group and Surface segmented layouts.

Changes

• The Track component has been deprecated and will be replaced by the new Steps component.

Fixes

• Fix badge inner alignement.

1.19 – Jan 2022

Changes

• The import of SCSS files has been split into groups. Before the hello.scss was importing all files (functions, settings, mixins, utils, etc) individually. Now there are intermediate SCSS files for each of these groups:

  • core.scss — Functions, mixins, variables, and default settings. Doesn't output CSS.
  • utils.scss — All utilities
  • base.scss — Webfonts, normalize, default html elements styles, extra typographic styles
  • layouts.scss — All layouts
  • components.scss — All components

  It makes it easier to organise and optimize your app SCSS structure. By importing core.scss you always get access to all mixins, functions and variables, even if new ones are added overtime. Importing base.scss will set the base styles for Hello (fonts, normalize, etc). Then you can individually import utils, layouts and components required for your app.

  If you need to create individual CSS file for a component, you can import core.scss first to get access to all Hello variables, mixins and functions to style your component.

• Action component disabled state also works with a disabled attributes.

Fixes

• Spinner: fix the layout of the inner icon, and remove transition (it was conflicting with the inner icon's transition).
• Icon: fix inner positionning when displayed in flex context.
• Rich text (1.19.1): fix button text color when inserted inside a rich text component.
• Flags (1.19.2): fix missing Argentina flag.

1.18 – Dec 2021

New

• Banner: added small variant.

Changes

• The interaction colors: has been updated. Bringing different changes across the system:

  • Primary colors have been adjusted to better contrast within the UI.
  • Primary colors now have a additional light and off shades.
  • Links use the primary color for consistency (insteads of light blue).

• The semantic colors have been updated for hover and active state. They now have color identifiers corresponding to these states (example: warning-hover) and additional tones.

• Some components styles have been updated to better fit with the new primary colors:

  • Checkboxes and radio buttons now use the primary color.
  • Invalid checkbox and radio buttons are now properly tinted with the invalid color.
  • Nav use a neutral color for its default variant (insteads of light blue).
  • Slider has a new tint base on primary color.
  • Switch now use the semantic success green (insteads of accent green).
  • Tables selected row now match the primary active color.
  • Banners tints have been updated to use new semantic shades tokens, along with some minor design tweaks.

• Progress bar has 2 additional variants: primary and dark. All variants have now the same background tint as their fill.

• Actions label contrast has been increased.

Deprecated

• Colors: Links colors have been deprecated as they now have the same values as primary colors. Any usage of color token with identifier link* should be updated to its equivalent with primary* (eg. link-hover --> primary-hover).
• Utilities: Colors utilities related to the links (u-color-link* and u-color-bg-link*) have been deprecated for the same reasons.
• Link component: The variant primary has been deprecated.
• Badge component: The variant link has been deprecated.

Fixes

• Links: Fix arrow icon colors for previous / next variants

1.17 – Dec 2021

Changes

• Hover effect only apply when the user's primary input mechanism can hover over elements (see ref). When writing hover styles they should be wrapped by the hover mixin:

  a {
    @include has-hover() {
      &:hover {
        opacity: 0.85;
      }
    }
  }

• Variable / settings: Change structure of fonts and images urls settings ($fonts-url and $images-url).

  Before the filename was appended to provided urls (for example the setting myurl/ would render myurl/myfile.svg).

  Now the provided setting should contain a placeholder for the file name: myurl/%file%. This help to address some case were the file name is not at the end of the formed url:

  $images-url: 'https://cdndelivery/image/%file%/?foo=1';

  When writing style, you must call the get-font-url or get-image-url function to render the proper url:

  .myelement {
    background-image: get-image-url("/backgrounds/sky.jpg");
  }

  This change is backward compatible. If you don't provide the %file% in the $fonts-url or $images-url settings, the file name is appended to the provided url as before.

1.16 – Jul 2021

New

• Updated website for Hello's documentation:

  • Separate sections for Design and UI Elements.

  • Updated documentation for logo, typography, colors, and other core design contents.

  • Added a quick search to UI Elements for faster navigation.

• Added width 1400px for sizing utilities.

Changes

• Figcaption inner content changed from centered to left aligned.
• Checkbox / Radio buttons: Remove extra right margin.

Fixes

• Marker component: Fix horizontal centering of inner content.

1.15 – Jun 2021

New

• Added Headings uppercase and Company logo component.

• Added Split layout. Bar layout is now deprecated as Split layout offers a more robust alternative.

• Documentation added for the flex utilities.

• Added an hide-empty utility.

• Added new sizes to size utilities matching icon sizes for proper alignement.

Fixes

• Fix minor menu item layout, and --s size styling.

• Fix divider component layout in flex context.

1.15.1

• Fix cosmetic issue with card border radius.

1.14 – Apr 2021

New

• Documentation added for the following utilities: alignement, text, colors and borders.

• Added an overflow utility.

• Updated the Kiosk Preview component to include the QR-code display. Text color can be set to any (before it was only black or white). For this reason the customization of the colors has changed and now rely on CSS variables.

1.14.1

• fix u-hide scrolling bug on Chrome

1.14.2

• Added documentation for sizes and display utilities.
• Added missing documentation for c-link.
• Fix c-link underline on muted variant.

1.14.3

• Fix rules that break when Hello is scoped
• Cosmetic fix for links in banners

1.14.4

• Add documentation for utilities: depths, cursors, margins, and paddings.
• Fix visual transition of interactive depth utilities.

1.13 – Mar 2021

New

• Added an Attribute component.

• Added a Tag component and an input-tags variant for the Input component.

• Added a Typeahead pattern.

• Added xs and s sizes for Headings.

• New states (has-hover, is-disabled and is-selected) for Table rows.

• Added a booked variant to statuses colors and the Status component.

• New depth utilities: u-depth-[level].

• New cursor utilities: u-cursor-[type].

• New height utilities: u-height-[height], u-height-max-[height], u-height-min-[height].

• New text uppercase utility: u-text-uppercase.

• Added a disabled state for Actions.

Changes

• Consitency of hover and active states colors across components.

Fixes

• Fix for menu item active state

1.13.1

• Added in-review status variant.

1.13.2

• Action component: fixed spacing between label and icon for default variant.

1.12 – Mar 2021

New

• Added a Pass component.

1.12.1

• Added 5px to Stacked List items (s and m sizes).

1.12.2

• Added Applet Wallet Badge assets.

1.11 – Dec 2020

New

• Added a Progress bar component based on HTML progress element.

• Added interactive and icon variants for the Status component.

Changes

• Now the colors warning is orange. Previously it share the same red tint of the warning color:

  • Added warning variant for buttons.
  • Added danger variant for badge and cards.

• Added an invalid color variable:

  • Added corresponding variants for helpers, badge, and banner components.
  • Fields, checkboxes, radio buttons, and switch components, as well as the focus ring, now use invalid color when invalid.

• Updated color tint for informative and success statuses.

Fixes

• Added a Progress bar component based on HTML progress element.
• Fixed table border color on Firefox.
• Fixed font smoothing for Firefox on Mac OS.

1.11.1

• Fix visually hidden on recent Chrome

1.10 – Dec 2020

New

• Added a Slider component based on HTML input range field.

1.9 – Nov 2020

New

• Added Checkbox Field and Checkbox List components to properly layout checkbox, label and child content.
• Added Radio Field and Radio List components with same purpose.
• Added primary and danger variants for Button link style.

Change

• Classes c-label--checkbox and c-label--radio are deprecated and will be removed later.
• Improved design for checkmarks of s-sized checkboxes and radio buttons.

1.8 – Oct 2020

New

• Added Menu component

1.7 – Oct 2020

Changes

• Documentation migrated from Jekyll to Eleventy.
• Prototypes moved to Dashboard repository.

1.6 – Oct 2020

New

• Added new components: Status.
• Avatar component updated to provide different ways to include images or display initials if no images. Updated width and height for size variants.
• Action component updated with float and border variants.
• Added naked select variant and custom select.
• Added library of flags at 32px and 64px (in /images/flags).
• Added fixed headers variant for tables.
• Added scroll layout.

Changes

• Refined shadows for the different level of depth.
• Tweaked tables design

Fixes

• Missing border on Banner component
• Visual transition glitch happening on links in specific case
• 1.6.1: Fix invalid state for inputs with prefix / suffix
• 1.6.2: Fix breakpoint mixins generating an error when a breakpoint is not specified

1.5 – Sep 2020

New

• Added new components: Signature, Kiosk preview.

Fixes

• Fix default vertical spacing of headings in Rich text component

1.5.1

• Bring back accidentally deleted changelog

1.4 – Feb 2020

New

• Added new components: Nav, Nav bar, Footer, Spinner.
• Added loading state for Button, Checkbox, Radio, Switch components.
• Added a no-wrap responsive text utility.
• Added new icon sizes for packs.
• Added off colors for packs.

Fixes

• Fixed grid cell layout sizing.
• Fixed lead paragraph styling.
• Fixed transition function.

Doc

Known issues

• Animated icons are not playing on Safari.

1.3 – Jan 2020

New

• Added colors for packs.
• Added new components: Integration, Integration logo, Price, Button groups, Input groups and Input prefix / suffix.
• Added a no-wrap responsive text utility.
• Added the ability to set a custom invalid class name for Checkbox, Radio, Switch and Form field mixin.

Fixes

• Fixed missing underline on button link variant.
• Fixed label tag to inherit font-weight.

1.2 – Nov 2019

New stuff:

• Added form components: Label, Checkbox, Radio, Input, Select, Textarea
• Added Switch, Table, Card, Helper, Stacked list, Tabs, components
• Added Form layouts
• Added border utilities
• Added muted variant for Link component.
• Added states for Link component when child of .is-interactive element
• Added no-underline variant for Link component
• Added variants to Button: danger, primary-danger
• Refactored icons to use the hello-icons package
• Added minified CSS bundle as output

Changes requiring update

• Heading component classes name now follow our naming convention.
  • It requires to change class="c-heading-{size}" to class="c-heading c-heading--{size}".
• Added solid accent colors, ! changed accent--alpha to accent--medium-alpha*
  • Any variable or utility referring to accent-green-alpha should be updated to accent-green-medium-alpha. Same applies for orange and blue accent color.
• Fixed heading left/right variants class names
  • Classes c-heading-left and c-heading-center should be replaced by c-heading--left and c-heading--center.
• Fixed video fluid classname for wrapper
  • Class video-fluid__embed-video-wrapper should be replaced by c-video-fluid-embed__video-wrapper.

Changes

• Refactored marker component with flex
• Refactored inlined SVG backgrounds with a postcss filter

Tweaks

• Tweaked Button component hover effect
• Tweaked Badge component layout
• Tweaked the default layout for Icon-action and its opacity
• Adapted bar, modal and stack layouts from use cases
• Turned border on Box and Card components to alpha to blend with the background color
• Changed Banner component border radius, and background color to solid instead of alpha
• Removed the transition on Icon component (usually managed in parent element as icon inherit from parent's color)

Fixes

• Fixed line-height mixin name from get-line-height() to line-height()
• Fixed Banner icon vertical position
• Fixed missing padding on Banners
• Fixed buttons border looking blurry in some cases
• Fixed Buttons underlined in rich-text component
• Fixed focus ring on Button link variant
• Fixed border color for disabled Button on IE11
• Fixed Icon component width when used as flex child on IE11
• Fixed Icon-action positionning
• Fixed Link colors for states.
• Fixed Button fluid and Buttons group layout
• Fixed Star component
• Fixed spacing utility for responsive rules
• Fixed Media layout not taking full-width on IE11

Doc

• Fixed colors values

To-dos

• Set proper colors for warning, danger, info and success.

1.1 – Aug 2019

New stuff:

• Added components: Popover, Tooltip, Banner, Action icon.
• Added lined list variant.
• Added flex utilities.
• Added new UI colors for warning, danger, info and success. Those have placeholder values and need to be updated.

Changes

• Box component default padding is now gutter. Added a -m variant.
• Box mixins: changed order of arguments.
• Removed bold style font link component primary variant.

Fixes

• Fixed icon alignement within text
• Fixed actions positionning
• Fixed hanging layout on IE11 for ignored box-sizing: border-box
• Fixed cursor over links to be pointer
• Fixed color selector - remove the margin right for the last color item
• Fixed grid layout extra bottom margin when used with list tags
• Fixed missing base container layout
• Fixed actions where underline was displayed on hover
• Fixed buttons where link variant could have padding

To-dos

• Set proper colors for warning, danger, info and success.

1.1.1

Fixes

• Use inline-flex for actions to prevent them breaking when used inside flex container
• Fixed z-index for modals
• Fixed modal not showing when $scope variable is used

1.0 – Jul 2019

New stuff:

• Added Box component to replace discontinued Card component.
• Added components: Action, Device, Marker, Color selector and Pagination dots.
• Refactored links as Links component
• Refactored headings as Headings component
• Added new layouts: Bar, Hanging, Center, Modals and Stack.
• Added a s-size variant to Buttons.
• Added inverse variant for both default and primary Buttons.
• Added an optional scoping class to apply Hello CSS only to descendants of an element.

Changes

• Renamed -base to -m in sizes scale.
• Renamed size scale to a more readable one: xxl → 2xl and so on.
• Refactored with SASS variables instead of CSS variables
• Optimized responsive overides to output less CSS code

Documentation:

• Currently working on integrating the documentation of the "Design" section. Still a lot to be done. Temporary draft for missing parts is available here.
• Documentation for Layouts is done.