News

Keep up-to-date.

Structural update

• Patterns extracted from Components and added to a new section named Patterns
• "Core Components" renamed to "Components"
• "Satellite Components" renamed to "Satellites"
• Site menu order changed to place together Foundations, Patterns, Componentes and Templates, which receive support from Clay. Satellites and Examples do not have support from the system as they are just inspiration for consumers.

General update

• Page distribution update on Core components to make the documentation a bit more flexible
• Status page updated
• Templates adde for: Seeting Template and Site Builder Template
• Examples added for: Document Preview and Site builder

Cards for navigation and Alerts with action

Today we bring to improvements:

• NEW COMPONENT: Card for navigation that are useful in distributive pages.
• UPDATE Alerts with buttons to differentiate actions from navigation. Navigation is provided by links.
• UPDATE: Typography > Contetn Alignment

New resources

Big news for the open source community:

1. Emiliano shares his experience "Building a component library with Figma".
2. We shared our Figma library so you can now see we implemented it and play around with it. Please provide us with feedback directly on the library or through git.

You can find both at resources.

Stickers update

Stickers have been updated due to accessibility and internacionalization reasons. Text inside sticker was causing these problems. Font size, weight and color causing accessibility issues in some sticker sizes. Moreover, it was difficult to define what characters to display in languages as chinese or japanese among others.

Sticker will be always image/icon based to avoid these problems.

Cards have been updated as a collateral effect.

Form validation

Form validation has been updated to reflect where alerts must appear on general form validation.

New components

We have new components to share with you:

• Color picker
• Date and Time picker

You will find them out soon in our Figma Library and in Clay.

General update

• Drag and drop pattern definition where you can find the styles and examples.
• Resources: DEVCON 2018 presentation link and links to blog posts made by Lexicon Team.

General update

Examples:

As promised, we are updating the examples section. This time we bring you an example from Liferay Partner Portal submitted by Patrick Pentz.

Dropdown menu:

Dropdown menu definition has been updated to accept icons on the left side of actions.

Tabs:

Tabs have been updated with an example to give context in tab bars.

Management bar update

We are happy to announce that we have a new update for the Management Toolbar. The Toolbar is now able to contextualize actions based on the selection in the dataset. This reduces the number of potential errors by narrowing the actions down to only the ones that are relevant to the selected elements. Moreover, we introduce the results bar when filters are applied and/or search is performed from the Management Toolbar. This provides the user with useful and visible feedback.

Examples

Lexicon can be used to create many different interfaces. Today, we open a new "Examples" section in our site to showcase different Lexicon interface examples created by Liferay UX designers for our products. We hope these series of examples inspire you and give you an idea of the possible interfaces you can create. These examples will grow over time to showcase a wide variety of interfaces built with Lexicon.

New organization

Components are now organized into two key groups: Core and Satellite.

• Core components are the basic components that are widely used by Liferay products.
• Satellite components are the remaining components that are not used that often in many Liferay products. Although these components are not as widely used, they can save you time from reinventing the wheel.

Note: that core components are implemented and supported by Clay, while satellite components are not supported.

We have also created a Templates section that includes the most common templates created with Lexicon components in Liferay products.

Predictive Forecast Chart

Predicitive Forecast Chart has been documented inside the charts section. This chart is very useful for commerce data.

Stable version

We also want to highlight the improvements made since the last release:

• The site has now uses the system font like we do in Lexicon.
• All images have been changed from Source Sans Pro to San Francisco (system font for MacOS)
• A large number of patterns now include attribute sections that describe the pattern's anatomy.
• Examples have been added to many of our patterns, and the descriptions have been updated.

Moreover, now you can find our sketch library under resources section to build your own interfaces using Lexicon.

Beta release

We are glad to announce that we are in beta right now. We will update style changes before leaving beta status.

General Update

This update comes with many small updates that improve communication:

• Charts: base layer interaction and different chart examples
• Forms: reorganized for better understanding
• Animations: pending, but an introduction is there as reference
• Labels: patterns have been labeled to specify if they are implemented by Clay or if they are owned by another team/application.
• Status table: specifies the design and implementation status for each component's page

General Update

This update comes with many small updates that improve communication:

• Dos and Don'ts have been included for the following patterns: badges, labels, table, actions definition, and popover. This helps clarify the proper usage of each pattern.
• Multiple step form now includes an example that demonstrates how to use the pattern.
• Text input localizable has been released.
• Card layout has been added to the Layout section under the Foundation heading.
• Vertical navigation now includes an example of a collapsible menu on mobile.
• Sidebar documentation has been organized into several areas of focus.

Examples

Examples, along with images demonstrating the proper usage, have been added to the table page to clarify the row hover action. Multistep form has also been updated with a layout example in a form to better illustrate how to use it. Finally, checkbox group and radio group examples, along with metrics, have been added.

Sites

A full set of components is available in the sites section for you to use to build your own site widgets. This lets you transform old widgets, by bringing them new life with a better information architecture, structure, and a refreshing design.

Layouts and Form Hierarchy

As part of the improvement in Lexicon, we want to clearly define the different layout possibilities that you'll usually find in admin pages. Layout is one of the foundation principles that is key to building interfaces with our system.

We've add a dedicated page for form hierarchy to better define the form pattern. The Forms section now also includes a slider section.

Charts and Sites

Charts and Sites have been documented at their initial stage.

Charts are a completely new pattern in Lexicon. We want to provide a full set of principles for it to improve accessibility, perception, and interpretation.

Sites tackles widgets for sites. Lexicon faces a huge improvement in this area towards improving not only the visual aspect, but also the usability in some of our ADTs. Many improvements will come in the near future in this area as the next portal release date grows closer.

Updates

Liferay is happy to announce a new alpha version of Lexicon. The alpha version brings a wider range of possibilities, new components, and a brand new color palette. Lexicon now focuses on accessibility, shorter interactions, and ways to achieve a better user experience never before seen in Liferay.

This alpha version will transition to beta as soon as Lexicon and Clay align.