Skip to content

Commit

Permalink
Test(web): Fix & Enable Tooltip visual tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavelklibani
pavelklibani committed Jul 17, 2024
1 parent d9036d9 commit 6e9b711
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 141 deletions.
22 changes: 18 additions & 4 deletions packages/web/src/scss/components/Tooltip/floating-ui-example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,21 @@ selectFallback.addEventListener('change', () => {
tooltip.updateConfig({ flipFallbackPlacements: selectFallback.value });
});

const viewport = document.getElementById('my-advanced-viewport');
const content = document.getElementById('my-advanced-content');
viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;
function centerContentInViewport() {
const viewport = document.getElementById('my-advanced-viewport');
const content = document.getElementById('my-advanced-content');

if (!viewport || !content) {
return;
}

const scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
const scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;

viewport.scrollLeft = scrollLeft;
viewport.scrollTop = scrollTop;
}

centerContentInViewport();

window.addEventListener('resize', centerContentInViewport);
276 changes: 139 additions & 137 deletions packages/web/src/scss/components/Tooltip/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,141 +1,5 @@
{{#> web/layout/plain }}

<section class="UNSTABLE_Section">

<h2 class="docs-Heading">Placements</h2>

<div class="docs-Stack docs-Stack--stretch">

<script type="module" src="placement-example.mjs"></script>

<form autocomplete="off">
<div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">

<label for="placement-top-start" class="Radio">
<input type="radio" name="placement" value="top-start" id="placement-top-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top-start</span>
</span>
</label>
<label for="placement-top" class="Radio">
<input type="radio" name="placement" value="top" id="placement-top" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top</span>
</span>
</label>
<label for="placement-top-end" class="Radio">
<input type="radio" name="placement" value="top-end" id="placement-top-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top-end</span>
</span>
</label>

</div>
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">

<label for="placement-bottom-start" class="Radio">
<input type="radio" name="placement" value="bottom-start" id="placement-bottom-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom-start</span>
</span>
</label>
<label for="placement-bottom" class="Radio">
<input type="radio" name="placement" value="bottom" id="placement-bottom" class="Radio__input" checked />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom</span>
</span>
</label>
<label for="placement-bottom-end" class="Radio">
<input type="radio" name="placement" value="bottom-end" id="placement-bottom-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom-end</span>
</span>
</label>

</div>
<div
class="GridItem"
style="
--grid-item-column-start: 1;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: start;
"
>

<label for="placement-left-start" class="Radio">
<input type="radio" name="placement" value="left-start" id="placement-left-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left-start</span>
</span>
</label>
<label for="placement-left" class="Radio">
<input type="radio" name="placement" value="left" id="placement-left" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left</span>
</span>
</label>
<label for="placement-left-end" class="Radio">
<input type="radio" name="placement" value="left-end" id="placement-left-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left-end</span>
</span>
</label>

</div>
<div
class="GridItem"
style="
--grid-item-column-start: 3;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: end;
"
>

<label for="placement-right-start" class="Radio">
<input type="radio" name="placement" value="right-start" id="placement-right-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right-start</span>
</span>
</label>
<label for="placement-right" class="Radio">
<input type="radio" name="placement" value="right" id="placement-right" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right</span>
</span>
</label>
<label for="placement-right-end" class="Radio">
<input type="radio" name="placement" value="right-end" id="placement-right-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right-end</span>
</span>
</label>

</div>
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">

<div class="Tooltip" style="margin: 5rem auto" data-spirit-element="tooltip">
<div class="docs-Box px-900 py-900" >
Click<br />
the dots!
</div>
<div class="TooltipPopover" id="tooltip-placements-example" data-spirit-placement="bottom" data-spirit-trigger="click">
<span id="tooltip-placements-example-text">bottom</span>
<span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
</div>
</div>

</div>
</div>
</form>

</div>
</section>

<section class="UNSTABLE_Section">

<h2 class="docs-Heading">Default</h2>
Expand Down Expand Up @@ -428,13 +292,151 @@ <h2 class="docs-Heading">Tooltip on Icon Component</h2>

</section>

<section class="UNSTABLE_Section">

<h2 class="docs-Heading">Placements</h2>

<div class="docs-Stack docs-Stack--stretch">

<script type="module" src="placement-example.mjs"></script>

<form autocomplete="off">
<div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">

<label for="placement-top-start" class="Radio">
<input type="radio" name="placement" value="top-start" id="placement-top-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top-start</span>
</span>
</label>
<label for="placement-top" class="Radio">
<input type="radio" name="placement" value="top" id="placement-top" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top</span>
</span>
</label>
<label for="placement-top-end" class="Radio">
<input type="radio" name="placement" value="top-end" id="placement-top-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">top-end</span>
</span>
</label>

</div>
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">

<label for="placement-bottom-start" class="Radio">
<input type="radio" name="placement" value="bottom-start" id="placement-bottom-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom-start</span>
</span>
</label>
<label for="placement-bottom" class="Radio">
<input type="radio" name="placement" value="bottom" id="placement-bottom" class="Radio__input" checked />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom</span>
</span>
</label>
<label for="placement-bottom-end" class="Radio">
<input type="radio" name="placement" value="bottom-end" id="placement-bottom-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">bottom-end</span>
</span>
</label>

</div>
<div
class="GridItem"
style="
--grid-item-column-start: 1;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: start;
"
>

<label for="placement-left-start" class="Radio">
<input type="radio" name="placement" value="left-start" id="placement-left-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left-start</span>
</span>
</label>
<label for="placement-left" class="Radio">
<input type="radio" name="placement" value="left" id="placement-left" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left</span>
</span>
</label>
<label for="placement-left-end" class="Radio">
<input type="radio" name="placement" value="left-end" id="placement-left-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">left-end</span>
</span>
</label>

</div>
<div
class="GridItem"
style="
--grid-item-column-start: 3;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: end;
"
>

<label for="placement-right-start" class="Radio">
<input type="radio" name="placement" value="right-start" id="placement-right-start" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right-start</span>
</span>
</label>
<label for="placement-right" class="Radio">
<input type="radio" name="placement" value="right" id="placement-right" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right</span>
</span>
</label>
<label for="placement-right-end" class="Radio">
<input type="radio" name="placement" value="right-end" id="placement-right-end" class="Radio__input" />
<span class="Radio__text">
<span class="Radio__label Radio__label--hidden">right-end</span>
</span>
</label>

</div>
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">

<div class="Tooltip" style="margin: 5rem auto" data-spirit-element="tooltip">
<div class="docs-Box px-900 py-900" >
Click<br />
the dots!
</div>
<div class="TooltipPopover" id="tooltip-placements-example" data-spirit-placement="bottom" data-spirit-trigger="click" data-spirit-enable-flipping="false">
<span id="tooltip-placements-example-text">bottom</span>
<span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
</div>
</div>

</div>
</div>
</form>

</div>
</section>

<section class="UNSTABLE_Section">

<h2 class="docs-Heading">Advanced Floating Functionality</h2>

<div class="docs-Stack docs-Stack--stretch">

<script type="module" src="floating-ui-example.mjs"></script>
<div id="test"></div>

<script type="module" src="floating-ui-example.mjs" rel="preload" as="script"></script>

<style>
.example-viewport {
Expand Down

0 comments on commit 6e9b711

Please sign in to comment.