Skip to content

Commit

Permalink
Merge pull request #92 from vaadin/fix/rename-styling-demos
Browse files Browse the repository at this point in the history
Rename Lumo Theme demo to Theme Variants
  • Loading branch information
limonte committed Jun 18, 2018
2 parents 7ebf6ab + 5a99184 commit 548570f
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<dom-module id="button-lumo-theme-demos">
<dom-module id="button-theme-variants-demos">
<template>
<style include="vaadin-component-demo-shared-styles">
:host {
Expand All @@ -9,7 +9,7 @@
<h3>Types</h3>
<p>Use the different types to prioritize the actions presented to the end user. Usually, you should only have one primary button in a view. Use tertiary buttons to decrease the priority of an action.</p>
<p>The <code>"tertiary-inline"</code> type is useful when you want to add a <vaadin-button theme="tertiary-inline">button</vaadin-button> as part of regular text content.</p>
<vaadin-demo-snippet id='button-styling-demos-types'>
<vaadin-demo-snippet id='button-theme-variants-demos-types'>
<template preserve-content>
<vaadin-button theme="primary">Primary</vaadin-button>
<vaadin-button>Secondary</vaadin-button>
Expand All @@ -20,7 +20,7 @@ <h3>Types</h3>

<h3>Colors</h3>
<p>Use <code>"contrast"</code> if you need increased legibility or a more subdued look. Use <code>"success"</code> for actions that complete a longer sequence of steps, like a checkout flow. Use <code>"error"</code> for actions that can cause permanent data-loss, like deleting content created by the user.</p>
<vaadin-demo-snippet id='button-stylings-demos-colors'>
<vaadin-demo-snippet id='button-theme-variants-demos-colors'>
<template preserve-content>
<h4>Contrast</h4>

Expand All @@ -44,7 +44,7 @@ <h4>Error</h4>

<h3>Sizes</h3>
<p>You can combine the sizes with any other theme variation.</p>
<vaadin-demo-snippet id='button-stylings-demos-sizes'>
<vaadin-demo-snippet id='button-theme-variants-demos-sizes'>
<template preserve-content>
<vaadin-button theme="large">Large</vaadin-button>
<vaadin-button>Normal</vaadin-button>
Expand All @@ -54,7 +54,7 @@ <h3>Sizes</h3>

<h3>Icon Buttons</h3>
<p>Icon-only buttons should use the <code>"icon"</code> variation which reduces the width of the button.</p>
<vaadin-demo-snippet id='button-styling-demos-icons'>
<vaadin-demo-snippet id='button-theme-variants-demos-icons'>
<template preserve-content>
<!-- Icon in place of label -->
<vaadin-button theme="icon" aria-label="Add new item">
Expand All @@ -71,11 +71,11 @@ <h3>Icon Buttons</h3>

</template>
<script>
class ButtonLumoThemeDemos extends DemoReadyEventEmitter(ButtonDemo(Polymer.Element)) {
class ButtonThemeVariantsDemos extends DemoReadyEventEmitter(ButtonDemo(Polymer.Element)) {
static get is() {
return 'button-lumo-theme-demos';
return 'button-theme-variants-demos';
}
}
customElements.define(ButtonLumoThemeDemos.is, ButtonLumoThemeDemos);
customElements.define(ButtonThemeVariantsDemos.is, ButtonThemeVariantsDemos);
</script>
</dom-module>
8 changes: 4 additions & 4 deletions demo/demos.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
}
,
{
"name": "Lumo Theme",
"url": "button-lumo-theme-demos",
"src": "button-lumo-theme-demos.html",
"name": "Theme Variants",
"url": "button-theme-variants-demos",
"src": "button-theme-variants-demos.html",
"meta": {
"title": "Vaadin Button Lumo Theme",
"title": "Vaadin Button Theme Variants",
"description": "",
"image": ""
}
Expand Down

0 comments on commit 548570f

Please sign in to comment.