DA SDK UI Components

DA provides a way to add Adobe-like styles to your applications and plugins. Due to their minimal footprint, speedy performance characteristics, and simple API, we call these components, "Super Lite".

Note: These components are considered experimental and come with no warranty. Use at your own discretion.

Available components

  1. sl-input - Used for text, number, date, and range inputs.
  2. sl-select - Used for drop downs.
  3. sl-button - Used for buttons.
  4. sl-dialog - Used for dialogs / modals.

API

Super Lite's API is designed to be a drop-in replacement for any existing element.

Before

<input type="text" name="firstName" placeholder="Enter first name"/>

After

<sl-input type="text" name="firstName" placeholder="Enter first name"></sl-input>

Notice that there are zero changes to the attributes. To sl-ify your element, you simply:

  1. Add sl- to the name of the element.
  2. Add a closing tag.

How to use

  • html (markup)
<!DOCTYPE html>
<html>
  <head>
    <title>DA App SDK Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>body { display: none; }</style>
    <script src="https://da.live/nx/public/sl/components.js" type="module"></script>
    <link rel="icon" href="data:,">
  </head>
  <body>
    <form>
      <sl-input type="text" name="firstName" placeholder="Enter first name"></sl-input>
      <sl-select name="hello">
        <option>Hello World</option>
        <option>Goodnight Moon</option>
      </sl-select>
      <sl-button>Submit</sl-button>
    </form>
  </body>
</html>

Notes

  1. There is a display: none set on the body to prevent FOUC. SL will set an sl-loaded class on the body when it is loaded.
  2. https://da.live/nx/public/sl/components.js is evergreen and will load all necessary CSS automatically.
  3. While SL will give you great styling and accessibility for your elements, you are responsible for the layout of your application.
  4. This example uses pure HTML, but you can also load SL in javascript or in your web components.

Development guiding principles

  1. SL should be a drop in replacement for the existing element. I.E. developers should not have to learn any new APIs unless absolutely necessary.
  2. SL will use Spectrum 2 as the baseline UX reference, but will not do anything egregiously complicated to achieve a specific style.
  3. Anything custom (like label on inputs and selects) should be a convenience and not a requirement.
  4. CSS variable bloat should be kept to an absolute minimum. If we have variables on top of variables, we blew it.