Skip to content

Commit e198fa5

Browse files
ilhan007ilhan007
authored
feat: add CSS variables section in API Ref (#399)
1 parent 9bdd2c5 commit e198fa5

10 files changed

+84
-17
lines changed

‎lib/documentation/index.js

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
const api = require('../../packages/main/dist/api.json');
2+
const cssVariables = require('../../packages/main/docs/themes/css-vars.json');
23
const template = require('./templates/template').template;
34
const sinceTemplate = require('./templates/api-component-since').template;
45
const propertiesTemplate = require('./templates/api-properties-section').template;
56
const slotsTemplate = require('./templates/api-slots-section').template;
67
const eventsTemplate = require('./templates/api-events-section').template;
78
const methodsTemplate = require('./templates/api-methods-section').template;
9+
const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
810
const Handlebars = require('handlebars/dist/handlebars.min.js');
911
const fs = require('fs');
1012
const mkdirp = require('mkdirp');
@@ -18,7 +20,11 @@ const sinceMarker = "<!--since_tag_marker-->";
1820
const getComponentByName = name => {
1921
return entries.find(element => {
2022
return element.basename === name;
21-
})
23+
})
24+
};
25+
26+
const getCSSVarsByName = name => {
27+
return cssVariables[name] || [];
2228
};
2329

2430
const capitalize = str => {
@@ -42,23 +48,34 @@ Handlebars.registerPartial('properties', propertiesTemplate);
4248
Handlebars.registerPartial('slots', slotsTemplate);
4349
Handlebars.registerPartial('events', eventsTemplate);
4450
Handlebars.registerPartial('methods', methodsTemplate);
51+
Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
4552

4653
mkdirp(`dist/test-resources/sap/ui/webcomponents/main/api`);
4754

4855
let entriesAPI = [];
4956

50-
const mergeParentAPI = entry => {
57+
const appendCSSVarsAPI = entry => {
58+
entry.cssVariables = getCSSVarsByName(entry.basename);
59+
return entry;
60+
}
61+
62+
const calculateAPI = entry => {
5163
if (entriesAPI.indexOf(entry.basename) !== -1) {
5264
return entry;
5365
}
5466

5567
let parent = getComponentByName(entry.extends) || {};
56-
parent = { ...{ properties: [], events: [], slots: [] }, ...parent };
68+
69+
entry = appendCSSVarsAPI(entry);
70+
parent = appendCSSVarsAPI(parent);
71+
72+
parent = { ...{ properties: [], events: [], slots: [], cssVariables: [] }, ...parent };
5773

5874
// extend component documentation
5975
entry.properties = [...(entry.properties || []), ...(parent.properties || [])];
6076
entry.events = [...(entry.events || []), ...(parent.events || [])];
6177
entry.slots = [...(entry.slots || []), ...(parent.slots || [])];
78+
entry.cssVariables = [...(entry.cssVariables || []), ...(parent.cssVariables || [])];
6279

6380
entriesAPI.push(entry.basename);
6481

@@ -72,7 +89,7 @@ const appendAdditionalEntriesAPI = entry => {
7289

7390
additionalEntries.forEach(entryName => {
7491
let additionalEntry = getComponentByName(entryName);
75-
additionalEntry = mergeParentAPI(additionalEntry);
92+
additionalEntry = calculateAPI(additionalEntry);
7693
entry.additionalDocs.push(additionalEntry);
7794
});
7895
}
@@ -120,10 +137,10 @@ const generateSamplePage = entry => {
120137
}
121138

122139
const generateComponentAPI = entry => {
123-
// (1) merge parent API
124-
entry = mergeParentAPI(entry);
140+
// (1) calculate the API
141+
entry = calculateAPI(entry);
125142

126-
// (2) append additional API for children
143+
// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
127144
entry = appendAdditionalEntriesAPI(entry);
128145

129146
// (3) generate sample page

‎lib/documentation/templates/api-css-variables-section.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
template: `
3+
{{#if cssVariables}}
4+
<h3 class="comment-api-title" >CSS variables</h3>
5+
<p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
6+
7+
<div class="small-space-top api-table">
8+
<div class="head api-table-header-roll">
9+
<div class="cell api-table-header-cell">Name</div>
10+
<div class="cell api-table-header-cell">Description</div>
11+
</div>
12+
13+
{{#each cssVariables}}
14+
<div class="row {{checkEven @index}}">
15+
<div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
16+
<div class="cell api-table-content-cell api-table-content-cell-description">
17+
{{{this.description}}}
18+
</div>
19+
</div>
20+
{{/each}}
21+
22+
</div>
23+
{{/if}}`
24+
};

‎lib/documentation/templates/template.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = {
99
{{> slots this}}
1010
{{> events this}}
1111
{{> methods this}}
12+
{{> cssVariables this}}
1213
</section>
1314
</section>
1415
</div>
@@ -21,7 +22,8 @@ module.exports = {
2122
<section class="component-api space-top">
2223
{{> properties this}}
2324
{{> slots this}}
24-
{{> events this}}
25+
{{> events this}}
26+
{{> cssVariables this}}
2527
</section>
2628
</section>
2729
</div>

‎packages/main/docs/themes/css-vars.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"GroupHeaderListItem": [
3+
{
4+
"name": "--ui5-group-header-listitem-background-color",
5+
"description": "Defines the <code>ui5-li-groupheader</code> background color"
6+
}
7+
],
8+
"ListItem": [
9+
{
10+
"name": "--ui5-listitem-background-color",
11+
"description": "Defines the<code>ui5-li</code> background color"
12+
}
13+
],
14+
"Panel": [
15+
{
16+
"name": "--ui5-panel-background-color",
17+
"description": "Defines the <code>ui5-panel</code> background color"
18+
},
19+
{
20+
"name": "--ui5-panel-bottom-border-color",
21+
"description": "Defines the <code>ui5-panel</code> bottom border color"
22+
}
23+
]
24+
}

‎packages/main/src/themes/GroupHeaderListItem.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.sapMLIB.sapMGHLI {
22
height: 3rem;
33
color: var(--sapUiListTableGroupHeaderTextColor);
4-
background: var(--_ui5_group_header_listitem_background_color);
4+
background: var(--ui5-group-header-listitem-background-color);
55
padding-top: 1rem;
66
font-size: var(--sapMFontHeader6Size);
77
font-weight: var(--sapUiFontHeaderWeight);

‎packages/main/src/themes/ListItemBase.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ ui5-li .sap-phone .sapMLIB {
2121
height: 3rem;
2222
width: 100%;
2323
padding: 0 1rem 0 1rem;
24-
background: var(--_ui5_listitem_background_color);
24+
background: var(--ui5-listitem-background-color);
2525
box-sizing: border-box;
2626
}
2727

‎packages/main/src/themes/Panel.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ ui5-panel {
1212
overflow: hidden;
1313
box-sizing: border-box;
1414
position: relative;
15-
background-color: var(--_ui5_panel_background_color);
15+
background-color: var(--ui5-panel-background-color);
1616
}
1717

1818
.sapMPanel > header {
@@ -77,7 +77,7 @@ ui5-panel {
7777
box-sizing: border-box;
7878
overflow: auto;
7979
white-space: normal;
80-
border-bottom: 1px solid var(--_ui5_panel_bottom_border_color);
80+
border-bottom: 1px solid var(--ui5-panel-bottom-border-color);
8181
}
8282

8383
.sapMPanelContent:focus {
@@ -87,7 +87,7 @@ ui5-panel {
8787
.sapMPanelWrappingDiv,
8888
.sapMPanelWrappingDivTb {
8989
position: relative;
90-
background-color: var(--_ui5_panel_background_color);
90+
background-color: var(--ui5-panel-background-color);
9191
}
9292

9393
.sapMPanelWrappingDiv {

‎packages/main/src/themes/base/GroupHeaderListItem-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
:root {
2-
--_ui5_group_header_listitem_background_color: var(--sapUiListGroupHeaderBackground);
2+
--ui5-group-header-listitem-background-color: var(--sapUiListGroupHeaderBackground);
33
}

‎packages/main/src/themes/base/ListItemBase-parameters.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
:root {
2+
--ui5-listitem-background-color: var(--sapUiListBackground);
23
--_ui5_listitembase_focus_width: 1px;
3-
--_ui5_listitem_background_color: var(--sapUiListBackground);
44
}

‎packages/main/src/themes/base/Panel-parameters.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2+
--ui5-panel-background-color: var(--sapUiGroupContentBackground);
3+
--ui5-panel-bottom-border-color: var(--sapUiGroupTitleBorderColor);
24
--_ui5_panel_focus_border: 1px dotted var(--sapUiContentFocusColor);
3-
--_ui5_panel_background_color: var(--sapUiGroupContentBackground);
4-
--_ui5_panel_bottom_border_color: var(--sapUiGroupTitleBorderColor);
55
}

0 commit comments

Comments
 (0)