Skip to content

Platform: Select Component Technical Design

Jump to bottom
kavya-b edited this page May 20, 2020 · 11 revisions

Select

Summary

The Select component is an input element, where the user can select a value from a list.

Example

<fdp-select
    [id]="'myid'"
    [btnType]='default|noborder|regular'
    [glyph]='filter' 
    [compact]='true|false'
    [(ngModel)]="selectedvalue"
    [disabled]='true|false'
    [maxHeight]="'250px'"
    [placeholder]="'Placeholder'"
    [options]="options">
</fdp-select>

<fdp-select>
    <fdp-option [value]="'apple'">Apple</fdp-option>
    <fdp-option [value]="'banana'">Banana</fdp-option>
    <fdp-option [value]="'orange'">Orange</fdp-option>
</fdp-select>

Design

The Select component requires a list of options for the user to choose from. The options can either be provided via property binding to the list property, or via content projection using the fdp-option component.

Property Bindings

id: string

The ID for the element.

btnType: string

The "btnType" property allows the user to set the type of select button from the 3 options available.

glyph: string

The "glyph" property accepts a strings as input, and uses these values to populate the type of icon which is dynamically defined.

compact: boolean

The "compact" property accepts a boolean as input, property set the select box to compact size.

options: SelectItem[] | string[]

List of strings or SelectItem objects to populate the options displayed for select. See https://github.com/SAP/fundamental-ngx/wiki/Platform:-CheckboxGroup-Technical-Design#1-render-selection-based-on-data-list

maxHeight: string

The "maxHeight" property sets the vertical height of the search input component. The size. can be configured according to the user preference.

This is an optional field. when in default it takes 250px as height.

disabled: boolean

The "disabled" property is an bolean which are used to disable or enable the select dropdown for selection.

If the "disabled" property is set, then the select button and dropdown menu will be disabled by default the select box will be enabled.

Event Bindings

isOpenChangeHandle(isOpen: boolean): void

The "isOpenChangeHandle" event binding emits an event with a Select payload, whenever the user clicks on the select dropwon isopen value is changed to true and reset the value after the option is clicked.

Content Projection

fdp-option

Options for the Select component can be provided by inserting a series of fdp-option components. See https://github.com/SAP/fundamental-ngx/wiki/Platform:-CheckboxGroup-Technical-Design#2-selection-based-on-custom-option

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: Yes

noSelectionString is being used in the platform implementation which can have a default value(although not present now). This default value needs to be translated as part of lib.

  • placeholder can be supported with string binding:
<fdp-select
    [id]="'myid'"
    [btnType]='default|noborder|regular'
    [glyph]='filter' 
    [compact]='true|false'
    [(ngModel)]="selectedvalue"
    [disabled]='true|false'
    [maxHeight]="'250px'"
    i18n-placeholder="@@placeholderText"
    placeholder="Placeholder"
    [options]="options">
</fdp-select>

Redesign Required: Yes

fdp-option handles action items and overflow declaratively, so no changes are needed as per spec. But, it seems from platform existing implementation, fdp-option is not used/present. If it is not present or was decided to not have it, then redesign is needed as we need fdp-option to support i18n.

Notes

As this is an input control it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent

Comments

Frank:

  • What is button Type binding?

  • Since the ngFor with option items will be hidden inside we need to emit selection event

  • Dropdown (selects) usually needs to support no-option support, where you either have only list of option to pick from or also some -- empty value

  • Select usually represent single selection of a few options, what about multiselection? How are we going to handle those ?

  • I would support event emitting not only on selection but also on opening/closing

  • Also support programatic approach like core make sure we have the methods close/open - simple toggle

  • Why do we need to set maxHeight heigh must stay

    • we should have a scrollHeight that tells how the overlay is high when you should scrolling

  • You should not call isOpenChangeHandle - the handle is usually the one who is handling this event

    • For this you want more openedChange: EventEmitter<boolean>

  • just like with the other controls we dont need to say [compact]='true|false as this does not scale for hte future as we have only 2 sizes, let's have binding size with two sizes

  • Let's think about zIndex sometimes we show inputs fields inside some context where has already hight zIndex and shown overlay might be hidden

Clone this wiki locally