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-card): update API and correct visual #1145

Merged
merged 1 commit into from
Jan 22, 2020
Merged

refactor(ui5-card): update API and correct visual #1145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 9 additions & 7 deletions packages/main/src/Card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,24 @@
@keydown="{{_headerKeydown}}"
@keyup="{{_headerKeyup}}"
role="{{ariaHeaderRole}}"
aria-labelledby="{{_id}}-subtitle {{_id}}-status"
aria-labelledby="{{_id}}-subheading {{_id}}-status"
aria-level="{{ariaLevel}}"
aria-roledescription="{{ariaCardHeaderRoleDescription}}"
tabindex="0">

<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
<slot name="avatar"></slot>
</div>
{{#if hasAvatar}}
<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
<slot name="avatar"></slot>
</div>
{{/if}}

<div class="ui5-card-header-text">
{{#if heading}}
<div id="{{_id}}-heading" class="ui5-card-heading">{{heading}}</div>
<div id="{{_id}}-heading" class="ui5-card-heading" part="heading">{{heading}}</div>
{{/if}}

{{#if subtitle}}
<div id="{{_id}}-subtitle" class="ui5-card-subtitle ">{{subtitle}}</div>
{{#if subheading}}
<div id="{{_id}}-subheading" class="ui5-card-subheading" part="subheading">{{subheading}}</div>
{{/if}}
</div>
<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>
Expand Down
12 changes: 8 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,12 +62,12 @@ const metadata = {
},

/**
* Defines the subtitle displayed in the <code>ui5-card</code> header.
* Defines the subheading displayed in the <code>ui5-card</code> header.
* @type {string}
* @defaultvalue ""
* @public
*/
subtitle: {
subheading: {
type: String,
},

Expand Down Expand Up @@ -120,7 +120,7 @@ const metadata = {
* tile with separate header and content areas.
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
* The header can be used through several properties, such as:
* <code>heading</code>, <code>subtitle</code>, <code>status</code>
* <code>heading</code>, <code>subheading</code>, <code>status</code>
* and a slot:
* <code>avatar</code>.
*
Expand Down Expand Up @@ -192,7 +192,7 @@ class Card extends UI5Element {
}

get hasHeader() {
return !!(this.heading || this.subtitle || this.status || this.avatar);
return !!(this.heading || this.subheading || this.status || this.avatar);
}

get rtl() {
Expand All @@ -215,6 +215,10 @@ class Card extends UI5Element {
return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
}

get hasAvatar() {
return !!this.avatar.length;
}

static async define(...params) {
await Promise.all([
Icon.define(),
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 @@ -105,7 +105,7 @@
max-height: 3.5rem;
}

.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
font-family: var(--sapFontFamily);
font-size: var(--sapFontMediumSize);
font-weight: normal;
Expand All @@ -115,7 +115,7 @@
}

.ui5-card-header .ui5-card-header-text .ui5-card-heading,
.ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
text-align: left;
text-overflow: ellipsis;
white-space: normal;
Expand All @@ -142,6 +142,6 @@
text-align: right;
}

[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subtitle {
[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-subheading {
text-align: right;
}
7 changes: 5 additions & 2 deletions packages/main/test/pages/Card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

Expand All @@ -24,6 +24,7 @@
id="card"
status="4 of 10"
heading="Quick Links"
subheading="quick links"
header-interactive
class="myCard">
<ui5-list id="myList3" separators="Inner">
Expand All @@ -39,14 +40,16 @@
id="card2"
status="4 of 10"
heading="Quick Links"
subheading="quick links"
class="myCard">
<ui5-icon name="group" slot="avatar"></ui5-icon>
<ui5-list id="myList3" separators="Inner">
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card>
<ui5-card heading="Quick Links" subheading="quick links">
<ui5-list id="myList3" separators="Inner">
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
Expand Down
28 changes: 14 additions & 14 deletions packages/main/test/samples/Card.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h2 class="control-header">Card</h2>
<section>
<h3>Card with List</h3>
<div class="snippet card-container">
<ui5-card heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
<ui5-card heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
<ui5-icon name="group" slot="avatar"></ui5-icon>

<div class="card-content">
Expand All @@ -81,7 +81,7 @@ <h3>Card with List</h3>

</div>
</ui5-card>
<ui5-card heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
<ui5-card heading="This header is interactive" header-interactive subheading="Click, press Enter or Space" status="3 of 6" class="medium">
<ui5-icon name="group" slot="avatar"></ui5-icon>

<div class="card-content">
Expand All @@ -103,7 +103,7 @@ <h3>Card with List</h3>
}
</style>

<ui5-card avatar="group" heading="Team Space" subtitle="Direct Reports" status="3 of 10" class="medium">
<ui5-card avatar="group" heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
<div class="card-content">
<ui5-list separators="None" class="card-content-child" style="width: 100%">
<ui5-li image="../../../assets/images/avatars/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
Expand All @@ -113,7 +113,7 @@ <h3>Card with List</h3>

</div>
</ui5-card>
<ui5-card avatar="group" heading="This header is interactive" header-interactive subtitle="Click, press Enter or Space" status="3 of 6" class="medium">
<ui5-card avatar="group" heading="This header is interactive" header-interactive subheading="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="../../../assets/images/avatars/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
Expand All @@ -128,7 +128,7 @@ <h3>Card with List</h3>
<section>
<h3>Card with Table</h3>
<div class="snippet card-container">
<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15">
<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15">
<ui5-table class="demo-table content-padding">
<!-- Columns -->
<ui5-table-column slot="columns">
Expand Down Expand Up @@ -201,7 +201,7 @@ <h3>Card with Table</h3>
.status-warning {color: #e9730c;}
.status-success {color: #107e3e;}
</style>
<ui5-card heading="New Purchase Orders" subtitle="Today" status="3 of 15" class="medium">
<ui5-card heading="New Purchase Orders" subheading="Today" status="3 of 15" class="medium">
<ui5-table class="demo-table content-padding">
<!-- Columns -->
<ui5-table-column slot="columns">
Expand Down Expand Up @@ -244,7 +244,7 @@ <h3>Card with Table</h3>
<section>
<h3>Card with Timeline</h3>
<div class="snippet card-container">
<ui5-card heading="Upcoming Activities" subtitle="For Today" class="medium">
<ui5-card heading="Upcoming Activities" subheading="For Today" class="medium">
<ui5-timeline>
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
Expand All @@ -260,7 +260,7 @@ <h3>Card with Timeline</h3>
<pre class="prettyprint lang-html"><xmp>
<ui5-card
heading="Upcoming Activities"
subtitle="For Today"
subheading="For Today"
class="meidum">
<ui5-timeline>
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
Expand All @@ -278,7 +278,7 @@ <h3>Card with Timeline</h3>
<section>
<h3>More Cards</h3>
<div class="snippet card-container">
<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />

<ui5-list separators="Inner" class="content-padding">
Expand All @@ -290,7 +290,7 @@ <h3>More Cards</h3>

<ui5-card
heading="Project Cloud Transformation"
subtitle="Revenue per Product | EUR"
subheading="Revenue per Product | EUR"
status="3 of 3"
class="small">
<ui5-list separators="None" class="content-padding">
Expand Down Expand Up @@ -332,7 +332,7 @@ <h3>More Cards</h3>
</ui5-list>
</ui5-card>

<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />

<div class="content content-padding">
Expand All @@ -357,7 +357,7 @@ <h3>More Cards</h3>
</div>

<pre class="prettyprint lang-html"><xmp>
<ui5-card heading="David Willams" subtitle="Sales Manager" class="small">
<ui5-card heading="David Willams" subheading="Sales Manager" class="small">
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />

<ui5-list separators="Inner" class="content-padding">
Expand Down Expand Up @@ -386,7 +386,7 @@ <h3>More Cards</h3>
.status-success {color: #107e3e;}
</style>

<ui5-card heading="Project Cloud Transformation" subtitle="Revenue per Product | EUR" status="3 of 3" class="small">
<ui5-card heading="Project Cloud Transformation" subheading="Revenue per Product | EUR" status="3 of 3" class="small">
<ui5-list separators="None" class="content-padding">
<ui5-li-custom>
<div class="item">
Expand All @@ -403,7 +403,7 @@ <h3>More Cards</h3>
</ui5-list>
</ui5-card>

<ui5-card heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<ui5-card heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />

<div class="content content-padding">
Expand Down