diff --git a/apps/components-e2e/src/app/app.routing.module.ts b/apps/components-e2e/src/app/app.routing.module.ts
index b334bfd56a..c8fa085234 100644
--- a/apps/components-e2e/src/app/app.routing.module.ts
+++ b/apps/components-e2e/src/app/app.routing.module.ts
@@ -152,6 +152,13 @@ export const routes: Routes = [
module => module.DtE2ETabsModule,
),
},
+ {
+ path: 'tag/tag-list',
+ loadChildren: () =>
+ import('../components/tag-list/tag-list.module').then(
+ module => module.DtE2ETagListModule,
+ ),
+ },
{
path: 'tile',
loadChildren: () =>
diff --git a/apps/components-e2e/src/components/tag-list/tag-list.e2e.ts b/apps/components-e2e/src/components/tag-list/tag-list.e2e.ts
new file mode 100644
index 0000000000..803d36a21c
--- /dev/null
+++ b/apps/components-e2e/src/components/tag-list/tag-list.e2e.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+import { waitForAngular } from '../../utils';
+
+const tagList = Selector('#tagList');
+
+fixture
+ .only('Tag List')
+ .page('http://localhost:4200/tag/tag-list')
+ .beforeEach(async (testController: TestController) => {
+ await testController.resizeWindow(1200, 800);
+ await waitForAngular();
+ });
+
+test("should not display '0 More...'", async (testController: TestController) => {
+ await testController.expect(tagList.textContent).notContains('0 More...');
+});
diff --git a/apps/components-e2e/src/components/tag-list/tag-list.html b/apps/components-e2e/src/components/tag-list/tag-list.html
new file mode 100644
index 0000000000..d477c56b0c
--- /dev/null
+++ b/apps/components-e2e/src/components/tag-list/tag-list.html
@@ -0,0 +1,11 @@
+
+ Alpha
+ Beta
+ Gamma
+ Delta
+ Epsilon
+ Zeta
+ Eta
+ Theta
+
+
diff --git a/apps/components-e2e/src/components/tag-list/tag-list.module.ts b/apps/components-e2e/src/components/tag-list/tag-list.module.ts
new file mode 100644
index 0000000000..2937f79231
--- /dev/null
+++ b/apps/components-e2e/src/components/tag-list/tag-list.module.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { DtTagModule } from '@dynatrace/barista-components/tag';
+import { DtE2ETagList } from './tag-list';
+
+const routes: Route[] = [{ path: '', component: DtE2ETagList }];
+
+@NgModule({
+ declarations: [DtE2ETagList],
+ imports: [CommonModule, RouterModule.forChild(routes), DtTagModule],
+ exports: [],
+ providers: [],
+})
+export class DtE2ETagListModule {}
diff --git a/apps/components-e2e/src/components/tag-list/tag-list.ts b/apps/components-e2e/src/components/tag-list/tag-list.ts
new file mode 100644
index 0000000000..6cac8528fb
--- /dev/null
+++ b/apps/components-e2e/src/components/tag-list/tag-list.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'dt-e2e-tag-list',
+ templateUrl: 'tag-list.html',
+})
+export class DtE2ETagList {}
diff --git a/apps/dev/src/tag/tag-demo.component.ts b/apps/dev/src/tag/tag-demo.component.ts
index bacfac2902..56f9e84952 100644
--- a/apps/dev/src/tag/tag-demo.component.ts
+++ b/apps/dev/src/tag/tag-demo.component.ts
@@ -42,7 +42,18 @@ export class TagDemo implements OnInit {
.add('KitKat')
.add('Beer')
.add('Raphaelo')
- .add('Bean')
+ .add('Bean1')
+ .add('Bean2')
+ .add('Bean3')
+ .add('Bean4')
+ .add('Bean5')
+ .add('Bean6')
+ .add('Bean7')
+ .add('Bean8')
+ .add('Bean9')
+ .add('Bean12')
+ .add('Bean23')
+ .add('Bean34')
.add('Pine');
}
diff --git a/components/tag/src/tag-list/tag-list.html b/components/tag/src/tag-list/tag-list.html
index 4ef640cc17..e62943bc03 100644
--- a/components/tag/src/tag-list/tag-list.html
+++ b/components/tag/src/tag-list/tag-list.html
@@ -6,7 +6,7 @@
*ngIf="_showAllTags"
>
-
+
{
const moreBtn = fixture.debugElement.query(
By.css('.dt-tag-list-more-btn'),
);
+ expect(moreBtn).not.toBe('0 More...');
expect(moreBtn).toBeNull();
});
diff --git a/components/tag/src/tag-list/tag-list.ts b/components/tag/src/tag-list/tag-list.ts
index a45326fda6..7a1a1f14cb 100644
--- a/components/tag/src/tag-list/tag-list.ts
+++ b/components/tag/src/tag-list/tag-list.ts
@@ -196,6 +196,13 @@ export class DtTagList implements AfterContentInit, OnDestroy {
});
this._tagAddSubscriptions = [];
}
+
+ /**
+ * @internal evaluates whether to display the x more button
+ */
+ _toDisplayMoreButton(): boolean {
+ return !this._isOneLine && !this._showAllTags && this._hiddenTagCount > 0;
+ }
}
/** Returns the width of a directive by calculating the last visible elements and the directives position. */