jonnii / ember-cli-lightning-design-system Goto Github PK

View Code? Open in Web Editor NEW

5.0 3.0 3.0 6.02 MB

Ember add-on for the lightning design system

License: MIT License

JavaScript 46.37% HTML 53.56% CSS 0.07%

ember ember-addon ember-cli lightning-design-system

ember-cli-lightning-design-system's Introduction

ember-cli-lightning-design-system's People

Contributors

Stargazers

Watchers

Forkers

dougdellolio thingylab lunarmoon26

ember-cli-lightning-design-system's Issues

Checkbox Toggle

Global header

App launcher

Checkbox Label

When using checkboxes, we get a hardcoded label Checkbox Label, there's no option of setting a label for the checkbox or radio button at the moment.

Media with figure and text shortcut

So verbose =(

Card body with table

slds-card__body should be elided for tables

Right aligned icons for navigation bar

Simple tables

navigation bar home link

Box Theme

Radio button groups

Box with texture

navigation bar onclick callbacks

Tabs

app.scss should be optional

Otherwise engines break

Badge types

Media icon needs more icon options

      {{#card.header}}
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
          <div class="slds-media__figure">
            {{slds-icon sprite='utility' icon=section.icon color=section.color size='small'}}
          </div>
          <div class="slds-media__body">
            <h2 class="slds-text-heading_small">
              Hello section!
            </h2>
          </div>
        </header>
      {{/card.header}}

Illustrations

Canned etc...

Page header

<div class="slds-page-header">
  <p class="slds-text-title--caps slds-line-height--reset">Do Thing</p>
</div>

vertical navigation with linkto

Breadcrumb

Descriptive progress bars

    <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small">
      <span>Progress</span>
      <span aria-hidden="true">
        <strong>{{overallCompletedPercentage}}% Complete</strong>
      </span>
    </div>
    {{slds-progress-bar
      value=overallCompletedPercentage
      isSuccess=isCompleted}}

Button Icon

With brand and other colors.