feat: uui-scroll-container now uses auto scroll and has an enforce scroll option (#448)

Author: loivsen

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

@@ -1,10 +1,13 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 
 /**
  *  @element uui-scroll-container
  *  @slot - for content
+ *  @attribute enforce-scroll - forces the scrollbar to appear
  *  @description - Component for displaying a larger amount of .
+ *
  */
 @defineElement('uui-scroll-container')
 export class UUIScrollContainerElement extends LitElement {
@@ -15,6 +18,10 @@ export class UUIScrollContainerElement extends LitElement {
         scrollbar-width: thin;
         scrollbar-color: var(--uui-color-disabled-contrast)
           var(--uui-color-surface);
+        overflow-y: auto;
+      }
+
+      :host([enforce-scroll]) {
         overflow-y: scroll;
       }
 
@@ -34,6 +41,13 @@ export class UUIScrollContainerElement extends LitElement {
     `,
   ];
 
+  /**
+   * @type {boolean}
+   * @attr forces the scrollbar to appear
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })
+  enforceScroll = false;
+
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute('tabindex')) {

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

@@ -146,7 +146,7 @@ export const NotEnoughContent: Story = props =>
   `;
 
 NotEnoughContent.args = {
-  slot: 'Very little text, no Scrollbar appearing',
+  slot: 'Very little text, no scrollbar appearing',
 };
 
 export const VeryWideContent: Story = props =>
@@ -160,3 +160,14 @@ VeryWideContent.args = {
   slot: html` line is way toooo long
     WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />`,
 };
+
+export const EnforceScroll: Story = props =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;" enforce-scroll>
+      ${props.slot}
+    </uui-scroll-container>
+  `;
+
+EnforceScroll.args = {
+  slot: 'Very little text, but has the enforce-scroll property\n(See with a dark background)',
+};

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

@@ -1,4 +1,4 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { UUIScrollContainerElement } from './uui-scroll-container.element';
 import '.';
 
@@ -115,3 +115,23 @@ describe('UUIScrollContainerElement with very little content', () => {
     await expect(element.scrollLeft).to.be.equal(0);
   });
 });
+
+describe('properties', () => {
+  let element: UUIScrollContainerElement;
+  beforeEach(async () => {
+    element = await fixture(
+      html`<uui-scroll-container style="width:200px; height:200px;">
+        Hello tests
+      </uui-scroll-container>`
+    );
+  });
+
+  it('has a enforce-scroll property', () => {
+    expect(element).to.have.property('enforceScroll');
+  });
+  it('enforceScroll property set', async () => {
+    element.enforceScroll = true;
+    await elementUpdated(element);
+    expect(element.enforceScroll).to.be.true;
+  });
+});