Added icon to button component, reworked icon display code. (#12624)

* Added icons to buttons, removed svg code added icon component code.

* Added icon functionality to button group component.

* Added gap to button manifest

* Added gap to button setitngs.

* Added gap setting to ButtonGroup component

* Added the ability to clear the selected icon.

* Added enter search to icon select

* Removed use:styleable as its for the button

* Moved non internal props up

* Fixed broken DynamicFilter component icon

* Updated DynamicFilter icon to a better suited one

---------

Co-authored-by: melohagan <101575380+melohagan@users.noreply.github.com>
This commit is contained in:
Conor Webb 2024-03-06 16:32:00 +00:00 committed by GitHub
parent d6895e1300
commit 1b387d359c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 65 additions and 16 deletions

View File

@ -139,10 +139,22 @@
{/each}
</div>
<div class="search-input">
<div class="input-wrapper">
<Input bind:value={searchTerm} thin placeholder="Search Icon" />
<div class="input-wrapper" style={`width: ${value ? "425" : "510"}px`}>
<Input
bind:value={searchTerm}
on:keyup={event => {
if (event.key === "Enter") {
searchForIcon()
}
}}
thin
placeholder="Search Icon"
/>
</div>
<Button secondary on:click={searchForIcon}>Search</Button>
{#if value}
<Button primary on:click={() => (value = null)}>Clear</Button>
{/if}
</div>
<div class="page-area">
<div class="pager">
@ -239,6 +251,7 @@
flex-flow: row nowrap;
width: 100%;
padding-right: 15px;
gap: 10px;
}
.input-wrapper {
width: 510px;

View File

@ -525,6 +525,38 @@
"barTitle": "Disable button",
"key": "disabled"
},
{
"type": "icon",
"label": "Icon",
"key": "icon"
},
{
"type": "select",
"label": "Gap",
"key": "gap",
"showInBar": true,
"barStyle": "picker",
"dependsOn": "icon",
"options": [
{
"label": "None",
"value": "N"
},
{
"label": "Small",
"value": "S"
},
{
"label": "Medium",
"value": "M"
},
{
"label": "Large",
"value": "L"
}
],
"defaultValue": "M"
},
{
"type": "event",
"label": "On click",

View File

@ -13,9 +13,10 @@
export let size = "M"
export let type = "cta"
export let quiet = false
export let icon = null
export let gap = "M"
// For internal use only for now - not defined in the manifest
export let icon = null
export let active = false
const handleOnClick = async () => {
@ -47,7 +48,7 @@
{#key $component.editing}
<button
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type} gap-${gap}`}
class:spectrum-Button--quiet={quiet}
disabled={disabled || handlingOnClick}
use:styleable={$component.styles}
@ -58,15 +59,7 @@
class:active
>
{#if icon}
<svg
class:hasText={componentText?.length > 0}
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
<i class="{icon} {size}" />
{/if}
{componentText}
</button>
@ -92,4 +85,13 @@
.active {
color: var(--spectrum-global-color-blue-600);
}
.gap-S {
gap: 8px;
}
.gap-M {
gap: 16px;
}
.gap-L {
gap: 32px;
}
</style>

View File

@ -20,7 +20,7 @@
wrap: true,
}}
>
{#each buttons as { text, type, quiet, disabled, onClick, size }}
{#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
<BlockComponent
type="button"
props={{
@ -29,6 +29,8 @@
type,
quiet,
disabled,
icon,
gap,
size: size || "M",
}}
/>

View File

@ -92,9 +92,9 @@
{#if schemaLoaded}
<Button
onClick={openEditor}
icon="Properties"
icon="ri-filter-3-line"
text="Filter"
{size}
size="XL"
type="secondary"
quiet
active={filters?.length > 0}