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

Jbaker/fix placeholder reset #203

Merged
merged 2 commits into from
Sep 11, 2024
Merged

Jbaker/fix placeholder reset #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0661497
fix: don't apply placeholder text to value #202
jason-capsule42 Sep 11, 2024
af62c02
docs: add additional placeholder example and rebuild docs
jason-capsule42 Sep 11, 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
11 changes: 11 additions & 0 deletions apiExamples/labelWithPlaceholder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<auro-select placeholder="Placeholder Text">
<span slot="label">Label Text</span>
<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>
41 changes: 41 additions & 0 deletions demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,47 @@ Use the `label` slot to give your users contextual information about their selec
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### label with placeholder

The `label` slot and `placeholder` attribute may be used together.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/labelWithPlaceholder.html) -->
<!-- The below content is automatically added from ./../../apiExamples/labelWithPlaceholder.html -->
<auro-select placeholder="Placeholder Text">
<span slot="label">Label Text</span>
<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 alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/labelWithPlaceholder.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/labelWithPlaceholder.html -->

```html
<auro-select placeholder="Placeholder Text">
<span slot="label">Label Text</span>
<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>
jason-capsule42 marked this conversation as resolved.
Show resolved Hide resolved
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### helpText <a name="helpText"></a>
Use the `helptext` slot to provide additional information back to your user about their selection option(s).

Expand Down
5 changes: 0 additions & 5 deletions docTemplates/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,6 @@ The following sections are editable by making changes to the following files:
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
<!-- AURO-GENERATED-CONTENT:END -->

### CSS Custom Property fallbacks

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
<!-- AURO-GENERATED-CONTENT:END -->

### Define dependency in project component

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
Expand Down
16 changes: 16 additions & 0 deletions docs/partials/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,22 @@ Use the `label` slot to give your users contextual information about their selec

</auro-accordion>

#### label with placeholder

The `label` slot and `placeholder` attribute may be used together.

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

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

</auro-accordion>

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

Use the `helptext` slot to provide additional information back to your user about their selection option(s).
Expand Down
4 changes: 2 additions & 2 deletions src/auro-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,15 +172,15 @@ export class AuroSelect extends LitElement {
elm.remove();
});

if (typeof option === 'string') {
if (typeof option === 'string' && option !== this.placeholder) {
// create a new span element with the value string
const valueElem = document.createElement('span');
valueElem.setAttribute('valuestr', true);
valueElem.textContent = option;

// append the new element into the trigger content
triggerContentEl.appendChild(valueElem);
} else {
} else if (typeof option === 'object') {
// clone the selected option and remove attributes that style it
const clone = option.cloneNode(true);
clone.removeAttribute('selected');
Expand Down