Skip to content

Commit

Permalink
fix(ui5-label): adjust colon margins (#3897)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LidiyaGeorgieva
LidiyaGeorgieva authored Sep 15, 2021
1 parent 44ab3f5 commit ccca671
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 7 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/Label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const metadata = {
},

/**
* Defines whether semi-colon is added to the component text.
* Defines whether colon is added to the component text.
* <br><br>
* <b>Note:</b> Usually used in forms.
* @type {boolean}
Expand Down
9 changes: 6 additions & 3 deletions packages/main/src/themes/Label.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,11 @@
:host(:not([wrapping-type="Normal"])) .ui5-label-root {
display: inline-block;
white-space: nowrap;
overflow: hidden;
}

bdi {
content: "";
padding-right: 0.15625rem;
padding-right: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
}

:host(:not([wrapping-type="Normal"])) .ui5-label-text-wrapper {
Expand All @@ -53,7 +52,11 @@ bdi {
}

:host(:not([wrapping-type="Normal"])[show-colon]) .ui5-label-text-wrapper {
max-width: calc(100% - .2rem);
max-width: calc(100% - 0.125rem);
}

:host([show-colon]) .ui5-label-required-colon {
margin-left: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
}

:host([show-colon]) .ui5-label-required-colon:before {
Expand Down
37 changes: 34 additions & 3 deletions packages/main/test/pages/Label.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<title>Label</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">

<script data-ui5-config type="application/json">
{
Expand Down Expand Up @@ -39,14 +38,14 @@
<h2>Basic labels</h2>
<ui5-label id="basic-label">Basic Label</ui5-label>
<ui5-label show-colon id="basic-label2">Basic Label</ui5-label>
<ui5-label required id="basic-label2">Basic Label</ui5-label>
<ui5-label required id="basic-label3">Basic Label</ui5-label>
<ui5-label show-colon required id="basic-label3">Basic Label</ui5-label>

<h2>Basic long labels</h2>
<ui5-label id="basic-label4">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
<ui5-label show-colon id="basic-label5">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
<ui5-label required id="basic-label6">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
<ui5-label show-colon required id="basic-label6">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
<ui5-label show-colon required id="basic-label7">Start The quick brown fox jumps over the lazy sheep End</ui5-label>

<h2>Basic long labels with predefined width</h2>
<ui5-label style="width: 100px" id="basic-label7">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
Expand Down Expand Up @@ -127,6 +126,38 @@ <h2>Label in CustomListItem</h2>
</ui5-li-custom>
</ui5-list>
</section>

<section class="group" style="width: 200px">
<h2>Italic Label</h2>
<ui5-label style="font-style: italic"> Short labelH</ui5-label>
<ui5-label style="font-style: italic"> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label required style="font-style: italic"> Short labelH</ui5-label>
<ui5-label required style="font-style: italic"> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label show-colon style="font-style: italic"> Short labelH</ui5-label>
<ui5-label show-colon style="font-style: italic"> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label required show-colon style="font-style: italic"> Short labelH</ui5-label>
<ui5-label required show-colon style="font-style: italic"> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label wrapping-type="Normal" style="font-style: italic"> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" required style="font-style: italic"> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" show-colon style="font-style: italic"> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" required show-colon style="font-style: italic"> Long label - Reprehenderit amet cillum temporH</ui5-label>
</section>

<section class="group" style="width: 200px">
<h2>Standard Label</h2>
<ui5-label> Short labelH</ui5-label>
<ui5-label> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label required> Short labelH</ui5-label>
<ui5-label required> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label show-colon> Short labelH</ui5-label>
<ui5-label show-colon> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label required show-colon> Short labelH</ui5-label>
<ui5-label required show-colon> Long label - Reprehenderit amet cillum tempor</ui5-label>
<ui5-label wrapping-type="Normal"> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" required> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" show-colon> Long label - Reprehenderit amet cillum temporH</ui5-label>
<ui5-label wrapping-type="Normal" required show-colon> Long label - Reprehenderit amet cillum temporH</ui5-label>
</section>
</body>

</html>

0 comments on commit ccca671

Please sign in to comment.