Skip to content

Commit

Permalink
fix(preset): refactor value preset #60
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason-capsule42
jason-capsule42 committed Apr 19, 2022
1 parent 5a996aa commit 8c79a06
Show file tree
Hide file tree
Showing 5 changed files with 19,533 additions and 1,371 deletions.
4 changes: 2 additions & 2 deletions apiExamples/presetValue.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<auro-select>
<auro-select value="price">
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price" selected>Price</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>
Expand Down
90 changes: 46 additions & 44 deletions demo/apiExamples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,48 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.

### Property Examples

#### <a name="placeholder"></a>`placeholder`
#### value

Use the `value` property to define a preset value on the `auro-select` element. The `value` of `auro-select` must match the `value` defined of a single `auro-menuoption`. Upon initially rendering the component, if the `value` does not match an `auro-menuoption`, the `value` of `auro-select` will be set to `undefined`.

To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/presetValue.html) -->
<!-- The below content is automatically added from ./../../apiExamples/presetValue.html -->
<auro-select value="price">
<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>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/presetValue.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/presetValue.html -->

```html
<auro-select value="price">
<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>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### placeholder

Use the `placeholder` string attribute to inject a custom placeholder option with the select element.

Expand Down Expand Up @@ -115,7 +156,7 @@ Use the `placeholder` string attribute to inject a custom placeholder option wit
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### <a name="error"></a>`error`
#### error

Use the `error` boolean attribute to toggle the error UI.

Expand Down Expand Up @@ -154,7 +195,7 @@ Use the `error` boolean attribute to toggle the error UI.
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### <a name="disabled"></a>`disabled`
#### disabled

Use the `disabled` boolean attribute to toggle the disabled UI.

Expand Down Expand Up @@ -195,7 +236,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.

### Slot Examples

#### <a name="label"></a>`label`
#### label

Use the `label` slot to give your users contextual information about their selection options. This `label` content is also helpful for assistive devices.

Expand Down Expand Up @@ -236,7 +277,7 @@ Use the `label` slot to give your users contextual information about their selec
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### <a name="helpText"></a>`helpText`
#### helpText

Use the `helptext` slot to provide additional information back to your user about their selection option(s).

Expand Down Expand Up @@ -279,45 +320,6 @@ Use the `helptext` slot to provide additional information back to your user abou

## Functional Examples

## Pre-selected option

Use the `selected` attribute on the `auro-menuoption` element to pre-select an option within a user's experience. This is from the [auro-menu](https://auro.alaskaair.com/components/auro/menu/api) API.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/presetValue.html) -->
<!-- The below content is automatically added from ./../../apiExamples/presetValue.html -->
<auro-select>
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price" selected>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>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/presetValue.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/presetValue.html -->

```html
<auro-select>
<auro-menu>
<auro-menuoption value="stops">Stops</auro-menuoption>
<auro-menuoption value="price" selected>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>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Use option for placeholder

In some cases, where selection of content is optional, you can use a `<auro-menuoption>` as a pre-selected option as a placeholder in the menu.
Expand Down
45 changes: 23 additions & 22 deletions docs/partials/apiExamples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,25 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.

### Property Examples

#### `placeholder`
#### value

Use the `value` property to define a preset value on the `auro-select` element. The `value` of `auro-select` must match the `value` defined of a single `auro-menuoption`. Upon initially rendering the component, if the `value` does not match an `auro-menuoption`, the `value` of `auro-select` will be set to `undefined`.

To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.

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

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

</auro-accordion>

#### placeholder

Use the `placeholder` string attribute to inject a custom placeholder option with the select element.

Expand All @@ -47,7 +65,7 @@ Use the `placeholder` string attribute to inject a custom placeholder option wit

</auro-accordion>

#### `error`
#### error

Use the `error` boolean attribute to toggle the error UI.

Expand All @@ -64,7 +82,7 @@ Use the `error` boolean attribute to toggle the error UI.

</auro-accordion>

#### `disabled`
#### disabled

Use the `disabled` boolean attribute to toggle the disabled UI.

Expand All @@ -84,7 +102,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.

### Slot Examples

#### `label`
#### label

Use the `label` slot to give your users contextual information about their selection options. This `label` content is also helpful for assistive devices.

Expand All @@ -100,7 +118,7 @@ Use the `label` slot to give your users contextual information about their selec

</auro-accordion>

#### `helpText`
#### helpText

Use the `helptext` slot to provide additional information back to your user about their selection option(s).

Expand All @@ -118,23 +136,6 @@ Use the `helptext` slot to provide additional information back to your user abou

## Functional Examples

## Pre-selected option

Use the `selected` attribute on the `auro-menuoption` element to pre-select an option within a user's experience. This is from the [auro-menu](https://auro.alaskaair.com/components/auro/menu/api) API.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/presetValue.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

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

</auro-accordion>

## Use option for placeholder

In some cases, where selection of content is optional, you can use a `<auro-menuoption>` as a pre-selected option as a placeholder in the menu.
Expand Down
Loading

0 comments on commit 8c79a06

Please sign in to comment.