code adjustments and tests

Author: nielslyngsoe

packages/uui-scroll-container/lib/uui-scroll-container.element.ts

@@ -8,34 +8,41 @@ import { LitElement, html, css } from 'lit';
 export class UUIScrollContainerElement extends LitElement {
   static styles = [
     css`
-      :host {
-        --uui-overflow-container-height: 180px;
-      }
-
       :host {
         display: block;
         scrollbar-width: thin;
         scrollbar-color: var(--uui-interface-contrast-disabled)
           var(--uui-interface-background-alt);
         overflow-y: scroll;
-        max-height: var(--uui-overflow-container-height);
       }
 
+      /*
+      :host(:focus) {
+        outline-width: thin;
+        outline-color: var(--uui-interface-border);
+      }
+      */
+
       :host::-webkit-scrollbar {
-        width: 5px;
+        width: 6px;
+        height: 6px; /* needed for horizontal scrollbar */
       }
 
       :host::-webkit-scrollbar-track {
         background: var(--uui-interface-background-alt);
-        border-radius: 12px;
+        border-radius: 3px;
       }
       :host::-webkit-scrollbar-thumb {
         background-color: var(--uui-interface-contrast-disabled);
-        border-radius: 12px;
+        border-radius: 3px;
       }
     `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('tabindex', '0');
+  }
   render() {
     return html`<slot></slot>`;
   }

packages/uui-scroll-container/lib/uui-scroll-container.story.ts

@@ -126,3 +126,18 @@ export const Overview: Story = () =>
       <p>and now I have transitions</p>
     </uui-scroll-container>
   `;
+
+export const NotEnoughContent: Story = () =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;">
+      Very little text, no Scrollbar appearing
+    </uui-scroll-container>
+  `;
+
+export const VeryWideContent: Story = () =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;">
+      line is way toooo long
+      WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
+    </uui-scroll-container>
+  `;

packages/uui-scroll-container/lib/uui-scroll-container.test.ts

@@ -7,11 +7,54 @@ describe('UUIScrollContainerElement', () => {
 
   beforeEach(async () => {
     element = await fixture(
-      html` <uui-scroll-container></uui-scroll-container> `
+      html`<uui-scroll-container style="width:200px; height:200px;">
+        initial line is way toooo long
+        WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
+        1 line<br />
+        2 line<br />
+        3 line<br />
+        4 line<br />
+        5 line<br />
+        6 line<br />
+        7 line<br />
+        8 line<br />
+        9 line<br />
+        10 line<br />
+        11 line<br />
+        12 line<br />
+        13 line<br />
+        14 line<br />
+        15 line<br />
+        16 line<br />
+        17 line<br />
+        18 line<br />
+        19 line<br />
+        20 line
+      </uui-scroll-container>`
     );
   });
 
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  it('can scroll', async () => {
+    element.scrollTop = 42;
+    await expect(element.scrollTop).to.be.equal(42);
+  });
+
+  it('cant scroll to far', async () => {
+    element.scrollTop = 9999;
+    await expect(element.scrollTop).not.to.be.equal(9999);
+  });
+
+  it('cant scroll to less than zero', async () => {
+    element.scrollTop = -100;
+    await expect(element.scrollTop).to.be.equal(0);
+  });
+
+  it('can scroll sideways if content enforces it', async () => {
+    element.scrollLeft = 42;
+    await expect(element.scrollLeft).to.be.equal(42);
+  });
 });