Refactored select to match designs used elsewhere.
This commit is contained in:
Conor Webb
parent
2b691c169f
commit
0461d86545
|
|
@ -282,13 +282,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Tables</Heading>
|
<Heading size="XS">Tables</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each tables as table}
|
{#each tables as table}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === table.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === table.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(table)}
|
on:click={() => handleSelected(table)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{table.label}
|
{table.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -297,13 +310,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Views</Heading>
|
<Heading size="XS">Views</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each views as view}
|
{#each views as view}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === view.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === view.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(view)}
|
on:click={() => handleSelected(view)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{view.label}
|
{view.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -313,13 +339,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Queries</Heading>
|
<Heading size="XS">Queries</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each queries as query}
|
{#each queries as query}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === query.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === query.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(query)}
|
on:click={() => handleSelected(query)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{query.label}
|
{query.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -329,13 +368,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Relationships</Heading>
|
<Heading size="XS">Relationships</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each links as link}
|
{#each links as link}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === link.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === link.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(link)}
|
on:click={() => handleSelected(link)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{link.label}
|
{link.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -345,13 +397,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Fields</Heading>
|
<Heading size="XS">Fields</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each fields as field}
|
{#each fields as field}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === field.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === field.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(field)}
|
on:click={() => handleSelected(field)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{field.label}
|
{field.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -361,13 +426,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">JSON Arrays</Heading>
|
<Heading size="XS">JSON Arrays</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each jsonArrays as field}
|
{#each jsonArrays as field}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === field.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === field.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(field)}
|
on:click={() => handleSelected(field)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{field.label}
|
{field.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -377,13 +455,26 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Data Providers</Heading>
|
<Heading size="XS">Data Providers</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
{#each dataProviders as provider}
|
{#each dataProviders as provider}
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === provider.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === provider.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(provider)}
|
on:click={() => handleSelected(provider)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{provider.label}
|
{provider.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -392,19 +483,32 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="XS">Other</Heading>
|
<Heading size="XS">Other</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
<li
|
<li
|
||||||
class:selected={value.label === custom.label}
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value.label === custom.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
on:click={() => handleSelected(custom)}
|
on:click={() => handleSelected(custom)}
|
||||||
>
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
{custom.label}
|
{custom.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
|
</ul>
|
||||||
{#if otherSources?.length}
|
{#if otherSources?.length}
|
||||||
{#each otherSources as source}
|
{#each otherSources as source}
|
||||||
<li on:click={() => handleSelected(source)}>{source.label}</li>
|
<li on:click={() => handleSelected(source)}>{source.label}</li>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
||||||
|
|
@ -438,6 +542,7 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue