Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-tag): wrap text by default #9126

Merged
merged 6 commits into from
Jun 12, 2024
Merged

refactor(ui5-tag): wrap text by default #9126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8bcf73a
refactor(ui5-tag): wrap text by default
LidiyaGeorgieva Jun 5, 2024
a78fec6
refactor(ui5-tag): fix test texsts
LidiyaGeorgieva Jun 5, 2024
1af09e5
refactor(ui5-tag): fix height of the tags to be the same
LidiyaGeorgieva Jun 7, 2024
fef936f
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
LidiyaGeorgieva Jun 11, 2024
30c9d68
refactor(ui5-tag): merge adjustments and code review comments
LidiyaGeorgieva Jun 11, 2024
f7e63e8
refactor(ui5-tag): fix height
LidiyaGeorgieva Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/fiori/src/NotificationListItem.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="{{contentClasses}}">

{{#if hasImportance}}
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2">
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
<ui5-icon name="high-priority" slot="icon"></ui5-icon>
{{importanceText}}
</ui5-tag>
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Tag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,11 @@ class Tag extends UI5Element {
*
* **Note:** For option "Normal" the text will wrap and the
* words will not be broken based on hyphenation.
* @default "None"
* @default "Normal"
* @public
* @since 1.22.0
*/
@property({ type: WrappingType, defaultValue: WrappingType.None })
@property({ type: WrappingType, defaultValue: WrappingType.Normal })
wrappingType!: `${WrappingType}`;

/**
Expand Down
20 changes: 10 additions & 10 deletions packages/main/src/themes/Tag.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
min-width: 1.125em;
max-width: 100%;
min-height: var(--_ui5-tag-height);
height: var(--_ui5-tag-height);
height: auto;
box-sizing: border-box;
padding: 0 0.25rem;
border: 0.0625rem solid;
border-radius: var(--sapButton_BorderCornerRadius);
white-space: nowrap;
white-space: normal;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
Expand All @@ -46,9 +46,9 @@
outline-offset: 1px;
}

:host([wrapping-type="Normal"]) .ui5-tag-root {
white-space: normal;
height: auto;
:host([wrapping-type="None"]) .ui5-tag-root {
white-space: nowrap;
height: var(--_ui5-tag-height);
}

:host([_icon-only]) .ui5-tag-root {
Expand All @@ -71,15 +71,15 @@
::slotted([ui5-icon]) {
width: var(--_ui5-tag-icon-width);
min-width: var(--_ui5-tag-icon-width);
height: var(--_ui5-tag-height);
min-height: var(--_ui5-tag-height);
height: calc(var(--_ui5-tag-height) - 0.125rem); /* remove width of the border since tag root is with box-sizing:border-box*/
color: inherit;
pointer-events: none;
align-self: flex-start;
}

:host([wrapping-type="Normal"]) [ui5-icon],
:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) {
align-self: flex-start;
:host([wrapping-type="None"]) [ui5-icon],
:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
align-self: auto;
}

/* Set3 (BTP) Design Type */
Expand Down
62 changes: 34 additions & 28 deletions packages/main/test/pages/Tag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,14 @@
</script>
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
<link rel="stylesheet" type="text/css" href="./styles/Tag.css">
<script src="Tag.js"></script>
</head>

<body class="tag1auto" onload="initializeTags()">
<body class="tag1auto">
<ui5-title level="H1">Tags</ui5-title>
<ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
<section class="group gaps">
<ui5-title level="H2">Custom Tags</ui5-title>
<ui5-tag class="width200px">
<ui5-tag class="width200px" wrapping-type="None">
Default color truncate truncate truncate
</ui5-tag>
<br>
Expand All @@ -39,7 +38,7 @@
Interactive
</ui5-tag>
<br>
<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3">
<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3" wrapping-type="None">
<ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
</ui5-tag>
<br>
Expand Down Expand Up @@ -78,30 +77,36 @@
<ui5-tag design="Set1" color-scheme="6">
<ui5-icon name="pending" slot="icon"></ui5-icon>Pending
</ui5-tag>
<ui5-tag design="Set1" wrapping-type="Normal" color-scheme="6">
<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="true"
<ui5-tag design="Set1" color-scheme="6">
<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="Normal"
</ui5-tag>
<ui5-tag>
wrapping-type="true"
wrapping-type="Normal"
</ui5-tag>
<ui5-tag id="tagWithWrappingDefault" design="Set2" class="width200px" color-scheme="6">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
</ui5-tag>
<ui5-tag id="tagWithWrappingNormal" design="Set2" class="width200px" color-scheme="6">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
</ui5-tag>
<ui5-tag design="Set1" wrapping-type="Normal" class="width200px" color-scheme="6">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="true"
<ui5-tag id="tagWithWrappingNone" design="Set2" wrapping-type="None" class="width200px" color-scheme="6">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="None"
</ui5-tag>
<ui5-tag wrapping-type="Normal">
<ui5-tag>
<ui5-icon name="email-read" slot="icon"></ui5-icon>
</ui5-tag>
</section>
<section class="group gaps">
<ui5-title level="H2">Large Tags</ui5-title>
<ui5-tag id="tagIconOnly" size="L" design="Negative">
<ui5-tag id="tagIconOnly" size="L" design="Negative" wrapping-type="None">
</ui5-tag>
<ui5-tag design="Neutral" size="L">
<ui5-tag design="Neutral" size="L" wrapping-type="None">
Planned
</ui5-tag>
<ui5-tag hide-state-icon design="Neutral" size="L">
<ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
Planned
</ui5-tag>
<ui5-tag design="Set1" color-scheme="3" size="L">
<ui5-tag design="Set1" color-scheme="3" size="L" wrapping-type="None">
<ui5-icon name="error" slot="icon"></ui5-icon>
</ui5-tag>
</section>
Expand All @@ -118,56 +123,57 @@
<section class="group gaps">
<ui5-title level="H2">Value states</ui5-title>
<div>
<ui5-tag design="Neutral">
<ui5-tag design="Neutral" wrapping-type="None">
Neutral
</ui5-tag>
<ui5-tag design="Information">
<ui5-tag design="Information" wrapping-type="None">
Information
</ui5-tag>
<ui5-tag design="Positive">
<ui5-tag design="Positive" wrapping-type="None">
Positive
</ui5-tag>
<ui5-tag design="Negative">
<ui5-tag design="Negative" wrapping-type="None">
Negative
</ui5-tag>
<ui5-tag design="Critical">
<ui5-tag design="Critical" wrapping-type="None">
Critical
</ui5-tag>
<br />
<br />
<ui5-tag hide-state-icon design="Neutral">
<ui5-tag hide-state-icon design="Neutral" wrapping-type="None">
Neutral - No icon
</ui5-tag>
<ui5-tag hide-state-icon design="Information">
<ui5-tag hide-state-icon design="Information" wrapping-type="None">
Information - No icon
</ui5-tag>
<ui5-tag hide-state-icon design="Positive">
<ui5-tag hide-state-icon design="Positive" wrapping-type="None">
Positive - No icon
</ui5-tag>
<ui5-tag hide-state-icon design="Negative">
<ui5-tag hide-state-icon design="Negative" wrapping-type="None">
Negative - No icon
</ui5-tag>
<ui5-tag hide-state-icon design="Critical">
<ui5-tag hide-state-icon design="Critical" wrapping-type="None">
Critical - No icon
</ui5-tag>
<br />
<br />
<ui5-tag design="Neutral">
<ui5-tag design="Neutral" wrapping-type="None">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Neutral - Custom icon
</ui5-tag>
<ui5-tag design="Information">
<ui5-tag design="Information" wrapping-type="None">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Information - Custom icon
</ui5-tag>
<ui5-tag design="Positive">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Positive - Custom icon
</ui5-tag>
<ui5-tag design="Negative">
<ui5-tag design="Negative" wrapping-type="None">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Negative - Custom icon
</ui5-tag>
<ui5-tag design="Critical">
<ui5-tag design="Critical" wrapping-type="None">
<ui5-icon name="email-read" slot="icon"></ui5-icon>Critical - Custom icon
</ui5-tag>
</div>
</section>
<script src="Tag.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions packages/main/test/pages/Tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function initializeTags() {
(function initializeTags() {
const colorSchemes = [
"1",
"2",
Expand Down Expand Up @@ -53,4 +53,4 @@ function initializeTags() {

set2Content.insertAdjacentHTML("beforeend", "<br><br>");
});
}
})();
24 changes: 24 additions & 0 deletions packages/main/test/specs/Tag.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,27 @@ describe("Tag rendering", async () => {
assert.notOk(await tagLabel.isExisting(), "tag label tag shouldn't be rendered.");
});
});

describe("Wrapping", async () => {
before(async () => {
await browser.url(`test/pages/Tag.html`);
});

it("tests if tag text wraps - default wrappingType", async () => {
const tag = await browser.$("#tagWithWrappingDefault").shadow$(".ui5-tag-root");

assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
});

it("tests if tag text wraps - wrappingType Normal", async () => {
const tag = await browser.$("#tagWithWrappingNormal").shadow$(".ui5-tag-root");

assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
});

it("tests if tag text wraps - wrappingType None", async () => {
const tag = await browser.$("#tagWithWrappingNone").shadow$(".ui5-tag-root");

assert.strictEqual((await tag.getCSSProperty("white-space")).value, "nowrap", "tag label is truncated");
});
});
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<p slot="subheading" class="text">PO-48865</p>
<p slot="snappedSubheading" class="text">PO-48865</p>

<ui5-tag color-scheme="7">Special 157.4M EUR</ui5-tag>
<ui5-tag color-scheme="7" wrapping-type="None">Special 157.4M EUR</ui5-tag>

<ui5-toolbar id="actionsToolbar" slot="actionsBar">
<ui5-toolbar-button text="Create"></ui5-toolbar-button>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/Avatar/WithBadge/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<!-- playground-fold-end -->

<ui5-avatar initials="AB">
<ui5-tag slot="badge">
<ui5-tag slot="badge" wrapping-type="None">
<ui5-icon slot="icon" name="accelerated"></ui5-icon>
</ui5-tag>
</ui5-avatar>
Expand Down
14 changes: 7 additions & 7 deletions packages/website/docs/_samples/main/Tag/Designs/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,25 @@
<!-- playground-fold-end -->

<div style="display: flex; flex-direction: column; align-items: start; gap: 1rem">
<ui5-tag design="Neutral">
<ui5-tag design="Neutral" wrapping-type="None">
Neutral
</ui5-tag>
<ui5-tag design="Information">
<ui5-tag design="Information" wrapping-type="None">
Information
</ui5-tag>
<ui5-tag design="Positive">
<ui5-tag design="Positive" wrapping-type="None">
Positive
</ui5-tag>
<ui5-tag design="Negative">
<ui5-tag design="Negative" wrapping-type="None">
Negative
</ui5-tag>
<ui5-tag design="Critical">
<ui5-tag design="Critical" wrapping-type="None">
Critical
</ui5-tag>
<ui5-tag design="Set1">
<ui5-tag design="Set1" wrapping-type="None">
Set1
</ui5-tag>
<ui5-tag design="Set2">
<ui5-tag design="Set2" wrapping-type="None">
Set2
</ui5-tag>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/Tag/Interactive/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body style="background-color: var(--sapBackgroundColor)">
<!-- playground-fold-end -->

<ui5-tag design="Positive" interactive>
<ui5-tag design="Positive" interactive wrapping-type="None">
Success
</ui5-tag>
<!-- playground-fold -->
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/main/Tag/Size/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<!-- playground-fold-end -->

<div style="display: flex; flex-direction: row; align-items: start; gap: 1rem">
<ui5-tag hide-state-icon design="Neutral" size="L">
<ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
Planned
</ui5-tag>
<ui5-tag design="Negative" size="L"></ui5-tag>
<ui5-tag design="Negative" size="L" wrapping-type="None"></ui5-tag>
</div>
<!-- playground-fold -->
<script type="module" src="main.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<ui5-tag wrapping-type="None" style="width: 200px;">
This would truncate as it is too long
</ui5-tag>
<ui5-tag wrapping-type="Normal" style="width: 200px;">
<ui5-tag style="width: 200px;">
This would wrap as it is too long
</ui5-tag>
</div>
Expand Down