Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-button): rename type property to design #504

Merged
merged 3 commits into from
Jun 19, 2019
Merged

refactor(ui5-button): rename type property to design #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02a650d
refactor(ui5-button): rename type property to design
fifoosid Jun 4, 2019
f53981d
buttontype renamed to buttondesign
fifoosid Jun 19, 2019
8381176
Merge master branch
fifoosid Jun 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/main/src/Button.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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