Skip to content

Commit ae95a8d

Browse files
kskondovilhan007
kskondov
authored and
ilhan007
committed
feat(ui5-label): add showColon property (#965)
- A new property "showColon" is introduced for proper positioning and avoiding truncation of the label 's "colon" - The asterisk marking the ui5-label as required is now positioned to the right side of the label text.
1 parent 8cd2a8b commit ae95a8d

File tree

7 files changed

+86
-42
lines changed

7 files changed

+86
-42
lines changed

‎packages/main/src/Label.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
@click={{_onclick}}
44
for="{{for}}"
55
>
6+
<span class="ui5-label-text-wrapper">
67
<bdi id="{{_id}}-bdi">
78
<slot></slot>
89
</bdi>
10+
</span>
11+
<span class="ui5-label-required-colon"></span>
912
</label>

‎packages/main/src/Label.js

+13
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,19 @@ const metadata = {
4040
type: Boolean,
4141
},
4242

43+
/**
44+
* Defines whether semi-colon is added to the <code>ui5-label</code> text.
45+
* <br><br>
46+
* <b>Note:</b> Usually used in forms.
47+
* @type {boolean}
48+
* @defaultvalue false
49+
* @public
50+
*/
51+
52+
showColon: {
53+
type: Boolean,
54+
},
55+
4356
/**
4457
* Defines the labeled input by providing its ID.
4558
* <br><br>

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

+29-19
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,48 @@
11
:host(:not([hidden])) {
22
display: inline-flex;
33
}
4-
54
:host {
65
max-width: 100%;
76
color: var(--sapUiContentLabelColor);
87
font-family: var(--sapUiFontFamily);
98
font-size: var(--sapMFontMediumSize);
109
font-weight: normal;
1110
cursor: text;
11+
}
12+
:host(:not([wrap])) .ui5-label-root {
13+
font-weight: inherit;
14+
display: inline-block;
15+
white-space: nowrap;
16+
cursor: inherit;
17+
overflow: hidden;
1218
}
13-
14-
:host([wrap]) .ui5-label-root {
15-
white-space: normal;
16-
line-height: 1.4rem;
19+
:host(:not([wrap])) .ui5-label-text-wrapper {
20+
text-overflow: ellipsis;
21+
overflow: hidden;
22+
display: inline-block;
23+
vertical-align: top;
24+
max-width: 100%;
1725
}
1826

19-
:host([required]) .ui5-label-root:before {
20-
position: relative;
21-
height: 100%;
22-
display: inline-flex;
23-
align-items: flex-start;
27+
:host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper {
28+
max-width: calc(100%-0.725rem);
29+
}
30+
:host(:not([wrap])[required]) .ui5-label-text-wrapper {
31+
max-width: calc(100%-0.475rem);
32+
}
33+
:host(:not([wrap])[show-colon]) .ui5-label-text-wrapper {
34+
max-width: calc(100%-0.3rem);
35+
}
36+
:host([show-colon]) .ui5-label-required-colon:before {
37+
content: ":";
38+
}
39+
:host([required]) .ui5-label-required-colon:after {
2440
content:"*";
2541
color: var(--sapUiFieldRequiredColor);
2642
font-size: 1.25rem;
2743
font-weight: bold;
44+
position: relative;
45+
vertical-align: middle;
46+
line-height: 0;
2847
}
2948

30-
.ui5-label-root {
31-
display: inline-block;
32-
width: 100%;
33-
font-weight: inherit;
34-
text-overflow: ellipsis;
35-
overflow: hidden;
36-
white-space: nowrap;
37-
cursor: inherit;
38-
}

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

+16-8
Original file line numberDiff line numberDiff line change
@@ -35,48 +35,56 @@
3535

3636
<body>
3737
<section class="group">
38-
<h2>Required label</h2>
38+
<h2>Required labels</h2>
3939
<ui5-label id="required-label" required>Required</ui5-label><span>native span</span>
40+
<ui5-label id="required-label-2" required show-colon>Required semi-colon</ui5-label><span>native span</span>
41+
<ui5-label id="required-label-3" required show-colon wrap>Required semi-colon wrapped</ui5-label><span>native span</span>
4042
</section>
4143

4244
<section class="group">
4345
<h2>Wrapping label</h2>
44-
<ui5-label style="width: 100px" id="wrapping-label" wrap>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
45-
<ui5-label style="width: 100px" id="truncated-label">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
46+
<ui5-label style="width: 200px" id="wrapping-label-1">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
47+
<ui5-label style="width: 200px" id="wrapping-label-2" show-colon>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
48+
<ui5-label style="width: 200px" id="wrapping-label" wrap>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
49+
<ui5-label style="width: 200px" id="wrapping-label-3" wrap required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
50+
<ui5-label style="width: 100px" id="truncated-label" required >Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
51+
<ui5-label style="width: 100px" id="truncated-label-2" show-colon required >Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
52+
<ui5-label style="width: 100px" id="truncated-label-3" show-colon required wrap >Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
53+
4654
</section>
4755

4856
<section class="group">
4957
<h2>label + input</h2>
5058
<div style="display: flex; align-items: center">
51-
<ui5-label id="label-for-ui5-input" for="form-ui5-input" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>:
59+
<ui5-label id="label-for-ui5-input" for="form-ui5-input" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
5260
<ui5-input style="width: 320px; margin-left: 16px;" id="form-ui5-input"></ui5-input>
5361
</div>
5462

5563
<br>
5664

5765
<div style="display: flex; align-items: center">
58-
<ui5-label id="label-for-native-input" for="native-input" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>:
66+
<ui5-label id="label-for-native-input" for="native-input" style="width: 100px" show-colon wrap required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
5967
<input style="width: 320px; margin-left: 16px;" id="native-input"></input>
6068
</div>
6169

6270
<br>
6371

6472
<div style="display: flex; align-items: center">
65-
<ui5-label id="label-for-ui5-textarea" for="ui5-textarea" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>:
73+
<ui5-label id="label-for-ui5-textarea" for="ui5-textarea" style="width: 100px" show-colon>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
6674
<ui5-textarea style="width: 320px; margin-left: 16px;" id="ui5-textarea"></ui5-textarea>
6775
</div>
6876

6977
<br>
7078

7179
<div style="display: flex; align-items: center">
72-
<ui5-label id="label-for-native-textarea" for="native-textarea" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>:
80+
<ui5-label id="label-for-native-textarea" for="native-textarea" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
7381
<textarea style="width: 320px; margin-left: 16px;" id="native-textarea"></textarea>
7482
</div>
7583

7684
<br>
7785

7886
<div style="display: flex; align-items: center">
79-
<ui5-label id="label-for-ui5-datepicker" for="ui5-datepicker" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>:
87+
<ui5-label id="label-for-ui5-datepicker" for="ui5-datepicker" style="width: 100px" show-colon required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
8088
<ui5-datepicker style="width: 320px; margin-left: 16px;" id="ui5-datepicker"></ui5-datepicker>
8189
</div>
8290
</section>

‎packages/main/test/qunit/Label.qunit.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ TestHelper.ready(function() {
55
var fixture = window.document.querySelector("#qunit-fixture");
66

77
var getActualText = function(el) {
8-
return el.shadowRoot.querySelector('.ui5-label-root>bdi>slot').assignedNodes()[0].textContent;
8+
return el.shadowRoot.querySelector('.ui5-label-root>.ui5-label-text-wrapper>bdi>slot').assignedNodes()[0].textContent;
99
};
1010

1111
QUnit.module("Rendering", function (hooks) {

‎packages/main/test/samples/Label.sample.html

+22-12
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,16 @@ <h3>Required Label</h3>
2626
</xmp></pre>
2727
</section>
2828

29+
<section>
30+
<h3>Required Label With Colon</h3>
31+
<div class="snippet">
32+
<ui5-label required show-colon>Required Label</ui5-label>
33+
</div>
34+
<pre class="prettyprint lang-html"><xmp>
35+
<ui5-label required show-colon>Required Label</ui5-label>
36+
</xmp></pre>
37+
</section>
38+
2939
<section>
3040
<h3>Truncated Label</h3>
3141
<div class="snippet">
@@ -49,48 +59,48 @@ <h3>Wrapped Label</h3>
4959
<section>
5060
<h3>Label 'for'</h3>
5161
<div class="snippet" style="display: flex;flex-direction: column;">
52-
<ui5-label id="myLabel" for="myInput" required>First name</ui5-label>
62+
<ui5-label id="myLabel" for="myInput" required show-colon>First name</ui5-label>
5363
<ui5-input id="myInput" aria-required="true" aria-labelledby="myLabel" placeholder="Enter your name"></ui5-input>
5464
<br>
55-
<ui5-label id="myLabel2" for="myDP" required>Date of birth</ui5-label>
65+
<ui5-label id="myLabel2" for="myDP" required show-colon>Date of birth</ui5-label>
5666
<ui5-datepicker id="myDP" aria-labelledby="myLabel2" aria-required="true"></ui5-datepicker>
5767
<br>
58-
<ui5-label id="myLabel3" for="mySelect" required>Job</ui5-label>
68+
<ui5-label id="myLabel3" for="mySelect" required show-colon>Job</ui5-label>
5969
<ui5-select id="mySelect" aria-required="true" aria-labelledby="myLabel3">
6070
<ui5-option>Manager</ui5-option>
6171
<ui5-option>Sales</ui5-option>
6272
<ui5-option selected>Developer</ui5-option>
6373
</ui5-select>
6474
<br>
65-
<ui5-label id="myLabel4" for="myTextArea" required>Description label test</ui5-label>
75+
<ui5-label id="myLabel4" for="myTextArea" required show-colon>Description label test</ui5-label>
6676
<ui5-textarea id="myTextArea" aria-labelledby="myLabel4" aria-required="true" placeholder="Type as much text as you wish"></ui5-textarea>
6777
<br>
6878
<div style="display: flex; align-items: center;">
69-
<ui5-label for="myRB" required>Gender</ui5-label>
79+
<ui5-label for="myRB" required show-colon>Gender</ui5-label>
7080
<ui5-radiobutton id="myRB" group="a" text="Choice 1"></ui5-radiobutton>
7181
<ui5-radiobutton id="myRB2" group="a" selected text="Choice 2"></ui5-radiobutton>
7282
</div>
7383
<div style="display: flex; align-items: center;">
74-
<ui5-label for="myCB" required>Accept terms of use</ui5-label>
84+
<ui5-label for="myCB" required show-colon>Accept terms of use</ui5-label>
7585
<ui5-checkbox id="myCB"></ui5-checkbox>
7686
</div>
7787
<pre class="prettyprint lang-html"><xmp>
78-
<ui5-label id="myLabel" for="myInput" required>First name</ui5-label>
88+
<ui5-label id="myLabel" for="myInput" required show-colon>First name</ui5-label>
7989
<ui5-input id="myInput" aria-required="true" aria-labelledby="myLabel" placeholder="Enter your name"></ui5-input>
80-
<ui5-label id="myLabel2" for="myDP" required>Date of birth</ui5-label>
90+
<ui5-label id="myLabel2" for="myDP" required show-colon>Date of birth</ui5-label>
8191
<ui5-datepicker id="myDP" aria-labelledby="myLabel2" aria-required="true"></ui5-datepicker>
82-
<ui5-label id="myLabel3" for="mySelect" required>Job</ui5-label>
92+
<ui5-label id="myLabel3" for="mySelect" required show-colon>Job</ui5-label>
8393
<ui5-select id="mySelect" aria-required="true" aria-labelledby="myLabel3">
8494
<ui5-option>Manager</ui5-option>
8595
<ui5-option>Sales</ui5-option>
8696
<ui5-option selected>Developer</ui5-option>
8797
</ui5-select>
88-
<ui5-label id="myLabel4" for="myTextArea" required>Description label test</ui5-label>
98+
<ui5-label id="myLabel4" for="myTextArea" required show-colon>Description label test</ui5-label>
8999
<ui5-textarea id="myTextArea" aria-labelledby="myLabel4" aria-required="true" placeholder="Type as much text as you wish"></ui5-textarea>
90-
<ui5-label for="myRB" required>Gender</ui5-label>
100+
<ui5-label for="myRB" required show-colon>Gender</ui5-label>
91101
<ui5-radiobutton id="myRB" group="a" text="Choice 1"></ui5-radiobutton>
92102
<ui5-radiobutton id="myRB2" group="a" selected text="Choice 2"></ui5-radiobutton>
93-
<ui5-label for="myCB" required>Accept terms of use</ui5-label>
103+
<ui5-label for="myCB" required show-colon>Accept terms of use</ui5-label>
94104
<ui5-checkbox id="myCB"></ui5-checkbox>
95105
</xmp></pre>
96106
</section>

‎packages/main/test/specs/Label.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ describe("General API", () => {
55

66
it("should show required star", () => {
77
const requiredLabelContent = browser.execute(`
8-
return window.getComputedStyle(document.querySelector('#required-label').shadowRoot.querySelector(".ui5-label-root"), ':before').content;
8+
return window.getComputedStyle(document.querySelector('#required-label').shadowRoot.querySelector(".ui5-label-required-colon"), ':after').content;
99
`);
1010

11-
assert.strictEqual(requiredLabelContent, '"*"', "before's content should be *");
11+
assert.strictEqual(requiredLabelContent, '"*"', "after's content should be *");
1212
});
1313

1414
it("should wrap the text of the label", () => {

0 commit comments

Comments
 (0)