Component options for combobox

[joneff]

Dependencies

Component options

enum ComboboxSize { small, medium, large };
enum ComboboxRounded { small, medium, large, pill };
enum ComboboxFillMode { solid, flat, outline };

class Combobox {
   size: (null | ComboboxSize) = ComboboxSize.medium;
   rounded: (null | ComboboxRounded) = ComboboxRounded.medium;
   fillMode: (null | ComboboxFillMode) = ComboboxFillMode.solid;
}

Note 1: The List component (rendered in the popup) has only size option.

Note 2: In case you change the size of the Combobox, the size of the List component should also update. For example, if you set the Combobox component to be size='large', then the List component in the popup should also be size='large'. Basically, whatever you set as a size for the parent component should be passed down to the child components.

Rendering

• Rendering input part

<!-- default rendering -->
<span class="k-combobox k-input k-input-md k-rounded-md k-input-solid">
    <input type="text" class="k-input-inner" value="..." placeholder="..." />
    <button type="button" class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base">
        <span class="k-button-icon k-icon k-i-arrow-s"></span>
    </button>
</span>

<!-- canonical rendering -->
<span class="
    k-combobox
    k-input
    k-input-{size}
    k-rounded-{rounded}
    k-input-{fillMode}

    {valid && 'k-valid'}
    {invalid && 'k-invalid'}
    {loading && 'k-loading'}
    {required && 'k-required'}
    {disabled && 'k-disabled'}
">
    {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-icon k-i-{inputIconName}"></span>}
    {inputPrefix && <span class="k-input-prefix">...</span>}
    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
    {inputPrefix && <span class="k-input-suffix">...</span>}
    {showValidationIcon && valid && <span class="k-input-validation-icon k-icon k-i-check"></span>}
    {showValidationIcon && invalid && <span class="k-input-validation-icon k-icon k-i-warning"></span>}
    {showLoadingIcon && loading && <span class="k-icon k-i-loading"></span>}
    {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
    <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
        <span class="k-button-icon k-icon k-i-arrow-s"></span>
    </button>
</span>

• rendering popup (angular / blazor)

<!-- default rendering -->
<div class="k-list k-list-md">
    <div class="k-list-group-sticky-header"><span class="k-list-header-text">Group 1</span></div>
    <div class="k-list-content">
        <ul class="k-list-ul">
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.1</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.2</span>
            </li>
            <li class="k-list-group-item">
                <span class="k-list-item-text">Group 2</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 2.1</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 2.2</span>
            </li>
        </ul>
    </div>
</div>

<!-- default rendering w/ virtualization) -->
<div class="k-list k-virtual-list k-list-md">
    ...
</div>

<!-- canonical rendering -->
<div class="k-list {virtualization && 'k-virtual-list'} k-list-{size}">
    {grouping && <div class="k-list-group-sticky-header"><span class="k-list-header-text">Group 1</span></div>}
    <div class="k-list-content">
        <ul class="k-list-ul">
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.1</span>
            </li>
            <li class="k-list-group-item">
                <span class="k-list-item-text">Group 2</span>
            </li>
        </ul>
    </div>
</div>

• rendering popup (jquery / react / vue)

<!-- default rendering -->
<div class="k-list k-list-md">
    <div class="k-list-group-sticky-header"><span class="k-list-header-text">Group 1</span></div>
    <div class="k-list-content">
        <ul class="k-list-ul">
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.1</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.2</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 2.1</span>
                <span class="k-list-group-label">Group 2</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 2.2</span>
            </li>
        </ul>
    </div>
</div>

<!-- default rendering w/ virtualization) -->
<div class="k-list k-virtual-list k-list-md">
    ...
</div>

<!-- canonical rendering -->
<div class="k-list {virtualization && 'k-virtual-list'} k-list-{size}">
    {grouping && <div class="k-list-group-sticky-header"><span class="k-list-header-text">Group 1</span></div>}
    <div class="k-list-content">
        <ul class="k-list-ul">
            <li class="k-list-item">
                <span class="k-list-item-text">Item 1.1</span>
            </li>
            <li class="k-list-item">
                <span class="k-list-item-text">Item 2.1</span>
                <span class="k-list-group-label">Group 2</span>
            </li>
        </ul>
    </div>
</div>

Documentation

• Variables
• Docs

[silviyaboteva]

closed by: #2948