Skip to content

Commit

Permalink
(web-components) remove design system provider from examples (#18229)
Browse files Browse the repository at this point in the history
* remove fluent design system provider from examples

* Change files
  • Loading branch information
chrisdholt committed Jun 8, 2021
1 parent 0fd43ed commit dfa3651
Show file tree
Hide file tree
Showing 37 changed files with 2,574 additions and 2,730 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "remove fluent design system provider from examples",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "none"
}
11 changes: 2 additions & 9 deletions packages/web-components/.storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,8 @@
html,
body,
#root {
margin: 0;
display: flex;
flex-direction: column;
margin: 8px;
height: 100%;
}

fluent-design-system-provider {
flex-grow: 1;
overflow: auto;
padding: calc(var(--design-unit) * 2px);
background: var(--fill-color);
}
</style>
164 changes: 81 additions & 83 deletions packages/web-components/src/accordion/fixtures/base.html
Original file line number Diff line number Diff line change
@@ -1,83 +1,81 @@
<fluent-design-system-provider use-defaults>
<style>
fluent-accordion-item.disabled::part(button) {
pointer-events: none;
}
</style>
<h1>Accordion</h1>
<h4>Default</h4>
<fluent-accordion>
<fluent-accordion-item expanded>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel one</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="heading">Panel two</span>
Panel two content
</fluent-accordion-item>
<fluent-accordion-item expanded>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
<h4>Single expand</h4>
<fluent-accordion expand-mode="single">
<fluent-accordion-item>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel one</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item class="disabled">
<span slot="heading">Panel Two</span>
Panel two content
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
<h4>With disabled item</h4>
<fluent-accordion>
<fluent-accordion-item>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel two</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item class="disabled">
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Disabled</span>
Disabled content
</fluent-accordion-item>
<fluent-accordion-item expanded>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
</fluent-design-system-provider>
<style>
fluent-accordion-item.disabled::part(button) {
pointer-events: none;
}
</style>
<h1>Accordion</h1>
<h4>Default</h4>
<fluent-accordion>
<fluent-accordion-item expanded>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel one</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="heading">Panel two</span>
Panel two content
</fluent-accordion-item>
<fluent-accordion-item expanded>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
<h4>Single expand</h4>
<fluent-accordion expand-mode="single">
<fluent-accordion-item>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel one</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item class="disabled">
<span slot="heading">Panel Two</span>
Panel two content
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
<h4>With disabled item</h4>
<fluent-accordion>
<fluent-accordion-item>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel two</span>
Panel one content
</fluent-accordion-item>
<fluent-accordion-item class="disabled">
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Disabled</span>
Disabled content
</fluent-accordion-item>
<fluent-accordion-item expanded>
<div slot="start">
<button>1</button>
</div>
<div slot="end">
<button>1</button>
</div>
<span slot="heading">Panel three</span>
Panel three content
</fluent-accordion-item>
</fluent-accordion>
108 changes: 53 additions & 55 deletions packages/web-components/src/anchor/fixtures/anchor.html
Original file line number Diff line number Diff line change
@@ -1,67 +1,65 @@
<fluent-design-system-provider use-defaults>
<h1>Anchor</h1>
<h1>Anchor</h1>

<h4>Default</h4>
<fluent-anchor href="#">Anchor</fluent-anchor>
<h4>Default</h4>
<fluent-anchor href="#">Anchor</fluent-anchor>

<h5>With target</h5>
<fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor>
<h5>With target</h5>
<fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor>

<h4>Neutral</h4>
<fluent-anchor href="#" appearance="neutral">Button</fluent-anchor>
<h4>Neutral</h4>
<fluent-anchor href="#" appearance="neutral">Button</fluent-anchor>

<h4>Accent</h4>
<fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor>
<h4>Accent</h4>
<fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor>

<h4>Hypertext</h4>
<fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor>
<br />
<fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
corrupti
<fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor>
dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.
</p>
<h4>Hypertext</h4>
<fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor>
<br />
<fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
corrupti
<fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor>
dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.
</p>

<h4>Lightweight</h4>
<fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor>
<h4>Lightweight</h4>
<fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor>

<h4>Outline</h4>
<fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor>
<h4>Outline</h4>
<fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor>

<h4>Stealth</h4>
<fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor>
<h4>Stealth</h4>
<fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor>

<h4>With start</h4>
<fluent-anchor href="#">
Anchor
<svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>
<h4>With start</h4>
<fluent-anchor href="#">
Anchor
<svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>

<h4>With end</h4>
<fluent-anchor href="#">
Anchor
<svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>
<h4>With end</h4>
<fluent-anchor href="#">
Anchor
<svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>

<h4>Icon in default slot</h4>
<fluent-anchor href="#">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>
<h4>Icon in default slot</h4>
<fluent-anchor href="#">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
/>
</svg>
</fluent-anchor>

<h4>With aria-label</h4>
<fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor>
</fluent-design-system-provider>
<h4>With aria-label</h4>
<fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<fluent-design-system-provider style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<div style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<fluent-anchored-region
anchor="anchor-fixed"
vertical-positioning-mode="dynamic"
Expand Down Expand Up @@ -490,4 +490,4 @@ <h2>RTL-Start & End</h2>
outside & fixed
</div>
</fluent-anchored-region>
</fluent-design-system-provider>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<fluent-design-system-provider style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<div style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<fluent-anchored-region
anchor="anchor-fixed"
vertical-positioning-mode="dynamic"
Expand Down Expand Up @@ -490,4 +490,4 @@ <h4>RTL-Start & End</h4>
outside & fixed
</div>
</fluent-anchored-region>
</fluent-design-system-provider>
</div>
Loading

0 comments on commit dfa3651

Please sign in to comment.