#299 remove type from cps tag component, #348 Tabs: don't apply :acti…

…ve style when a tab is active (#352) * provide border radius to button and support dynamic style changes * json icon * don't apply :active style when a tab is active * remove type from cps-tag component * regenerate docs
AbsaOSS · Mar 8, 2024 · b4ccc19 · b4ccc19
1 parent 5bf528f
commit b4ccc19
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 51 deletions.
diff --git a/projects/composition/src/app/api-data/cps-button.json b/projects/composition/src/app/api-data/cps-button.json
@@ -21,6 +21,14 @@
                         "default": "white",
                         "description": "Color of content on the button. Works only with 'solid' type."
                     },
+                    {
+                        "name": "borderRadius",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string | number",
+                        "default": "4",
+                        "description": "Border radius of the button, of type number denoting pixels or string."
+                    },
                     {
                         "name": "type",
                         "optional": false,

diff --git a/projects/composition/src/app/api-data/cps-tag.json b/projects/composition/src/app/api-data/cps-tag.json
@@ -5,14 +5,6 @@
             "props": {
                 "description": "Defines the input properties of the component.",
                 "values": [
-                    {
-                        "name": "type",
-                        "optional": false,
-                        "readonly": false,
-                        "type": "\"security\" | \"classification\" | \"custom\"",
-                        "default": "custom",
-                        "description": "Type of the tag. It can be security, classification or custom, has higher precedence over color."
-                    },
                     {
                         "name": "label",
                         "optional": false,
@@ -26,7 +18,7 @@
                         "optional": false,
                         "readonly": false,
                         "type": "string",
-                        "default": "",
+                        "default": "calm",
                         "description": "Color of the tag."
                     },
                     {

diff --git a/projects/composition/src/app/pages/tag-page/tag-page.component.html b/projects/composition/src/app/pages/tag-page/tag-page.component.html
@@ -1,14 +1,12 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
   <div class="tags-group">
-    <cps-tag type="security" label="Security tag"></cps-tag>
-    <cps-tag type="classification" label="Classification tag"></cps-tag>
-    <cps-tag color="red" label="Custom color tag"></cps-tag>
+    <cps-tag color="warn" label="Regular tag"></cps-tag>
     <cps-tag [disabled]="true" color="red" label="Disabled tag"></cps-tag>
     <div class="sync-val-example">
       <cps-tag
         [selectable]="true"
-        color="success"
+        color="info"
         [(ngModel)]="syncVal"
         label="Selectable tag"></cps-tag>
 

diff --git a/projects/cps-ui-kit/assets/icons.svg b/projects/cps-ui-kit/assets/icons.svg
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
@@ -6,10 +6,11 @@
     (click)="onClick($event)"
     [class.loading]="loading"
     [ngStyle]="{
-    'background-color': type==='solid' ? buttonColor : 'transparent',
-    color: textColor,
-    height: cvtHeight || 'none',
-  }">
+      backgroundColor: type === 'solid' ? buttonColor : 'transparent',
+      color: textColor,
+      height: cvtHeight || 'none',
+      borderRadius: borderRadius
+    }">
     <div class="cps-button__spinner">
       <cps-progress-circular
         *ngIf="loading"

diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.scss b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.scss
@@ -11,7 +11,6 @@
     justify-content: center;
 
     position: relative;
-    border-radius: 4px;
     border: none;
     cursor: pointer;
     outline: none;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
@@ -4,7 +4,7 @@ import {
   EventEmitter,
   HostBinding,
   Input,
-  OnInit,
+  OnChanges,
   Output
 } from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
@@ -23,7 +23,7 @@ import { convertSize, parseSize } from '../../utils/internal/size-utils';
   templateUrl: './cps-button.component.html',
   styleUrls: ['./cps-button.component.scss']
 })
-export class CpsButtonComponent implements OnInit {
+export class CpsButtonComponent implements OnChanges {
   /**
    * Color of the button.
    * @group Props
@@ -36,6 +36,12 @@ export class CpsButtonComponent implements OnInit {
    */
   @Input() contentColor = 'white';
 
+  /**
+   * Border radius of the button, of type number denoting pixels or string.
+   * @group Props
+   */
+  @Input() borderRadius: number | string = 4;
+
   /**
    * Type of the button in terms of appearance, it can be 'solid' or 'outlined' or 'borderless'.
    * @group Props
@@ -109,8 +115,9 @@ export class CpsButtonComponent implements OnInit {
 
   classesList: string[] = [];
 
-  ngOnInit(): void {
+  ngOnChanges(): void {
     this.buttonColor = getCSSColor(this.color);
+    this.borderRadius = convertSize(this.borderRadius);
     this.textColor =
       this.type === 'solid' ? getCSSColor(this.contentColor) : this.buttonColor;
     this.setClasses();

diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
@@ -64,6 +64,7 @@ export const iconNames = [
   'insight',
   'issues',
   'jpeg',
+  'json',
   'kris',
   'last-seen-product',
   'left',

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss
@@ -133,7 +133,7 @@
         border-bottom: 3px solid var(--cps-color-line-light);
       }
 
-      &:active:not(.disabled) {
+      &:active:not(.disabled, .active) {
         border-bottom: 3px solid var(--cps-color-line-mid);
       }
     }

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.html b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.html
@@ -1,7 +1,7 @@
 <div
   [ngClass]="classesList"
   [class.unselected]="!value && selectable"
-  [ngStyle]="{ 'border-color': tagColor || 'none' }"
+  [ngStyle]="{ borderColor: color }"
   (click)="toggleSelected()">
   <p>{{ label }}</p>
 </div>
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.scss
@@ -16,14 +16,6 @@
     border: solid 1px;
     border-left: solid 4px;
 
-    &.cps-tag--security {
-      border-color: var(--cps-color-warn);
-    }
-
-    &.cps-tag--classification {
-      border-color: var(--cps-color-info);
-    }
-
     &.cps-tag--selectable {
       cursor: pointer;
       &:not(:active):not(:disabled) {

diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts
@@ -23,12 +23,6 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
   styleUrls: ['./cps-tag.component.scss']
 })
 export class CpsTagComponent implements ControlValueAccessor, OnChanges {
-  /**
-   * Type of the tag. It can be security, classification or custom, has higher precedence over color.
-   * @group Props
-   */
-  @Input() type: 'security' | 'classification' | 'custom' = 'custom';
-
   /**
    * Label of the tag.
    * @group Props
@@ -39,7 +33,7 @@ export class CpsTagComponent implements ControlValueAccessor, OnChanges {
    * Color of the tag.
    * @group Props
    */
-  @Input() color = '';
+  @Input() color = 'calm';
 
   /**
    * Determines whether the tag should be disabled.
@@ -74,7 +68,6 @@ export class CpsTagComponent implements ControlValueAccessor, OnChanges {
   @Output() valueChanged = new EventEmitter<boolean>();
 
   classesList: string[] = [];
-  tagColor = '';
 
   private _value = false;
 
@@ -85,6 +78,7 @@ export class CpsTagComponent implements ControlValueAccessor, OnChanges {
   }
 
   ngOnChanges(): void {
+    this.color = getCSSColor(this.color);
     this.setClasses();
   }
 
@@ -97,18 +91,6 @@ export class CpsTagComponent implements ControlValueAccessor, OnChanges {
     if (this.disabled) {
       this.classesList.push('cps-tag--disabled');
     }
-    switch (this.type) {
-      case 'security': {
-        this.classesList.push('cps-tag--security');
-        break;
-      }
-      case 'classification': {
-        this.classesList.push('cps-tag--classification');
-        break;
-      }
-      default:
-        if (this.color) this.tagColor = getCSSColor(this.color);
-    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function