Emerald-UI Version 1.4.0

Published in

Condor Labs Engineering

5 min readMar 10, 2020

This release focuses mainly on accessibility features all across the components.

Accessibility improvements

We followed the recommendations of react-axe and eslint-plugin-jsx-a11y to identify even more accessibility flaws and improved them all. The improvements were mainly aria and role related.

FileUpload :: Return file in callbacks

The FileUpload component was created to manage the uploading process of the File objects so developers don’t have to manage them. But there are certain cases where they need to get the actual files, not just the ID. For this reason we give the files in three callbacks:

onUploadStart(files) : files is an array with all the files that were dropped in the FileDropzone, which used to be a regular JavaScrip object with some file properties and an id. Now you can find inside the objects a new property called file which contains the actual File object.
onUploadSuccess(result, id, file) : We added a third argument to the callback called file . This is the actual File object that was successfully uploaded.
onUploadError(result, id, file) : We added a third argument to the callback called file . This is the actual File object that provoked an error when being uploaded.

DropdownItem :: Tooltip support

When you need to indicate why a DropdownItem is disabled, or just to put a tooltip to it you can do that via the tooltip prop.

Select family :: Tooltip support

If you want to add a tooltip to a SingleSelect, SearchableSelect or MultipleSelect option you can pass the tooltip prop to the appropriate option. You can pass a string to the options to show it in the form of a tooltip even if they are disabled. This is useful, for instance, if you wanna say why the specific option is disabled.

DatePicker :: Clearable

You can now set the input in the DatePicker to be clearable, passing the prop clearable. You just need to click on the X to clear its contents.

Select family :: Clearable

You can now clear the selection of the SingleSelect and SearchableSelect by passing the prop clearable. You can also pass it onClear as a callback for when the field is cleared.

Select family :: Support for props in options

You can now pass custom props to the option elements both alone or when inside an optgroup element.

Select family :: Close menu when clicking outside the component

A bug that prevented a Select menu to close when clicking on another Select was fixed. Now when you click anywhere on the page, including another Select, the menu will close.

Modal :: Right and left drawer

You can get the left drawer style by passing the leftDrawer prop and the right drawer style by passing the rightDrawer prop:

Layout :: New components

We’re introducing three new components that are part of the new Emerald-UI Grid or Layout system, which is based on the concepts of Bootstrap’s grid system:

Container

The container sets the horizontal boundaries for your content. It limits the width of your content and centers it in the page, leaving white space at either side in certain screen sizes.

Row

A Row is used to divide content or sections, vertically, inside a Container.

Col

A Col divides content horizontally inside a Row.

For a better understanding of the concept of Grid and Layout, take a look at the following:

The orange section represents the Container, the green section represents the Row and the red section represents the Col

Just like Bootstrap’s, Emerald-UI’s grid is a 12-column based grid. This means that the maximum of units for a column is 12. A quick formula for calculating the unit of the column is:

12 / NC

Where NC is the number of columns you need in a certain Row. For instance, let’s say you need 4 columns, 12 / 4 = 3 , so you need 3-unit columns.

The following image helps you understand this better with several examples of column widths:

The previous image contains a Container with 3 Rows:

The first Row has 3 columns with no width specified, so they stretch to occupy the available space.
In the second Row we have three columns where only the middle one has a width specified.
In the third Row we have 6 columns, each with a specific width. As you can see, they wrap when they don’t find horizontal space in the same line.

You can also specify the Col width for each screen size by passing the respective prop (xs, sm, md, lg) and the number of units (1 to 12).

Documentation :: Dark mode

The Documentation site now has a dark mode, which you can activate by pressing the Dark Mode button, located at the top right of the page:

Two of the benefits of Dark mode are that it helps prevent eye strain when looking at the screen with low ambient light and it helps reduce energy consumption in mobile devices.

Here are a few screenshots of the regular (light mode) and their respective dark mode version:

The Welcome page:

Component page:

The documentation site will remember your mode preference (light or dark) after you close the page.

Simple components were changed from Class components to Functional components

The following components were transformed into functional components, which renders them lighter after transpiling them:

Alert
AppCard
Avatar
Card
CardGrid
Chip
Col
Container
DropdownButton
ExpansionTableRow
FileDropzone
FileUploadItem
FileUploadList
FloatingActionMenuItem
Icon
IconDropdown
Label
PageHeader
Pager
Radio
RedIndicator
Row
SkeletonLoader
Spinner
Steps
Tab
Table
TableHeader
TableHeaderCell
TableRow
Toolbar
ToolbarView

Components with state were changed from Class components to Functional components

The following components were transformed from Class to functional components using React Hooks, which renders them lighter after transpiling:

Checkbox
DropdownItem
FileUpload
PasswordStrengthMeter
SearchForm
ShowMore
TabContainer

Radio and Checkbox :: Improve focused style

The outline for when these components are focused has been improved when they don’t have a label.