Skip to content

Commit

Permalink
docs: add example of inelin-block size
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota
sun-mota committed Dec 11, 2024
1 parent 5b08948 commit 4ebd62f
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 55 deletions.
38 changes: 38 additions & 0 deletions components/dropdown/apiExamples/ineline.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<table style="text-align: center;">
<thead>
<tr>
<td>Icon Only</td>
<td>Text Only</td>
<td>Text with Icon</td>
</tr>
</thead>
<tr>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon Only Dropdown
<div slot="trigger">
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Text Only Dropdown
<div slot="trigger">
Trigger Text
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon and Text Dropdown
<div slot="trigger">
<div style="white-space:nowrap">
Trigger Text
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</div>
</auro-dropdown>
</td>
</tr>
</table>
1 change: 1 addition & 0 deletions components/dropdown/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,6 @@
<!-- If additional elements are needed for the demo, add them here. -->
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
</body>
</html>
120 changes: 82 additions & 38 deletions components/dropdown/demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,53 +85,97 @@ This first common example uses the default `auro-dropdown` element with the attr
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Common use with aria-labelledby
## Common use of borderless dropdown

This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-labelledby` attribute to identify the element that labels the element it is applied to.
Lorem ipsum solar

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonLabelledby.html) -->
<!-- The below content is automatically added from ./../apiExamples/commonLabelledby.html -->
<p id="foo">The element is labelled by content external to the element.</p>
<auro-dropdown id="commonAdvanced" aria-labelledby="foo" bordered rounded inset chevron>
<div style="padding: var(--ds-size-150);">
Lorem ipsum solar
<br />
<auro-button onclick="document.querySelector('#commonAdvanced').hide()">
Dismiss Dropdown
</auro-button>
</div>
<span slot="helpText">
Help text
</span>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ineline.html) -->
<!-- The below content is automatically added from ./../apiExamples/ineline.html -->
<table style="text-align: center;">
<thead>
<tr>
<td>Icon Only</td>
<td>Text Only</td>
<td>Text with Icon</td>
</tr>
</thead>
<tr>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon Only Dropdown
<div slot="trigger">
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Text Only Dropdown
<div slot="trigger">
Trigger Text
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon and Text Dropdown
<div slot="trigger">
<div style="white-space:nowrap">
Trigger Text
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</div>
</auro-dropdown>
</td>
</tr>
</table>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonLabelledby.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/commonLabelledby.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ineline.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/ineline.html -->

```html
<p id="foo">The element is labelled by content external to the element.</p>
<auro-dropdown id="commonAdvanced" aria-labelledby="foo" bordered rounded inset chevron>
<div style="padding: var(--ds-size-150);">
Lorem ipsum solar
<br />
<auro-button onclick="document.querySelector('#commonAdvanced').hide()">
Dismiss Dropdown
</auro-button>
</div>
<span slot="helpText">
Help text
</span>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
<table style="text-align: center;">
<thead>
<tr>
<td>Icon Only</td>
<td>Text Only</td>
<td>Text with Icon</td>
</tr>
</thead>
<tr>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon Only Dropdown
<div slot="trigger">
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Text Only Dropdown
<div slot="trigger">
Trigger Text
</div>
</auro-dropdown>
</td>
<td>
<auro-dropdown aria-div="custom div" inset style="display: inline-block;">
Icon and Text Dropdown
<div slot="trigger">
<div style="white-space:nowrap">
Trigger Text
<auro-icon category="interface" name="arrow-down"></auro-icon>
</div>
</div>
</auro-dropdown>
</td>
</tr>
</table>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Expand Down
33 changes: 16 additions & 17 deletions components/dropdown/docs/partials/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,6 @@ This first common example uses the default `auro-dropdown` element with the attr

</auro-accordion>

## Common use with aria-labelledby

This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-labelledby` attribute to identify the element that labels the element it is applied to.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonLabelledby.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonLabelledby.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>


## Common use using the label content slot

This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element.
Expand Down Expand Up @@ -106,6 +89,22 @@ This common example uses the default `auro-dropdown` element with the attributes

</auro-accordion>

## Common use with its width matching the trigger

To make the dropdown to be just big as the trigger's content, style the `auro-dropdown` width `display: inline-block`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ineline.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ineline.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

## Supported standard and accessible interactions

The dropdown can be opened with the following actions:
Expand Down

0 comments on commit 4ebd62f

Please sign in to comment.