Introducing the new UI component, Sandstone

The Moonstone library provides a toolbox of UI components that have been specially designed and optimized for use in smart TVs. Moonstone has been the main theme for webOS TV since 2014.

Moonstone UI

webOS TV applied a whole new UX/GUI for the 2021 product. For supporting Enact app developers with this new UX/GUI, Enact team created the new UI component called Sandstone and we are now ready to share.

Sandstone UI

Sandstone supports 50+ UI components and also includes:

• New components (FixedPopupPanels, TabLayout, WizardPanels, etc.)
• 5-way key navigation (Spotlight)
• Internationalization(i18n) support
• Accessibility(a11y) support
• Performant VirtualList and VirtualGridList
• Integrated linting and unit testing

New components

These are some of the newly created Sandstone components. You can see the samples from the Enact storybook.

FixedPopupPanels

This component is a pop-up used when the options menu on the right side of the screen is selected to view sub-menus or change detailed settings.

TabLayout

This component is a layout that users can navigate between tabs and their sub-contents on the same screen. The tabs can be positioned either horizontal or vertical. In `vertical` orientation, the content area will expand when it’s focused.

PopupTabLayout

It is a tabbed layout component in a floating Popup.

WizardPanels

It provides a series of screens that users can step through. This component is suitable for scenes where separate steps are needed to proceed.

Install & Usage

Installing and usage of Sandstone is just the same as Moonstone.

npm install --save @enact/sandstone 

sandstone/ThemeDecorator will make your app Sandstone look&feel.

import kind from '@enact/core/kind';
import Button from '@enact/sandstone/Button';
import ThemeDecorator from '@enact/sandstone/ThemeDecorator';

const MyApp = kind({
	name: 'MyApp',
	render: () => (<Button>Hello, Enact!</Button>)
});

const MySandstoneApp = ThemeDecorator(MyApp);

export default MySandstoneApp;

Note: The sandstone decorator must be applied to the base component. This decorator also applies @enact/i18n/I18nDecorator, @enact/spotlight, and @enact/ui/resolution decorators.

Create Sandstone App

The Enact framework provides templates that can be installed using the Enact CLI. Install the Enact CLI globally from NPM

npm install -g @enact/cli

As we changed the default app template to Sandstone, you can simply create a new Sandstone App:

enact create MyApp

How about Moonstone?

Don’t worry if you want to create Moonstone app. We still support Moonstone template for creating Moonstone app. The Enact CLI itself can install template-moonstone via NPM.

enact template install @enact/template-moonstone

Once the template installed, you can specify the moonstone template:

enact create -t moonstone MyApp

Migrating Moonstone Apps to Sandstone

There are a handful of components that might be in use in your Moonstone application that has changed or been removed entirely.

Please refer to the below table for the details.

References

A complete list of Sandstone is available in the sampler and detailed API reference is in the documentation.

If you have any questions about Enact, feel free to ask in our community.