Focus Components v0.14.0

Summary

v0.14.0 is here to bring bug fixes. We work hard to close most of the bugs in the project's issues, and we are now left with less critical issues, mainly enhancements.

*How to update your version project *

npm install --save focus-components@0.14.0 focus-core@0.14.0
You can also update to the latest version of our tools npm i -save-dev babel-preset-focus@latest webpack-focus@latest

Important

We removed most of deprecated components from the built package. If you encounter troubles with launching your application after having updated to the latest version, it might be due to your usage of deprecated components.

For instance, all old input components have been moved to a legacy folder.
This new version also contains a new version of material-design-lite see 1.1.2.

Breaking changes

If you were using the deprecated autocomplete component, this.autocompleteFor in a form for instance, we moved this component in the deprecation land since it will soon be removed.
To mark this, you must now call this.deprecatedAutocompleteFor instead of this.autocompleteFor.

We highly encourage you to mirgrate to the maintained components, such as this.autocompleteSelectFor and this.autocompleteTextFor.

You can have a look at this issue for more details about the differences between both.

New features

We finished the refactoring on the autocomplete, and implemented the AutocompleteText component, to finish the autocomplete specification.

[Message Center] Add Material Design toast and snackbar message center

Description

We develop a brand new message center, respecting Material Design specifications.
It is based on Material Design Lite HTML and CSS Templating.

For more information about MDL version, please read http://www.getmdl.io/components/index.html#snackbar-section

For more information about MD specification, please read https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

You can still use the old MessageCenter component if you need it, you just have to specify the component as a props in the layout.

Dependencies

This PR will upgrade Material Design Lite version.

Bug fixes

[Selection list] Secondary actions are displayed under the next line

Description

Secondary actions are displayed under the next line.

Patch

As @gideruette suggested, add a z-index to the actions

Fixes #1006

Remove deprecated components

Description

Remove deprecated components

• Date
• Input text
• Input textarea
• Input toggle
• Input checkbox
• Autocomplete
  The this.autocompleteFor is now this.deprecatedAutoCompleteFor.

From version 0.7 to version 0.14 these components provided warnings inside the developer console to explain which components should be use instead, all of them are in focus-components/components/input.

We let the previous components in the src/legacy directory in order for projects to be able to copy paste them inside their projects if the migration was not done since version 0.7.
Feel free to ask any question if you need assistance regarding the use of the latest version of the components.

Fixes #1064 #1000

[Field] is-invalid class is not removed when field is valid again

Description

is-invalid class is not removed when field is valid again.
This is because of MDL, keeping the class in the DOM.

Patch

Force the class removal in the DOM.

Fixes #908

[Search] Reset criteria on scope change

Description

All criteria were not changed on scope change.

Patch

All criteria are now changed on scope change.

Fixes #1065

Add disable props to checkbox

Description

Add the disabled props to the component. It was missing 👎

Fixes #772

Example

<Checkbox disabled={true} {...otherprops} />
<Checkbox disabled={false} {...otherprops} />

[Textarea] Add a display component

Description

When a value set by the textarea contains multiple lines, the line breaks are not displayed in consult mode.

Patch

As @durandx suggested, a white-space: pre-wrap is added.

Fixes #935

[Advanced-search] Group retains count when criteria changes

Description

See #862, @mouffakb explained it very well.

Patch

Add a key to each group, so that React unmounts and mounts new group elements. Their state is initialized correctly this way.

Fixes #862

[Advanced search] Selection box is not synced with the lines

Description

See @mouffakb description in #861.

Patch

Selection status is now correctly synced with the lines.
It is a button, directly clickable, not a dropdown anymore.

Fixes #861

[Autocomplete-select] onChange is called too early]

Description

The onChange callback is triggered too early, so the getValue method does not provide the correct value.

Patch

The onChange callback is now fired after the internal state is correctly set.

Fixes #1077

Focus Components v0.13.0

Focus Components v0.13.0

• This release is about stabilization, we try to fix all critical issues and all browser's related issues
• focus-core and focus-components now have the same version number 0.13.

Install the latest versions with npm install --save focus-components@0.13.0 focus-core@0.13.0
npm i -D webpack-focus@0.11 you need to update it in order to have all the loaders.
Thaks to all the contributors @JabX , @Hartorn , @Hauwkins, @rodolpheV , @Ephrame, @plepaisant, @gideruette, @sgoretti , @JoanaDalmeida , @JRLK for your precious help

Don't forget to have a look at getfocus.io which is our single entry point to focus's ressources.

New feature

Search

• Vertigo API has changed in version 9.1. FOCUS took these changes into account, following this new API: https://github.com/KleeGroup/focus-core/wiki/Search-example, be aware that the API will change again in Vertigo 9.2.
  The next API will be harmonized between .NET FMK and Vertigo

WARNING : by upgrading focus-core and focus-components in version 0.13.0, the search of your project won't work anymore. This is due to changes done on components to make it works with vertigo 9.1 API. But don't worry, we wrote some code to allow you to use the old API of vertigo : please refer to the section above called 'Vertigo API and Focus-compoonents migration', get the code and apply it in your project.

• We added new default wrappers components for groouping in QuickSearchGroup see #1020 and AdvancedSearchGroup see #1005.
  

Other

• new CheckboxWithError component see #1002 for the use case
  

Issues

• Secondary buttons see #980
• List icon was blurry #976
• Crash on the advanced search when the criterion was too selective #972
• Remove a console writing in the Header #934
• Remove z-index scrolling in the header
• Migration of the Role component see #1009 (now in focus-components/components/role)
• You can disable the ErrorCenter with a props on the Layout #1007
• Add translations on the icon dropdown component #982
• Add the props on the SelectionList
• Fix the TextArea on IE see #971
• Improvements on rendering of the following components
  • facets #1016
  • input's label position in the search bar #1013
  • checkbox #1002

Questions

• textarea (wrong component used) #973
• use of service props in the list action builder

New tools

babel-preset-focus

We now provide a complete preset of babel plugins and other presets install it with npm install babel-preset-focus
This package also provide a polyfill to ensure the application's working on older browsers IE10+, IE9 will boot but is not supported.
If you need IE support you have to require it when the app boots
It is in babel-preset-focus/dist/focus-polyfill.js
Change your .babelrc to

{
  "presets": ["focus"]
}

Remove from your package.json, all your babel-plugin* and babel-presets-*

webpack

You can use our focus-webpack configuration to build and launch your applications.
You really should use it as it provides: native node modules use, hot reloading, and sevral option for application's delivery.

Showcase

@GuenoleK added sevral components in the showcase, feel free to look at them here

• Autocomplete
• Menu
• Popin
• Confirm Popin
• Search Bar
• Facet Box
• Quick search
• Advanced search

Next release

• focus-demo app
• new version of material-design-lite
• Application's messages as snackbar
• Beta version of the new Form / Stores API
• DX Tools so inspect your stores, routes and application

Vertigo API and Focus-compoonents migration

Search

Description

Vertigo API has changed in version 0.9.1.

FOCUS took these changes into account, following this new API: https://github.com/KleeGroup/focus-core/wiki/Search-example

Compatibility

If you decide to migrate to vertigo 9.1, you can use this code to help you to transform sent and received data to a format that your backend will understand:

import keys from 'lodash/object/keys';


/**
* Transform an objet to an array.
* @param  {object} data object to transform
* @param  {string} key  property key to transform
*/
const _transformSearchResponseObjectToArray =  (data, key) => {
    const obj = data[key];
    data[key] = keys(obj).reduce((arr, key) => {
        const arrObj = {};
        arrObj[key] = obj[key];
        arr.push(arrObj);
        return arr;
    }, []);
}
/**
* Transform an old search response
* @param  {object} data search response to transform
* @return {object}      transform repsonse object
*/
const transformResponse = data => {
    if(data.groups){
        _transformSearchResponseObjectToArray(data, 'groups');
    }
    if(data.facets) {
        _transformSearchResponseObjectToArray(data, 'facets');
        data.facets.map((facet) => {
            keys(facet).map((key) => {
                _transformSearchResponseObjectToArray(facet, key);
            });
        });
    }
    return data;
};
/**
* Transform the configuration send to server to fit new search api contract
* @param  {object} config          search configuration that will be sent to the server
* @param  {boolean} includeFacets  indicates whether the facets should be included in the configuration or not
* @return {object}                 the configuration that fits to new search api contract
*/
const transformConfig = config => {
    config.data['facets'] = _buildFacets(config.data['facets']);
    return config;
}

const _buildFacets = facets => {
    return keys(facets).map((key) => {
        let value = facets[key];
        return {key, value};
    });
}

export default { 
      transformConfig,
      transformResponse
};

to request vertigo backend in a compatible way

You can use transformConfig method which convert the configuration build by focus-core to sent it to veritgo. (Please check if you need to do it before using it) :

const serverConfig = searchParser.transformConfig(config);

For example :

unscoped(ajaxConfig) {
      return fetch(URL.search.searchByScope(searchParser.transformConfig(ajaxConfig))).then(data => searchParser.transformResponse(data));
},

to transform server response to focus understandable data

You can use transformResponse this way:

return fetch(moviesUrl.search(config)).then(data => searchParser.transformResponse(data));

For example :

unscoped(ajaxConfig) {
      return fetch(URL.search.searchByScope(searchParser.transformConfig(ajaxConfig))).then(data => searchParser.transformResponse(data));
},

Complete example from demo

import fetch from 'focus-core/network/fetch';

import commonUrl from '../config/server/common';
import moviesUrl from '../config/server/movies';
import personsUrl from '../config/server/persons';

import searchParser from './helpers/old-search-parser';

export default {

    /**
     * Target search service call.
     * (This should the target : search service should be written this way.)
     *
     * @param  {object} config search call configuration.
     * @param  {string} scope  scope search
     * @return {object}        search response
     */
    _search(config, scope) {
        switch (scope) {
            case 'movie':
                console.log(`[SEARCH MOVIE] config: ${JSON.stringify(config)}`);
                return fetch(moviesUrl.search(config)).then(data => searchParser.transformResponse(data));
            case 'person':
                console.log(`[SEARCH PERSON] config: ${JSON.stringify(config)}`);
                return fetch(personsUrl.search(config)).then(data => searchParser.transformResponse(data));
            default:
                console.log(`[SEARCH ALL] config: ${JSON.stringify(config)}`);
                return fetch(commonUrl.search(config)).then(data => searchParser.transformResponse(data));
        }
    },

    /**
    * Search with scope.
    * @param  {Object} AdvancedSearch config that launches the call of this service
    * @return {Promise}
    */
    scoped(config) {
        const {criteria} = config.data;
        const {scope} = criteria;
        const serverConfig = searchParser.transformConfig(config);
        return this._search(serverConfig, scope);
    },
    /**
    * Search without scope.
    * @param  {Object} AdvancedSearch config that launches the call of this service
    * @return {Promise}
    */
    unscoped(config) {
        const serverConfig = searchParser.transformConfig(config, false);
        return this._search(serverConfig);
    }
};

Focus Components v0.8.6

Acknowledgments

Thanks to @Hartorn @Pandakls @plepaisant @sgoretti @obtl @asimsir (we propably forget people, sorry for that...) for contributing to the release.

Install

npm i focus-components@0.8.6 focus-core@0.12.4

See Focus Core associated release

To resume this release

Bug fixes

• [Seletion-list] fix selection list default styles
• [action-bar] Fix default styles
• [Date picker] Fix autoclosing
• [Search-bar] fix spinner default size
• [Advanced-search page] add new behaviour : remove all sort info on scope change
• [Autocomplete] some fixes
• [Popin] Fix scroll issues
• [Scrollspy][Internet Explorer][Firefox] scrollspy errors under both browsers.
• [Form] No longer stuck in loading mode on server error

New features

• [Seach-header] add event handler triggered by manual click on scope
• [Select-radio] add disabled mode
• Material Design Lite update

Following the MDL Update

You must copy the new SVG in order to have the checkbox correctly displayed.
You can find it in node_modules/focus-components/node_modules/material-design-lite/src/images/tick-mask.svg. Copy it next to your current tick.svg.

To simplify contributions

We worked on all focus libs to allow you to execute your project with focus-core and focus-components locally in your machine. It will facilitate your contribution to focus libs. To do that, the following point were changed :

• Translation: i18n is now provided by focus-core. You don't have to require it in your package.json anymore.
• Routing: Backbone is now provided by focus-core. You don't have to require it in your package.json anymore.

[Seletion-list] fix selection list default styles

THIS UPGRADE COULD HAVE AN IMPACT ON YOUR APP STYLES IF YOU OVERRIDED IT.

Issue description

Selection checkbox was stuck on the left side of the line.

Fix description

Selection checkbox is now place 20px from the left side.

[action-bar] Fix default styles

THIS UPGRADE COULD HAVE AN IMPACT ON YOUR APP STYLES IF YOU OVERRIDED IT.

Default styles of action bar are now fixed.

[Seach-header] add event handler triggered by manual click on scope

An event handler called onSearchCriteriaChangeByUser is added, allowing to define precisely a custom event triggered when user clicks on scope and selects one, or change the input text.
This is an additionnal feature to onSearchCriteriaChange which listen to a global change from the search-store, triggered by any kind of source : from a service, an action called, a user click...

The search is also triggered on "ENTER" key press.

Example :

import React from 'react';

// web components
import {cartridgeBehaviour} from 'focus-components/page/mixin';
import CartridgePageSearch from 'focus-components/page/search/search-header/cartridge';
import SummaryPageSearch from 'focus-components/page/search/search-header/summary';

export default React.createClass({
    displayName: 'HomeView',
    mixins: [cartridgeBehaviour],

    /**
    * Related to the CartridgeBehaviour.
    * Define the cartridge configuration.
    * @return {[type]} [description]
    */
    cartridgeConfiguration() {
        return {
            summary: {
                component: SummaryPageSearch,
                props: { onSearchCriteriaChangeByUser: this._navigateAdvancedSearch }
            },
            cartridge: {
                component: CartridgePageSearch,
                props: { onSearchCriteriaChangeByUser: this._navigateAdvancedSearch }
            },
            actions: {
                primary: [],
                secondary: []
            }
        };
    },

   ...

[Search-bar] fix spinner default size

THIS UPGRADE COULD HAVE AN IMPACT ON YOUR APP STYLES IF YOU OVERRIDED IT.

The search-bar spinner default size is corrected to fit by default in the container.

[Select-radio] add disabled mode

Thanks to @plepaisant who has taken care of the issue #653.

Issue Description

Currently, it is impossible to display a disabled selectRadio.

Patch

disabled property has been added

modified files:

• src/common/input/radio/index.js
• src/common/select/radio/index.js

Example:

render() {
        const valuesExample = [
            {code: 'A', label: 'aaaa'},
            {code: 'B', label: 'bbbbb'},
            {code: 'C', label: 'ccccc'},
            {code: 'D', label: 'DDDD'}
        ];
        return (

                <SelectRadio value='A' values={valuesExample} disabled={true}/>

        );
    }

Fixes

It fixes #653

[Advanced-search page] add new behaviour : remove all sort info on scope change

Thanks to @sgoretti who has pushed this pull request.

issue description

When the scope changes, the sort info has lots of chance of not being supported by the new scope.
Unless all scopes have the same fields, but it's unlikely.
so we delete the sorting info.

Correction

Now, a change of scope triggers a dispatch which reinitialize select sort properties.

Browser compatibility

Add all CSS prefixes, so that it is compatible with IE, Firefox, Safari and Chrome.

Translation

window.i18n is now replaced by FocusCore.translation.

Backbone

window.Backbone.history is now replaced by FocusCore.history.

[Popin] Fix scroll issues

Description

It is not possible to scroll inside a scrollable element inside a popin.

Patch

Let the user scroll wherever he wants, and hide the document scrollbar on popin opening.

[Scrollspy][Internet Explorer][Firefox] scrollspy errors under both browsers.

Thanks to @asimsir for the pull request.

Issue description

In the detail pages, scroll up of JS errors in Internet Explorer and Firefox.

In chrome

👍

In Firefox:

:(

In IE:

This was related to document.scrollingElement method use, which is not supported by Firefox.
This is now corrected.

Focus Components v0.8.5

Install

npm i focus-components@0.8.5 focus-core@0.12.2 material-design-lite@latest -S

See Focus Core associated release

Bug fixes

• [Quick-Serch] correct event listener in quick search
• [Confirm-popin] Fix binding
• [Date picker] Fix autoclosing

[Quick-Serch] correct event listener in quick search

Issue

Quick search was launched 3 times is some cases (when more than one criteria is changed).

Patch

This behaviour is now corrected. Quick search is now always launched once, even all of criterias are launched.

Focus-components

Associated to : klee-contrib/focus-core#291

Confirm popin

Fix binding.

Date picker

Fix autoclosing.

Focus Components v0.8.4

Warning the release process is in progress

Install

npm i focus-components@0.8.4 focus-core@0.12.2 material-design-lite@latest -S

See Focus Core associated release

External contributors

We just want to say thanks to @JoanaDalmeida , @JabX , @Pandakls , @gideruette , @sebez for their contributions to this Release.

Improvements

• Application header also known as Cartridge has been refactored by @JabX see #826
• The ScrollSpy component has been refactored by @Pandakls see #822
• Switch facets to material style by @sebez see #827
• Focus components now uses webpack-focus
• Material has been upgraded to 1.0.6
• The isSelected information now depends only of the Line see #875

Details of these PR are at the bottom of this release note

Bug fixes

Search triggered three times #874

Issue

Advanced search was launched 3 times is some cases (when more than one criteria is changed).

Patch

This behaviour is now corrected. Advanced search is now always launched onces, even all of criterias are launched.

Focus-core

Associated to : klee-contrib/focus-core#279

The panel now display the loading state #868

When an action is triggered the Panel is blocked by a loading mask

Scope code displayed instead of label #846

Fixed by @JoanaDalmeida

Button icon #841 #840

improve PR #840.

Fixes #828

Now <span> is not rendered when no icon is specified.

Button props #839

by @gideruette

Add operation props to the button in order to get them back after the component is created

Search bar icon #835

In previous versions, scope codes were used to specify the code of scope used for research but also to declare scope icon name. But most of times, we don't want to use the same code for scope and icon. Inded, icon libraries have proper names.

{code: 'ALL', label: 'search.scope.all'},
{code: 'MOVIE', label: 'search.scope.movie'},
{code: 'PERSON',  label: 'search.scope.person'}

Patch

It is now possible to specify the icon name and library by specify it on the scope, like this :

{code: 'ALL', icon: 'all_inclusive', label: 'search.scope.all'},
{code: 'MOVIE', icon: 'movie', library:'material', label: 'search.scope.movie'},
{code: 'PERSON', icon: 'person', label: 'search.scope.person'}

Fixes #834

PR details

Header size

As mentionned in #686, which itself referenced other issues people were having with the header and cartridge, I propose here something that would solve most people issues with it (including mine).
(Don't forget the corresponding PR in focus-core)

The end result is this:

The header doesn't use a sizeMap or similar tricks anymore, it only has a isDeployed state that determines if the cartridge is shown or not, and an associated canDeploy prop, which defaults to true.
As shown in the gif, the isDeployed state changes on its own when the header has the size of the top-bar. Of course, if canDeployis false, the header will stay collapsed whatever happens.

The cartridgeConfiguration (and applicationStore) has been updated with the canDeploy prop, and you can also now optionally set the barRight component too with it.

There is then no need to mess with the data-route to change the header size any more.

You can use it as follows :

const cartridgeConfiguration = () => {
    return {
        ...
        canDeploy: false
        ...
    };
}

What's changing

• The css selector [data-size='small'] has been replaced by [data-deployed='false']. Similarly, [data-size="medium'] by [data-deployed='true']. They are now directly linked to the current shown component : true -> cartridge shown, false -> summary shown, always. Thus, data-size has been removed.
• sizeMap and processSizes have been removed.
• notifySizeChange is still here but is given the isDeployed state as parameter.

Sticky menu and ScrollSpy

Context

The sticky menu is used in all our Detailpage. Handy and cool stuff thanks to Focus.

Actual behaviour

The sticky menu sets the active label on the div on top of screen. Here the visualisation :

Here some screens that tickles me a bit :

I think that in this configuration the user is watching the Agrément block, and the one above is highlighted.

In this configuration, the user just clicked on the LAST item in the sticky navigation, so he's watching the last block. And the one highlighted is 3 block above !! First he's deconcerted because the buttons doesn't highlight on click. Secondly, the block highlighted is bearly visible and can create confusion. (We have several mantis from the client that really don't find this behaviour natural :
"Mauvais lien hypertexte sur les onglets "Lien avec l'entreprise" et "Justificatifs" dans le menu de navigation DHSB"
"Mauvais lien hypertexte sur l'onglet "Justificatifs" dans le menu de navigation de création d'une demande de TCA"
"Absence des liens actifs suite aux clics sur les champs "Agréments" et "Correspondant Sureté" dans le menu de navigation.")

Expected behaviour

1 - First of all, set the detection level in the middle of the screen ! Really small blocks are rare so it won't disturb the actual behaviour (highlight on click). And when the user click on a link, if the detection level is in the middle of the screen, the right link will be highlighted so that the good one when scrolling.
2 - On click, FORCE the active label on the one clicked, even if the scroll doesn't fit. And when the user will scroll, he doesn't gives a shit anymore of his previous selection ! (This case is only to handle too small blocks at the end of the screen, but regarding the actual conception of the component, EACH page got small section at the end and NO ONE of our detail page ever gets it's latests block highlighted.)

Tips

Level detection should be at level of eyes on a screen : 2/5 without navigation on top :

You set your detection around this limit where the user never watchs !
Here you wan't to place your detection :

Line selected

Description

It is now possible to initialize props isSelection for each line of the list, depending on line data.
It is also possible de declare a specific line of the as non selectionnable, depending on the line data.

Screenshots

Code sample

In line component mixin :

import {mixin as selectionLineMixin} from 'focus-components/list/selection/line';

const Line = React.createClass({
    mixins: [selectionLineMixin],
    definitionPath: 'movie',

    selectionnableInitializer(data) {
        return data.code !== 10055;
    },

    selectedInitializer(data) {
        return data.code === 10054;
    },

    renderLineContent(data) {
        const {code, title} = data;
        return (
            <div>
                {code} - {title}
            </div>
        );
    }
});

Issues

fixes #777

Focus Components 0.8.3

Bug fixes

Secondary actions are not reliably set

Description

When using the secondary actions in the header, getting asynchronously the action list breaks the dropdown menu.

Patch

Refactored the dropdown component, using Material UI's base.

Fixes #624

Scopes are not translated

Description

Scope labels were not translated which did not allowed multi-linguism.

Patch

Scope labels are now translated.

Focus Components 0.8.0

New features

Autocomplete Select

The Autocomplete has been refactored, and the first component, AutocompleteSelect is released now.

Specification

See #688

Usage

A new helper is available in the form preset : this.autocompleteSelectFor('name', {keyResolver, querySearcher});

Customization

The options list is customizable, this can be achieve through the renderOptions prop.
This prop should return some JSX, and it is bound to the component's context, so the props and the state are directly accessible through this.props and this.state

Bug fixes

It fixes #669 #674 #693

Bug fixes

Issue Description

Scrollspy-content and menu were are not well displayed on mobiles.

Fixes #712

Patch

This patch gives a first answer to responsive problems.

Be careful, these changes may have some impact on your project. But don't worry, it's quite easy to change it ! It is described below.

widescreen size and tablet size

MDL grid are not used anymore, so the allocated size of scrollspy menu remains the same if the windows size change.

mobile size

On mobile screens, scrollspy menu is not displayed anymore on the left but at the top of the content.

To modify scrollspy menu width

The default size of the menu is 260px. It's maybe not what your project needs.
That's why you can override this default size by addeing the following CSS code in your scrollspy-container.scss SASS file:

$scrollspy-container-menu-size:220px;
$media-desktop-breakpoint: 840px !default;

@media (min-width: $media-desktop-breakpoint - 1) {
    [data-focus="scrollspy-container"] {
        [data-focus="sticky-menu"] {
            width: $scrollspy-container-menu-size;
        }
        [data-focus="scrollspy-container-content"] {
            margin-left: #{$scrollspy-container-menu-size + 10px};
        }
    }
}

Issue Description

When body scrollHeight is a little bigger than body clientHeight, weird phenomena commonly called "Zigwigwi" appeared.

Fixes #164

Patch

To avoid this behaviour, shrink of header is not applied conditionnally to body height and header height. calculation is the following:

  const node = ReactDom.findDOMNode(this);
  const bodyNode = document.body;
  const value = bodyNode.scrollHeight - node.scrollHeight - bodyNode.clientHeight;
  if(value > 0) {
    //shrink the header
  }

This seems to correct the zigwigwigwi behaviour.
This was tested on the focus demo app, and this correction worked. Please make us some feed back.

Add icon to active scope

Description

[Scopes] can't select an icon to display in scope selector

Active scope misses an icon, in the search bar.

Patch

As in the scopes dropdown list, the active scope now has an icon and a label.

A CSS selector has also been added, the scopes (in the list and the active one) are selectable through the data-scope='TOOL' selector.

Fixes #572

No spinner on search action

Description

When the search action is triggered, no spinner is displayed.

Patch

Add a spinner that will appear on the action call, and disappear with the server response.

Fixes #623

Focus Components 0.7.9

Merge pull request #783 from KleeGroup/version-0.7.9

[version] 0.7.9

Focus Components 0.7.7

Bug fixes

Modal closing icon is not material design compliant

Patch

Change the icon to material design.

Fix #711

Select component now deals with isActive property

Description

• On consult mode all list elements are resolved
• On edit mode only the active elements are proposed

Customization

You can choose on which property you want to filter on the active status by default it is isActive in order to customize it just use isActiveProperty props.

Example

const VALUES =  [
  {code: 1, label: 'Code 1', isActive: true}, 
  {code: 2, label: 'Code 2', isActive: false}, 
  {code: 3, label: 'Code 3', isActive: true}
];
<Select name='selectName'  values={VALUES} /> 
// only displays
<select>
  <option value='1'>Code 1</option>
  <option value='3'>Code 3</option>
</select>

It fixes #636

Fix radio select display issue when provided changing value

Description

The display is broken when the value comes after the initial render.

Patch

Now adjusting the is-checked class in the DOM to trigger the correct MDL display.

Fixes #670

[List] Fix selection state with new data

The selection list keeps the selection state even when the provided data change.

Patch

The selection state is now reset when data changes

Fixes #699

Fix getValue

Description

The getValue method returns the label instead of the code when the field has isEdit set to false.

Patch

Check if allowUnmatchedValue is set to false, and if yes then return the code.

Focus Components 0.7.5

Bug fixes

[field] fix field default css precedence to correct padding

Issue Description

Default field padding was overload by material css lib.

Patch

CSS precedence of the field is increased.

[panel] display action permanently when form is edit

Issue Description

In a panel inside a form :

The Edit button appears only when the mouse is over the panel => OK
I click the Edit button and switch to edition mode => OK
The buttons are now Save and Cancel => OK
The buttons disappears when the mouse it out the panel => KO

Fixes #641

Patch

Now display action permanently when form is edited.

[OpenedFacetList] property added to facet-box as well

See issue #662

Patch

Property added.
Forgot this file on Friday for the pull request because I'm dumb. Thought about it all w-e.

Fixes #662

Fix iconLibrary Issue #625

Fix button cancel

The cancel button now reset the state from the store before changing the mode.

Fixes #668