Contrib > Lookup Component (Part 1) > Dropdown A11y Adjustments

.vscode/settings.json

@@ -2,11 +2,5 @@
 {
     // Columns at which to show vertical rulers
     "editor.rulers": [100],
-
-    // Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping (word wrapping). Setting this to -1 forces the editor to never wrap.
-    "editor.wordWrap": "wordWrapColumn",
-    "editor.wordWrapColumn": 100,
-
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "vsicons.presets.angular": true
+    "typescript.tsdk": "node_modules/typescript/lib"
 }

skyux-spa-visual-tests/src/app/popover/popover-visual.component.html

@@ -71,6 +71,24 @@
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
   </sky-popover>
 
+  <button
+    id="btn-popover-placement-above-left" class="sky-btn" [skyPopover]="myPopover2a" skyPopoverPlacement="above" skyPopoverAlignment="left">
+    Top, align left
+  </button>
+
+  <sky-popover #myPopover2a>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
+  </sky-popover>
+
+  <button
+    id="btn-popover-placement-above-right" class="sky-btn" [skyPopover]="myPopover2b" skyPopoverPlacement="above" skyPopoverAlignment="right">
+    Top, align right
+  </button>
+
+  <sky-popover #myPopover2b>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
+  </sky-popover>
+
   <button id="btn-popover-placement-below" class="sky-btn" [skyPopover]="myPopover3" skyPopoverPlacement="below">
     Below
   </button>
@@ -79,6 +97,24 @@
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
   </sky-popover>
 
+  <button
+    id="btn-popover-placement-below-left" class="sky-btn" [skyPopover]="myPopover3a" skyPopoverPlacement="below" skyPopoverAlignment="left">
+    Below, align left
+  </button>
+
+  <sky-popover #myPopover3a>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
+  </sky-popover>
+
+  <button
+    id="btn-popover-placement-below-right" class="sky-btn" [skyPopover]="myPopover3b" skyPopoverPlacement="below" skyPopoverAlignment="right">
+    Below, align right
+  </button>
+
+  <sky-popover #myPopover3b>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
+  </sky-popover>
+
   <button id="btn-popover-placement-left" class="sky-btn" [skyPopover]="myPopover4" skyPopoverPlacement="left">
     Left
   </button>
@@ -88,6 +124,16 @@
   </sky-popover>
 </div>
 
+<div id="screenshot-popover-tiny">
+  <button id="btn-popover-tiny" class="sky-btn" [skyPopover]="myPopoverTiny">
+    Default
+  </button>
+
+  <sky-popover #myPopoverTiny>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu.
+  </sky-popover>
+</div>
+
 <div id="screenshot-popover-with-dropdown">
   <button id="btn-popover-with-dropdown" class="sky-btn" [skyPopover]="myPopoverWithDropdown">
     Default
@@ -119,3 +165,103 @@
     </sky-dropdown>
   </sky-popover>
 </div>
+
+<div id="screenshot-popover-positioned-parent" style="padding:40px;">
+  <div style="border:1px solid red;position:relative;padding:30px;background-color:#f1f1f1;">
+    <button
+      id="btn-popover-position-parent-left"
+      class="sky-btn"
+      type="button"
+      [skyPopover]="positionedParent1"
+      skyPopoverPlacement="below"
+      skyPopoverAlignment="left">
+      Below, align left
+    </button>
+
+    <sky-popover #positionedParent1>
+      The content of a popover can be text, HTML, or Angular components.
+    </sky-popover>
+
+    <button
+      id="btn-popover-position-parent-right"
+      class="sky-btn"
+      type="button"
+      style="float:right;"
+      [skyPopover]="positionedParent2"
+      skyPopoverPlacement="below"
+      skyPopoverAlignment="left">
+      Below, align left
+    </button>
+
+    <sky-popover #positionedParent2>
+      The content of a popover can be text, HTML, or Angular components.
+    </sky-popover>
+  </div>
+</div>
+
+<div id="screenshot-popover-wide-buttons">
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="below">
+      Open popover
+    </button>
+  </p>
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="below"
+      skyPopoverAlignment="left">
+      Open popover
+    </button>
+  </p>
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="below"
+      skyPopoverAlignment="right">
+      Open popover
+    </button>
+  </p>
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="above">
+      Open popover
+    </button>
+  </p>
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="above"
+      skyPopoverAlignment="left">
+      Open popover
+    </button>
+  </p>
+  <p>
+    <button
+      class="sky-btn"
+      type="button"
+      style="display:block;width:100%;"
+      [skyPopover]="myPopover5"
+      skyPopoverPlacement="above"
+      skyPopoverAlignment="right">
+      Open popover
+    </button>
+  </p>
+</div>

skyux-spa-visual-tests/src/app/popover/popover-visual.component.scss

@@ -9,17 +9,23 @@
 
   .popover-visual-container {
     padding: 10px;
-  }
 
-  /deep/
-  .sky-popover-container {
-    position: static !important;
-    opacity: 1 !important;
-    visibility: visible !important;
+    ::ng-deep .sky-popover-container {
+      position: relative !important;
+      width: 100% !important;
+      opacity: 1 !important;
+      visibility: visible !important;
+      z-index: 1;
+
+      .sky-popover {
+        margin: 0;
+      }
+    }
   }
 }
 
 #screenshot-popover-placements,
+#screenshot-popover-tiny,
 #screenshot-popover-with-dropdown {
   padding: 200px 350px;
 }

skyux-spa-visual-tests/src/app/popover/popover.visual-spec.ts

@@ -34,6 +34,30 @@ describe('Popover', () => {
       .then(() => testPopoverPlacement('above'));
   });
 
+  it('should open a popover above-left the caller', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => testPopoverPlacement('above-left'));
+  });
+
+  it('should open a popover above-right the caller', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => testPopoverPlacement('above-right'));
+  });
+
+  it('should open a popover below-left the caller', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => testPopoverPlacement('below-left'));
+  });
+
+  it('should open a popover below-right the caller', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => testPopoverPlacement('below-right'));
+  });
+
   it('should open a popover below the caller', () => {
     return SkyVisualTest
       .setupTest('popover')
@@ -54,8 +78,16 @@ describe('Popover', () => {
 
   it('should handle tiny screens', () => {
     return SkyVisualTest
-      .setupTest('popover', 767)
-      .then(() => testPopoverPlacement('above'));
+      .setupTest('popover', 768)
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView(`#screenshot-popover-tiny`);
+        element(by.id(`btn-popover-tiny`)).click();
+        return SkyVisualTest
+          .compareScreenshot({
+            screenshotName: `popover-placement-tiny`,
+            selector: '#screenshot-popover-tiny'
+          });
+      });
   });
 
   it('should handle absolutely positioned items inside the popover', () => {
@@ -72,4 +104,32 @@ describe('Popover', () => {
           });
       });
   });
+
+  it('should handle left aligned popover in positioned parent', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-popover-positioned-parent');
+        element(by.id('btn-popover-position-parent-left')).click();
+        return SkyVisualTest
+          .compareScreenshot({
+            screenshotName: 'popover-position-parent-left',
+            selector: '#screenshot-popover-positioned-parent'
+          });
+      });
+  });
+
+  it('should handle right aligned popover in positioned parent', () => {
+    return SkyVisualTest
+      .setupTest('popover')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-popover-positioned-parent');
+        element(by.id('btn-popover-position-parent-right')).click();
+        return SkyVisualTest
+          .compareScreenshot({
+            screenshotName: 'popover-position-parent-right',
+            selector: '#screenshot-popover-positioned-parent'
+          });
+      });
+  });
 });

src/demos/colorpicker/colorpicker-demo.component.html

@@ -1,5 +1,7 @@
 <div style="margin-bottom: 10px">
-  <sky-colorpicker #colorPickerExample1>
+  <sky-colorpicker
+    (selectedColorChanged)="onSelectedColorChanged($event)"
+    #colorPickerExample1>
     <input
       [skyColorpickerInput]="colorPickerExample1"
       [(ngModel)]="color1" [presetColors]="presetColors1"

src/demos/colorpicker/colorpicker-demo.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 
+import { SkyColorpickerOutput } from '../../core';
+
 @Component({
   selector: 'sky-colorpicker-demo',
   templateUrl: './colorpicker-demo.component.html'
@@ -24,5 +26,7 @@ export class SkyColorpickerDemoComponent {
     '#68AFEF'
   ];
 
-  public constructor() { }
+  public onSelectedColorChanged(args: SkyColorpickerOutput) {
+    console.log('You selected this color:', args);
+  }
 }