instructure-ui - npm Package Versions

2.2.2 (2017-05-22)

Bug Fixes

• MenuItem: Prevent onSelect from firing twice (2c67d78)

<a name="2.2.1"></a>

2.2.1 (2017-05-22)

Bug Fixes

• Menu: Prevent UL margin style overrides (4522876)
• ToolTip: Events on the child of Trigger not being passed through to Popover (69513b8)
• MenuItem,Button: should support target="_blank" (99b8544)
• MenuItemFlyout: Expose ref for flyout content (5e0622e)

<a name="2.2.0"></a>

2.2.0 (2017-05-22)

Bug Fixes

• Position: Fix flaky Position test for Firefox (8ea348d)
• Button: Fix heights and add icon support (faef77a)
• ToggleDetails: Fix button type and fluidWidth (e1da0f4)
• Modal: Fix fullscreen in safari cutting off content (d1d4ec7)
• containerQuery: Should support ems (4a09603)
• sinon-chai: Use the correct sinon-chai testing assertions (453a211)

Features

• ApplyTheme: Make accessible themes 'immutable' (144a4fb)
• MenuFlyout: Add MenuFlyout option to Menu (6ea4f71)

<a name="2.1.1"></a>

2.1.1 (2017-05-18)

Bug Fixes

• build: Fix compilation errors from missing moment-timezone (501184d)

<a name="2.1.0"></a>

2.1.0 (2017-05-17)

Bug Fixes

• Button: fix display getting overridden (0409876)
• requestAnimationFrame: requestAnimationFrame util should fall back (2352de8)
• Tag, Pagination: fix margin-padding values (e34eb57)
• text-align: Fix text alignment CSS rules for IE (1c22ba6)
• themes: Provide a way to import accessible themes separately (7e556df)
• Transition: Fix Transition component example (c197cba)

Features

• Badge: Add Badge component (3247199)
• Button: add a danger variant (7d741aa)
• DatePicker, DateInput: Add DatePicker and DateInput components (457dea7)
• NumberInput: Add a NumberInput component (c37afdc)

<a name="2.0.0"></a>

2.0.0 (2017-05-10)

Bug Fixes

• release: Fix typo in release script (9850924)
• Spinner: Fix illegal rule console warning (d0820aa)
• TabList: Fix TabList transitions and unmountOnExit (fcc5961)
• themes: Don't depend on import order for themeable components, themes (10396c8)

Dependencies and Build

• Remove UMD output and build scripts (5d5eb65)
• Upgrade React to the latest version (c422be7)

API Changes

• Avatar: Update the Avatar component API (56f4eab)
• Container: Make size property values consistent (f75465a)
• isBlock: Replace isBlock props with inline (c1dcdff)
• ToggleDetails: Update the ToggleDetails component API (c8348b5)
• RTL support: Replace left/right with start/end (c855ea1)
• Grid: Change breakpoints and media to use 'small', 'medium', etc. (15f592a)

Features

• Button: Wrap text when 'isBlock' prop is set (d8af67d)
• Pagination: Add Pagination (76ee0f0)
• Pill: Add Pill component (354795c)
• RTL support: Rename placement props (099795a)
• Tag: Add Tag component (6a0d804)

Upgrade Guide

We've introduced some improved API and component changes that are not backwards compatible with previous versions. To help with migrating to 2.x, here is a list of specific areas where changes will be required in order to upgrade.

Build and Dependency Updates

• React 0.14.9 or 15.4.0 is required
• UMD format is no longer supported
• instructure-icons is now a peer dependency

Themes no longer dependent on import order

You no longer have to call setDefaultTheme. If you import just the theme that you need, it will be used as the default (otherwise the first theme imported will be the default).

If you'd like to add user overrides or toggle on the a11y version, you can do:

import { canvas } from 'instructure-ui/lib/themes'
canvas.use({ accessible: true, overrides: brandVariables })

Note: this also splits out the a11y themes from the base so they can be imported separately.

BREAKING CHANGES:

• removed ApplyTheme.setDefaultTheme
• removed themeable.setDefaultTheme
• trigger a11y themes using theme.use()

size prop changes

Camel-case values in Container component margin and padding props will need to be changed to use dashes (for consistency with other components).

<table> <caption> Alert, Avatar, Billboard, Breadcrumb, Button, ContextBox, Heading, Image, Link, Media, Modal, Pill, Progress, Rating, Spinner, Table, TabList</caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> 'xxxSmall' </td> <td> 'xxx-small' </td> </tr> <tr> <td> 'xxSmall' </td> <td> 'xx-small' </td> </tr> <tr> <td> 'xSmall' </td> <td> 'x-small' </td> </tr> <tr> <td> 'xLarge' </td> <td> 'x-large' </td> </tr> <tr> <td> 'xxLarge' </td> <td> 'xx-large' </td> </tr> </tbody> </table>

Position API Changes

Components previously using left and right for positioning have been updated to use start and end to better support RTL languages in the future.

<table> <caption>ContextBox, Popover, Position, Tooltip, Tray </caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> placement: 'left' </td> <td> placement: 'start' </td> </tr> <tr> <td> placement: 'right' </td> <td> placement: 'end' </td> </tr> <tr> <td> placement: 'middle' </td> <td> placement: 'center' </td> </tr> </tbody> </table>

textAlign prop Values

Components previously using left and right for the textAlign prop have been updated to use start and end to better support RTL languages in the future.

<table> <caption>Container, ContextBox, FormField, Grid, GridCol, TabList</caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> textAlign: 'left' </td> <td> textAlign: 'start' </td> </tr> <tr> <td> textAlign: 'right' </td> <td> textAlign: 'end' </td> </tr> </tbody> </table>

isBlock prop

Changes for consistency in component APIs

<table> <caption>Button, ToggleDetails</caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> isBlock: true </td> <td> fluidWidth: true </td> </tr> </tbody> </table> <br/> <table> <caption>Checkbox, FormField, FormFieldLayout, Image, RadioInput, Select, TextArea, TextInput, Tooltip, Transition </caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> isBlock: true </td> <td> inline: false </td> </tr> </tbody> </table>

Avatar Component API

Changes to our <Avatar> component:

<table> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> userName: 'Sarah' </td> <td> name: 'Sarah' </td> </tr> <tr> <td> userImgUrl: {avatarSquare} </td> <td> src: {avatarSquare} </td> </tr> </tbody> </table>

ToggleDetails Component API

Changes to our <ToggleDetails> component:

<table> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td> isExpanded </td> <td> expanded </td> </tr> </tbody> </table>

Breakpoint (startAt) props

Changes to the allowed values for the <Grid> component props, with extension into a few components where we allow breakpoints to be set:

<table> <caption>Grid, FormFieldGroup, RadioInputGroup, CheckboxGroup</caption> <thead><tr><th>1.x</th><th>2.x</th></tr></thead> <tbody> <tr> <td>phone</td> <td>small</td> </tr> <tr> <td>tablet</td> <td>medium</td> </tr> <tr> <td>desktop</td> <td>large</td> </tr> <tr> <td>wide</td> <td>x-large</td> </tr> </tbody> </table>

<a name="1.4.1"></a>