Platform: Select Component Technical Design

Select

Summary

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

Example

<fdp-select  
        [btnType]='default|noborder|regular'
        [glyph]='filter' 
        [compact]='true|false'
        [(ngModel)]="selectedvalue"
        [disabled]='true|false'
        [maxHeight]="'250px'"
        [placeholder]="'Placeholder'"
        [list]="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

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.

list: 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

Additional Notes

---

Comments

Frank:

• Besides having instantiable component we want to also hide as much as we can inside. So the expection is we pass list of choices and dropdown will render

• What is button Type binding?

• Each input will have a value which you have and those one that accept list of choices will have also binding [list] to pass list of object to work with

  • we can have more contentual naming so for this case we can have [options]

• We should not only support string[] but also complex object to be passed in.

  • Try to think you are able to pass list of e.g. Invoices and how you can set initial object how you can match with list of items
  • When you click on item you will pass the selected object

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

• We should also allow to customize the rendering item in the LIST, as well as the actuall selected item

  • we can use <ng-tamplate> for this

• 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 ?

• Since this is input we need to support id

• I woudl support event emmiting 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