Emerald-UI version 2.0.0

We’re very proud to announce the second major release of Emerald-UI, which comes loaded with accessibility improvements, UI glitches fixes, a completely new global Dark Theme, new styles for form controls and other features and improvements. Keep reading to get to know all the new stuff.

Oh and also, you can now find the:

• Docs in docs.emeraldui.com
• Storybook in storybook.emeraldui.com.

Features

Accessibility

The following changes were done to improve accessibility:

• Several instances of anchors acting like buttons were replaced by real buttons.
• Added aria-label to the Button’s loading state.

Animations in components

New animations where added to components like the Checkbox, the Radio and the FileDropzone to add to them a little delight in their usage..

Alert :: Added icons by default

Some users don’t see colors the way we see them due to color blindness. Some people can’t differentiate between two or more colors so using color alone to convey meaning is not a good practice. That’s why we are adding icons by default to the Alert component, depending on the color, even without specifying the icon.

Breaking change: If you have specified an icon in the children, you need to remove it, since now it will be duplicated. Also, check out the implementations for layout changes.

Button :: Flex centering icon and text

Flex is now being used to center the icons and the text. This way centers them perfectly, unlike adjusting the position of the elements via top and bottom.

Button :: New style for progress

Currently, you can indicate that something is happening by passing the loading prop to the Button, which puts a spinner instead of the Button text. In addition to this you can now pass, along with the loading prop, the progress prop, which is a number between 0 and 100, that indicates a real and measurable progress, not just an indefinite loading state.

A button with `loading` and a `progress` of 52%

IconButton :: New colors

You now use the color prop to change the color of the component. It will also color the hover, focus and active background circle.

ExpansionTableRow :: Added prop to prevent it from growing horizontally

The preventHorizontalGrowth prop has been added to prevent the component from growing horizontally when expanded. This is useful, for instance, in mobile views where the component doesn’t have too much space at either side.

ExpansionTableRowGroup :: Added capability to prevent children from growing

In order to apply the preventHorizontalGrowthin all the children without having to pass it to every one of them, you can pass it in the parent ExpansionTableRowGroup and it will prevent the horizontal growth on all children.

FloatingActionDropdown :: Added support for tooltipsAtRight

You can now pass the prop tooltipsAtRight to make the FloatingActionMenu items have the tooltips at the right of the item itself. This is useful when the component is close to the left edge of the viewport.

OverlayTrigger :: Improved onToggle behavior

Now with the onToggle callback you get the current show state, not the previous one. If you toggle the visibility of the component and the overlay is visible, you get that show equals true. If it’s not visible, it equals false.

Breaking change: You’ll need to invert your logic on when to show or hide the overlay.

ExpansionTableRow :: Unified row identifier

We’re dropping the toggleKey identifier and using eventKey for all callbacks that give you the row identifier (onSelect and onToggle).

Breaking change: Change toggleKey to eventKey in the onToggle callbacks you’re using.

ExpansionPanel :: Unified panel identifier

As with the ExpansionTableRow, we’re dropping the usage of toggleKey to identify the panel in the onToggle callback. We’re using now eventKey.

Made all components responsive

All components were modified to make them responsive so they look well with all screen sizes.

Breaking change: You might have to adjust your styles that make certain components responsive.

DatePicker :: Month selector

By passing the prop showMonthYearPicker and the dateFormat as “MM/yyyy” you can render a picker for year and month only, with no days:

New shape for TextField, DatePicker, SingleSelect, SearchableSelect and MultipleSelect

We revamped the looks of form controls (TextField, SingleSelect, SearchableSelect, MultipleSelect and DatePicker). We dropped the floating label (default) and classic shapes and unify the styles into the one, new, style.

As can be seen in the screenshot, the label for the components is now fixed and on top of the border. This makes the components more easily identifiable as input components and since the label is on top of the border, it makes up for the larger component height.

For the code side, there aren’t shape props anymore for TextField, DatePicker and MultipleSelect, and for SingleSelect and SearchableSelect we now have default and flat shapes.

Breaking change: The new styles for these components will affect the layout of your pages since they have different dimensions than the previous ones. We also defined a set gap between form components (TextField, DatePicker, SingleSelect, SearchableSelect and MultipleSelect) when they are adjacent.

Standardize common elements for Form Controls

Two new components were made: FormControlBorder and FormControlFooter which standardize styles among the Form controls (TextField, DatePicker, SingleSelect, SearchableSelect and MultipleSelect). These components are implemented internally so you don’t need to worry about them. Just know that styles are now homogenous among these components and that less code is written for them.

Carousel :: Automatic sliding

You can add automatic sliding to the Carousel by passing the prop slidingInterval to it which receives the number of milliseconds between each slide transition.

TextField :: textarea element

By passing the textarea prop to the TextField it will now render a textarea. If you also pass the resizable prop, the textarea will be resizable vertically.

Text color classes

In order to standardize text colors and make it easier to change the palette colors in the future, we’re adding classes that you should use for the different versions of text colors. Note that by using these classes, you make sure that the text looks correctly in Dark Mode, with no additional work. The classes are:

Note: The following colors pertain to the light theme. These will help you on the work of replacing hard-coded color values with the classes.

• text-darker: #1d2121
• text-dark: #282e2e
• text-color: #4b5353
• text-light: #607b7b
• text-lighter: #abbdbd
• text-lightest: #bec6c6
• text-off-white: #f9fafc
• text-off-white-dark: #f3f6f6
• text-off-white-darker: #e6e8ec
• text-primary: #0f3166

Animation :: New component

Have you ever feel frustrated when adding a component to the DOM or removing it from it and not being able to easily animate it? The solution you might have found is to simply hide the component using opacity so you can apply a transition to it. With the Animation component you can easily add a transition to any component. You just need to follow these steps:

• Wrap your component with the Animation component.
• Add the Animation component (wrapping your component) to the DOM. For instance, inside a map function that returns the elements or with a condition.
• When it’s time to remove it, pass it the unmount prop as true and it will animate and remove itself from the DOM after the indicated timeout.

New Dark Theme (beta)

In this version we included a new, global and easy to implement dark theme that affects every single component in Emerald-UI. In order to implement the Dark Theme in your project just do the following:

1. Import the dark theme CSS file in the outermost component: import 'emerald-ui/lib/dark-theme.css'.
2. Add the eui-dark-theme class to the body or outermost wrapper component.

With these two steps you will have implemented the dark theme:

Form within a Panel

Navbar and PageHeader

ExpansionPanel with Table

Modal

PasswodrStrengthMeter in context

Bug fixes

Modal :: Fix body’s class bug

The Modal was replacing any className applied to the body with its own class. This version keeps the previously applied classes.

DropdownMenu :: Fix ui-glitch

The DropdownMenu now positions itself so it doesn’t get cut off by the lower border of the viewport.

OverlayTrigger :: Fix bug on trigger’s ref

The OverlayTrigger was depending on the ref of the trigger component itself. When the trigger was a Functional component, it crashed. The OverlayTrigger now defines inside a node with a ref so it doesn’t crash with any component as trigger.

Deprecations

TextField :: Removed large size

We unified the sizes for the TextField so the size prop is no more. The new size is a middle point between sm and lg sizes.

Breaking change: Since the new style is smaller than the old large one, you might need to adjust your layout after this upgrade.

DropdownMenu :: pullRight is deprecated

The prop pullRight has been removed. Use fromRight instead. This prop makes the DropdownMenu appear from the right of the toggle.

MenuItem :: Deprecated

The MenuItem component is deprecated. You should use DropdownItem instead.

Breaking change: The MenuItem component no longer exists so your application will crash if you keep importing it.

PageHeader.Nav :: Deprecated

The PageHeader.Nav component is deprecated. You should use the Nav component instead.

Breaking change: The PageHeader.Nav component no longer exists so your application will crash if you keep importing it.

Select :: Deprecated

The Select component is deprecated. You should use SingleSelect for the default use case, SearchableSelect for the searchable use case and MultipleSelect for the multiple use case.

ProgressBar :: now prop deprecated

The prop now (which is used to indicated the current progress status) no longer exists. Use progress instead.