fix(dropdown): mc-link and mc-dropdown-item do not work together (#UI…

…M-139) (#221) BREAKING CHANGES
positive-js · Aug 30, 2019 · 1572fc0 · 1572fc0
1 parent 4d80a83
commit 1572fc0
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 51 deletions.
diff --git a/packages/mosaic-dev/dropdown/module.ts b/packages/mosaic-dev/dropdown/module.ts
@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
 import { McButtonModule } from '@ptsecurity/mosaic/button';
 import { McDropdownModule } from '@ptsecurity/mosaic/dropdown';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McLinkModule } from '@ptsecurity/mosaic/link';
 
 
 @Component({
@@ -28,6 +28,7 @@ export class DemoComponent {
         BrowserAnimationsModule,
         BrowserModule,
         FormsModule,
+        McLinkModule,
         McIconModule,
         McButtonModule,
         McDropdownModule

diff --git a/packages/mosaic-dev/dropdown/template.html b/packages/mosaic-dev/dropdown/template.html
@@ -29,7 +29,9 @@
         <h5>Additional info</h5>
         <button mc-dropdown-item disabled>Disabled</button>
         <button mc-dropdown-item>Point 2</button>
-        <a href="https://google.com" class="mc-link mc-link_underlined" mc-dropdown-item>Link</a>
+        <a href="https://google.com" class="mc-link mc-link_underlined" mc-dropdown-item>
+            <span class="mc-link__text">Link</span>
+        </a>
         <button mc-dropdown-item>Point 3</button>
     </mc-dropdown>
 

diff --git a/packages/mosaic-dev/link/template.html b/packages/mosaic-dev/link/template.html
@@ -4,7 +4,7 @@
         <td>Normal</td>
     </tr>
     <tr>
-        <td><a class="mc-link" [disabled]="true" href=""><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link" [disabled]="true" href="" tabindex="10"><span class="mc-link__text">Сохранить</span></a></td>
         <td><a class="mc-link"><span class="mc-link__text">Сохранить</span></a></td>
     </tr>
     <tr>

diff --git a/packages/mosaic/dropdown/_dropdown-theme.scss b/packages/mosaic/dropdown/_dropdown-theme.scss
@@ -45,6 +45,8 @@
 
         &[disabled] {
             color: mc-color($foreground, disabled-text);
+
+            background: transparent;
         }
 
         .mc-dropdown__item-caption {

diff --git a/packages/mosaic/link/_link-theme.scss b/packages/mosaic/link/_link-theme.scss
@@ -16,6 +16,10 @@
     .mc-link {
         color: $color;
 
+        text-decoration: none;
+
+        cursor: pointer;
+
         &:focus {
             outline: none;
         }
@@ -33,8 +37,20 @@
             outline-offset: 2px;
         }
 
+        & > .mc-link__icon {
+            color: inherit;
+        }
+
+        & .mc-link__text:not(:first-child) {
+            margin-left: 4px;
+        }
+
+        & .mc-link__text:not(:last-child) {
+            margin-right: 4px;
+        }
+
         &.mc-link_underlined .mc-link__text {
-            border-bottom-style: solid;            
+            border-bottom-style: solid;
             border-bottom-color: rgba($color, .32);
         }
 
@@ -71,6 +87,9 @@
         &[disabled] {
             color: $color_disabled;
 
+            cursor: default;
+            pointer-events: none;
+
             &.mc-link_underlined .mc-link__text {
                 border-bottom-color: rgba($color_disabled, .64);
             }

diff --git a/packages/mosaic/link/link.component.ts b/packages/mosaic/link/link.component.ts
@@ -1,14 +1,11 @@
 import {
     Input,
-    Attribute,
-    Component,
     ElementRef,
     OnDestroy,
-    ViewEncapsulation,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef
+    ChangeDetectorRef,
+    Directive,
+    Attribute
 } from '@angular/core';
-
 import { FocusMonitor } from '@ptsecurity/cdk/a11y';
 import {
     CanDisable, CanDisableCtor,
@@ -20,20 +17,15 @@ import {
 
 
 export class McLinkBase {
-    constructor(public _elementRef: ElementRef) {
-    }
+    constructor(public elementRef: ElementRef) {}
 }
 
 export const _McLinkBase: HasTabIndexCtor & CanDisableCtor & typeof McLinkBase
     = mixinTabIndex(mixinDisabled(McLinkBase));
 
-@Component({
+@Directive({
     selector: 'a.mc-link',
-    template: `<ng-content></ng-content>`,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
     exportAs: 'mcLink',
-    styleUrls: ['./link.css'],
     inputs: ['disabled'],
     host: {
         '[attr.disabled]': 'disabled || null',
@@ -53,32 +45,34 @@ export class McLink extends _McLinkBase implements OnDestroy, HasTabIndex, CanDi
 
         if (newValue !== this._disabled) {
             this._disabled = newValue;
-            this._changeDetector.markForCheck();
+            this.changeDetector.markForCheck();
         }
     }
 
     private _disabled = false;
 
     constructor(
-        @Attribute('tabindex') tabIndex: string,
-        public elementRef: ElementRef,
-        private _focusMonitor: FocusMonitor,
-        private _changeDetector: ChangeDetectorRef) {
-
+        elementRef: ElementRef,
+        private focusMonitor: FocusMonitor,
+        private changeDetector: ChangeDetectorRef,
+        @Attribute('tabindex') tabIndex: string
+    ) {
         super(elementRef);
-        this._focusMonitor.monitor(elementRef.nativeElement, true);
+
         this.tabIndex = parseInt(tabIndex) || 0;
+
+        this.focusMonitor.monitor(elementRef.nativeElement, true);
     }
 
     ngOnDestroy() {
-        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
     }
 
     focus(): void {
-        this._getHostElement().focus();
+        this.getHostElement().focus();
     }
 
-    _getHostElement() {
+    getHostElement() {
         return this.elementRef.nativeElement;
     }
 }
diff --git a/packages/mosaic/link/link.scss b/packages/mosaic/link/link.scss