Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding horizontal scroll component #17460

Merged
merged 4 commits into from
Mar 17, 2021
Merged

Adding horizontal scroll component #17460

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c9496d
Adding horizontal scroll component
Mar 17, 2021
42d258f
Change files
Mar 17, 2021
4b3d897
Updating spacing to match fluent
Mar 17, 2021
6d8203b
Fixing linter errors
Mar 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-b4360bcf-47ad-49d8-9fb5-b50bf83cf571.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Adding horizontal scroll component",
"packageName": "@fluentui/web-components",
"email": "robarb@microsoft.com",
"dependentChangeType": "patch"
}
4 changes: 2 additions & 2 deletions packages/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
186 changes: 186 additions & 0 deletions packages/web-components/src/horizontal-scroll/fixtures/horizontal-scroll.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
132 changes: 132 additions & 0 deletions packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
`;
24 changes: 24 additions & 0 deletions packages/web-components/src/horizontal-scroll/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { customElement, FASTElement } from '@microsoft/fast-element';
import { HorizontalScroll, HorizontalScrollTemplate as template } from '@microsoft/fast-foundation';
import { HorizontalScrollStyles as styles, ActionsStyles } 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);
}
}
}
Loading