Skip to content

Commit 24dd42b

Browse files
TeodorTaushanovTeodorTaushanov
authored
fix(ui5-tag): fix styling issues (SAP#9305)
fix(ui5-tag): fix styling issues
1 parent 33ecc8e commit 24dd42b

File tree

8 files changed

+22
-87
lines changed

8 files changed

+22
-87
lines changed

‎packages/fiori/test/pages/uploadCollectionScript.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
function createUCI(file) {
39-
var uci = document.createElement("ui5-upload-collection-item");
39+
var uci = document.createElement("ui5-upload-collection-item"),
4040
description = document.createTextNode("Last modified: " + file.lastModifiedDate + ", size: " + file.size);
4141

4242
uci.appendChild(createThumbnail(file.name));
@@ -107,8 +107,8 @@
107107
var files = event.dataTransfer.files;
108108

109109
for (var i = 0; i < files.length; i++) {
110-
uci = createUCI(files[i]);
111-
document.getElementById("uploadCollectionDnD").appendChild(uci)
110+
var uci = createUCI(files[i]);
111+
document.getElementById("uploadCollectionDnD").appendChild(uci);
112112
}
113113
});
114114

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

Lines changed: 5 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -82,78 +82,6 @@
8282
align-self: auto;
8383
}
8484

85-
/* Set3 (BTP) Design Type */
86-
87-
/* Scheme 1 */
88-
:host([design="Set3"]) .ui5-tag-root {
89-
background-color: var(--ui5-tag-color-scheme-1-background);
90-
border-color: var(--ui5-tag-color-scheme-1-border);
91-
color: var(--ui5-tag-color-scheme-1-color);
92-
}
93-
94-
/* Scheme 2 */
95-
:host([design="Set3"][color-scheme="2"]) .ui5-tag-root {
96-
background-color: var(--ui5-tag-color-scheme-2-background);
97-
border-color: var(--ui5-tag-color-scheme-2-border);
98-
color: var(--ui5-tag-color-scheme-2-color);
99-
}
100-
101-
/* Scheme 3 */
102-
:host([design="Set3"][color-scheme="3"]) .ui5-tag-root {
103-
background-color: var(--ui5-tag-color-scheme-3-background);
104-
border-color: var(--ui5-tag-color-scheme-3-border);
105-
color: var(--ui5-tag-color-scheme-3-color);
106-
}
107-
108-
/* Scheme 4 */
109-
:host([design="Set3"][color-scheme="4"]) .ui5-tag-root {
110-
background-color: var(--ui5-tag-color-scheme-4-background);
111-
border-color: var(--ui5-tag-color-scheme-4-border);
112-
color: var(--ui5-tag-color-scheme-4-color);
113-
}
114-
115-
/* Scheme 5 */
116-
:host([design="Set3"][color-scheme="5"]) .ui5-tag-root {
117-
background-color: var(--ui5-tag-color-scheme-5-background);
118-
border-color: var(--ui5-tag-color-scheme-5-border);
119-
color: var(--ui5-tag-color-scheme-5-color);
120-
}
121-
122-
/* Scheme 6 */
123-
:host([design="Set3"][color-scheme="6"]) .ui5-tag-root {
124-
background-color: var(--ui5-tag-color-scheme-6-background);
125-
border-color: var(--ui5-tag-color-scheme-6-border);
126-
color: var(--ui5-tag-color-scheme-6-color);
127-
}
128-
129-
/* Scheme 7 */
130-
:host([design="Set3"][color-scheme="7"]) .ui5-tag-root {
131-
background-color: var(--ui5-tag-color-scheme-7-background);
132-
border-color: var(--ui5-tag-color-scheme-7-border);
133-
color: var(--ui5-tag-color-scheme-7-color);
134-
}
135-
136-
/* Scheme 8 */
137-
:host([design="Set3"][color-scheme="8"]) .ui5-tag-root {
138-
background-color: var(--ui5-tag-color-scheme-8-background);
139-
border-color: var(--ui5-tag-color-scheme-8-border);
140-
color: var(--ui5-tag-color-scheme-8-color);
141-
}
142-
143-
/* Scheme 9 */
144-
:host([design="Set3"][color-scheme="9"]) .ui5-tag-root {
145-
background-color: var(--ui5-tag-color-scheme-9-background);
146-
border-color: var(--ui5-tag-color-scheme-9-border);
147-
color: var(--ui5-tag-color-scheme-9-color);
148-
}
149-
150-
/* Scheme 10 */
151-
:host([design="Set3"][color-scheme="10"]) .ui5-tag-root {
152-
background-color: var(--ui5-tag-color-scheme-10-background);
153-
border-color: var(--ui5-tag-color-scheme-10-border);
154-
color: var(--ui5-tag-color-scheme-10-color);
155-
}
156-
15785
/* Value State Design Types */
15886
.ui5-tag-root {
15987
background-color: var(--sapNeutralBackground);
@@ -235,7 +163,7 @@
235163
background-color: var(--sapButton_Information_Background);
236164
border-color: var(--sapButton_Information_BorderColor);
237165
color: var(--sapButton_Information_TextColor);
238-
text-shadow: var(--ui5-tag-text-shadow);
166+
text-shadow: var(--ui5-tag-information-text-shadow);
239167
}
240168

241169
:host([interactive][design="Information"]) .ui5-tag-root:hover {
@@ -256,7 +184,8 @@
256184
text-shadow: var(--ui5-tag-contrast-text-shadow);
257185
}
258186

259-
:host([design="Set1"]) .ui5-tag-root {
187+
:host([design="Set1"]) .ui5-tag-root,
188+
:host([interactive][design="Set1"]) .ui5-tag-root {
260189
background-color: var(--sapIndicationColor_1_Background);
261190
border-color: var(--sapIndicationColor_1_BorderColor);
262191
color: var(--sapIndicationColor_1_TextColor);
@@ -422,7 +351,8 @@
422351
text-shadow: var(--ui5-tag-text-shadow);
423352
}
424353

425-
:host([design="Set2"]) .ui5-tag-root {
354+
:host([design="Set2"]) .ui5-tag-root,
355+
:host([interactive][design="Set2"]) .ui5-tag-root{
426356
background-color: var(--ui5-tag-set2-color-scheme-1-background);
427357
border-color: var(--ui5-tag-set2-color-scheme-1-border);
428358
color: var(--ui5-tag-set2-color-scheme-1-color);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
--ui5-tag-text-shadow: var(--sapContent_TextShadow);
1414
--ui5-tag-contrast-text-shadow: var(--sapContent_ContrastTextShadow);
15+
--ui5-tag-information-text-shadow: var(--ui5-tag-text-shadow);
1516

1617
/* set 2 */
1718

@@ -114,7 +115,7 @@
114115
--_ui5-tag-min-width_size_l: 1.75rem;
115116
--_ui5-tag-font-size_size_l: 1.25rem;
116117
--_ui5-tag-icon_min_width_size_l: 1.25rem;
117-
--_ui5-tag-icon_min_height_size_l:1.25rem
118+
--_ui5-tag-icon_min_height_size_l:1.25rem;
118119
--_ui5-tag-icon_height_size_l: 1.25rem;
119120
--_ui5-tag-text_padding_size_l: 0.125rem 0.25rem;
120121
--_ui5-tag-text-height_size_l: 1.5rem;

‎packages/main/src/themes/sap_fiori_3/Tag-parameters.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/Tag-parameters.css";
2+
3+
:root {
4+
--ui5-tag-information-text-shadow: var(--sapContent_ContrastTextShadow);
5+
}

‎packages/main/src/themes/sap_fiori_3/parameters-bundle.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "./Avatar-parameters.css";
22
@import "../base/AvatarGroup-parameters.css";
3-
@import "../base/Tag-parameters.css";
3+
@import "./Tag-parameters.css";
44
@import "../base/Bar-parameters.css";
55
@import "../base/BrowserScrollbar-parameters.css";
66
@import "../base/BusyIndicator-parameters.css";

‎packages/main/test/pages/Dialog.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,6 @@
644644
});
645645

646646
cbScrollable.addEventListener("ui5-change", function () {
647-
console.error("change");
648647
scrollHelper.style.display = cbScrollable.checked ? "block" : "none";
649648
});
650649

@@ -724,8 +723,8 @@
724723
});
725724

726725
window["modals-open"].addEventListener("click", function (event) {
727-
op.opener = event.target;
728-
op.open = true;
726+
pop.opener = event.target;
727+
pop.open = true;
729728
});
730729

731730
dangerDialogBtn.addEventListener('click', function (event) {

‎packages/main/test/pages/Tag.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
</script>
1616
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
1717
<link rel="stylesheet" type="text/css" href="./styles/Tag.css">
18+
<script src="./Tag.js"></script>
1819
</head>
1920

2021
<body class="tag1auto">
2122
<ui5-title level="H1">Tags</ui5-title>
22-
<ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
23+
<ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
2324
<section class="group gaps">
2425
<ui5-title level="H2">Custom Tags</ui5-title>
2526
<ui5-tag class="width200px" wrapping-type="None">
@@ -174,6 +175,5 @@
174175
</ui5-tag>
175176
</div>
176177
</section>
177-
<script src="Tag.js"></script>
178178
</body>
179179
</html>

‎packages/main/test/pages/Tag.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(function initializeTags() {
1+
document.addEventListener("DOMContentLoaded", function () {
22
const colorSchemes = [
33
"1",
44
"2",
@@ -53,4 +53,4 @@
5353

5454
set2Content.insertAdjacentHTML("beforeend", "<br><br>");
5555
});
56-
})();
56+
});

0 commit comments

Comments
 (0)