Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.2 (2018-10-25)

Bug Fixes

ffe-core: Added @ffe-blue-onahau--dark, @ffe-grey-shuttle--dark and @ffe-grey-dark-blue--dark needed by --dark variant. (8755df7)

14.0.1 (2018-09-19)

Bug Fixes

ffe-core: Update focus outline color (68d02bc)

14.0.0 (2018-08-23)

Features

ffe-core: Added visited color to link-text (1055b32)

BREAKING CHANGES

ffe-core: All LinkText components will get the visited color upon user interaction.

13.0.3 (2018-08-09)

Note: Version bump only for package @sb1/ffe-core

13.0.2 (2018-07-23)

Bug Fixes

ffe-core: Lock line-height for ffe-link-text (0eaf597), closes #308

13.0.1 (2018-06-18)

Bug Fixes

ffe-core: Fix build issue (faa8828)
ffe-core: Run babel on generated code (43ccde7)

13.0.0 (2018-06-04)

Code Refactoring

ffe-core: Separate layout from core (a5df7a0), closes #149

BREAKING CHANGES

ffe-core: The Hawaii layout system has been layed out in a different module, ffe-layout-legacy. If you're still using it then you will find the section-wrapper and content-container CSS classes there. If you're already using ffe-grid then there should be nothing breaking about this change.

12.2.0 (2018-05-29)

Features

ffe-core: Export less vars as js (5ba1a65)

12.1.0 (2018-05-22)

Features

ffe-core: Deprecate unused color variables, add new color (f2e77f8)

12.0.6 (2018-05-04)

Bug Fixes

ffe-core: Increase line height for ffe-h4 (118fd53)

12.0.5 (2018-05-03)

Note: Version bump only for package @sb1/ffe-core

12.0.4 (2018-04-11)

Note: Version bump only for package @sb1/ffe-core

12.0.3 (2018-04-10)

Note: Version bump only for package @sb1/ffe-core

12.0.2 (2018-03-07)

Note: Version bump only for package @sb1/ffe-core

12.0.1 (2018-03-02)

Note: Version bump only for package @sb1/ffe-core

12.0.0 (2018-02-25)

Bug Fixes

ffe-core: Avoid subpixel calculation error for ffe-divider-line (133b0d0)
ffe-core: Re-add property sb1.StaticResources in package.json. (7b3e30c)

Chores

add @sb1/ scope to all packages (37efbb4)

Features

ffe-core: Add --inline modifier to headings (1a61f28)
ffe-core: Add contribute.md link to readme (df68546)
ffe-core: Remove webfonts (add6353)

BREAKING CHANGES

All packages have been renamed to add the @sb1 scope.

See links 1 and 2 to read more about package scopes.

Unfortunately this requires you update both your dependencies in package.json and all import or require statements in your code. Also, you unfortunately have to upgrade all FFE packages at once due to dependency between packages. If you are on the latest version prior to this breaking change the upgrade should be a matter of updating package.json with new package names and versions, and updating your imports.

To help find the proper package versions you can either browse to the packages you need or check out the list of Git tags either on Github 3 or by cloning the repository and running the git tag command. All package versions get a tag in the format package@version.

Update your package.json with the latest package version and add the @sb1 scope to the package name:

- "ffe-core": "11.0.2",
+ "@sb1/ffe-core": "11.0.2",

Scoped packages all get put in a subdirectory in node_modules/. In our case packages will be put in the node_modules/@sb1/ directory. If your build depends on file paths (for instance for copying fonts) you need to update that path to include the scope.

The directory structure also means you have to update your imports, both in Less and in JavaScript.

Using less-plugin-npm-import:

- @import 'npm://ffe-core/less/ffe';
+ @import 'npm://@sb1/ffe-core/less/ffe';

Using Webpack:

- @import '~ffe-core/less/ffe';
+ @import '~@sb1/ffe-core/less/ffe';

Using plain old paths:

- @import '../path/to/node_modules/ffe-core/less/ffe';
+ @import '../path/to/node_modules/@sb1/ffe-core/less/ffe';

JavaScript import:

- import { ActionButton } from 'ffe-buttons-react';
+ import { ActionButton } from '@sb1/ffe-buttons-react';

JavaScript require:

- const { ActionButton } = require('ffe-buttons-react').default;
+ const { ActionButton } = require('@sb1/ffe-buttons-react').default;

ffe-core: Webfonts are no longer included in ffe-core, but were moved into ffe-webfonts.

Because ffe-webfonts does not include TrueType fonts anymore, change effectively drops support for Museo Sans webfont in IE 8 and older.

The less variable @base-url is not used any longer and there is no need for consumers to declare it when using less from ffe-core.

Upgrade: Install ffe-webfonts and include the less file accordingly the package's README and change @build-path to @fonts-path.

11.0.3 (2018-02-23)

Note: Version bump only for package ffe-core

11.0.2 (2018-02-22)

Note: Version bump only for package ffe-core

11.0.1 (2018-02-20)

Bug Fixes

ffe-core: Avoid subpixel calculation error for ffe-divider-line

11.0.0 (2018-02-15)

Features

ffe-core: Remove webfonts

BREAKING CHANGES

ffe-core: Webfonts are no longer included in ffe-core, but were moved into ffe-webfonts.

Because ffe-webfonts does not include TrueType fonts anymore, change effectively drops support for Museo Sans webfont in IE 8 and older.

The less variable @base-url is not used any longer and there is no need for consumers to declare it when using less from ffe-core.

Upgrade: Install ffe-webfonts and include the less file accordingly the package's README and change @build-path to @fonts-path.

10.3.1 (2018-02-01)

Bug Fixes

ffe-core: Re-add property sb1.StaticResources in package.json.

10.3.0 (2018-01-19)

Features

ffe-core: Add --inline modifier to headings

10.2.5 (2018-01-19)

Note: Version bump only for package ffe-core

10.2.4 (2018-01-10)

Note: Version bump only for package ffe-core

10.2.3 (2018-01-09)

Note: Version bump only for package ffe-core

10.2.2 (2018-01-05)

Note: Version bump only for package ffe-core

10.2.1 (2018-01-04)

Note: Version bump only for package ffe-core

10.2.0 (2017-12-22)

Features

ffe-core: Add contribute.md link to readme

10.1.2

Reduced font size of ffe-fontsize-form-input from 18px to 16px.

10.1.1

Replaced hardcoded font-sizes with variables

10.1.0

Supports --no-underline modifier for ffe-h* classes. Only use these if there are anchors in menus with header-style typography when it's obvious from their context that they are clickable.

10.0.0

BREAKING: The new default for links is the underlined version. If you want links without underlines use the --no-underline modifier.
BREAKING: Element styling (via ffe-element-styling.less and element-map.less) is removed.

Element styling has been deprecated for several majors, so hopefully this will not be a heavy upgrade for most applications. However, for those applications that still import and use these styles, the upgrade path consists of adding some classes in your DOM:

Add ffe-body-text class to <body /> tag.
Add ffe-h[1-6] classes to <h[1-6] /> tags
Add ffe-body-paragraph class to <p /> tags
Add ffe-strong-text class to <strong /> tags
Add ffe-em-text class to <em /> tags
Add ffe-pre-text class to <pre /> tags
Add ffe-link-text class to <a /> tags
Add ffe-divider-line class to <hr /> tags
Add ffe-fieldset class to <fieldset /> tags

9.3.0

Added cursor: pointer to ffe-link-text
Added support for modifier --underline to ffe-link-text for anchors with underline.

Prefer using the underlined variant. There will be an upcoming major release that makes it the new default.

Early adaptors of v.9.3.0 who wants to be ready for the next major can start using --no-underline for the links that they don't want underlined in the next major.

9.2.0

Added motion.less, which contains variables for common transitions

To migrate to this release, replace timing functions (including ease-in, ease-out and other functions that do not directly correspond to the variables) and duration with the variables that fit your use case. Make sure to specify which property to transition - avoid all.

For example transition: all 0.15s ease; may be replaced by transition: transform @ffe-transition-duration @ffe-ease-in-out-back;.

9.1.0

Definition of breakpoints and variables related to layout (@app-width, ...) have their own less files: less/breakpoints.less and less/app-width.less.
Each less file can be independently imported.
Better default for @base-url ("." instead of "/").

9.0.1

Added devDependency to ffe-lists in order to correctly style examples

9.0.0

BREAKING: List styling are removed from ffe-core. These styles are now available in ffe-lists.
BREAKING: .ffe-number-list is no more - use ffe-lists's .ffe-numbered-list.
BREAKING: Removed @ffe-sand-25 from colors.less, renamed other color variables.

To upgrade to this release, all references to the following variables must be replaced by their new names in your LESS code:

@ffe-blue-flat --> @ffe-blue-cobalt
@ffe-blue-royal-light-wcag --> @ffe-blue-azure
@ffe-blue-royal-light --> @ffe-blue-deep-sky
@ffe-blue-royal-light-50 --> @ffe-blue-sky
@ffe-blue-royal-light-20 --> @ffe-blue-pale
@ffe-blue-royal-light-10 --> @ffe-blue-ice
@ffe-green-wcag --> @ffe-green-shamrock
@ffe-green-dark-10 --> @ffe-green-emerald
@ffe-green-wcag-20 --> @ffe-green-mint
@ffe-orange-wcag --> @ffe-orange-fire
@ffe-orange-wcag-20 --> @ffe-orange-salmon
@ffe-purple-wcag --> @ffe-purple-magenta
@ffe-sand-50 --> @ffe-sand-ivory
@ffe-sand-25 --> @ffe-sand
@ffe-grey-light-bg --> @ffe-grey-cloud
@ffe-grey-light --> @ffe-grey-silver
@ffe-grey-dark --> @ffe-grey-charcoal

To save some time on searching and replacing, run this command from inside your repository:

for pair in ffe-blue-flat:ffe-blue-cobalt ffe-blue-royal-light-10:ffe-blue-ice ffe-blue-royal-light-20:ffe-blue-pale ffe-blue-royal-light-50:ffe-blue-sky ffe-blue-royal-light-wcag:ffe-blue-azure ffe-blue-royal-light:ffe-blue-deep-sky ffe-green-wcag-20:ffe-green-mint ffe-green-wcag:ffe-green-shamrock ffe-green-dark-10:ffe-green-emerald ffe-orange-wcag-20:ffe-orange-salmon ffe-orange-wcag:ffe-orange-fire ffe-purple-wcag:ffe-purple-magenta ffe-sand-50:ffe-sand-ivory ffe-sand-25:ffe-sand ffe-grey-light-bg:ffe-grey-cloud ffe-grey-light:ffe-grey-silver ffe-grey-dark:ffe-grey-charcoal; do old=${pair%%:}; new=${pair##:}; echo "Changing $old to $new"; find . -type f -name '*.less' -exec sed -i "s/$old/$new/g" {} ;; done

8.2.4

Adjusted colors to reflect design guidelines

8.2.3

Added color @ffe-blue-royal-light-10 (background color of expandable table rows)

8.2.2

ffe-divider-line's width explicitly set to 100% to make sure it divides its entire container. This fixes an issue discovered when using the divider in a ffe-grid column. It should not affect dividers used outside of flex-containers.

8.2.1

Change ffe-section-wrapper--bg-blue-flat text color selector from wildcard to individual for typography. This fixes a bug where ffe-secondary-button inside a ffe-section-wrapper--bg-blue-flat would get white text on a white background.

8.2.0

Added --bg-blue and --bg-blue-flat modifiers to .ffe-section-wrapper. The --bg-blue-flat text color to ffe-white for all its children since the default color does not work very well on dark blue backgrounds.

8.1.2

This release changes the font size and / or line-height for h2, h4 and h6 for desktop users. In addition, the color of .ffe-sub-lead-paragraph has changed from @ffe-blue-royal to @ffe-black.

Visual diff

Consumers of .ffe-h2, .ffe-h4, .ffe-h6 and .ffe-sub-lead-paragraph will have to update their visual baseline images. Since the actual changes will be small and have a very small chance of actually breaking a design, this change was introduced as a patch.

8.1.1

This release changes @ffe-sand from #E1D5AF to #F8F5EB

Since @ffe-sand after this change is more or less equal to the old @ffe-sand-25, @ffe-sand-25 is now in effect an alias for @ffe-sand. This choice has been made to preserve backwards compatibility for the Less code. Consumers of @ffe-sand-25 should see no perceivable change.

The postfix usually indicates opacity relative to the base color, given a white background color. In this case @ffe-sand-25 would have become too white, so it has been removed from the color palette.

Visual diff

Consumers of @ffe-sand and @ffe-sand-50 will find the colors are significantly lighter. This is by design, and considered a bugfix.

8.1.0

Added a class, ffe-screenreader-only, and styles for hiding page elements visually, while retaining accessibility.

8.0.3

Visual diff

@ffe-grey-light-bg changes from #F1F1EF to #F9F9F9. This change fixes problems with color contrast, and is considered a bugfix.

8.0.2

Fixes a bug where box-sizing: border-box; went missing

8.0.1

Readded normalize.css as a static file

8.0.0

Removing components from ffe-core (new modules created for them in their respective repos).
Updating examples to only include new ffe-core elements.
Updated normalize.css and added it as an npm dependency. (see https://github.com/necolas/normalize.css/blob/master/CHANGELOG.md for changes since v.3.0.3)
Cleaned up example files. Removed navigation, javascript and unused styling.
Added a description for migrating to v8.0.0

Migrating to v.8.0.0

ffe-core has been split in several packages, and a few things have been removed.

Installing the latest FFE

To upgrade from 7.x you will need to install these packages:

$ npm install --save ffe-core ffe-buttons ffe-form ffe-lists ffe-tables ffe-tabs ffe-spinner

Remember to also update your Less imports (example below is given less-plugin-npm-import is used):

@import 'npm://ffe-core/less/ffe';
@import 'npm://ffe-buttons/less/buttons';
@import 'npm://ffe-form/less/form';
@import 'npm://ffe-lists/less/lists';
@import 'npm://ffe-tables/less/tables';
@import 'npm://ffe-tabs/less/tabs';
@import 'npm://ffe-spinner/less/spinner';

Other breaking changes

ffe-info-message has been renamed to ffe-field-info-message (in ffe-form) ffe-info-message--error is now ffe-field-error-message ffe-info-message--success is now ffe-field-success-message

ffe-clearfix has been removed, which has consequences for ffe-section-wrapper.

If your design is dependent on the clearfix you must add it to your project yourself:

/* In your Less, after importing ffe-core */
.ffe-section-wrapper {
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}

ffe-button-group was removed, but has been reintroduced in ffe-buttons@2.1.0.

If you want to keep using it and don't plan on upgrading to ffe-buttons@2.1.0 soon you can add the following to your project:

.ffe-button-group {
    padding: 40px 0;

    &--thin {
        padding: 0;
    }
}

.ffe-button-group [class^='ffe-'][class$='-button'] {
    margin: 0 auto 10px;

    @media screen and (min-width: @breakpoint-sm) {
        display: inline-block;
        margin: 0 0 10px 10px;
        width: auto;

        &:first-child {
            margin-left: 0;
        }
    }
}

If you have used any of the .ffe-shadow-buttons-whatever() mixins they are now .ffe-buttons-shadow-whatever().

"Gotchas"

ffe-tab-button is in ffe-tabs, not ffe-buttons

7.0.1

Minor fix: make button texts of loading buttons unselectable, the text is only of interest for screen readers and ought to remain invisible under all circumstances.

7.0.0

Breaking: removed --inline support from .ffe-form-label. It was just setting max-width to 100% which is not the same as inlining. Removed max-width: 85% from ffe-form-label. It's layout and doesn't belong in the component. It now defaults to browser default which should be none. If you were using ffe-form-label ffe-form-label--inline you can just use ffe-form-label. If you were relying on the max-width being 85% then action is required.
Breaking: removed support for deprecated ffe-check-box in favor of the arguably less aptly named ffe-checkbox. NOTE: Filename is also changed.
Breaking: removed support for deprecated ffe-select-box in favor of the arguably less aptly named ffe-dropdown.
Added CONTRIBUTE.md to clarify release procedures.

6.3.2

Change background position of dropdown arrows from fluid to static
Rollback breaking change from v.6.3.1 - --inline support has been restored to .ffe-form-label

6.3.1

Add isLoading style for ffe-dropdown-react
Focus state styling fix for select element in IE
Focus state styling fix for ghost action button

6.3.0

Add description list component
Patch --no-space on ffe-content-container to also work on larger screens
Minor form examples fix: prefixed icon-info-error with ffe-

6.0.1

Minor radio switch fix: adjusted vertical position of the label
Minor form examples fix: prefixed info-message and info-message--error with ffe-
Added display: inline-block to ffe-primary-button__label-text fix a bug in Safari. Label disappears if changing states from loading to normal.

6.0.0

Several changes to sizes and line-heights of the typography. Also added ffe-sub-lead-paragraph.

5.6.0

Adding 20% opaque green.
Adding 20% opaque orange.
Adding 20% opaque light royal blue.
Minor fixes to tertiary-button appearance.

5.5.3

Removing general positioning of spinner to fix layout bug when spinner is used on secondary buttons. Bug happens because secondary-button reruns ffe-sb1-spinner-mixin after position is set in primary-button which it extends.

5.5.2

Fixed bug that vertically misalignes icon on info-messages. Source of solution

5.5.1

Secondary button: Modified colors for the loading state

5.5.0

Layout: Support --bg-sand and --bg-grey modifiers on ffe-content-container

5.4.0

ffe-dropdown replaces ffe-select-box, while ffe-select-box is kept (but deprecated) until the next major release

5.3.1

Responsive table: Fix left-alignment of table headers in Internet Explorer

5.3.0

Implemented Tertiary button
Updated element mapping to include fieldsets. Fixes default styling set by normalize.
Introduce less variable ffe-expand-button-height

5.2.0

Bugfix select box text foreground color
New component: expand button (for controlling collapsable containers)

5.1.0

Implemented ghost- and tab-button

4.2.1

New build

4.2.0 (16.03.2016)

Inlined svg-icons in less to avoid potential include-issues

4.1.0

Introduce new gateway less-file: ffe-no-reset.less
Add property for static resources to package.json. Fascilitates tooling that copies static resources to output folder

4.0.1

Fix: ffe- prefix for @breakpoint-sm was missing for .primary-button making buttons have width 100% on larger screens

4.0.0 (08.03.2016)

Element styling is now opt-in rather than default

3.0.0 (07.03.2016)

All css classes now prefixed with ffe-
All less color variables now prefixed with ffe-

2.1.1 (04.02.2016)

Fix: 0 vertikal margin for content-container--no-space regardless of screen size
Examples: it's better to use https:// URL than protocol relative
Styling changes for check-box
Styling changes for radio-button
Make sure --no-margin variants of headers are always valid

2.1.0 (04.01.2016)

FFE-3 Adding layout system
FFE-4 Using vendor fonts without hinting to avoid IE-issues and updated styleguide

2.0.0 (26.11.2015)

Going from RSCSS to BEM

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

Change Log

14.0.2 (2018-10-25)

Bug Fixes

14.0.1 (2018-09-19)

Bug Fixes

14.0.0 (2018-08-23)

Features

BREAKING CHANGES

13.0.3 (2018-08-09)

13.0.2 (2018-07-23)

Bug Fixes

13.0.1 (2018-06-18)

Bug Fixes

13.0.0 (2018-06-04)

Code Refactoring

BREAKING CHANGES

12.2.0 (2018-05-29)

Features

12.1.0 (2018-05-22)

Features

12.0.6 (2018-05-04)

Bug Fixes

12.0.5 (2018-05-03)

12.0.4 (2018-04-11)

12.0.3 (2018-04-10)

12.0.2 (2018-03-07)

12.0.1 (2018-03-02)

12.0.0 (2018-02-25)

Bug Fixes

Chores

Features

BREAKING CHANGES

11.0.3 (2018-02-23)

11.0.2 (2018-02-22)

11.0.1 (2018-02-20)

Bug Fixes

11.0.0 (2018-02-15)

Features

BREAKING CHANGES

10.3.1 (2018-02-01)

Bug Fixes

10.3.0 (2018-01-19)

Features

10.2.5 (2018-01-19)

10.2.4 (2018-01-10)

10.2.3 (2018-01-09)

10.2.2 (2018-01-05)

10.2.1 (2018-01-04)

10.2.0 (2017-12-22)

Features

10.1.2

10.1.1

10.1.0

10.0.0

9.3.0

9.2.0

9.1.0

9.0.1

9.0.0

8.2.4

8.2.3

8.2.2

8.2.1

8.2.0

8.1.2

8.1.1

8.1.0

8.0.3

8.0.2

8.0.1

8.0.0

Migrating to v.8.0.0

Installing the latest FFE

Other breaking changes