diff --git a/dev-app/app.html b/dev-app/app.html
index 70ab3dfa..e2a7c4e9 100644
--- a/dev-app/app.html
+++ b/dev-app/app.html
@@ -24,7 +24,7 @@
state="${link.isActive ? 'active' : ''}"
>
-
+
diff --git a/dev-app/routes/components/tables/table/views-and-view-models/index.html b/dev-app/routes/components/tables/table/views-and-view-models/index.html
index 12f7aa39..e1b767f3 100644
--- a/dev-app/routes/components/tables/table/views-and-view-models/index.html
+++ b/dev-app/routes/components/tables/table/views-and-view-models/index.html
@@ -95,7 +95,7 @@
-
+
@@ -184,6 +184,7 @@
},
{
name: 'Han Solo is super cool and all that',
+ namePill: 'Pill',
ship: 'M. Falcon',
gender: 'Male',
},
diff --git a/dev-app/routes/components/tables/table/views-and-view-models/index.ts b/dev-app/routes/components/tables/table/views-and-view-models/index.ts
index edd2a5ac..28d5514c 100644
--- a/dev-app/routes/components/tables/table/views-and-view-models/index.ts
+++ b/dev-app/routes/components/tables/table/views-and-view-models/index.ts
@@ -349,6 +349,7 @@ export class TableViews {
{
gender: 'Male',
name: 'Han Solo is super cool and all that',
+ namePill: 'Pill',
ship: 'M. Falcon',
},
{
@@ -612,7 +613,6 @@ export class TableViews {
this.pillTableData = [
{
description: 'more text here',
- descriptionPill: 'Desc Pill',
name: 'stuff here',
namePill: 'Name Pill',
},
diff --git a/package-lock.json b/package-lock.json
index e02d722c..6f0a4a22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@bindable-ui/bindable",
- "version": "1.0.25",
+ "version": "1.0.26",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 8df64657..c942ee6f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@bindable-ui/bindable",
"description": "An Aurelia component library",
- "version": "1.0.25",
+ "version": "1.0.26",
"repository": {
"type": "git",
"url": "https://github.com/bindable-ui/bindable"
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.css b/src/components/tables/td-contents/c-td-pill/c-td-pill.css
new file mode 100644
index 00000000..f99ef2d9
--- /dev/null
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.css
@@ -0,0 +1,25 @@
+
+/*
+Copyright 2020, Verizon Media
+Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
+*/
+
+/*------------------------------------*\
+ CONTENTS
+\*------------------------------------*/
+
+/**
+ * BASE
+ */
+
+
+
+
+
+/*------------------------------------*\
+ !BASE
+\*------------------------------------*/
+
+.text{
+ margin-left: var(--s-2);
+}
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.html b/src/components/tables/td-contents/c-td-pill/c-td-pill.html
index f8393ce7..9933df61 100644
--- a/src/components/tables/td-contents/c-td-pill/c-td-pill.html
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.html
@@ -4,8 +4,18 @@
-->
- ${value}
-
+
+
+
${row[col.colHeadName + 'Pill']}
+
+ ${value}
+
+
+ ${value}
+
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.ts b/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
index f31934dc..bb046055 100644
--- a/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
@@ -3,7 +3,10 @@ Copyright 2020, Verizon Media
Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
*/
+import * as styles from './c-td-pill.css.json';
+
export class CTdPill {
+ public styles = styles;
public value;
public activate(model) {
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
index 8beaa925..50c1307e 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
@@ -28,7 +28,13 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
.container > svg{
float: left;
margin-right: var(--s-2);
- margin-top: 1px;
+ margin-top: 2px;
+}
+
+.container > c-pill{
+ float: left;
+ margin-right: var(--s-2);
+ margin-top: -1px;
}
.truncate{
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
index 1d44a9bd..c7ca093e 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
@@ -37,6 +37,9 @@
icon="${row[col.colHeadName + 'Icon']}"
if.bind="row[col.colHeadName + 'Icon']"
>
+
+ ${row[col.colHeadName + 'Pill']}
+
${value}