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.

Sign up for GitHub

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

Add example of how to make a custom bib height with new dropdown feature #220

Merged
merged 5 commits into from
Nov 13, 2024
Merged

Add example of how to make a custom bib height with new dropdown feature #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
705d1f0
perf: update dependencies
jordanjones243 Nov 8, 2024
ef7732b
perf: update rollup config
jordanjones243 Nov 13, 2024
fdf148a
perf: update to use restructured WCA doc build
jordanjones243 Nov 13, 2024
960ae1b
perf: demonstrate how to set custom bib height #134 #216
jordanjones243 Nov 13, 2024
c6faeb7
feat: add attribute to have bib width match content width #216
jordanjones243 Nov 13, 2024
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
16 changes: 16 additions & 0 deletions apiExamples/customBibHeight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<auro-select id="customBibHeightExample">
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price">Price</auro-menuoption>
<auro-menuoption value="duration">Duration</auro-menuoption>
<auro-menuoption value="departure">Departure</auro-menuoption>
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>

<style>
#customBibHeightExample::part(dropdownPopover) {
max-height: 100px;
}
</style>
15 changes: 15 additions & 0 deletions apiExamples/flexMenuWidth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<auro-select flexMenuWidth id="flexMenuWidthExample">
<auro-menu>
<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
</auro-menu>
</auro-select>

<style>
#flexMenuWidthExample::part(dropdownTrigger) {
width: 25%;
}
</style>
1 change: 1 addition & 0 deletions demo/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,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>
</body>
</html>
53 changes: 53 additions & 0 deletions demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
|---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
| [disabled](#disabled) | `disabled` | `Boolean` | | When attribute is present element shows disabled state. |
| [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
| [flexMenuWidth](#flexMenuWidth) | `flexMenuWidth` | `Boolean` | | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
| [noCheckmark](#noCheckmark) | `noCheckmark` | `Boolean` | | When true, checkmark on selected option will no longer be present. |
| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. |
| [optionSelected](#optionSelected) | `optionSelected` | `Object` | "undefined" | Specifies the current selected menuOption. |
Expand All @@ -44,6 +45,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
| | Default slot for the menu content. |
| [helpText](#helpText) | Defines the content of the helpText. |
| [label](#label) | Defines the content of the label. |

## CSS Shadow Parts

| Part | Description |
|------------|-----------------------------|
| [helpText](#helpText) | Apply CSS to the help text. |
<!-- AURO-GENERATED-CONTENT:END -->

## API Examples
Expand Down Expand Up @@ -320,6 +327,52 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### flexMenuWidth <a name="flexMenuWidth"></a>
Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/flexMenuWidth.html) -->
<!-- The below content is automatically added from ./../../apiExamples/flexMenuWidth.html -->
<auro-select flexMenuWidth id="flexMenuWidthExample">
<auro-menu>
<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
</auro-menu>
</auro-select>
<style>
#flexMenuWidthExample::part(dropdownTrigger) {
width: 25%;
}
</style>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/flexMenuWidth.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/flexMenuWidth.html -->

```html
<auro-select flexMenuWidth id="flexMenuWidthExample">
<auro-menu>
<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
</auro-menu>
</auro-select>
<style>
#flexMenuWidthExample::part(dropdownTrigger) {
width: 25%;
}
</style>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

### Slot Examples

#### label <a name="label"></a>
Expand Down
4,764 changes: 4,340 additions & 424 deletions demo/api.min.js
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 51 additions & 0 deletions demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,57 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Example with custom bib height
jordanjones243 marked this conversation as resolved.
Show resolved Hide resolved

This example shows how to set a custom height for the bib from `<auro-dropdown>`.

Custom height dimensions are set by using the `dropdownPopover` CSS Part and then applying a `max-height` rule and value.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customBibHeight.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customBibHeight.html -->
<auro-select id="customBibHeightExample">
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price">Price</auro-menuoption>
<auro-menuoption value="duration">Duration</auro-menuoption>
<auro-menuoption value="departure">Departure</auro-menuoption>
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
<style>
#customBibHeightExample::part(dropdownPopover) {
max-height: 100px;
}
</style>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customBibHeight.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customBibHeight.html -->

```html
<auro-select id="customBibHeightExample">
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price">Price</auro-menuoption>
<auro-menuoption value="duration">Duration</auro-menuoption>
<auro-menuoption value="departure">Departure</auro-menuoption>
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
<style>
#customBibHeightExample::part(dropdownPopover) {
max-height: 100px;
}
</style>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Label and help text slots

The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.
Expand Down
Loading