Skip to content

fix(Suggestion): creatable button design #5097

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

Draft
eirikbacker wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(Suggestion): creatable button design #5097

Show file tree
Hide file tree
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
4 changes: 4 additions & 0 deletions packages/css/src/suggestion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,10 @@
@composes ds-focus--visible--middle from './base.css';
}
}
& > u-option[data-creatable]::after {
content: 'Legg til ' var(--dsc-suggestion-creatable);
}

[data-multiple] & {
& > u-option:not([data-empty]) {
padding-inline-start: calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap));
Expand Down
39 changes: 22 additions & 17 deletions packages/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,28 @@ <h1 class="ds-heading" data-size="lg">Test webcomponents</h1>
<br>
<br>

<ds-field class="ds-field" style="width: 200px">
<label>Label</label>
<ds-suggestion
class="ds-suggestion"
data-multiple
data-creatable='Legg til "{value}"'
>
<input type="search" class="ds-input">
<button type="button" aria-expanded="false" aria-label="Valg"></button>
<button type="reset" aria-label="Tøm"></button>
<u-datalist>
<u-option></u-option>
<u-option value="option-1">Option 1</u-option>
<u-option value="option-2">Option 2</u-option>
<u-option value="option-3">Option 3</u-option>
</u-datalist>
</ds-suggestion>
</ds-field>

<br>
<br>

<h2 class="ds-heading">data-clickdelegatefor</h2>
<ds-field class="ds-card" data-clickdelegatefor="target">
<input id="target" class="ds-input" type="checkbox">
Expand Down Expand Up @@ -224,23 +246,6 @@ <h2>Oppsummering</h2>
<br>
<br>

<ds-field class="ds-field" style="width: 200px">
<label>Label</label>
<ds-suggestion class="ds-suggestion" data-multiple>
<input type="search" class="ds-input">
<button type="button" aria-expanded="false" aria-label="Valg"></button>
<button type="reset" aria-label="Tøm"></button>
<u-datalist>
<u-option value="option-1">Option 1</u-option>
<u-option value="option-2">Option 2</u-option>
<u-option value="option-3">Option 3</u-option>
</u-datalist>
</ds-suggestion>
</ds-field>

<br>
<br>

<fieldset class="ds-fieldset">
<legend>Velg Alternativ</legend>
<p data-field="description">Introtekst</p>
Expand Down
14 changes: 14 additions & 0 deletions packages/web/src/suggestion/suggestion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ export class DSSuggestionElement extends UHTMLComboboxElement {
connectedCallback() {
super.connectedCallback();
this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element
on(this, 'comboboxafterselect input', handleCreatable);
on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);
}
disconnectedCallback() {
super.disconnectedCallback();
this._unmutate?.();
this._unmutate = undefined;
off(this, 'comboboxafterselect input', handleCreatable);
off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);
}
}
Expand All @@ -42,6 +44,18 @@ const render = (self: DSSuggestionElement) => {
if (datalist) attr(datalist, 'data-is-floating', 'true'); // identifier for css to toggle opacity when it is placed by floating-ui.
};

const handleCreatable = (event: Event) => {
const self = event.currentTarget;
const creatable = self.getAttribute('data-creatable');
const value = self.control.value.trim();
const add = self.list.options[0];

add.hidden = !value || self.values.includes(value);
add.value = value;
add.label = value;
add.textContent = creatable.replace('{value}', value);
};

// Since showPopover({ source }) is not supported in all browsers yet:
const polyfillToggleSource = (event: Partial<ToggleEvent>) => {
const self = event.currentTarget as DSSuggestionElement;
Expand Down
Loading