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

fix: update whitespace & line endings in doc #95

Merged
merged 1 commit into from
Dec 5, 2024
Merged

fix: update whitespace & line endings in doc #95

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
172 changes: 86 additions & 86 deletions components/select/demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ The demo.md file is a compiled document. No edits should be made directly to thi
demo.md is created by running `npm run build:markdownDocs`.

This file is generated based on a template fetched from `./docs/partials/demo.md`
-->

-->
# Select

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
<!-- The below content is automatically added from ./../docs/partials/description.md -->
`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.

`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.
## About auro-select

The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.

The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
## Install instructions

The `<auro-select>` custom element is a combo-element using independent primitives for the most flexibility. To allow consumers the most control over the versioning their dependencies, `<auro-select>` requires the following peer dependencies along with `<auro-select>`.
Expand All @@ -26,8 +26,8 @@ $ npm i @aurodesignsystem/auro-select
$ npm i @aurodesignsystem/auro-dropdown
$ npm i @aurodesignsystem/auro-menu
```
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->
## Default example

A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements. Notice a default `Please select option` placeholder in the trigger.
Expand All @@ -46,12 +46,12 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
```html
<auro-select>
<auro-menu>
Expand All @@ -62,11 +62,11 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Example with auro-icons in options

Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
Expand Down Expand Up @@ -94,12 +94,12 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withIcons.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->
```html
<auro-select>
<auro-menu>
Expand All @@ -119,11 +119,11 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
<auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Example with nested menus

This example shows nesting `<auro-menu>` elements to create submenus.
Expand Down Expand Up @@ -165,12 +165,12 @@ This example shows nesting `<auro-menu>` elements to create submenus.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withSubmenus.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->
```html
<auro-select>
<auro-menu>
Expand Down Expand Up @@ -204,11 +204,11 @@ This example shows nesting `<auro-menu>` elements to create submenus.
<auro-menuoption value="planes">Planes</auro-menuoption>
<auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Example with no checkmark

Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
Expand All @@ -227,12 +227,12 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noCheckmark.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->
```html
<auro-select nocheckmark>
<auro-menu>
Expand All @@ -243,11 +243,11 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Example with custom bib height

This example shows how to set a custom height for the bib from `<auro-dropdown>`.
Expand All @@ -266,19 +266,19 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
</auro-select>
<style>
#customBibHeightExample::part(dropdownSize) {
max-height: 100px;
}
</style>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<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 -->

<!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->
```html
<auro-select id="customBibHeightExample">
<auro-menu>
Expand All @@ -289,16 +289,16 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
</auro-select>
<style>
#customBibHeightExample::part(dropdownSize) {
max-height: 100px;
}
</style>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</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 All @@ -319,12 +319,12 @@ The following example illustrates the use of the `label` and `helptext` slots fo
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->
```html
<auro-select>
<span slot="label">Please choose a preference</span>
Expand All @@ -337,11 +337,11 @@ The following example illustrates the use of the `label` and `helptext` slots fo
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Error State

Use the `error` boolean attribute to toggle the error UI.
Expand All @@ -360,12 +360,12 @@ Use the `error` boolean attribute to toggle the error UI.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
```html
<auro-select error="Custom error message">
<auro-menu>
Expand All @@ -376,11 +376,11 @@ Use the `error` boolean attribute to toggle the error UI.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Disabled state

Use the `disabled` boolean attribute to toggle the disabled UI.
Expand All @@ -399,12 +399,12 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
```html
<auro-select disabled>
<auro-menu>
Expand All @@ -415,11 +415,11 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-select` custom element is defined automatically.
Expand Down Expand Up @@ -452,8 +452,8 @@ This will create a new custom element that you can use in your HTML that will fu
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
```html
<custom-select>
<auro-menu>
Expand All @@ -464,7 +464,7 @@ This will create a new custom element that you can use in your HTML that will fu
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</custom-select>
```
</custom-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Loading