Blue - v0.0.14

Choice: Fix ID generation 🐛

This update fixes the uniqueID() generation for the Choice component, which indirectly fixes it for Checkbox and Radio. The same fix was also applied to Input and PortalWrapper.

This issue was the element's ID was being regenerated everytime there was a prop change, which is incorrect. It should only be generated once. The solution was to generate and store the uniqueID in the component state, instead of creating it in the render hook.

Better uniqueID creation 🚀

The uniqueID creation factory function has also been enhanced to accept a prefix override namespace.

Blue - v0.0.13

Change react-router-dom to dependency 📁

Was previously a peerDependency

Blue - v0.0.12

Add Grid Components 📏

This update adds the new Grid component (as well as Grid sub-components). These components provide layout/structure-based styles for UI, and follow the grid-style usage of frameworks like Seed, Bootstrap, or Foundation.

Example

<Grid.Container>
  <Grid.Row>
    <Grid.Col size='4'>You're</Grid.Col>
    <Grid.Col size='4'>My Boy</Grid.Col>
    <Grid.Col size='4'>Blue</Grid.Col>
  </Grid.Row>
</Grid.Container>

Add Input.Static and FormGroup.Grid components 📄

This update also adds Input.Static and FormGroup.Grid components for additional flexibility in composing form-based UI.

Example

<form>
  <FormGroup.Grid>
    <Grid.Col size='4'>
      <Input.Static align='right'>First name</Input.Static>
    </Grid.Col>
    <Grid.Col size='8'>
      <Input placeholder='Ron Burgandy' autoFocus />
    </Grid.Col>
  </FormGroup.Grid>

  <FormGroup.Grid>
    <Grid.Col size='4'>
      <Input.Static align='right'>Last name</Input.Static>
    </Grid.Col>
    <Grid.Col size='8'>
      <Input placeholder='Is the best' />
    </Grid.Col>
  </FormGroup.Grid>
</form>

READMEs were added/updated, and tests were added for the additional changes.

This update adds additional features and does not affect component APIs for users/consumers of Blue components.

Add arrow-left (or "Back") arrow 🔙

• Add arrow-left.svg file
• Add arrow-left to icons.js

Resolves: #9

Blue - v0.0.11

Improve Portal mount cycle

This update improves the lifecycle callbacks for Portal and PortalWrapper. Portal has been adjusted to allow for re-rendering of child components based on prop changes, which is handy (and necessary) for things like child unmounting animations or style prop changes (will come in handy for Popover/Tooltip).

A new prop from Portal has been exposed in PortalWrapper called isMounted. It is similar to isOpen, but it's state is changed slightly before isOpen, allowing for child components to execute callbacks that need to happen before the Portal child is removed from the DOM (like Animations).

Example

import Animate from '../Animate'
import Overlay from '../Overlay'
import PortalWrapper from '../PortalWrapper'

const portalOptions = {
  id: 'MyModal',
  timeout: 400
}

const MyModal = props => {
  const {
    children,
    closePortal,
    portalIsOpen
  } = props

  return (
    <Animate sequence='fadeIn down' in={portalIsOpen} wait={300}>
      <div className='MyModal'>
        <div className='MyModalContent'>
          {children}
        </div>
        <Overlay onClick={closePortal} />
      </div>
    </Animate>
  )
}

export default PortalWrapper(portalOptions)(MyModal)

Previous component APIs are not affected, therefore nothing is required for the user/consumer of Blue components.

Tests + README documentation has been updated.

Blue - v0.0.10

Improve component props

Export propTypes

From now on, the const propTypes being declared on components will be made available to be imported. This allows for easier propType re-use! All of Blue's components were updated to support this.

Making component props more flexible

With the rare exception of certain components (like Portal), most of Blue's components have been updated to accept additional props beyond the defaultPropts by using the {...rest} style method. The typical use-case would be to easily add custom style options, or perhaps id or data- properties.

Example

<Avatar style={{ padding: 20 }} />

No changes/updates are required for the user/consumer!

These updates should work with existing integrations. 🚀

Blue - v0.0.9

Updates

Add hs-app theme stylesheet

This update adds an hs-app stylesheet (.scss/.css) for Blue. The idea for this is to allow for Blue components to be seamlessly dropped into hs-app with no/minimal issues in UI consistency.

Typically, it should be up to the consumer of this package (hs-app) to write the custom CSS necessary to override Blue, as Blue should be application agnostic. However, I think this approach is fine, and is the easiest/fastest way for us to start integrating into multiple projects.

Minimal adjustments were made to the actual React JS components. Most of these changes are SCSS based, and are isolated within the new hs-app theme directory under src/styles/themes/hs-app.

The idea for this came about during a call I had with @knicklabs.

To use the hs-app theme stylesheet, simply import add it to the project's main .scss in addition to blue.

Example

...

@import "blue";      
@import "blue.hs-app";

...

Blue - v0.0.8

Updates 🎉

• Abstracts InputHelpText to dedicated HelpText component
• Creates Choice (base) component for Checkbox and Radio
• Create Checkbox and Radio components
• Create FormGroup and FormGroup.Choice component
• Create ChoiceGroup component
• Add check Icon
• Expose sub-components such as Input.Backdrop
• Add tests
• Add README docs for all new components

Examples 🌮

Checkbox

<Checkbox label="Stay classy San Diego" value="stay-classy" />

Grouping

Choose an anchor:

<ChoiceGroup>
  <Checkbox type='radio' label='Brian' value='brian' />
  <Checkbox type='radio' label='Brick' value='brick' />
  <Checkbox type='radio' label='Champ' value='champ' />
  <Checkbox type='radio' label='Ron' value='ron' />
</ChoiceGroup>

Resolves: #13

Blue - v0.0.4

Public release of Blue! 🎉

This will make it much easier to npm install and use in other projects

Blue - v0.0.2

Updates 🎉

Main updates

• Provide Portal with the ability to renderTo a custom selector
• Add Portal.Container component for custom Portal rendering
• Add onBeforeOpen, onOpen, onBeforeClose, onClose callback hooks to Portal
• Add react-router support to Link component
• Add react-router support to Modal component

Other

• Add react-router-dom
• Moved react deps to peerDependencies in package.json
• Add tests! 100% coverage 💪
• Update README

Resolves:
#8
#10

Blue - v0.0.1

🎉 Initial version'ed release! 🎉