-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add tooltip and anchor region web component (#16399)
* add tail on top and bottom tooltip * update fixture, storybook and styles for tooltip and anchor region * Change files * fixed import order in stories * export anchor region and removed TODO comment * update anchor region example * updated the fixture base file to use fluent components * combined selector creating the the bubble tail * generate and add api report * added elevation * update background and color to use neutral contrast recipe * update FAST to Fluent and bump fast-foundation version to 1.16.1 * revert version and opt into semver on fast-foundation
- Loading branch information
Showing
14 changed files
with
1,562 additions
and
5 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
change/@fluentui-web-components-2021-01-06-15-15-48-users-khamu-add-tooltip.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "update fixture, storybook and styles for tooltip and anchor region", | ||
| "packageName": "@fluentui/web-components", | ||
| "email": "khamu@microsoft.com", | ||
| "dependentChangeType": "patch", | ||
| "date": "2021-01-06T23:15:48.875Z" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
162 changes: 162 additions & 0 deletions
162
packages/web-components/src/anchored-region/anchored-region.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { STORY_RENDERED } from '@storybook/core-events'; | ||
| import addons from '@storybook/addons'; | ||
| import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities'; | ||
| import { FluentDesignSystemProvider } from '../design-system-provider'; | ||
| import { FluentAnchoredRegion } from '../anchored-region'; | ||
| import AnchoreRegionTemplate from './fixtures/base.html'; | ||
|
|
||
| // Prevent tree-shaking | ||
| FluentAnchoredRegion; | ||
| FluentDesignSystemProvider; | ||
|
|
||
| let scalingViewportPreviousXValue: number = 250; | ||
| let scalingViewportPreviousYValue: number = 250; | ||
|
|
||
| addons.getChannel().addListener(STORY_RENDERED, (name: string) => { | ||
| if (name.toLowerCase().startsWith('anchored-region')) { | ||
| scrollViewports(); | ||
| setButtonActions(); | ||
|
|
||
| const scalingViewportUpdate: HTMLElement | null = document.getElementById('viewport-scaling-update'); | ||
| if (scalingViewportUpdate !== null) { | ||
| scalingViewportUpdate.addEventListener('scroll', handleScrollViaUpdate); | ||
| } | ||
|
|
||
| const scalingViewportOffset: HTMLElement | null = document.getElementById('viewport-scaling-offset'); | ||
| if (scalingViewportOffset !== null) { | ||
| scalingViewportOffset.addEventListener('scroll', handleScrollViaOffset); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| function scrollViewports(): void { | ||
| document.querySelectorAll("div[id^='viewport']").forEach(el => { | ||
| if (el instanceof HTMLDivElement) { | ||
| el.scrollTop = 280; | ||
| RtlScrollConverter.setScrollLeft( | ||
| el, | ||
| el.dir === Direction.rtl ? -250 : 250, | ||
| el.dir === Direction.rtl ? Direction.rtl : Direction.ltr, | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function handleScrollViaUpdate(ev: Event): void { | ||
| if (ev.target instanceof HTMLElement) { | ||
| const scalingRegionUpdate: HTMLElement | null = document.getElementById('region-scaling-update'); | ||
| if (scalingRegionUpdate instanceof FluentAnchoredRegion) { | ||
| (scalingRegionUpdate as any).update(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function handleScrollViaOffset(ev: Event): void { | ||
| if (ev.target instanceof HTMLElement) { | ||
| const scroller: HTMLElement = ev.target as HTMLElement; | ||
|
|
||
| const scalingRegionOffset: HTMLElement | null = document.getElementById('region-scaling-offset'); | ||
| if (scalingRegionOffset instanceof FluentAnchoredRegion) { | ||
| (scalingRegionOffset as any).updateAnchorOffset( | ||
| scalingViewportPreviousXValue - scroller.scrollLeft, | ||
| scalingViewportPreviousYValue - scroller.scrollTop, | ||
| ); | ||
| } | ||
|
|
||
| scalingViewportPreviousXValue = scroller.scrollLeft; | ||
| scalingViewportPreviousYValue = scroller.scrollTop; | ||
| } | ||
| } | ||
|
|
||
| function setButtonActions(): void { | ||
| document.querySelectorAll('button').forEach(el => { | ||
| if (el instanceof HTMLButtonElement) { | ||
| switch (el.id) { | ||
| case 'toggle-anchor-anchor1': | ||
| el.onclick = event => { | ||
| const region: HTMLElement | null = document.getElementById('toggle-anchor-region'); | ||
| if (region === null) { | ||
| return; | ||
| } | ||
| region.setAttribute('anchor', 'toggle-anchor-anchor1'); | ||
| }; | ||
| break; | ||
|
|
||
| case 'toggle-anchor-anchor2': | ||
| el.onclick = event => { | ||
| const region: HTMLElement | null = document.getElementById('toggle-anchor-region'); | ||
| if (region === null) { | ||
| return; | ||
| } | ||
| region.setAttribute('anchor', 'toggle-anchor-anchor2'); | ||
| }; | ||
| break; | ||
|
|
||
| case 'toggle-positions-horizontal': | ||
| el.onclick = event => { | ||
| const region: HTMLElement | null = document.getElementById('toggle-positions-region'); | ||
| if (region === null) { | ||
| return; | ||
| } | ||
| const currentPosition: string | null = region.getAttribute('horizontal-default-position'); | ||
| if (currentPosition === 'left') { | ||
| region.setAttribute('horizontal-default-position', 'right'); | ||
| } else { | ||
| region.setAttribute('horizontal-default-position', 'left'); | ||
| } | ||
| }; | ||
| break; | ||
|
|
||
| case 'toggle-positions-vertical': | ||
| el.onclick = event => { | ||
| const region: HTMLElement | null = document.getElementById('toggle-positions-region'); | ||
| if (region === null) { | ||
| return; | ||
| } | ||
| const currentPosition: string | null = region.getAttribute('vertical-default-position'); | ||
| if (currentPosition === 'top') { | ||
| region.setAttribute('vertical-default-position', 'bottom'); | ||
| } else { | ||
| region.setAttribute('vertical-default-position', 'top'); | ||
| } | ||
| }; | ||
| break; | ||
|
|
||
| case 'toggle-positions-small': | ||
| el.onclick = event => { | ||
| const smallContent: HTMLElement | null = document.getElementById('toggle-positions-small'); | ||
| const largeContent: HTMLElement | null = document.getElementById('toggle-positions-large'); | ||
| if (smallContent === null || largeContent === null) { | ||
| return; | ||
| } | ||
|
|
||
| smallContent.hidden = false; | ||
| largeContent.hidden = true; | ||
| }; | ||
| break; | ||
|
|
||
| case 'toggle-positions-large': | ||
| el.onclick = event => { | ||
| const smallContent: HTMLElement | null = document.getElementById('toggle-positions-small'); | ||
| const largeContent: HTMLElement | null = document.getElementById('toggle-positions-large'); | ||
| if (smallContent === null || largeContent === null) { | ||
| return; | ||
| } | ||
|
|
||
| smallContent.hidden = true; | ||
| largeContent.hidden = false; | ||
| }; | ||
| break; | ||
|
|
||
| default: | ||
| el.onclick; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export default { | ||
| title: 'Anchored region', | ||
| }; | ||
|
|
||
| export const base = () => AnchoreRegionTemplate; |
8 changes: 8 additions & 0 deletions
8
packages/web-components/src/anchored-region/anchored-region.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { css } from '@microsoft/fast-element'; | ||
|
|
||
| export const AnchoredRegionStyles = css` | ||
| :host { | ||
| contain: layout; | ||
| display: block; | ||
| } | ||
| `; |
Oops, something went wrong.