Commit 52e1215d authored by Dominique Feyer's avatar Dominique Feyer
Browse files

TASK: Add icon slot in button to allow icon position and margin

parent d30d5273

src/components/button/button.tsx

+1 −1
Original line number Diff line number Diff line
@@ -21,7 +21,7 @@ export class Button { 


  render() {

    return (<button class={this.className()} disabled={this.disabled} type={this.type}>

      <slot/>

      <slot name="icon" /> <slot/>

    </button>);

  }

}

src/components/button/styles/button.dark.scss

+5 −1
Original line number Diff line number Diff line
@@ -7,6 +7,11 @@ 
  font-weight: 400;

  font-size: $font-size-dark-base;

  line-height: 1.1;

}



::slotted(neos-icon) {

  margin-right: $content-margin-small;

}



button {

  background-color: neos-color($colors-dark, 'neutral');
@@ -79,4 +84,3 @@ 
    opacity: .65;

  }

}
 
}

src/index.html

+10 −5
Original line number Diff line number Diff line
@@ -93,19 +93,24 @@ 
      <h2>with icon</h2>

    </header>

    <neos-button>

      <neos-icon name="folder"></neos-icon> Confirm

      <neos-icon name="folder" slot="icon"></neos-icon>

      Confirm

    </neos-button>

    <neos-button theme="clean">

      <neos-icon name="check-circle"></neos-icon> Publish

      <neos-icon name="check-circle" slot="icon"></neos-icon>

      Publish

    </neos-button>

    <neos-button theme="brand">

      <neos-icon name="calendar"></neos-icon> Did you love Neos?

      <neos-icon name="heart" slot="icon"></neos-icon>

      Did you love Neos?

    </neos-button>

    <neos-button theme="warn">

      <neos-icon name="folder"></neos-icon> Delete

      <neos-icon name="folder" slot="icon"></neos-icon>

      Delete

    </neos-button>

    <neos-button theme="warn" disabled>

      <neos-icon name="frown"></neos-icon> Delete

      <neos-icon name="frown" slot="icon"></neos-icon>

      Delete

    </neos-button>

  </section>

  <section>