Skip to content

0.18.0
Compare
Choose a tag to compare
@EisenbergEffect EisenbergEffect released this 25 Feb 05:20
· 336 commits to master since this release
v0.18.0
f4f86c1

Core

New properties available in ux.design :

  • surfaceBackground : set here main surface background/foreground, esp. for cards
  • surfaceForeground
  • controlLabelColor : set here the default label color for all controls
  • disabledBackground : set here the default background/foreground for all disabled states
  • disabledForeground
  • error : set here the default error color
  • onError : this one is available for when you need to write text on top of a surface using the error color. It is currently not used in Aurelia UX components

Input Controls

Components that act as an input control are now more consistent and can be themed like Material Design components. Here are some cool stuff available:

Themable properties (same for all input-like components)

  • foreground
  • foregroundLabel
  • background
  • backgroundHover
  • activeColor
  • fontSize
  • letterSpacing
  • labelFontSize
  • labelLetterSpacing
  • lineHeight
  • labelLineHeight
  • borderColor
  • borderRadius
  • borderWidth
  • borderActiveWidth
  • disabledForeground
  • disabledBackground
  • error

Filled, Outline, Dense

  • change the style of the input with filled or outline variants (exemple <ux-input variant="outline"></ux-input>
  • Reduce the visual impact of the input with dense: (exemple <ux-input dense></ux-input>

Floating Labels or Placeholder

  • Floating labels are the default way, but you can choose:
  • Use the label bindable for floating labels
  • Use the placeholder bindable for labels that disappear when field has a value
  • Use the <ux-field><label>...</label><ux-input>...</ux-input></ux-field> markup for labels that stay on top of the field all the time

Leading and Trailing Icons

  • All input controls host leading and trailing icons slots. The trailing icon is deactivated for ux-select and ux-datepicker due to the arrow and calendar icons present in the control by default
  • Exemple: <ux-input><ux-icon icon="person" slot="leading-icon"></ux-input>

Affected components:

  • ux-input
  • ux-textarea
  • ux-select
  • ux-datepicker
  • ux-chip-input

Button

  • Removed some theme properties: flatBackground, flatForeground, textBackground, textForeground, outlineBackground and outlineBorder. Each of this colors now derived from background and foreground or accentBackground and accentForeground
  • Renamed backgroundDisabled and foregroundDisabled in disabledBackground and disabledForeground

Card

New ux-card-separator component.

  • This component makes it easy to add separator in cards (see Material Design guidelines)
  • By default it adds a vertical margin (up and down) of the separator. You can disable this margin with no-margin attribute.
  • You can include the separator between cards parts (header and content for exemple) or inside the content. It will adjust its width accordingly

Defaults to surface colors

  • Cards default color properties are now defaulted with the new surfaceBackground and surfaceForeground design properties.

New .ux-card__thumnail class

Checkbox and Radio

  • Removed disableBorder theme property
  • Replaces checkedBackground and checkmarkColor by activeColor
  • Add the indeterminate state

Chip-Input

  • New ux-chip-list component
  • ux-chip-input theme supports now all the new control theme properties
  • ux-chip now have a selected state (bindable)
  • ux-chip also supports variants such as filled or outline
  • ux-chip now have a thumbnail slot for icon or avatar purposes

Slider

  • Add new trackHeight theme property
  • Mobile-friendly: now works with touch gestures

New Custom Attributes

The new ux-choice-container and ux-choice-item can be used to make any markup act as a selector component. It works works particularly well with ux-list or ux-chip-list but you can use them anywhere. Here are two exemples:

<!-- bind a property to the ux-choice-container attribute to get the value of the choice -->
<!-- bind a property to the ux-choice attribute to give it its choice value -->
<ux-chip-list ux-choice-container.bind="labelPosition">
  <ux-chip variant="outline" ux-choice="floating">Floating</ux-chip>
  <ux-chip variant="outline" ux-choice="placeholder">Placeholder</ux-chip>
  <ux-chip variant="outline" ux-choice="top">On Top</ux-chip>
</ux-chip-list>
<!-- If the binded property in ux-choice-container is an array, then the selector will allow multiple choices -->
<ux-chip-list type="inline" ux-choice-container.bind="region">
  <ux-chip variant.bind="variant" ux-choice="basel">Basel</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="bern">Bern</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="geneva">Geneva</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="lausanne">Lausanne</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="zurich">Zürich</ux-chip>
</ux-chip-list>

Icons

This version do not automatically import any icons by default. From now on, you must decide on a per-project basis what icon sets you want to use.

Here are a few exemples on how you can prepare your icon sets:

1. Import full set when configuring the plugin

As a quick start, you can import the same icon sets that was previously shipped with the package by configuring the plugin as such in your main.ts

// main.ts

/* Add this line to import the full set into an `icons` variable */
import icons from '@aurelia-ux/icons/sets/full-array.min.json';

/* When you initilize the plugin, you can pass on this `icons` variable */
aurelia.use.plugin(PLATFORM.moduleName('@aurelia-ux/icons'), {icons: icons})

/* That's it ! */

2. Lazy loading later

// app.ts

import { inject } from 'aurelia-framework';
import { UxIconMap } from '@aurelia-ux/icons';
// here we import the full set from @aurelia-ux/icon but you can define any
// icon set in the proper format (see below)
import icons from '@aurelia-ux/icons/sets/full-array.min.json';

@inject(UxIconMap)
export class App {
  constructor(private iconMap: UxIconMap) {
    iconMap.registerIcons(icons);
  }
}

3. Import Font Awesome Icons

If you want to use Font Awesome icons, you can use them inside the <ux-icon> component. First you need to install the icons like:

npm install @fortawesome/fontawesome-free

Then you can import them like so:

// app.ts

import { inject } from 'aurelia-framework';
import { UxIconMap, UxIconRegArray } from '@aurelia-ux/icons';

// You can import any font awesome set like so.
// They will all become available in the ux-icon component
import '@fortawesome/fontawesome-free/js/brands';
import '@fortawesome/fontawesome-free/js/regular';

const w = (window as any);

@inject(UxIconMap)
export class App {
  constructor(private uxIconMap: UxIconMap) {
    if (w.___FONT_AWESOME___ && w.___FONT_AWESOME___.styles) {
      type FabIcon = [number, number, Array<any>, string, string];
      for (let fKey in (window as any).___FONT_AWESOME___.styles) {
        let fIcons: {[key: string]: FabIcon} = (window as any).___FONT_AWESOME___.styles[fKey];
        let fSet: Array<UxIconRegArray> = [];
        for (let iconKey in fIcons) {
          const icon = fIcons[iconKey];
          fSet.push([iconKey, `<path d="${icon[4]}"/></svg>`, icon[0], icon[1]]);
        }
        this.uxIconMap.registerIcons(fSet);
      }
    }
  }
}

Registered icon list

You can get the list of all registered icons by calling iconMap.getAllKeys() which will return a Array<string> with all icon names. Knowing this you could add the following code to your template to have a preview of all your registered icons with their names:

<ux-grid>
  <ux-card sm="2" repeat.for="name of uxIconMap.getAllKeys()">
    <ux-icon icon="${name}"></ux-icon>
    <br >${name}
  </ux-card>
</ux-grid>

Icon Set Format

You can register icons in an object or array form. The array form is slightly lighter.

// array form
[
  [
    "person", // icon name
    "<path d=\"M12 ...\"></path>", // svg path (without the svg tag)
    24, // optional (viewport width, default to 24)
    24 // optional (viewport height, default to 24)
  ],
  [
    "other-icon-name",
    "<path>...</path">
  ],
  ...
]
// object form
[
  {
    "name": "person", // icon name
    "svg": "<svg viewBox=\"0 0 24 24\"><path d=\"M12 ...\"></path></svg>" // svg path (with the svg tag)
  },
]

Importing JSON

Note for typescript users: make sure that your tsconfig.json is set to allow importing JSON files. This can be achieved by settings "resolveJsonModule": true in the compilerOptions section.

Assets 2
Loading