Adding horizontal scroll as a new web component (#17460)

* Adding horizontal scroll component * Change files * Updating spacing to match fluent * Fixing linter errors
microsoft · Mar 17, 2021 · a1d4584 · a1d4584
1 parent aac67c9
commit a1d4584
Show file tree

Hide file tree

Showing 7 changed files with 374 additions and 12 deletions.
diff --git a/change/@fluentui-web-components-b4360bcf-47ad-49d8-9fb5-b50bf83cf571.json b/change/@fluentui-web-components-b4360bcf-47ad-49d8-9fb5-b50bf83cf571.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Adding horizontal scroll component",
+  "packageName": "@fluentui/web-components",
+  "email": "robarb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -95,10 +95,10 @@
     "webpack": "^4.43.0"
   },
   "dependencies": {
-    "lodash-es": "^4.17.20",
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.0.0",
-    "@microsoft/fast-foundation": "^1.15.1",
+    "@microsoft/fast-foundation": "1.16.0",
+    "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }
 }
diff --git a/packages/web-components/src/horizontal-scroll/fixtures/horizontal-scroll.html b/packages/web-components/src/horizontal-scroll/fixtures/horizontal-scroll.html
@@ -0,0 +1,186 @@
+<fluent-design-system-provider use-defaults>
+  <style>
+    fluent-horizontal-scroll {
+      width: 600px;
+      margin: 20px 0 0 20px;
+      --scroll-fade-next: #fff;
+    }
+
+    .no-fade {
+      --scroll-fade-next: transparent;
+    }
+
+    .fade-previous {
+      --scroll-fade-previous: #fff;
+    }
+
+    .card {
+      width: 120px;
+      height: 200px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.3);
+      box-sizing: border-box;
+    }
+
+    .top-align {
+      --scroll-align: flex-start;
+    }
+
+    .bottom-align {
+      --scroll-align: flex-end;
+    }
+
+    .slide-show .card {
+      width: 600px;
+    }
+  </style>
+
+  <h1>Horizontal Scroll</h1>
+
+  <h4>Default</h4>
+  <fluent-horizontal-scroll class="no-fade">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>With right fade</h4>
+  <fluent-horizontal-scroll>
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>With fade on both sides</h4>
+  <fluent-horizontal-scroll class="fade-previous">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>Speed = 1200</h4>
+  <fluent-horizontal-scroll speed="1200">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>Default middle alignment</h4>
+  <fluent-horizontal-scroll speed="1000">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 200px; width: 80px"></div>
+    <div class="card" style="height: 90px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 160px"></div>
+    <div class="card" style="width: 130px; height: 130px"></div>
+    <div class="card" style="height: 160px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 200px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>Top alignment</h4>
+  <fluent-horizontal-scroll class="top-align" speed="1000">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 200px; width: 80px"></div>
+    <div class="card" style="height: 90px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 160px"></div>
+    <div class="card" style="width: 130px; height: 130px"></div>
+    <div class="card" style="height: 160px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 200px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>Bottom alignment</h4>
+  <fluent-horizontal-scroll class="bottom-align" speed="1000">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 200px; width: 80px"></div>
+    <div class="card" style="height: 90px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 160px"></div>
+    <div class="card" style="width: 130px; height: 130px"></div>
+    <div class="card" style="height: 160px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card" style="height: 150px"></div>
+    <div class="card" style="width: 200px"></div>
+    <div class="card" style="height: 110px"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+
+  <h4>Full width tiles</h4>
+  <fluent-horizontal-scroll class="slide-show no-fade" speed="2000">
+    <fluent-flipper direction="previous" slot="previous-flipper"></fluent-flipper>
+    <fluent-flipper slot="next-flipper"></fluent-flipper>
+
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </fluent-horizontal-scroll>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts
@@ -0,0 +1,13 @@
+import { FluentDesignSystemProvider } from '../design-system-provider';
+import HorizontalScrollTemplate from './fixtures/horizontal-scroll.html';
+import { FluentHorizontalScroll } from './';
+
+// Prevent tree-shaking
+FluentHorizontalScroll;
+FluentDesignSystemProvider;
+
+export default {
+  title: 'Horizontal Scroll',
+};
+
+export const HorizontalScroll = (): string => HorizontalScrollTemplate;
diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
@@ -0,0 +1,132 @@
+import { css } from '@microsoft/fast-element';
+import { DirectionalStyleSheetBehavior, display } from '@microsoft/fast-foundation';
+
+const ltrActionsStyles = css`
+  .scroll-prev {
+    right: auto;
+    left: 0;
+  }
+
+  .scroll.scroll-next::before,
+  .scroll-next .scroll-action {
+    left: auto;
+    right: 0;
+  }
+
+  .scroll.scroll-next::before {
+    background: linear-gradient(to right, transparent, var(--scroll-fade-next));
+  }
+
+  .scroll-next .scroll-action {
+    transform: translate(50%, -50%);
+  }
+`;
+
+const rtlActionsStyles = css`
+  .scroll.scroll-next {
+    right: auto;
+    left: 0;
+  }
+
+  .scroll.scroll-next::before {
+    background: linear-gradient(to right, var(--scroll-fade-next), transparent);
+    left: auto;
+    right: 0;
+  }
+
+  .scroll.scroll-prev::before {
+    background: linear-gradient(to right, transparent, var(--scroll-fade-previous));
+  }
+
+  .scroll-prev .scroll-action {
+    left: auto;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+`;
+
+/**
+ * Styles used for the flipper container and gradient fade
+ * @public
+ */
+export const ActionsStyles = css`
+  .scroll-area {
+    position: relative;
+  }
+
+  div.scroll-view {
+    overflow-x: hidden;
+  }
+
+  .scroll {
+    bottom: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    user-select: none;
+    width: 100px;
+  }
+
+  .scroll.disabled {
+    display: none;
+  }
+
+  .scroll::before,
+  .scroll-action {
+    left: 0;
+    position: absolute;
+  }
+
+  .scroll::before {
+    background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  .scroll-action {
+    pointer-events: auto;
+    right: auto;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`.withBehaviors(new DirectionalStyleSheetBehavior(ltrActionsStyles, rtlActionsStyles));
+
+/**
+ * Styles handling the scroll container and content
+ * @public
+ */
+export const HorizontalScrollStyles = css`
+  ${display('block')} :host {
+    --scroll-align: center;
+    --scroll-item-spacing: 4px;
+    contain: layout;
+    position: relative;
+  }
+
+  .scroll-view {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  .content-container {
+    align-items: var(--scroll-align);
+    display: inline-flex;
+    flex-wrap: nowrap;
+    position: relative;
+  }
+
+  .content-container ::slotted(*) {
+    margin-right: var(--scroll-item-spacing);
+  }
+
+  .content-container ::slotted(*:last-child) {
+    margin-right: 0;
+  }
+`;
diff --git a/packages/web-components/src/horizontal-scroll/index.ts b/packages/web-components/src/horizontal-scroll/index.ts
@@ -0,0 +1,24 @@
+import { customElement } from '@microsoft/fast-element';
+import { HorizontalScroll, HorizontalScrollTemplate as template } from '@microsoft/fast-foundation';
+import { ActionsStyles, HorizontalScrollStyles as styles } from './horizontal-scroll.styles';
+
+@customElement({
+  name: 'fluent-horizontal-scroll',
+  template,
+  styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
+})
+export class FluentHorizontalScroll extends HorizontalScroll {
+  /**
+   * @public
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    if (this.view !== 'mobile') {
+      this.$fastController.addStyles(ActionsStyles);
+    }
+  }
+}