Skip to content

Commit b61860f

Browse files
MapTo0MapTo0
authored
feat: adds static method styles to base class (#345)
1 parent 16438a6 commit b61860f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+166
-324
lines changed

‎packages/base/src/Theming.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { getTheme, _setTheme } from "./Configuration.js";
2-
import { getStyles } from "./theming/ThemeBundle.js";
32
import { getCustomCSS } from "./theming/CustomStyle.js";
43
import { getThemeProperties } from "./theming/ThemeProperties.js";
54
import { injectThemeProperties } from "./theming/StyleInjection.js";
@@ -43,21 +42,14 @@ const setTheme = async theme => {
4342

4443
const getEffectiveStyle = ElementClass => {
4544
const theme = getTheme();
46-
const styleUrls = ElementClass.getMetadata().getStyleUrl();
4745
const tag = ElementClass.getMetadata().getTag();
48-
const styles = getStyles(theme, styleUrls);
49-
const cssContent = [];
50-
styles.forEach(css => {
51-
cssContent.push(css);
52-
});
46+
const customStyle = getCustomCSS(theme, tag) || "";
47+
let componentStyles = ElementClass.styles;
5348

54-
const customStyle = getCustomCSS(theme, tag);
55-
if (customStyle) {
56-
cssContent.push(customStyle);
49+
if (Array.isArray(componentStyles)) {
50+
componentStyles = componentStyles.join(" ");
5751
}
58-
59-
const cssText = cssContent.join(" ");
60-
return cssText;
52+
return `${componentStyles} ${customStyle}`;
6153
};
6254

6355
export {

‎packages/base/src/WebComponent.js

+3
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,9 @@ class WebComponent extends HTMLElement {
261261
return metadata;
262262
}
263263

264+
static get styles() {
265+
return "";
266+
}
264267

265268
_initializeState() {
266269
const StateClass = this.constructor.StateClass;

‎packages/base/src/WebComponentMetadata.js

-4
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ class WebComponentMetadata {
1414
return this.metadata.noShadowDOM;
1515
}
1616

17-
getStyleUrl() {
18-
return this.metadata.styleUrl || [];
19-
}
20-
2117
usesNodeText() {
2218
return !!this.metadata.usesNodeText;
2319
}

‎packages/main/src/Button.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
22
import URI from "@ui5/webcomponents-base/src/types/URI.js";
33
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
44
import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
5-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
65

76
import ButtonTemplateContext from "./ButtonTemplateContext.js";
87
import ButtonType from "./types/ButtonType.js";
@@ -12,18 +11,11 @@ import Icon from "./Icon.js";
1211
// Styles
1312
import buttonCss from "./themes/Button.css.js";
1413

15-
addCustomCSS("ui5-button", "sap_fiori_3", buttonCss);
16-
addCustomCSS("ui5-button", "sap_belize", buttonCss);
17-
addCustomCSS("ui5-button", "sap_belize_hcb", buttonCss);
18-
1914
/**
2015
* @public
2116
*/
2217
const metadata = {
2318
tag: "ui5-button",
24-
styleUrl: [
25-
"Button.css",
26-
],
2719
usesNodeText: true,
2820
properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
2921

@@ -152,6 +144,10 @@ class Button extends WebComponent {
152144
return metadata;
153145
}
154146

147+
static get styles() {
148+
return buttonCss;
149+
}
150+
155151
static get renderer() {
156152
return ButtonRenderer;
157153
}

‎packages/main/src/Calendar.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
22
import "@ui5/webcomponents-base/src/shims/Core-shim.js";
33
import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
4-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
54
import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js";
65
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
76
import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
@@ -25,18 +24,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
2524
// Styles
2625
import calendarCSS from "./themes/Calendar.css.js";
2726

28-
addCustomCSS("ui5-calendar", "sap_fiori_3", calendarCSS);
29-
addCustomCSS("ui5-calendar", "sap_belize_hcb", calendarCSS);
30-
addCustomCSS("ui5-calendar", "sap_belize", calendarCSS);
31-
3227
/**
3328
* @public
3429
*/
3530
const metadata = {
3631
tag: "ui5-calendar",
37-
styleUrl: [
38-
"Calendar.css",
39-
],
4032
properties: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
4133
/**
4234
* It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -124,6 +116,10 @@ class Calendar extends WebComponent {
124116
return CalendarRenderer;
125117
}
126118

119+
static get styles() {
120+
return calendarCSS;
121+
}
122+
127123
constructor() {
128124
super();
129125
this._oLocale = getFormatLocale();

‎packages/main/src/CalendarHeader.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
22
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
33
import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
4-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
54
import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext.js";
65
import Button from "./Button.js";
76
import ButtonType from "./types/ButtonType.js";
@@ -10,15 +9,8 @@ import CalendarHeaderRenderer from "./build/compiled/CalendarHeaderRenderer.lit.
109
// Styles
1110
import styles from "./themes/CalendarHeader.css.js";
1211

13-
addCustomCSS("ui5-calendar-header", "sap_belize", styles);
14-
addCustomCSS("ui5-calendar-header", "sap_belize_hcb", styles);
15-
addCustomCSS("ui5-calendar-header", "sap_fiori_3", styles);
16-
1712
const metadata = {
1813
tag: "ui5-calendar-header",
19-
styleUrl: [
20-
"CalendarHeader.css",
21-
],
2214
properties: {
2315
monthText: {
2416
type: String,
@@ -56,6 +48,10 @@ class CalendarHeader extends WebComponent {
5648
return CalendarHeaderRenderer;
5749
}
5850

51+
static get styles() {
52+
return styles;
53+
}
54+
5955
constructor() {
6056
super();
6157
this._btnPrev = {};

‎packages/main/src/Card.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
22
import URI from "@ui5/webcomponents-base/src/types/URI.js";
33
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
4-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
54
import { isIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
65
import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
76
import Function from "@ui5/webcomponents-base/src/types/Function.js";
@@ -11,18 +10,11 @@ import Icon from "./Icon.js";
1110
// Styles
1211
import cardCss from "./themes/Card.css.js";
1312

14-
addCustomCSS("ui5-card", "sap_fiori_3", cardCss);
15-
addCustomCSS("ui5-card", "sap_belize", cardCss);
16-
addCustomCSS("ui5-card", "sap_belize_hcb", cardCss);
17-
1813
/**
1914
* @public
2015
*/
2116
const metadata = {
2217
tag: "ui5-card",
23-
styleUrl: [
24-
"Card.css",
25-
],
2618
defaultSlot: "content",
2719
slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
2820

@@ -151,6 +143,10 @@ class Card extends WebComponent {
151143
return CardRenderer;
152144
}
153145

146+
static get styles() {
147+
return cardCss;
148+
}
149+
154150
static calculateTemplateContext(state) {
155151
const hasAvatar = !!state.avatar;
156152
const icon = hasAvatar && isIconURI(state.avatar);

‎packages/main/src/CheckBox.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
22
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
33
import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
44
import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
5-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
65

76
import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js";
87
import CheckBoxTemplateContext from "./CheckBoxTemplateContext.js";
@@ -11,16 +10,11 @@ import Label from "./Label.js";
1110
// Styles
1211
import checkboxCss from "./themes/CheckBox.css.js";
1312

14-
addCustomCSS("ui5-checkbox", "sap_fiori_3", checkboxCss);
15-
addCustomCSS("ui5-checkbox", "sap_belize", checkboxCss);
16-
addCustomCSS("ui5-checkbox", "sap_belize_hcb", checkboxCss);
17-
1813
/**
1914
* @public
2015
*/
2116
const metadata = {
2217
tag: "ui5-checkbox",
23-
styleUrl: ["CheckBox.css"],
2418
properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
2519

2620
/**
@@ -160,6 +154,10 @@ class CheckBox extends WebComponent {
160154
return CheckBoxRenderer;
161155
}
162156

157+
static get styles() {
158+
return checkboxCss;
159+
}
160+
163161
constructor() {
164162
super();
165163
this._label = {};

‎packages/main/src/CustomListItem.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
2-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
32
import ListItem from "./ListItem.js";
43
import CustomListItemTemplateContext from "./CustomListItemTemplateContext.js";
54
import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit.js";
65

76
// Styles
87
import columnListItemCss from "./themes/CustomListItem.css.js";
98

10-
addCustomCSS("ui5-li-custom", "sap_fiori_3", columnListItemCss);
11-
addCustomCSS("ui5-li-custom", "sap_belize", columnListItemCss);
12-
addCustomCSS("ui5-li-custom", "sap_belize_hcb", columnListItemCss);
13-
149
/**
1510
* @public
1611
*/
1712
const metadata = {
1813
tag: "ui5-li-custom",
19-
styleUrl: [
20-
"ListItemBase.css",
21-
"ListItem.css",
22-
"CustomListItem.css",
23-
],
2414
defaultSlot: "content",
2515
slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
2616

@@ -66,6 +56,10 @@ class CustomListItem extends ListItem {
6656
static get calculateTemplateContext() {
6757
return CustomListItemTemplateContext.calculate;
6858
}
59+
60+
static get styles() {
61+
return [ListItem.styles, columnListItemCss];
62+
}
6963
}
7064

7165
Bootstrap.boot().then(_ => {

‎packages/main/src/DatePicker.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
77
import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js";
88
import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
99
import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
10-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
1110
import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
1211
import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js";
1312
import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
@@ -29,18 +28,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
2928
// Styles
3029
import datePickerCss from "./themes/DatePicker.css.js";
3130

32-
addCustomCSS("ui5-datepicker", "sap_fiori_3", datePickerCss);
33-
addCustomCSS("ui5-datepicker", "sap_belize", datePickerCss);
34-
addCustomCSS("ui5-datepicker", "sap_belize_hcb", datePickerCss);
35-
3631
/**
3732
* @public
3833
*/
3934
const metadata = {
4035
tag: "ui5-datepicker",
41-
styleUrl: [
42-
"DatePicker.css",
43-
],
4436
properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
4537
/**
4638
* Defines a formatted date value.
@@ -211,6 +203,9 @@ class DatePicker extends WebComponent {
211203
return DatePickerTemplateContext.calculate;
212204
}
213205

206+
static get styles() {
207+
return datePickerCss;
208+
}
214209

215210
constructor() {
216211
super();

‎packages/main/src/DayPicker.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,17 @@ import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
1010
import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js";
1111
import { calculateWeekNumber } from "@ui5/webcomponents-base/src/dates/CalendarUtils.js";
1212
import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
13-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
1413
import DayPickerTemplateContext from "./DayPickerTemplateContext.js";
1514
import DayPickerRenderer from "./build/compiled/DayPickerRenderer.lit.js";
1615

1716
// Styles
1817
import dayPickerCSS from "./themes/DayPicker.css.js";
1918

20-
addCustomCSS("ui5-daypicker", "sap_fiori_3", dayPickerCSS);
21-
addCustomCSS("ui5-daypicker", "sap_belize", dayPickerCSS);
22-
addCustomCSS("ui5-daypicker", "sap_belize_hcb", dayPickerCSS);
23-
2419
/**
2520
* @public
2621
*/
2722
const metadata = {
2823
tag: "ui5-daypicker",
29-
styleUrl: [
30-
"DayPicker.css",
31-
],
3224
properties: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
3325
/**
3426
* A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -119,6 +111,10 @@ class DayPicker extends WebComponent {
119111
return DayPickerRenderer;
120112
}
121113

114+
static get styles() {
115+
return dayPickerCSS;
116+
}
117+
122118
constructor() {
123119
super();
124120
this._oLocale = getFormatLocale();

‎packages/main/src/Dialog.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
2-
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
32

43
import DialogTemplateContext from "./DialogTemplateContext.js";
54
import Popup from "./Popup.js";
@@ -9,19 +8,11 @@ import DialogRenderer from "./build/compiled/DialogRenderer.lit.js";
98
// Styles
109
import dialogCss from "./themes/Dialog.css.js";
1110

12-
addCustomCSS("ui5-dialog", "sap_fiori_3", dialogCss);
13-
addCustomCSS("ui5-dialog", "sap_belize", dialogCss);
14-
addCustomCSS("ui5-dialog", "sap_belize_hcb", dialogCss);
15-
1611
/**
1712
* @public
1813
*/
1914
const metadata = {
2015
tag: "ui5-dialog",
21-
styleUrl: [
22-
"Popup.css",
23-
"Dialog.css",
24-
],
2516
properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
2617
/**
2718
* Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
@@ -80,6 +71,10 @@ class Dialog extends Popup {
8071
return DialogRenderer;
8172
}
8273

74+
static get styles() {
75+
return [Popup.styles, dialogCss];
76+
}
77+
8378
/**
8479
* Opens the <code>ui5-dialog</code>.
8580
* @public

0 commit comments

Comments
 (0)