fix: (core) Add support for icon and select border types (#1555)

fix(core): adding the example for the types of select component
SAP · Nov 22, 2019 · d23e000 · d23e000
1 parent daffb52
commit d23e000
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 6 deletions.
diff --git a/...e/component-docs/select/examples/select-types-example/select-types-example.component.html b/...e/component-docs/select/examples/select-types-example/select-types-example.component.html
@@ -0,0 +1,50 @@
+<div style="padding: 8px">
+No Border
+<fd-select class="fd-select-example" 
+    [(value)]="selectValue1" 
+    [selectType]="'noborder'"
+    [placeholder]="'Select with no border'">
+    <fd-option *ngFor="let option of options"
+        [value]="option">
+        {{option}}
+    </fd-option>
+</fd-select>
+</div>
+
+<div style="padding: 8px">
+Split Border
+<fd-select class="fd-select-example"  
+    [(value)]="selectValue2" 
+    [selectType]="'splitborder'"
+    [placeholder]="'select with split border'">
+    <fd-option *ngFor="let option of options"
+        [value]="option">
+        {{option}}
+    </fd-option>
+</fd-select>
+</div>
+
+<div style="padding: 8px">
+Default Select
+<fd-select class="fd-select-example"  
+    [(value)]="selectValue3" 
+    [placeholder]="'Default select'">
+    <fd-option *ngFor="let option of options"
+        [value]="option">
+        {{option}}
+    </fd-option>
+</fd-select>
+</div>
+
+<div style="padding: 8px">
+With Icon
+<fd-select class="fd-select-example"  
+    [(value)]="selectValue4" 
+    [glyph]="'filter'" 
+    [placeholder]="'Default select with icon'">
+    <fd-option *ngFor="let option of options"
+        [value]="option">
+        {{option}}
+    </fd-option>
+</fd-select>
+</div>
diff --git a/...e/component-docs/select/examples/select-types-example/select-types-example.component.scss b/...e/component-docs/select/examples/select-types-example/select-types-example.component.scss
@@ -0,0 +1,3 @@
+.fd-select-example {
+    margin-top: 16px;
+}
diff --git a/...omponent-docs/select/examples/select-types-example/select-types-example.component.spec.ts b/...omponent-docs/select/examples/select-types-example/select-types-example.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectTypesExampleComponent } from './select-types-example.component';
+
+describe('SelectTypesExampleComponent', () => {
+  let component: SelectTypesExampleComponent;
+  let fixture: ComponentFixture<SelectTypesExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectTypesExampleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectTypesExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...ore/component-docs/select/examples/select-types-example/select-types-example.component.ts b/...ore/component-docs/select/examples/select-types-example/select-types-example.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fd-select-types-example',
+    templateUrl: './select-types-example.component.html',
+    styleUrls: ['./select-types-example.component.scss']
+})
+export class SelectTypesExampleComponent implements OnInit {
+
+    selectValue1: string;
+    selectValue2: string;
+    selectValue3: string;
+    selectValue4: string;
+
+
+    options: string[] = [
+        'Tomato',
+        'Pineapple',
+        'Apple'
+    ];
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/apps/docs/src/app/core/component-docs/select/select-docs.component.html b/apps/docs/src/app/core/component-docs/select/select-docs.component.html
@@ -9,6 +9,19 @@
 
 <separator></separator>
 
+
+<fd-docs-section-title [id]="'Types'" [componentName]="'select'">
+    Select Border Types
+</fd-docs-section-title>
+<description>An example of the select component with diffrent types of Border type and ability to add icon.
+</description>
+<component-example [name]="'ex1'">
+	<fd-select-types-example></fd-select-types-example>
+</component-example>
+<code-example [exampleFiles]="selectTypes"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title [id]="'programmaticControl'" [componentName]="'select'">
     Programmatic Control
 </fd-docs-section-title>
@@ -107,4 +120,4 @@
 <component-example [name]="'ex8'">
     <fd-select-forms></fd-select-forms>
 </component-example>
-<code-example [exampleFiles]="selectForm"></code-example>
+<code-example [exampleFiles]="selectForm"></code-example>
diff --git a/apps/docs/src/app/core/component-docs/select/select-docs.component.ts b/apps/docs/src/app/core/component-docs/select/select-docs.component.ts
@@ -32,6 +32,10 @@ import { DocsSectionTitleComponent } from '../../../documentation/core-helpers/d
 import * as selectMaxHeightHTs from '!raw-loader!./examples/select-height/select-max-height-example.component.ts';
 import { ActivatedRoute } from '@angular/router';
 
+import * as selectTypesSrc from '!raw-loader!./examples/select-types-example/select-types-example.component.html';
+import * as selectTypesTsSrc from '!raw-loader!./examples/select-types-example/select-types-example.component.ts';
+import * as selecTypesScssSrc from '!raw-loader!./examples/select-types-example/select-types-example.component.scss';
+
 @Component({
     selector: 'fd-select-docs',
     templateUrl: './select-docs.component.html',
@@ -142,6 +146,16 @@ export class SelectDocsComponent implements OnInit {
             fileName: 'select-view-value-example',
         }
     ];
+    selectTypes: ExampleFile[] = [
+        {
+            language: 'html',
+            code: selectTypesSrc,
+            fileName: 'select-types-example',
+            scssFileCode: selecTypesScssSrc,
+            typescriptFileCode: selectTypesTsSrc,
+            component: 'SelectTypesExampleComponent'
+        }
+    ];
 
     ngOnInit() { }
 }
diff --git a/apps/docs/src/app/core/core-documentation.module.ts b/apps/docs/src/app/core/core-documentation.module.ts
@@ -402,6 +402,7 @@ import { SideNavigationCondensedObjectExampleComponent } from './component-docs/
 import { SideNavigationMultipleSelectedExampleComponent } from './component-docs/side-navigation/examples/side-navigation-multiple-selected-example/side-navigation-multiple-selected-example.component';
 import { DatePickerComplexI18nExampleComponent } from './component-docs/date-picker/examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component';
 import { DatetimePickerComplexI18nExampleComponent } from './component-docs/datetime-picker/examples/datetime-picker-complex-i18n-example/datetime-picker-complex-i18n-example.component';
+import { SelectTypesExampleComponent } from './component-docs/select/examples/select-types-example/select-types-example.component';
 
 
 @NgModule({
@@ -733,6 +734,7 @@ import { DatetimePickerComplexI18nExampleComponent } from './component-docs/date
         SelectFormsComponent,
         SelectViewValueExampleComponent,
         SelectMaxHeightExampleComponent,
+        SelectTypesExampleComponent,
         CalendarI18nMomentExampleComponent,
         SelectMaxHeightExampleComponent,
         NotificationDocsComponent,

diff --git a/libs/core/src/lib/select/select.component.html b/libs/core/src/lib/select/select.component.html
@@ -12,9 +12,13 @@
             <button class="fd-select-button-custom"
                     fd-button
                     aria-haspopup="true"
-                    [ngClass]="{'fd-button--compact': compact}"
                     [attr.aria-expanded]="isOpen"
-                    [disabled]="disabled">
+                    [disabled]="disabled"
+                    [ngClass]="{'fd-button--compact':  compact,
+                    'fd-button--noborder':  selectType === 'noborder',
+                    'fd-button--splitborder':  selectType === 'splitborder'}">
+                <fd-icon *ngIf="glyph" size="m" [glyph]="glyph" class="fd-template-icon" style="margin-top: 3px; margin-right: 12px">
+                </fd-icon>
                 <span class="fd-select-text-custom">{{triggerValue}}</span>
             </button>
         </ng-container>

diff --git a/libs/core/src/lib/select/select.component.scss b/libs/core/src/lib/select/select.component.scss
@@ -19,7 +19,7 @@
         width: 100%;
         border-color: var(--sapUiFieldBorderColor, #89919a);
         color: var(--sapUiFieldTextColor, #32363a);
-        border-radius: 0.125rem;
+        border-radius: var(--sapField_BorderCornerRadius, .125rem);
 
         &::after {
             font-family: 'SAP-icons';
@@ -37,6 +37,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            height: -webkit-fill-available;
         }
 
         &:hover {
@@ -80,16 +81,40 @@
                 }
             }
         }
+        &.fd-button--noborder {
+            border: transparent;
+        }
+        &.fd-button--splitborder {
+            border:1px solid;
+            border-color: var(--sapUiFieldBorderColor, #89919a);
+            &::after{
+                    border-left-style: solid;
+                    border-left-width: 1px;
+                    height: -webkit-fill-available;
+                    border-color: var(--sapUiFieldBorderColor, #89919a);
+            }
+            &:hover {
+                    border-color: var(--sapUiFieldHoverBorderColor, #0854a0);
+            }
+        }
     }
 
     .fd-select-text-custom {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow-x: hidden;
         pointer-events: none;
+        margin-right: auto;
     }
 
     .fd-select-popover-body-custom {
         display: block;
     }
 }
+
+// truncation of the overflowing component text
+.fd-dropdown_truncation{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: auto;
+}
diff --git a/libs/core/src/lib/select/select.component.ts b/libs/core/src/lib/select/select.component.ts
@@ -15,6 +15,8 @@ import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { PopperOptions } from 'popper.js';
 import { PopoverFillMode } from '../popover/popover-directive/popover.directive';
 
+type SelectType = 'noborder' | 'splitborder';
+
 /**
  * Select component intended to mimic the behaviour of the native select element.
  */
@@ -70,6 +72,14 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
     @Input()
     maxHeight: string;
 
+    /** Select type defines the border type of the select button. */
+    @Input()
+    selectType: SelectType ;
+
+    /** Glyph to add icon in the select component. */
+    @Input()
+    glyph: string ;
+
     /** Popper.js options of the popover. */
     @Input()
     popperOptions: PopperOptions = {

diff --git a/libs/core/src/lib/select/select.module.ts b/libs/core/src/lib/select/select.module.ts
@@ -5,6 +5,7 @@ import { PopoverModule } from '../popover/popover.module';
 import { MenuModule } from '../menu/menu.module';
 import { CommonModule } from '@angular/common';
 import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
 
 @NgModule({
     declarations: [
@@ -19,7 +20,8 @@ import { ButtonModule } from '../button/button.module';
         CommonModule,
         PopoverModule,
         MenuModule,
-        ButtonModule
+        ButtonModule,
+        IconModule
     ]
 })
 export class SelectModule { }
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.19",
+    "@angular-devkit/build-angular": "^0.803.18",
     "@angular-devkit/build-ng-packagr": "^0.803.19",
     "@angular-devkit/core": "^7.3.9",
     "@angular/cli": "^8.3.19",