feat: add prop color in tag to smart-table (#1146)

Co-authored-by: PedroMiguel7 <pedromiguelmgaldino@gmail.com>
Brisanet · Sep 20, 2024 · 45bd03b · 45bd03b
1 parent 219a821
commit 45bd03b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 0 deletions.
diff --git a/projects/ion/src/lib/smart-table/smart-table.component.html b/projects/ion/src/lib/smart-table/smart-table.component.html
@@ -165,6 +165,7 @@
                   [label]="row[column.key]"
                   [status]="row[column.tag.statusKey] || column.tag.status"
                   [icon]="row[column.tag.iconKey] || column.tag.icon"
+                  [color]="row[column.tag.colorKey] || column.tag.color"
                   ionTooltip
                   [ionTooltipTitle]="
                     row[column.tag.tooltipKey] || row[column.key]

diff --git a/projects/ion/src/lib/smart-table/smart-table.component.spec.ts b/projects/ion/src/lib/smart-table/smart-table.component.spec.ts
@@ -758,6 +758,23 @@ describe('Table > Differents columns data type', () => {
       }
     );
 
+    it.each(['#be531c', '#ab2328', '#572d2d', '#6666ff', '#cc66ff'])(
+      'should render tag with custom color: %s',
+      async (color) => {
+        const columns = tableDifferentColumns.config.columns;
+        const lastColumn = columns.length - 1;
+        columns[lastColumn].tag = {
+          color,
+        };
+
+        await sut(tableDifferentColumns);
+        const tags = document.getElementsByClassName('ion-tag');
+        for (let i = 0; i < tags.length; i++) {
+          expect(tags[i]).toHaveStyle(`color: ${color};`);
+        }
+      }
+    );
+
     it('should show an empty cell when the data is undefined on a tag column', async () => {
       const columns = tableDifferentColumns.config.columns;
       const lastColumn = columns.length - 1;

diff --git a/projects/ion/src/lib/table/table.component.html b/projects/ion/src/lib/table/table.component.html
@@ -125,6 +125,7 @@
                 [label]="row[column.key]"
                 [status]="row[column.tag.statusKey] || column.tag.status"
                 [icon]="row[column.tag.iconKey] || column.tag.icon"
+                [color]="row[column.tag.colorKey] || column.tag.color"
               ></ion-tag>
               <ion-link
                 *ngIf="column.type === 'link' && column.link"

diff --git a/projects/ion/src/lib/table/table.component.spec.ts b/projects/ion/src/lib/table/table.component.spec.ts
@@ -687,6 +687,27 @@ describe('Table > Differents columns data type', () => {
         ).toHaveLength(1);
       }
     );
+
+    it.each(['#be531c', '#ab2328', '#572d2d', '#6666ff', '#cc66ff'])(
+      'should set %s color in tag by row data',
+      async (color: string) => {
+        const tableWithCustomColorInTag = JSON.parse(
+          JSON.stringify(tableDifferentColumns)
+        ) as IonTableProps<Disco>;
+
+        const columns = tableWithCustomColorInTag.config.columns;
+        const lastColumn = columns.length - 1;
+        columns[lastColumn].tag = {
+          color,
+        };
+
+        await sut(tableWithCustomColorInTag);
+        const tags = document.getElementsByClassName('ion-tag');
+        for (let i = 0; i < tags.length; i++) {
+          expect(tags[i]).toHaveStyle(`color: ${color};`);
+        }
+      }
+    );
   });
 
   describe('Pipes', () => {

diff --git a/projects/ion/src/lib/table/utilsTable.ts b/projects/ion/src/lib/table/utilsTable.ts
@@ -33,6 +33,8 @@ interface TagRow {
   status?: TagStatus;
   statusKey?: string;
   tooltipKey?: string;
+  color?: string;
+  colorKey?: string;
 }
 
 interface LinkRow<RowType> {