framework-2021 icon indicating copy to clipboard operation
framework-2021 copied to clipboard

framework/element: Add element's SELECTED, MULTIPLE, REQUIRED attributes handling

Open OleksiyRudenko opened this issue 4 years ago • 4 comments

... just like CHECKED and DISABLED

Consider adding SingleSelection component example based on <select> .

OleksiyRudenko avatar May 17 '21 10:05 OleksiyRudenko

take on a job

f3d0t avatar May 18 '21 17:05 f3d0t

@f3d0t thank you. Just please wait for a while. I gonna fix other issues. Will let you know when you are all green for this

OleksiyRudenko avatar May 18 '21 18:05 OleksiyRudenko

@f3d0t we're all green to go.

Updated 2021-05-19 08:54 EEST

Please do the following:

  1. Work on styled-checkbox branch
  2. Create a demo component based on select tag. The component will receive the following props:
  • Minimal (sufficient to test item 3):
    • isMultiple: optional, boolean, default is false; ; shouldn't be rendered if false
    • isRequired: optional, boolean, default is false; shouldn't be rendered if null
    • options: array, where index is used as an option id (option value attribute) and array element itself as an option UI representation visible to a user;
    • selectedOption: option value (string), default is null
    • onChange: optional, function that expects selected option id (value) as an argument
  • Extended:
    • label: optional, string, default is null; should not be rendered if null
    • name: optional, string, default is null; shouldn't be rendered if null
    • size: optional, number, default is 0
  • Advanced:
    • options is an array of option objects (see advanced option object spec below)
  1. Patch createElement to handle SELECTED and MULTIPLE attributes properly

Items 2 & 3 must be individual commits, so that item 3 could be cherry-picked elsewhere

Advanced Option Object Spec

Each option object has the following properties:

  • value: string; used as text if label property is not defined or falsy, or as optgroup label if object has options property defined
  • label: optional, string; if not defined or null or undefined then value is used as an option UI representation visible to a user; ignored when the object represents an optgroup
  • options: optional, array of option objects; if defined then current object is used to render an optgroup

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Let me know if you want to take on the minimal, extended or advanced implementation. Those can be done at the next iterations or skipped completely.

Feel free asking anything

OleksiyRudenko avatar May 18 '21 19:05 OleksiyRudenko

Resolving by pull request #41 Add handling of 'disabled' attribute to Select option object

f3d0t avatar May 19 '21 20:05 f3d0t