Element 2.0 is here

Yi Yang
Yi Yang
Oct 30, 2017 · 4 min read
Image for post
Image for post

Element 2.0 was released last Friday, and together the website has been updated to show the 2.0 documentations by default (and, of course, you can still select the 1.x docs from the dropdown menu).

Element 2.0 has 210 commits, including more than 90 new functions and optimizations. They can be roughly categorized as follows:

Component functions

Image for post
Image for post
Table now supports rowspan and colspan
  • First of all, we improved usability. Here’s some examples: in 1.x, if you need to change the default size of components, you’ll have to add the size attribute on each component. Now you can configure the default size for all components with just one line of code. Another example is that the new theme is written in SCSS, so SCSS users can easily modify style variables to get a custom theme. At the same time, we also added some methods for components, so that you can programmatically trigger some behavior of the components. For example we added open and close methods for Menu to open and close SubMenus, and now Table has a toggleRowExpansion method that is used to expand or collapse expandable rows

Please refer to the changelog for details.

New theme

Image for post
Image for post
DatePicker in theme-chalk

Element 2.0 has a new theme: theme-chalk. What is the design principle of this theme? Let's hear what our designer Nico Hsueh has to say:

In line with current design trends, the redesigned Element 2.0 adapts to the current aesthetic. To abandon redundant design modification, we adhere to the “less is more” design principle. For example, with more and more high-res screens, we make Element “bigger” than 1.x, so the reading experience will be more friendly. At the same time, besides the default component size, we also provide a variety of sizes to accommodate different needs.

In addition, keeping the consistency of components is also a principle when we design 2.0. For example, we first defined the four heights of Button (40 px, 36 px, 32 px, 28 px); after that, Input, Select and other components are then maintained with the exact same heights. This enables the design output based on Element 2.0 to ensure a high degree of unity.

In general, 2.0 is more modern and friendly than 1.x.

Accessibility

Image for post
Image for post
VoiceOver works with Radio on macOS

We also improved accessibility of components in version 2.0. The following is from @maranran, who is responsible for this work:

Accessibility means that the components, behaviors, and DOM structures on the page are semantically correct, so that AT devices can convey page information to people with disabilities, including the blind, physical disability, and cognitive disability.

As a UI library of basic components, Element encapsulates the underlying DOM structure. In the 2.0 version, we have done some basic work in accessibility to help people with disabilities to understand the page and interact with it. At the same time, we have made it easier for developers to keep improving accessibility in their projects.

What we have done includes two parts: increasing operability of keyboard, and improving semantics of the components. Keyboard operability allows people with disabilities to navigate to each component using keyboard and interact with them using left, right, up, down, enter, esc, etc. When it comes to semantics, we used the WAI-ARIA technology to add roles, states, properties for different components, so that UA and AT can correctly convey the semantics of components.

Documentation

Image for post
Image for post
Search in the docs

The 2.0 website and documentations have also been upgraded, and hopefully you will find them easier to use.

The main contributors of Element 2.0 are (in alphabetical order) : @baiyaaaaa @Dreamacro @Leopoldthecoder @liril-net @maranran @wacky6 @waynecz. In addition, there are many community users who have made suggestions for 2.0, and we are grateful to them.

The release of version 2.0 marks a new era for Element, and it also means that the 1.x version goes into maintenance mode. We will continue to support it until December 01, 2017.

We hope you enjoy Element 2.0.

ELEME Frontend Engineering

official frontend engineering blog of ele.me

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store