Improve tabs and radio groups (#675)

* Tokenize tab slider height and make it 2px by default

* Remove jest-preset-angular dependency

This dependency is not used anymore and has a security vulnerability because of its dependency to an old version of axios.

* Improve radio groups

* Ability to click on the full radio label within radio-group

* Add `noEllipsis` option to radio component

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 2.63.1 (2023-11-28)
+
+### Improvements
+
+- **Tabs**: tokenize tab slider height, and make it 2px by default
+- **RadioGroup**: 
+  - Improve the radio-group style by using flexbox with a gap (default to 8px between each radio, can be overridden using the `$gap-radio-group` token)
+  - Add a class `horizontal-group` changing the flexbox direction to row
+- **Radio**: Add `noEllipsis` option to radio component
+
+### Security
+
+- Remove `jest-preset-angular` dependency, which is not used anymore and has a security vulnerability  
+
 # 2.63.0 (2023-11-21)
 
 ### Breaking changes

package.json

@@ -47,7 +47,6 @@
     "angular-cli-ghpages": "^1.0.7",
     "husky": "^8.0.3",
     "jest": "^29.6.2",
-    "jest-preset-angular": "^13.1.4",
     "ng-mocks": "^14.12.1",
     "ng-packagr": "^17.0.1",
     "prettier": "^3.1.0",

projects/demo/src/app/demo/pages/radio-page/radio-page.component.html

@@ -52,18 +52,17 @@
 
       <p class="title-xxs">Radio group using formControl</p>
       <pa-radio-group
+        class="horizontal-group"
         name="radio-icons"
         [formControl]="formControl">
-        <div style="display: flex">
-          @for (icon of icons; track icon) {
-            <div style="display: flex; flex-direction: column; align-items: center; margin-right: 30px">
-              <pa-icon
-                size="large"
-                [name]="icon"></pa-icon>
-              <pa-radio [value]="icon"></pa-radio>
-            </div>
-          }
-        </div>
+        @for (icon of icons; track icon) {
+          <div style="display: flex; flex-direction: column; align-items: center">
+            <pa-icon
+              size="large"
+              [name]="icon"></pa-icon>
+            <pa-radio [value]="icon"></pa-radio>
+          </div>
+        }
       </pa-radio-group>
       <p>Icon selected: {{ formControl.value }}</p>
       <pa-button
@@ -169,6 +168,17 @@ <h3>Radio group</h3>
       <code>{{ paRadioGroup }}</code>. The radio-group will automatically set the name of the
       <code>{{ paRadio }}</code> with its own.
     </p>
+    <p>
+      By default,
+      <code>{{ paRadioGroup }}</code>
+      is using flexbox to display the
+      <code>{{ paRadio }}</code>
+      aligned in column. Adding the CSS class
+      <code>horizontal-group</code>
+      to the
+      <code>{{ paRadioGroup }}</code>
+      will change the alignment direction to row.
+    </p>
 
     <p>
       <code>{{ paRadioGroup }}</code>

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.63.0",
+    "version": "2.63.1",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/controls/toggles/radio/radio-group.directive.ts

@@ -20,7 +20,7 @@ import { takeUntil } from 'rxjs/operators';
   exportAs: 'paRadioGroup',
   host: {
     role: 'radiogroup',
-    style: 'display: block',
+    class: 'pa-radio-group',
   },
 })
 export class RadioGroupDirective extends PaFormControlDirective implements AfterViewInit, OnDestroy {

projects/pastanaga-angular/src/lib/controls/toggles/radio/radio.component.html

@@ -17,6 +17,7 @@
       [for]="id"
       #label
       class="pa-toggle-label"
+      [class.no-ellipsis]="noEllipsis"
       [hidden]="!hasLabel">
       <ng-content></ng-content>
     </label>

projects/pastanaga-angular/src/lib/controls/toggles/radio/radio.component.ts

@@ -28,6 +28,7 @@ export class RadioComponent implements AfterContentInit, OnChanges {
   @Input({ transform: booleanAttribute }) disabled = false;
   @Input({ transform: trimString }) ariaLabel = '';
   @Input({ transform: trimString }) help = '';
+  @Input({ transform: booleanAttribute }) noEllipsis = false;
 
   @Output() change: EventEmitter<{ value: string; checked: boolean }> = new EventEmitter();
 

projects/pastanaga-angular/src/styles/components/_checkbox.scss

@@ -126,3 +126,21 @@
     margin-left: rhythm(3.5);
   }
 }
+
+.pa-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-radio-group;
+
+  &.horizontal-group {
+    flex-direction: row;
+  }
+
+  &:not(.horizontal-group) .pa-toggle .pa-checkbox-wrapper {
+    width: 100%;
+
+    .pa-toggle-label {
+      width: 100%;
+    }
+  }
+}

projects/pastanaga-angular/src/styles/components/_tabs.scss

@@ -19,7 +19,7 @@
     background: $color-tab-slider;
     bottom: 0;
     content: '';
-    height: 1px;
+    height: $height-tab-slider;
     left: 0;
     position: absolute;
     width: 100%;

projects/pastanaga-angular/src/styles/theme/_tabs.tokens.scss

@@ -18,6 +18,8 @@ $font-weight-tab-item-active: $font-weight-bold !default;
 
 $gap-between-tabs: 0 !default;
 
+$height-tab-slider: rhythm(0.25) !default;
+
 $padding-tab-item-small: rhythm(1.5) !default;
 $padding-tab-item-medium: rhythm(1.5) !default;
 

projects/pastanaga-angular/src/styles/theme/_toggle.tokens.scss

@@ -29,6 +29,7 @@ $color-check-toggle-disabled: $color-neutral-light !default;
 // SPACING
 //=====================================
 $size-toggle-checkbox: calc(#{rhythm(2)} - #{rhythm(0.25)}) !default;
+$gap-radio-group: rhythm(1) !default;
 
 //=====================================
 // TYPOGRAPHY