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

feat(ui5-card): add "headerInteractive" property #439

Merged
merged 6 commits into from
Jun 17, 2019
+81 −23
Merged

feat(ui5-card): add "headerInteractive" property #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ab4e81
feat(ui5-card): add headerInteractive property
ilhan007 May 23, 2019
b06be6e
add tabindex and role="button" when header interactive
ilhan007 May 23, 2019
8ad1084
merge master into branch
ilhan007 May 23, 2019
640b83b
improve doc and add additional test
ilhan007 May 23, 2019
25dbf4f
merge master into branch
ilhan007 Jun 5, 2019
0a61a39
resolve coflicts
ilhan007 Jun 5, 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
3 changes: 2 additions & 1 deletion packages/main/src/Card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
@click="{{_headerClick}}"
@keydown="{{_headerKeydown}}"
@keyup="{{_headerKeyup}}"
tabindex="0">
tabindex="{{tabindex}}"
role="{{role}}">
{{#if image}}
<img src="{{avatar}}" aria-label="Avatar" class="sapFCardAvatar sapFCardHeaderImg">
{{/if}}
Expand Down
41 changes: 37 additions & 4 deletions packages/main/src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,17 @@ const metadata = {
type: String,
},

/**
* Defines if the <code>ui5-card</code> header would be interactive,
* e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
* @type {boolean}
* @defaultvalue false
* @public
*/
headerInteractive: {
type: Boolean,
},

/**
* Defines image source URI or built-in icon font URI.
* </br></br>
Expand All @@ -73,7 +84,6 @@ const metadata = {
*/
avatar: {
type: String,
defaultValue: null,
},

_headerActive: {
Expand All @@ -85,7 +95,8 @@ const metadata = {
/**
* Fired when the <code>ui5-card</code> header is pressed
* by click/tap or by using the Enter or Space key.
*
* <br><br>
* <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
* @event
* @public
* @since 0.10.0
Expand All @@ -104,6 +115,9 @@ const metadata = {
* The header can be used through several properties, such as:
* <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
*
* <h3>Keyboard handling</h3>
* In case you enable <code>headerInteractive</cdoe> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
*
* <h3>ES6 Module Import</h3>
*
* <code>import "@ui5/webcomponents/dist/Card";</code>
Expand Down Expand Up @@ -136,7 +150,8 @@ class Card extends UI5Element {
},
header: {
"sapFCardHeader": true,
"sapFCardHeaderActive": this._headerActive,
"sapFCardHeaderInteractive": this.headerInteractive,
"sapFCardHeaderActive": this.headerInteractive && this._headerActive,
},
};
}
Expand All @@ -149,17 +164,31 @@ class Card extends UI5Element {
return !!this.avatar && !this.icon;
}

get role() {
return this.headerInteractive ? "button" : undefined;
}

get tabindex() {
return this.headerInteractive ? "0" : undefined;
}

static async define(...params) {
await Icon.define();

super.define(...params);
}

_headerClick() {
this.fireEvent("headerPress");
if (this.headerInteractive) {
this.fireEvent("headerPress");
}
}

_headerKeydown(event) {
if (!this.headerInteractive) {
return;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the docs it is written that both space and enter are firing the event

const enter = isEnter(event);
const space = isSpace(event);

Expand All @@ -176,6 +205,10 @@ class Card extends UI5Element {
}

_headerKeyup(event) {
if (!this.headerInteractive) {
return;
}

const space = isSpace(event);

this._headerActive = false;
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/themes/Card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ ui5-card:not([hidden]) {
outline: none;
}

.sapFCardHeader:focus:before {
.sapFCardHeader.sapFCardHeaderInteractive:focus:before {
content: "";
position: absolute;
border: var(--_ui5_card_header_focus_border);
Expand All @@ -54,13 +54,13 @@ ui5-card:not([hidden]) {
bottom: 1px;
}

.sapFCardHeader:hover {
.sapFCardHeader.sapFCardHeaderInteractive:hover {
cursor: pointer;
background: var(--_ui5_card_header_hover_bg);
}

.sapFCardHeader.sapFCardHeaderActive,
.sapFCardHeader:active {
.sapFCardHeader.sapFCardHeaderInteractive:active {
background: var(--_ui5_card_header_active_bg);
}

Expand Down
20 changes: 15 additions & 5 deletions packages/main/test/sap/ui/webcomponents/main/pages/Card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,36 @@
}
</style>
</head>
<body>

<body role="application">

<ui5-card
id="card"
status="4 of 10"
heading="Quick Links"
header-interactive
class="myCard">
<ui5-list id="myList3" separators="Inner">
<ui5-li icon="sap-icon://horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
<ui5-li icon="sap-icon://opportunity" >Segmentation Models</ui5-li>
<ui5-li icon="sap-icon://line-charts" >Marketing plans</ui5-li>
<ui5-li icon="sap-icon://horizontal-bar-chart" >Target Groups</ui5-li>
<ui5-li icon="sap-icon://org-chart" >Program Structure</ui5-li>
<ui5-li icon="sap-icon://bar-chart" >AdWords Campaigns</ui5-li>
<ui5-li icon="sap-icon://tools-opportunity" >Winter Campaign Results</ui5-li>
</ui5-list>

<ui5-input id="field" value="0"></ui5-input>
</ui5-card>

<ui5-card
id="card2"
status="4 of 10"
heading="Quick Links"
class="myCard">
<ui5-list id="myList3" separators="Inner">
<ui5-li icon="sap-icon://horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
<ui5-li icon="sap-icon://opportunity" >Segmentation Models</ui5-li>
</ui5-list>

</ui5-card>

<script>
card.addEventListener("ui5-headerPress", function (event) {
console.log(event);
Expand Down
26 changes: 16 additions & 10 deletions packages/main/test/sap/ui/webcomponents/main/samples/Card.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,19 @@ <h2 class="control-header">Card</h2>
<section>
<h3>Card with List</h3>
<div class="snippet card-container">
<ui5-card avatar="sap-icon://group" heading="Team 6" subtitle="Direct Reports" status="6 of 6" class="medium" >
<ui5-card avatar="sap-icon://group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
<div class="card-content">
<ui5-list separators="None" class="card-content-child">
<ui5-list separators="None" class="card-content-child" style="width: 100%">
<ui5-li image="../../../../../../www/samples/images/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_2.png" description="UX Specialist">Michael Adams</ui5-li>
</ui5-list>
<ui5-list separators="None" class="card-content-child">

</div>
</ui5-card>
<ui5-card avatar="sap-icon://group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
<div class="card-content">
<ui5-list separators="None" class="card-content-child" style="width: 100%">
<ui5-li image="../../../../../../www/samples/images/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
<ui5-li image="../../../../../../www/samples/images/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
Expand All @@ -129,18 +134,19 @@ <h3>Card with List</h3>
}
</style>

<ui5-card avatar="sap-icon://group"
heading="Team 6"
subtitle="Direct Reports"
status="6 of 6"
class="medium">
<ui5-card avatar="sap-icon://group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
<div class="card-content">
<ui5-list separators="None" class="card-content-child">
<ui5-list separators="None" class="card-content-child" style="width: 100%">
<ui5-li image="../../../../../../www/samples/images/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_2.png" description="UX Specialist">Michael Adams</ui5-li>
</ui5-list>
<ui5-list separators="None" class="card-content-child">

</div>
</ui5-card>
<ui5-card avatar="sap-icon://group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
<div class="card-content">
<ui5-list separators="None" class="card-content-child" style="width: 100%">
<ui5-li image="../../../../../../www/samples/images/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
<ui5-li image="../../../../../../www/samples/images/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
<ui5-li image="../../../../../../www/samples/images/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
Expand Down
8 changes: 8 additions & 0 deletions packages/main/test/specs/Card.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@ describe("Card general interaction", () => {

it("fires headerPress upon click, Enter and Space", () => {
const cardHeader = browser.findElementDeep("#card >>> .sapFCardHeader");
const cardHeader2 = browser.findElementDeep("#card2 >>> .sapFCardHeader");
const field = browser.$("#field");

cardHeader.click();
cardHeader.keys("Space");
cardHeader.keys("Enter");

assert.strictEqual(field.getProperty("value"), "3", "headerPress should be called 3 times");


cardHeader2.click();
cardHeader2.keys("Space");
cardHeader2.keys("Enter");

assert.strictEqual(field.getProperty("value"), "3", "events count should remain 3 as the header is not interactive.");
});
});