diff --git a/change/@fluentui-web-components-b4360bcf-47ad-49d8-9fb5-b50bf83cf571.json b/change/@fluentui-web-components-b4360bcf-47ad-49d8-9fb5-b50bf83cf571.json new file mode 100644 index 00000000000000..be568ee50823d5 --- /dev/null +++ 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 index fd1d54dd7db416..9a4ecda30a978b 100644 --- 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 new file mode 100644 index 00000000000000..bffd3cf81a61d9 --- /dev/null +++ b/packages/web-components/src/horizontal-scroll/fixtures/horizontal-scroll.html @@ -0,0 +1,186 @@ + + + +

Horizontal Scroll

+ +

Default

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

With right fade

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

With fade on both sides

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

Speed = 1200

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

Default middle alignment

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

Top alignment

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

Bottom alignment

+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +

Full width tiles

+ + + + +
+
+
+
+
+
+ + diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts new file mode 100644 index 00000000000000..8fca042f1095c8 --- /dev/null +++ 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 new file mode 100644 index 00000000000000..d65f8789908758 --- /dev/null +++ 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 new file mode 100644 index 00000000000000..ecee39b7208ff9 --- /dev/null +++ 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); + } + } +} diff --git a/yarn.lock b/yarn.lock index 84c76cd8e7748d..9cffdf01638e80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2659,17 +2659,17 @@ resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.0.tgz#f62ce25a800e6b413d3aa562e8416cdc1ed9131c" integrity sha512-u4R/sfF4SoKSAyDWJaBSDuVo4aGf1BXntlEWukC+1ubH36C6JmmdLSyyip5TQZiTqjQIy3uctcbepPi7oGI0Rw== -"@microsoft/fast-element@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.0.0.tgz#514d5d41e938e5fb93f32bad5a1411bd905ec978" - integrity sha512-MyO3QRyxK0Yrtn9vpuGP9lf1jM5fSOOcOI72KfRhYURuk+XP3F3phCzdByVKTnlAY0V6ojbMdwaRdm3uLr9NZg== +"@microsoft/fast-element@^1.0.0", "@microsoft/fast-element@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.0.1.tgz#f92755447f84a9c51c049580fa8870567719b8aa" + integrity sha512-fXwaHKRLQzY9n+T88iM+t9lTRupwLACrUTc96yGayfMK1qguxb4let0xnwDWAEQic51U0f/UEb6x1ubxlbPkFQ== -"@microsoft/fast-foundation@^1.15.1": - version "1.15.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.15.1.tgz#3e4e9ac20f8563e29ef397195f2b1e0afdcc7b22" - integrity sha512-Ez3UMFOQkk/7OwsSPrK9720/+Wx/4hsakAPiStW1RB41BVfyyy9XUw4oi4iNOZnl1vLq72e13wawc5iRWbW1nA== +"@microsoft/fast-foundation@1.16.0": + version "1.16.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.16.0.tgz#d3dd09fabd989f289507451ae10fd1cdfeb3f490" + integrity sha512-G8FziARR6Cre/ww7bVM+eLEEyKj5Wwj/Q94bepTzWGOIuS1RF8ozz5oLV0DEKY/FbSkRQBnR4EfMBtXHCCurVw== dependencies: - "@microsoft/fast-element" "^1.0.0" + "@microsoft/fast-element" "^1.0.1" "@microsoft/fast-web-utilities" "^4.7.3" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^4.0.0" @@ -5096,7 +5096,7 @@ "@types/node" "*" form-data "^3.0.0" -"@types/node@*", "@types/node@>= 8", "@types/node@^10.12.18", "@types/node@10.17.55": +"@types/node@*", "@types/node@10.17.55", "@types/node@>= 8", "@types/node@^10.12.18": version "10.17.55" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.55.tgz#a147f282edec679b894d4694edb5abeb595fecbd" integrity sha512-koZJ89uLZufDvToeWO5BrC4CR4OUfHnUz2qoPs/daQH6qq3IN62QFxCTZ+bKaCE0xaoCAJYE4AXre8AbghCrhg==