Skip to content

Commit

Permalink
refactor(ui5-button): rename type property to design (#504)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: type property is changed to design
  • Loading branch information
@fifoosid
fifoosid authored Jun 19, 2019
1 parent 0040e85 commit a62b471
Show file tree
Hide file tree
Showing 14 changed files with 95 additions and 95 deletions.
14 changes: 7 additions & 7 deletions packages/main/src/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvent
import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
import ButtonType from "./types/ButtonType.js";
import ButtonDesign from "./types/ButtonDesign.js";
import ButtonTemplate from "./build/compiled/ButtonTemplate.lit.js";
import Icon from "./Icon.js";

Expand All @@ -20,18 +20,18 @@ const metadata = {
properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {

/**
* Defines the <code>ui5-button</code> type.
* Defines the <code>ui5-button</code> design.
* </br></br>
* <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
* "Negative", and "Transparent".
*
* @type {ButtonType}
* @type {ButtonDesign}
* @defaultvalue "Default"
* @public
*/
type: {
type: ButtonType,
defaultValue: ButtonType.Default,
design: {
type: ButtonDesign,
defaultValue: ButtonDesign.Default,
},

/**
Expand Down Expand Up @@ -258,7 +258,7 @@ class Button extends UI5Element {
sapMBtnNoText: !this.text.length,
sapMBtnDisabled: this.disabled,
sapMBtnIconEnd: this.iconEnd,
[`sapMBtn${this.type}`]: true,
[`sapMBtn${this.design}`]: true,
sapUiSizeCompact: getCompactSize(),
},
icon: {
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/CalendarHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvent
import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
import Button from "./Button.js";
import ButtonType from "./types/ButtonType.js";
import ButtonDesign from "./types/ButtonDesign.js";
import CalendarHeaderTemplate from "./build/compiled/CalendarHeaderTemplate.lit.js";

// Styles
Expand Down Expand Up @@ -68,10 +68,10 @@ class CalendarHeader extends UI5Element {
this._btnNext.icon = "sap-icon://slim-arrow-right";

this._btn1 = {};
this._btn1.type = ButtonType.Transparent;
this._btn1.type = ButtonDesign.Transparent;

this._btn2 = {};
this._btn2.type = ButtonType.Transparent;
this._btn2.type = ButtonDesign.Transparent;
}

onBeforeRendering() {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ListItem.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<div class="sapMDeleteListItemButton">
<ui5-button
id="{{_id}}-deleteSelectionElement"
type="Transparent"
design="Transparent"
icon="sap-icon://decline"
@ui5-press="{{_onDelete}}"
></ui5-button>
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/types/ButtonType.js → packages/main/src/types/ButtonDesign.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ const ButtonTypes = {
Emphasized: "Emphasized",
};

class ButtonType extends DataType {
class ButtonDesign extends DataType {
static isValid(value) {
return !!ButtonTypes[value];
}
}

ButtonType.generataTypeAcessors(ButtonTypes);
ButtonDesign.generataTypeAcessors(ButtonTypes);

export default ButtonType;
export default ButtonDesign;
36 changes: 18 additions & 18 deletions packages/main/test/sap/ui/webcomponents/main/pages/Button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,24 @@
</head>

<body>
<ui5-button id="button1" type="Emphasized">Action Bar Button</ui5-button>
<ui5-button id="button1" design="Emphasized">Action Bar Button</ui5-button>
<ui5-button>Primary <br> button</ui5-button>
<ui5-button type="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
<ui5-button design="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
<ui5-button disabled id="button-disabled">Inactive</ui5-button>
<ui5-button type="Positive">Accept</ui5-button>
<ui5-button type="Negative">Decline</ui5-button>
<ui5-button design="Positive">Accept</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>

<br />
<br />

<ui5-input id="field"></ui5-input>

<ui5-button type="Emphasized">Action<br> Bar<br> Button</ui5-button>
<ui5-button design="Emphasized">Action<br> Bar<br> Button</ui5-button>
<ui5-button>Primary button</ui5-button>
<ui5-button type="Transparent">Secondary button</ui5-button>
<ui5-button design="Transparent">Secondary button</ui5-button>
<ui5-button disabled>Inactive</ui5-button>
<ui5-button type="Positive">Agree</ui5-button>
<ui5-button type="Negative">Decline</ui5-button>
<ui5-button design="Positive">Agree</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>

<br/>
<br/>
Expand All @@ -62,28 +62,28 @@
<br/>
<br/>

<ui5-button type="Default" icon="sap-icon://employee">Default</ui5-button>
<ui5-button disabled type="Default" icon="sap-icon://employee">Default</ui5-button>
<ui5-button design="Default" icon="sap-icon://employee">Default</ui5-button>
<ui5-button disabled design="Default" icon="sap-icon://employee">Default</ui5-button>
<br/>
<br/>

<ui5-button type="Positive" icon="sap-icon://employee">Agree</ui5-button>
<ui5-button disabled type="Positive" icon="sap-icon://employee">Agree</ui5-button>
<ui5-button design="Positive" icon="sap-icon://employee">Agree</ui5-button>
<ui5-button disabled design="Positive" icon="sap-icon://employee">Agree</ui5-button>
<br/>
<br/>

<ui5-button type="Negative" icon="sap-icon://employee">Decline</ui5-button>
<ui5-button disabled type="Negative" icon="sap-icon://employee">Decline</ui5-button>
<ui5-button design="Negative" icon="sap-icon://employee">Decline</ui5-button>
<ui5-button disabled design="Negative" icon="sap-icon://employee">Decline</ui5-button>
<br/>
<br/>

<ui5-button type="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
<ui5-button disabled type="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
<ui5-button design="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
<ui5-button disabled design="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
<br/>
<br/>

<ui5-button type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
<ui5-button disabled type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
<ui5-button design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
<ui5-button disabled design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>

<br/>
<br/>
Expand Down
18 changes: 9 additions & 9 deletions packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
</section>

<section class="row heading-row-centered">
<ui5-button type="Emphasized">Getting started</ui5-button>
<ui5-button design="Emphasized">Getting started</ui5-button>
<ui5-button>Download</ui5-button>
</section>

Expand Down Expand Up @@ -136,15 +136,15 @@
</section>

<section class="row row-centered">
<ui5-button type="Emphasized">Submit</ui5-button>
<ui5-button design="Emphasized">Submit</ui5-button>
<ui5-button disabled>Not available</ui5-button>
<ui5-button>Edit</ui5-button>
<ui5-button type="Transparent">Apply</ui5-button>
<ui5-button type="Transparent">Cancel</ui5-button>
<ui5-button design="Transparent">Apply</ui5-button>
<ui5-button design="Transparent">Cancel</ui5-button>
<ui5-button icon="sap-icon://nav-back">Back</ui5-button>
<ui5-button icon="sap-icon://feeder-arrow">Next</ui5-button>
<ui5-button type="Positive">Approve</ui5-button>
<ui5-button type="Negative">Decline</ui5-button>
<ui5-button design="Positive">Approve</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
<ui5-button icon="sap-icon://download">Activate</ui5-button>
</section>
Expand Down Expand Up @@ -251,7 +251,7 @@
<div style="display: flex;" slot="header">
<ui5-title level="H5">Countries</ui5-title>
<ui5-button id="button1" icon="sap-icon://refresh">Reset</ui5-button>
<ui5-button type="Negative">Cencel</ui5-button>
<ui5-button design="Negative">Cencel</ui5-button>
</div>

<ui5-list id="myList" mode="Delete">
Expand All @@ -264,7 +264,7 @@
<div style="display: flex;" slot="header">
<ui5-title level="H5">Quarks</ui5-title>
<ui5-button id="button2" icon="sap-icon://add">Add</ui5-button>
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
</div>

<ui5-list id="myList2" mode="SingleSelectBegin">
Expand All @@ -277,7 +277,7 @@
<div style="display: flex;" slot="header">
<ui5-title level="H5">Employees</ui5-title>
<ui5-button id="button3" icon="sap-icon://add">Add</ui5-button>
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
</div>

<ui5-list id="myList3" mode="MultiSelect">
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/sap/ui/webcomponents/main/pages/List_keyboard_support.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h1>UI5 Table Web Component</h1>

<div slot="header" class="header">
<div>Countries</div>
<ui5-button type="Accept">Export</ui5-button>
<ui5-button design="Accept">Export</ui5-button>
</div>

<!-- Items -->
Expand Down
4 changes: 2 additions & 2 deletions packages/main/test/sap/ui/webcomponents/main/pages/Panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@
<ui5-title>Expandable but not expanded</ui5-title>
<ui5-button id="b1">Add child </ui5-button>
<ui5-label id="l1">No new children added yet.</ui5-label>
<ui5-button type="Reject" icon="sap-icon://cancel">Cancel</ui5-button>
<ui5-button type="Accept" icon="sap-icon://accept">Done</ui5-button>
<ui5-button design="Reject" icon="sap-icon://cancel">Cancel</ui5-button>
<ui5-button design="Accept" icon="sap-icon://accept">Done</ui5-button>
</div>

<!-- Content -->
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/sap/ui/webcomponents/main/pages/Popover.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</head>

<body>
<ui5-button id="btnOpenPopover" type="Emphasized" icon="sap-icon://employee">Open Popover</ui5-button>
<ui5-button id="btnOpenPopover" design="Emphasized" icon="sap-icon://employee">Open Popover</ui5-button>

<ui5-popover id="popoverToOpen" header-text="Popover">
<div style="padding: 1rem;text-align: center;">
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/sap/ui/webcomponents/main/pages/Popups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<!-- Header -->
<div style="display: flex; align-items: center;" slot="header">
<ui5-title>Countries:</ui5-title>
<ui5-button type="Accept">OK</ui5-button>
<ui5-button design="Accept">OK</ui5-button>
</div>
<!-- Items -->
<ui5-li>Argentina</ui5-li>
Expand Down
74 changes: 37 additions & 37 deletions packages/main/test/sap/ui/webcomponents/main/samples/Button.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,20 @@
<section>
<h3>Basic Button</h3>
<div class="snippet">
<ui5-button class="samples-margin" type="Default">Enabled</ui5-button>
<ui5-button class="samples-margin" design="Default">Enabled</ui5-button>
<ui5-button class="samples-margin" disabled>Disabled</ui5-button>
<ui5-button class="samples-margin" type="Transparent">Cancel</ui5-button>
<ui5-button class="samples-margin" type="Positive" icon-end>Approve</ui5-button>
<ui5-button class="samples-margin"type="Negative">Decline</ui5-button>
<ui5-button class="samples-margin" type="Emphasized">Subscribe</ui5-button>
<ui5-button class="samples-margin" design="Transparent">Cancel</ui5-button>
<ui5-button class="samples-margin" design="Positive" icon-end>Approve</ui5-button>
<ui5-button class="samples-margin"design="Negative">Decline</ui5-button>
<ui5-button class="samples-margin" design="Emphasized">Subscribe</ui5-button>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-button type="Default">Enabled</ui5-button>
<ui5-button design="Default">Enabled</ui5-button>
<ui5-button disabled>Disabled</ui5-button>
<ui5-button type="Transparent">Cancel</ui5-button>
<ui5-button type="Positive" icon-end>Approve</ui5-button>
<ui5-button type="Negative">Decline</ui5-button>
<ui5-button type="Emphasized">Subscribe</ui5-button>
<ui5-button design="Transparent">Cancel</ui5-button>
<ui5-button design="Positive" icon-end>Approve</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button design="Emphasized">Subscribe</ui5-button>
</xmp></pre>
</section>

Expand All @@ -65,17 +65,17 @@ <h3>Button with Icon</h3>
<ui5-button class="samples-margin" icon="sap-icon://employee">Add</ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://download" icon-end>Download</ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://download">Active Icon</ui5-button>
<ui5-button class="samples-margin" type="Positive" icon="sap-icon://add">Add</ui5-button>
<ui5-button class="samples-margin" type="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button class="samples-margin" type="Transparent" icon="sap-icon://accept">Accept</ui5-button>
<ui5-button class="samples-margin" design="Positive" icon="sap-icon://add">Add</ui5-button>
<ui5-button class="samples-margin" design="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button class="samples-margin" design="Transparent" icon="sap-icon://accept">Accept</ui5-button>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-button icon="sap-icon://employee">Add</ui5-button>
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
<ui5-button icon="sap-icon://download">Active Icon</ui5-button>
<ui5-button type="Positive" icon="sap-icon://add">Add</ui5-button>
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button type="Transparent" icon="sap-icon://accept">Transparent</ui5-button>
<ui5-button design="Positive" icon="sap-icon://add">Add</ui5-button>
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
<ui5-button design="Transparent" icon="sap-icon://accept">Transparent</ui5-button>
</xmp></pre>
</section>

Expand All @@ -97,43 +97,43 @@ <h3>Icon Only Button</h3>
<ui5-button class="samples-margin" icon="sap-icon://action-settings" aria-labelledby="lblSettings" ></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://add" aria-labelledby="lblAdd"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://alert" aria-labelledby="lblAlert"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://accept" type="Positive" aria-labelledby="lblAccept"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://bookmark" type="Positive" aria-labelledby="lblBookmark"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://cancel" type="Negative" aria-labelledby="lblCancel" ></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://call" type="Negative" aria-labelledby="lblCall" ></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://camera" type="Transparent" aria-labelledby="lblCamera"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://cart" type="Transparent" aria-labelledby="lblCart"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://accept" design="Positive" aria-labelledby="lblAccept"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://bookmark" design="Positive" aria-labelledby="lblBookmark"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://cancel" design="Negative" aria-labelledby="lblCancel" ></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://call" design="Negative" aria-labelledby="lblCall" ></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://camera" design="Transparent" aria-labelledby="lblCamera"></ui5-button>
<ui5-button class="samples-margin" icon="sap-icon://cart" design="Transparent" aria-labelledby="lblCart"></ui5-button>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-button icon="sap-icon://away" aria-labelledby="lblAway"></ui5-button>
<ui5-button icon="sap-icon://action-settings" aria-labelledby="lblSettings" ></ui5-button>
<ui5-button icon="sap-icon://add" aria-labelledby="lblAdd"></ui5-button>
<ui5-button icon="sap-icon://alert" aria-labelledby="lblAlert"></ui5-button>
<ui5-button icon="sap-icon://accept" type="Positive" aria-labelledby="lblAccept"></ui5-button>
<ui5-button icon="sap-icon://bookmark" type="Positive" aria-labelledby="lblBookmark"></ui5-button>
<ui5-button icon="sap-icon://cancel" type="Negative" aria-labelledby="lblCancel" ></ui5-button>
<ui5-button icon="sap-icon://call" type="Negative" aria-labelledby="lblCall" ></ui5-button>
<ui5-button icon="sap-icon://camera" type="Transparent" aria-labelledby="lblCamera"></ui5-button>
<ui5-button icon="sap-icon://cart" type="Transparent" aria-labelledby="lblCart"></ui5-button>
<ui5-button icon="sap-icon://accept" design="Positive" aria-labelledby="lblAccept"></ui5-button>
<ui5-button icon="sap-icon://bookmark" design="Positive" aria-labelledby="lblBookmark"></ui5-button>
<ui5-button icon="sap-icon://cancel" design="Negative" aria-labelledby="lblCancel" ></ui5-button>
<ui5-button icon="sap-icon://call" design="Negative" aria-labelledby="lblCall" ></ui5-button>
<ui5-button icon="sap-icon://camera" design="Transparent" aria-labelledby="lblCamera"></ui5-button>
<ui5-button icon="sap-icon://cart" design="Transparent" aria-labelledby="lblCart"></ui5-button>
<ui5-label style="display:none" id="lblAdd" aria-hidden="true">Add</ui5-label>
</xmp></pre>
</section>

<section>
<h3>Button with Type</h3>
<h3>Button with Design</h3>
<div class="snippet">
<ui5-button class="samples-margin" type="Emphasized">Submit</ui5-button>
<ui5-button class="samples-margin" type="Positive">Agree</ui5-button>
<ui5-button class="samples-margin" type="Negative">Decline</ui5-button>
<ui5-button class="samples-margin" design="Emphasized">Submit</ui5-button>
<ui5-button class="samples-margin" design="Positive">Agree</ui5-button>
<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
<ui5-button class="samples-margin" disabled>Disabled</ui5-button>
<ui5-button class="samples-margin" type="Transparent">Transparent</ui5-button>
<ui5-button class="samples-margin" design="Transparent">Transparent</ui5-button>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-button type="Emphasized">Submit</ui5-button>
<ui5-button type="Positive">Agree</ui5-button>
<ui5-button type="Negative">Decline</ui5-button>
<ui5-button design="Emphasized">Submit</ui5-button>
<ui5-button design="Positive">Agree</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button disabled>Disabled</ui5-button>
<ui5-button type="Transparent">Transparent</ui5-button>
<ui5-button design="Transparent">Transparent</ui5-button>
</xmp></pre>
</section>

Expand Down
Loading

0 comments on commit a62b471

Please sign in to comment.