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.
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 preventHorizontalGrowth
in 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
: #1d2121text-dark
: #282e2etext-color
: #4b5353text-light
: #607b7btext-lighter
: #abbdbdtext-lightest
: #bec6c6text-off-white
: #f9fafctext-off-white-dark
: #f3f6f6text-off-white-darker
: #e6e8ectext-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 indicatedtimeout
.
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:
- Import the dark theme CSS file in the outermost component:
import 'emerald-ui/lib/dark-theme.css'
. - Add the
eui-dark-theme
class to thebody
or outermost wrapper component.
With these two steps you will have implemented the dark theme:
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.