Accordion State Updates

• ExpandToggle now supports disabling
• Accordion now supports startExpanded and disabled props
• Visual styling for disabled accordions
• ExpandToggle now passes disabled state to label render prop

Fixing previous release

The build for the previous release included breaking dependency changes. These have been rolled back.

v3.2.3 supersedes v3.2.2.

[Superseded] Various fixes

UPDATE: superseded by v3.2.3 to fix problems

• Fixed RadioGroup disabled state
• Fixed small input missing error
• Updated styling on RadioButton
• Added new style variant to BulkSelect
• Added missing attributes to Input

React 16, Fields, component fixes

With this release, the library requires React 16. We're using React 16's fragments to achieve some advanced functionality.

• Introduces the Fields layout component, which will supersede Flow. Fields makes it far easier to achieve flexible field alignment in forms with minimal code. It's more stable and less internally complicated than Flow. Flow is now deprecated.
• Fixes Radio. Radio never really saw adoption in our projects, and its usage was out of date with current library practices. It should now be usable.
• Fixes titles in DragGroup.

Date Picker

The DatePicker and DatePicker.Range components are now available, which provide accessible calendar inputs for selecting dates.

Enhanced Select, SearchBox

Select has been enhanced with new searching and multiselect options, using the react-select library.

Notable new props:

• searchable: allows filtering down options
• multi: allows multiple selections

SearchBox component introduced. Allows autosuggestion for search input.

Radio and Password Input components

• Added a Radio component
• Input now has show/hide functionality when type="password" (thanks @tato123 )

V2 - Updated Docs, Breaking Change around Raw Styled Components

There isn't a whole lot of functionality change in this major version release, but since there was a backwards-incompatible change to the way we export 'raw' styled-component based components, we've bumped it.

Migration

To migrate to this release, simply ensure that anywhere where you have imported a component from this library and then utilized it as a styled-component classname reference is updated to reference a .Styled property on that component instead, i.e.:

import { Button } from '@bandwidth/shared-components';

const ButtonHolder = styled.div`
  & > ${Button} {
    color: yellow;
  }
`;

becomes:

import { Button } from '@bandwidth/shared-components';

const ButtonHolder = styled.div`
  & > ${Button.Styled} {
    color: yellow;
  }
`;

Improve DOM nesting of SimpleTable, SimpleTable API

SimpleTable now has proper DOM nesting when it renders the detail view. This was achieved by rendering separate elements for all rows above and below the detail view.

Table.RowDetails is now a <tbody>.

New component: Table.Body. Accepts zebraStripe (bool) and startIndex (int) props. Table will wrap your Row children in a Table.Body by default, but you can turn this off by passing wrapBody=false and include your own Table.Body element(s) as children of a Table for more advanced use cases.

<Table wrapBody={false}>
  <Table.Body>
    {...rows}
  </Table.Body>
  <Table.Body>
    {...moreRows}
  </Table.Body>
</Table>

Open Anchor in new tab

Anchor now has a newTab prop which opens the link in a new tab.