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.

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

feat: file grid #2564

Open
wants to merge 37 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
02f4ec6
feat: add breadcrumb and folder navigation to file list
gavinbarron Jan 5, 2023
ef3227f
Merge branch 'next/enhanced-file-list' into feat/file-list-enhancements
gavinbarron Feb 7, 2023
b769f39
feat: theme toggle control
gavinbarron Feb 9, 2023
6149a58
feat: add generic breadcrumb component
gavinbarron Feb 9, 2023
a4d4c0e
renamed toggle component
gavinbarron Feb 9, 2023
badd280
fixing broken stories
gavinbarron Feb 9, 2023
1d08034
added copyright headers and adjusted theme names to account for Teams
gavinbarron Feb 9, 2023
f539707
merging theme toggle
gavinbarron Feb 9, 2023
4e263f8
refactored breadcrumb to separate component, added styling
gavinbarron Feb 13, 2023
f6f6106
adds tests for breadcrumb
gavinbarron Feb 14, 2023
19a0064
Merge remote-tracking branch 'origin/next/fluentui' into feat/file-li…
gavinbarron Feb 14, 2023
bb0763f
added basic story for file composite
gavinbarron Feb 14, 2023
e2fbf68
merge from next/fluentui
gavinbarron Feb 14, 2023
ebe30f0
fixes story name and heirachy placement
gavinbarron Feb 14, 2023
4b65582
adding stories for file composite and breadcrumb
gavinbarron Feb 14, 2023
d04bbb9
fixing property bindings on file-list
gavinbarron Feb 14, 2023
4672407
feat: file-grid
gavinbarron Feb 21, 2023
d3c6561
refactor: move file dialogs up to composite
gavinbarron Feb 21, 2023
90aa651
Merge branch 'main' into merge/from-main
gavinbarron Feb 23, 2023
b9de2aa
adding reload logic to rename process
gavinbarron Feb 27, 2023
5771ab4
adding file-grid and file-composite to react components
gavinbarron Feb 27, 2023
745c164
fixing generation for arbirary generic types in mgt-components
gavinbarron Feb 27, 2023
0fb1ed9
need to ensure Command is exported
gavinbarron Feb 27, 2023
2de2c03
resolving conflicts
gavinbarron Mar 10, 2023
e3b0a65
adding file grid to composite stories
gavinbarron Mar 10, 2023
39f73f4
wip
gavinbarron Mar 21, 2023
2851f8d
fixing breadcrumb logic to preserve driveId when navigating through f…
gavinbarron Mar 22, 2023
e6fdc87
merge from next/fluentui
gavinbarron Mar 22, 2023
c4830fa
fix to account for React wrapper not setting props before connectedCa…
gavinbarron Mar 27, 2023
48046d0
adding command bar for file upload and new folder commands
gavinbarron Mar 28, 2023
3757af9
fixing styling for drap + drop target styling
gavinbarron Mar 28, 2023
40030f3
merge from next/fluentui
gavinbarron Apr 14, 2023
78d65b7
refactoring file upload progress to separate component
gavinbarron Apr 14, 2023
7d785be
allows clearing of upload status notices and improves their layout in…
gavinbarron Apr 20, 2023
45f8631
Merge remote-tracking branch 'origin/next/fluentui' into next/fix-grid
gavinbarron Apr 20, 2023
656f294
remove duplicate object key from merge
gavinbarron May 9, 2023
a34c8fc
resolved linting issues
gavinbarron May 9, 2023
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
15 changes: 15 additions & 0 deletions ecs-article.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Microsoft Graph Toolkit - Overview and extensibility

The Microsoft Graph Toolkit is a collection of authentication providers and web components powered by Microsoft Graph. The components simplify connecting to Microsoft Graph and allow developers to focus on their application instead of authentication and the Microsoft Graph API. The components are fully functional right out of the box, but can also be extended to fit most scenarios. The Microsoft Graph Toolkit is available as a library of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and also in a React version via a lightweight wrapper.

## Benefits

## Authentication

## Web Components

## React Components

## Styling

## Extensibility
28 changes: 19 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@

<mgt-mock-provider></mgt-mock-provider>
<header>
<mgt-theme-toggle></mgt-theme-toggle>
<mgt-theme-toggle mode="light"></mgt-theme-toggle>
</header>

<h1>Developer test page</h1>
<main>
<h2>mgt-login</h2>
<mgt-login login-view="compact"></mgt-login>
<mgt-login></mgt-login>
<!-- <mgt-login></mgt-login>
<h2>mgt-person me query two lines card on click with presence</h2>
<!-- <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
<mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
<mgt-person-card person-query="me"></mgt-person-card>
<!-- <h2>mgt-people-picker</h2>
<mgt-people-picker></mgt-people-picker>
Expand All @@ -60,16 +60,26 @@ <h2>mgt-agenda group-by-day</h2>
<h2>mgt-people show-presence</h2>
<mgt-people show-presence></mgt-people>
<h2>mgt-todo</h2>
<mgt-todo></mgt-todo>
<mgt-todo></mgt-todo>-->
<h2>mgt-file-list-composite</h2>
<mgt-file-list-composite
breadcrumb-root-name="Drive"
drive-id="b!M5IeZ2QKf0y18TIIXsDQkecHx1QrukxCte8X3n6ka6yn409-utaER7M2W9uRO4yB"
item-id="01WEUQSTTDRNNTJAJ7L5AJYYYSIOC665GF"
use-grid-view
enable-file-upload
></mgt-file-list-composite>
<h2>mgt-file-list</h2>
<mgt-file-list></mgt-file-list>
<h2>mgt-picker</h2>
<mgt-file-list
drive-id="b!M5IeZ2QKf0y18TIIXsDQkecHx1QrukxCte8X3n6ka6yn409-utaER7M2W9uRO4yB"
item-id="01WEUQSTTDRNNTJAJ7L5AJYYYSIOC665GF"
enable-file-upload
></mgt-file-list>
<!-- <h2>mgt-picker</h2>
<mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker>
<h2>mgt-search-box</h2>
<mgt-search-box search-term="contoso"></mgt-search-box>
<h2>mgt-search-results</h2>
<mgt-search-results query-string="contoso"></mgt-search-results>
<mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker> -->
<h2>mgt-search-results</h2> -->
</main>
</body>
</html>
6 changes: 6 additions & 0 deletions packages/mgt-components/src/components/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,14 @@ import './mgt-person/mgt-person-types';
import './mgt-tasks/mgt-tasks';
import './mgt-teams-channel-picker/mgt-teams-channel-picker';
import './mgt-todo/mgt-todo';
import './mgt-breadcrumb/mgt-breadcrumb';
import './mgt-contact/mgt-contact';
import './mgt-messages/mgt-messages';
import './mgt-organization/mgt-organization';
import './mgt-profile/mgt-profile';
import './mgt-theme-toggle/mgt-theme-toggle';
import './mgt-file-grid/mgt-file-grid';
import './mgt-file-list-composite/mgt-file-list-composite';

export * from './mgt-agenda/mgt-agenda';
export * from './mgt-file/mgt-file';
Expand All @@ -43,9 +46,12 @@ export * from './mgt-person/mgt-person-types';
export * from './mgt-tasks/mgt-tasks';
export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
export * from './mgt-todo/mgt-todo';
export * from './mgt-breadcrumb/mgt-breadcrumb';
export * from './mgt-contact/mgt-contact';
export * from './mgt-contact/mgt-contact';
export * from './mgt-messages/mgt-messages';
export * from './mgt-organization/mgt-organization';
export * from './mgt-profile/mgt-profile';
export * from './mgt-theme-toggle/mgt-theme-toggle';
export * from './mgt-file-grid/mgt-file-grid';
export * from './mgt-file-list-composite/mgt-file-list-composite';
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/

@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
@import '../../styles/shared-styles.scss';
@import './mgt-breadcrumb.theme.scss';

:host {
--type-ramp-base-font-size: var(--breadcrumb-base-font-size, 18px);
--type-ramp-base-line-height: var(--breadcrumb-base-line-height, 36px);

&::part(crumb),
&::part(control) {
padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
}

&::part(crumb) {
font-weight: 600;
}
&::part(control) {
background-color: var(--neutral-fill-rest);
background: var(--neutral-fill-rest);
padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
&:hover {
background-color: var(--neutral-fill-stealth-hover);
background: var(--neutral-fill-stealth-hover);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
import '../../__mocks__/mock-media-match';
import { screen } from 'testing-library__dom';
import userEvent from '@testing-library/user-event';
import { fixture } from '@open-wc/testing-helpers';
import './mgt-breadcrumb';
import { BreadcrumbInfo, MgtBreadcrumb } from './mgt-breadcrumb';

describe('mgt-breadcrumb - tests', () => {
it('should render', async () => {
const component = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
expect(component).toBeDefined();
});
it('should render with a single node', async () => {
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
component.breadcrumb = [
{
id: 'root-item',
name: 'root-item'
}
];
await component.updateComplete;
const listItems = await screen.findAllByRole('listitem');
expect(listItems?.length).toBe(1);
const root = await screen.findByText('root-item');
expect(root).toBeDefined();
});
it('should render with three nodes', async () => {
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
component.breadcrumb = [
{
id: '0',
name: 'root-item'
},
{
id: '1',
name: 'node-1'
},
{
id: '2',
name: 'node-2'
}
];
await component.updateComplete;
const listItems = await screen.findAllByRole('listitem');
expect(listItems?.length).toBe(3);
const root = await screen.findByText('root-item');
expect(root).toBeDefined();

const buttons = await screen.findAllByRole('button');

expect(buttons?.length).toBe(2);
});

it('should emit a clicked event when a button is clicked', async () => {
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
let eventEmitted;
component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
eventEmitted = e.detail;
});

const rootNode = {
id: '0',
name: 'root-item'
};
component.breadcrumb = [
rootNode,
{
id: '1',
name: 'node-1'
}
];
await component.updateComplete;

const buttons = await screen.findAllByRole('button');
expect(buttons?.length).toBe(1);

buttons[0].click();
expect(eventEmitted).toBeDefined();
expect(eventEmitted).toBe(rootNode);
});

it('should emit a clicked event when the enter button is pressed', async () => {
const user = userEvent.setup();
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
let eventEmitted;
component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
eventEmitted = e.detail;
});

const rootNode = {
id: '0',
name: 'root-item'
};
component.breadcrumb = [
rootNode,
{
id: '1',
name: 'node-1'
}
];
await component.updateComplete;

const buttons = await screen.findAllByRole('button');
expect(buttons?.length).toBe(1);
buttons[0].focus();

await user.keyboard('{Enter}');
expect(eventEmitted).toBeDefined();
expect(eventEmitted).toBe(rootNode);
});

it('should emit a clicked event when the space button is pressed', async () => {
const user = userEvent.setup();
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
let eventEmitted;
component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
eventEmitted = e.detail;
});

const rootNode = {
id: '0',
name: 'root-item'
};
component.breadcrumb = [
rootNode,
{
id: '1',
name: 'node-1'
}
];
await component.updateComplete;

const buttons = await screen.findAllByRole('button');
expect(buttons?.length).toBe(1);
buttons[0].focus();

await user.keyboard(' ');
expect(eventEmitted).toBeDefined();
expect(eventEmitted).toBe(rootNode);
});

it('should not emit a clicked event when a regular character button is pressed', async () => {
const user = userEvent.setup();
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
let eventEmitted;
component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
eventEmitted = e.detail;
});

const rootNode = {
id: '0',
name: 'root-item'
};
component.breadcrumb = [
rootNode,
{
id: '1',
name: 'node-1'
}
];
await component.updateComplete;

const buttons = await screen.findAllByRole('button');
expect(buttons?.length).toBe(1);
buttons[0].focus();

await user.keyboard('r');
expect(eventEmitted).toBeUndefined();
});

it('should not emit a clicked event when the last node is clicked', async () => {
const component: MgtBreadcrumb = await fixture(`
<mgt-breadcrumb></mgt-breadcrumb>
`);
let eventEmitted;
component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
eventEmitted = e.detail;
});

const rootNode = {
id: '0',
name: 'root-item'
};
component.breadcrumb = [
rootNode,
{
id: '1',
name: 'node-1'
}
];
await component.updateComplete;

const notButton = await screen.findByText('node-1');
notButton.click();

expect(eventEmitted).toBeUndefined();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/

@import '../../styles/shared-sass-variables.scss';

$breadcrumb: ();

@include create-themes($breadcrumb);
Loading