Release Notes

November 2018

Tell your friends: Uniform is back to full strength. And to prove it, we’re hitting you with our first ever pattern. (If you thought it would be anything but empty states, we’re sorry, but they were practically covered in strobe lights, blasting a hip-hop airhorn. Attention could not be diverted.)

Once you’ve enjoyed everything those guidelines have to offer, revisit your favorite component and check out our brand new live editor. Depending on the component, you might also be in for a new prop. Only the list below would know for sure, so check it twice!

filetypeother

Docs

ADDED
Live editor support for all components.
ADDED
Empty state guidelines to the brand new Patterns section.

Components

ADDED
The status prop to our alert’s action shape. (Shoutout Brandon.)
ADDED
The hideDismiss prop to single selects.
ADDED
Left and right orientations for an icon’s labelPosition.
ADDED
Support for links to look like buttons in certain situations—like empty states.
FIXED
The qaId that never was (in relation to lookup multi-select).
FIXED
A modal issue where buttons rendered in an incorrect order. Big thanks to Amanda.
FIXED
The padding that remained after dismissing a notice. Thank you, Dani!
FIXED
Overflowing pills in the lookup multi-select.
FIXED
An issue where options within a group weren’t actually selected, specifically in single select.
FIXED
The occasional squished avatar.
FIXED
An incorrect color in the tooltip tail.
FIXED
An issue where unchecked checkboxes would mysteriously white out a screen.

Sketch Library

FIXED
Layer styles replacing icon masks.
FIXED
The thing where default was flooding icons in every component.

October 2018

The scariest thing about this update is the fact that it’s already October. The list itself is light and, like the state of Nebraska, not for everyone. Fans of the system banner and qa IDs are in luck, as are those who dig housekeeping—we went through to make sure what’s there still sparkles. For everything else, just know what’s in your brain is likely in ours, as well.

filetypeother

Docs

ADDED
System banners. But not here—check Sync.

Components

ADDED
qaId support to form section and form modifier.
FIXED
Incorrect passing of qaId in alerts and modals.
FIXED
A multi-notice situation in which dismissing one would also close the last one. Poor guy.
FIXED
The length of the hover transition on links.

September 2018

Everyone’s favorite month* just got a whole lot cooler. Not only are punctuation guidelines now a thing, but we added two new components to help you provide the right kind of FYI. Whether the workflow requires a decision or would simply benefit from added context, alerts and notes are here to help. For more on those—plus a quick update from space—you’ll have to scroll.

*100% made up

filetypeother

Docs

ADDED
Rules re: alerts. Interrupt wisely.
ADDED
Guidelines for the less aggressive note.
ADDED
Punctuation dos and don’ts.

Components

ADDED
The alert. It’s like a modal, but bossier.
ADDED
A little something to the notification family.
ADDED
A className prop to a number of form fields:
  • Input
  • Text Area
  • Radio
  • Checkbox

Sketch Library

ADDED
One new component. Interrupt wisely.
ADDED
The other new component.
ADDED
Space blocks to help with sizing. 🚀

August 2018

This month’s batch is small but mighty. A common theme is the deprecation of tint, shade and success colors in favor of text and confirmation—with every platform updated to comply. We also solved not one, but two tricks involving a dismiss. And what kind of release would it be without a few new icons? Complete details below.

filetypeother

Docs

ADDED
Lots o’ colors to the deprecated variables.

Components

ADDED
A dismiss button on the single select.
ADDED
labelParent for icon and parent for tooltip to better position elements in their given containers.
ADDED
A hideOverflow prop in all type components to truncate text with an ellipsis.
FIXED
All selects to make the entire input clickable.
FIXED
Lookup selects so the filter works even after an item is selected.
FIXED
Text on inputs to use utility colors.
FIXED
SVG checkboxes to stop resetting page position anytime something was (un)checked.

Android

ADDED
Icons, yay!
  • Effect Arrow
  • Effect Circle
  • Effect Cursor
  • Effect Freehand
  • Effect Text
ADDED
Utility colors for text and confirmation.
IMPROVED
Icons for Add and Remove.
REMOVED
Utility tint, shade and success colors. (Use text and confirmation instead.)
ADDED
Those same effects icons.
ADDED
Utility text and confirmation.
FIXED
Toasts to include the dismiss and give icons the correct tint.
IMPROVED
Add, Remove and Highlight icons.
REMOVED
A few colors—namely utility tint, shade and success.

React Native

ADDED
Effect Arrow, Circle, etc., etc.
ADDED
Colors of the utility variety.
ADDED
TypeScript all the way down.
IMPROVED
Same icons as Android and iOS. Everything’s better in threes!

Sketch Library

ADDED
Utility text and confirmation colors for both environments.

July 2018

We’re switching things up to bring you full release notes at the end of every month! Because keeping track of what happened the first two weeks of one and the last two weeks of another was getting to be a bit much, and it’s hard to get excited about a release when you’re not totally sure where in the middle of the month it might fall. But enough about us—let’s talk what’s new.

Three (very common) components are ready to make their mark on the Hudl interface: keyboard shortcut, spinner and notice. We moved a ton of CSS styling from uniCSS to uniComponents, and threw so many improvements at every select, they may as well be brand new. Read on for more.

filetypeother

Docs

ADDED
Guidelines for the new keyboard shortcut.
ADDED
How and when to use the spinner component.
ADDED
Everything there is to know about notices.

Components

ADDED
The keyboard shortcut component.
ADDED
Our new and improved spinner.
ADDED
That notice you’ve been waiting for.
ADDED
All kinds of styling pulled from CSS.
ADDED
Props!
ADDED
A dismiss button for single select so a user can deselect an option.
IMPROVED
Action bar actions to exist as a shape rather than a separate component.
IMPROVED
Help text to include bold and italics, even links.
IMPROVED
Icons can pass in custom icons in as childen for the a11y and icon label benefits.
FIXED
Lookup select not filtering when showAllOptions was set to true.
FIXED
An issue where clicks didn't register on certain parts of the lookup select and single select.
FIXED
The thing where an action could not be disabled in the action bar.
FIXED
Max-height on lookup select.
FIXED
An issue with scrolling to the top when selecting an item in lookup multi-select.
FIXED
Lookup multi-select (again) to display the placeholder.
ADDED
Tokens for utility colors.
IMPROVED
classes to use those new color tokens.
IMPROVED
Overflow mask and content padding for the modal.
FIXED
The double scrolling issue with groups in selects.
REMOVED
Styling for pretty much everything and put it all in uniComponents:
  • Avatars
  • Action List
  • Action Bar
  • Tooltip
  • Notice
  • Spinner
  • Toast
  • Modal
  • Selects
  • SelectMark

Sketch Library

ADDED
That keyboard shortcut.
ADDED
The spinner, too.
ADDED
A notice component—but you already knew that.
ADDED
New effects icons:
  • Arrow
  • Circle
  • Cursor
  • Freehand
  • Text
ADDED
Native text styles! (The plugin is so two months ago.)
IMPROVED
The naming scheme for level symbols.
FIXED
Checkboxes and radios to match production.
FIXED
Normal Play and Auto Skip symbol names to match the icons.

June 2018

Did someone say three new components? The lookup multi-select is finally here! And gracious enough to share the spotlight with action list and tooltip. A new icon label was added to complement icon-dense interfaces, and new props were published for a few components (thanks to a number of helping hands). We even fixed some things to make Uniform look better in IE11—because why not? The full rundown is below.

filetypeother

Docs

ADDED
Action list guidelines for interfaces without much room.
ADDED
Everything for lookup multi-select.
ADDED
Tooltip details to help you help the user.
ADDED
Back to Top links on all pages.
IMPROVED
iOS and macOS guidelines, now combined under the Apple tab.

Components

ADDED
A shiny new action list component.
ADDED
The long-awaited lookup multi-select. (Huge hat tip to Paul, Derek and Nick.)
ADDED
A super useful tooltip.
ADDED
The label and labelPosition props for icons.
ADDED
A parentSelector prop for modals:
ADDED
New props to further customize the lookup select:
  • customOption
  • onSearchChange
  • preserveSelectionOnBackspace (Thanks, Paul!)
ADDED
The minHeight prop for text area. (Thanks, Derek!)
FIXED
An issue where a console error would appear when the toast’s onDismiss prop was undefined. (Thanks, Kim!)
ADDED
Styling for the action list.
ADDED
Styling for the lookup multi-select.
ADDED
Styling for tooltips.
FIXED
A vertical alignment issue caused by flex for buttons in IE11.
FIXED
A background color mishap with unselected checkboxes/radios in dark environments. (Thanks, Craig!)

Sketch Library

ADDED
Our new action list component.
ADDED
The pills for the new multi-select.
ADDED
The tooltip, obviously.
ADDED
Icon labels, as well.
FIXED
A corner-radius issue on the Restricted icon that appeared when resizing to something smaller.

May 2018

This release features a few additions and a lot of improvements. The new action bar component is ready to rock, as are icons built with V3 in mind. Our new preview image and accompanying text make sharing Uniform a lot prettier, and the esc key has found its purpose in life. Read on to learn more.

filetypeother

Docs

ADDED
Action bar guidelines for multi-select situations.
ADDED
Preview text and image for Slack, Twitter and Facebook unfurling.

Components

ADDED
Lots of props!
  • color for the text and icon components
  • showBrowserTooltip for icons
  • collapsePadding for buttons
  • the super literal contentOverflowVisible for modals
ADDED
Our new action bar component.
ADDED
V3 icons to the mix:
  • Clip
  • Keyboard Shortcuts
  • Playlist
  • Playlist Add
  • Reorder
  • Restricted
IMPROVED
The highlight icon.
IMPROVED
Single select and lookup select animations, PLUS standardized defaultValue and value for both. (Thanks, Amanda!)
IMPROVED
Modal markup for new styling to better handle overflow content.
IMPROVED
Input sizing for consistency.
IMPROVED
Spacing between form elements like labels and helper text.
IMPROVED
Animations and styling for radios and checks.
FIXED
The dismiss on single select and lookup select to display only when text is present.
FIXED
The esc key to actually dismiss a modal (like our docs said it would).
FIXED
Keyboard shortcuts for single select and lookup select:
  • Up and down arrows now navigate a focused field.
  • Esc closes whatever’s expanded.
ADDED
Utility classes to remove padding from minimal buttons.
ADDED
A class to the modal to allow for content overflow.
ADDED
Styling for the action bar.
IMPROVED
Various form styling like sizing, spacing and animations.
IMPROVED
Overflow mask and content padding for the modal.
FIXED
Weird unclickable space to the right of the arrow on single select and lookup select, plus the focus state for each.
FIXED
Flex shrinking for the modal footer, as well as unnecessary overlay in the bottom mask.

React Native

ADDED
Those same V3 icons:
  • Clip
  • Keyboard Shortcuts
  • Playlist
  • Playlist Add
  • Reorder
  • Restricted
IMPROVED
The highlight icon.

Sketch Library

ADDED
Text styles to use with the Library Styles Sync plugin.
ADDED
That new action bar component.
ADDED
Did we mention the V3 icons?
  • Clip
  • Keyboard Shortcuts
  • Playlist
  • Playlist Add
  • Reorder
  • Restricted
IMPROVED
The highlight icon, of course.
IMPROVED
Form components to match what’s implemented in real life.

April 2018

Until every right thing is easy, we’re going to keep pushing the bits—that includes additional writing guidelines. Check below for much needed updates to our button and select components, prettier inputs, macOS love and all kinds of Sketch cleanup.

filetypeother

Docs

ADDED
Mobile notification dos and don’ts to save everyone from information overload.
ADDED
Transactional email tips worthy of any inbox.
IMPROVED
Animation and site performance.

Components

ADDED
Translation props for cancelText on modal and noMatchingResultsText in lookup select.
IMPROVED
Button status with feedback icons and a new loading spinner.
FIXED
Disabled and error states for single select and lookup select. Thanks, Rees and Amanda!
IMPROVED
Input style in a number of ways. Most notably:
  • A tightened border radius
  • Level 0 background color
  • Updated label and help text spacing for both standard and compact densities
FIXED
Checked state for focused checkboxes and radios.

macOS

ADDED
Color variables.
ADDED

Sketch Library

ADDED
Desktop, tablet and phone web navigation symbols.
IMPROVED
Button status to display feedback icons and a new spinner.
IMPROVED
Spacing and color for inputs.
FIXED
Help text to display all text.
REMOVED
The block button variant.
REMOVED
All outline icons.

March 2018

We did a few (read: so many) things to prepare for launch. Components 3.0 and CSS 1.0 are live. This means a lot of deprecations—be sure to check our notes for necessary updates. Major components got some international love. Icon and color names are normalized, and we killed outline icons (so stick with the solids). Sketch has also been updated with new angle icons, normal play and auto skip. Seems lengthy, but we promise it’s worth reading.

ADDED
New icons for angles, normal play and auto skip.
IMPROVED
Included refs for buttons, inputs and text area.
IMPROVED
Included defaultValue prop to single select and lookup select.
REMOVED
Replaced old input components with a new input component––just pass in a type prop and you’re set.
  • InputDate
  • InputEmail
  • InputFile
  • InputNumber
  • InputPassword
  • InputTel
  • InputText
  • InputTime
  • InputURL
REMOVED
The old select has been replaced with the single select.
REMOVED
defaultValuesChecked prop from checkbox group and checkbox group parent, and replaced it with the valuesChecked prop.
REMOVED
The theme prop from the form modifier component. Use environment and levels in its place.
REMOVED
Props from the toast component:
  • autoHideDuration
  • default
  • error
  • identifier
  • loading
  • title
REMOVED
The isBlock prop for buttons.
REMOVED
All outline icons. Use the filled components in their place.
FIXED
The focus states on various components.
REMOVED
Quite a few variables were removed and mapped to replacement values. Most notably:
  • the uni-btn--disabled and uni-btn--block classes
  • any unofficial button variants
  • legacy minimal buttons and legacy destroy button
  • legacy text, headlines, spacers, padding and theming
IMPROVED
Updated token assets and icons. Icon names were also updated to a new naming scheme with logical separators.
REMOVED
All outline icon variants have been removed. Use the filled versions in their place.
IMPROVED
Updated token assets with naming schemes to make icons and colors easier to read and match.
REMOVED
All outline icon variants have been removed. Use the filled versions in their place.
ADDED
Icon components are now on React Native.
IMPROVED
Updated token assets to normalize how we handle colors across platforms.

Sketch Library

ADDED
Eight new icons. Just open Sketch and sync the updates.
  • Angle 1
  • Angle 2
  • Angle 3
  • Angle 4
  • Angle 5
  • Angle 6
  • Auto skip
  • Normal play