Skip to content

Focus components v0.6.1-3

Choose a tag to compare

View all tags
@pierr pierr released this 10 Sep 20:05
· 2479 commits to develop since this release
v0.6.1
7dfbb56

Please read the associated release of Focus v0.10.1

TL,DR; Simply follow Focus starter kit's migration guide 😬

We build a simple migration tool which can be install npm install --save-dev migration-tool and run it whth the command node node_modules/migration-tool/index.js app it should generate a migration-report.json see the starter kit release note for more details

New CSS framework

Details

We now have Google material lite onboard !

Most of the components have been rewritten in order to adapt to this new library. It shouldn't be too painfull for the projects to upgrade to this version.

Rewrite some of the mdl variables see #294

Upgrade tips

  • Icons are now mapped by default google material icon font. In case you don't find any equivalent for your legacy Font Awesome icons, just use the props library='font-awesome' and keep your icon name as before. However, we recommend migrating to the new icons as much as possible.
// material
 <Icon name='loyalty' />
// font awesome
 <Icon name='circle' library='font-awesome'/>
  • Button has been fully rewritten, please take a moment to see the example file associated to these changes here
// shape 'raised', 'fab', 'mini', 'icon'
// color :  'colored', 'primary', 'accent'
//  icon-library: 'material', 'font-awesome', 'focus'

// material icon
<Button icon='alarm' color='colored' label='Bouton primaire' shape='fab' type='button' handleOnClick={()=> alert('click bouton')}/>
// font awesome icon (please see if there is a fitting icon on google material icon font [here](https://www.google.com/design/icons/)
<Button icon='pencil' library='font-awesome' color='colored' label='Bouton primaire' shape='fab' type='button' handleOnClick={()=> alert('click bouton')}/>

The action props has been removed , you may use the handleOnClick props instead.

  • You may need to upgrade your menu in order to use new icons
  • If you use any of Twitter Bootstrap feature directly in your project, you may have to rewrite it using MDL CSS components. Don't hesitate to come and see us if you have any problem.

New feature

  • Grid and column component : see #295 to deal with grids <Column size='4'>...Your content</Column>
  • Lists now give all props to the lines #258 , you can customize buttons and #273

Bug fixes

Associated to the milestone 0.6.0

  • list propagation event #260
  • search placeholder is now customizable #264
  • form afterchange callback wasn't wrapped in a function #283
  • popin error on close #238
  • select , validate mandatory field #233 #236

Please read partial release issues https://github.com/KleeGroup/focus-components/releases/tag/v0.5.2

Documentation

Next steps

Milestone 0.7.0

  • Component namespace rename (with backward compatibility for at least 2 versions)
  • Period component
  • Simple file upload component
Assets 4
Loading