feat: add select spec #3619

eljefe223 · 2020-08-04T17:28:52Z

EisenbergEffect · 2020-08-04T21:18:38Z

@eljefe223 Doesn't look like I'll get a chance to review today but I'll try to take a look first thing in the morning. Real quick, I wanted to mention that there's a lot of work on select happening in OpenUI. If you haven't checked that out, take a look since we want to try to align with them as much as possible and we may then also have some feedback into that process.

chrisdholt · 2020-08-04T22:14:03Z

@eljefe223 Doesn't look like I'll get a chance to review today but I'll try to take a look first thing in the morning. Real quick, I wanted to mention that there's a lot of work on select happening in OpenUI. If you haven't checked that out, take a look since we want to try to align with them as much as possible and we may then also have some feedback into that process.

As FYI @EisenbergEffect this is based off the OpenUI work. FYI to @gregwhitworth that we're officially starting work in FAST on select as part of our partnership 😄

EisenbergEffect · 2020-08-04T23:33:17Z

Awesome. I hadn't had a chance to review yet but just wanted to double check that at the start.

janechu · 2020-08-05T03:18:48Z

You may want to move this to /specs since that's typically where they start before implementation.

eljefe223 · 2020-08-05T15:33:38Z

You may want to move this to /specs since that's typically where they start before implementation.

@janechu Yeah, I sort of did this out of defiance, Is there a good reason we do it this way? I'm happy to move it, but I it seems weird that we place it in specs only temporarily and then ultimately move it into its own folder.

janechu · 2020-08-05T21:06:58Z

@eljefe223 Well, speaking broadly, I think we wanted to keep it so that specs are find-able for things (not just components) that were being worked on conceptually but did not yet have any code associated with them. When they do have code associated then we would move them to tie them to the code as documentation. If, for example, you wrote a spec and it stayed in some nested folder and it was forgotten, someone might be going through the /specs folder, identifying things to contribute and have no idea that in some nested folder somewhere was a spec that could be used for contribution.

specs/select.spec.md

EisenbergEffect · 2020-08-07T01:24:03Z

specs/select.spec.md

+- `fast-select`
+
+*Attributes:*
+- `autocomplete` - Allows the developer to provide a hint on how to search the content within the `<fast-option>`(s)


Would be great to see a more through explanation of how this is intended to work.

I was following the Open UI spec, I believe in the past we filtered the potential results, but thinking about this I'm a bit confused on why select would have this. This seems like more of feature of a dropdown on an autosuggest of textbox. @gregwhitworth can you clarify this feature?

We can also hold on adding autocomplete in the initial implementation.

Actually this may be a good thing to move to "next steps" - investigate autocomplete, etc...

@gregwhitworth and I were having a discussion offline and wanted to include those discussions here.

We will move this to next steps but wondering if select should have a text input or not, This seems more like a combobox or search box to me. I could not find any documentation online that "searching" options should be part of a select.

My issue with using the terminology of "search" is that when you search the text you input is not always in the suggested dropdown, which makes it not a select. Because you are not selecting some predetermined value

specs/select.spec.md

scomea · 2020-08-07T15:30:47Z

specs/select.spec.md

+
+### Features
+- Select one or multiple `<fast-option/>`(s) using the `multiple` attribute
+- When Dropdown does not have enough screen real estate to open below `<fast-select>` it will open above.


Do we want more positioning choices (ie. always open above)? Leaving that to later version works too.

Have you thought about how the flyout menu is placed in the dom, breaks out of parent containers or not, positioning mode?

I'm open here, but thinking it would just use the intersection observer work you have done.

specs/select.spec.md

scomea · 2020-08-07T16:13:27Z

specs/select.spec.md

+- `required` - boolean value that sets the field as required
+- `selectedIndex` - The index of the first or last selected `<fast-option>` element, depending on the value of `multiple`
+- `selectedOptions` - An `HTMLCollection` of the selected `<fast-option>` elements
+- `size` - If the `<fast-select>` is shown with a scrollbar, this represents how many `<fast-option>`s are visible.


Not clear on what 'size' does. Does it control the height of the menu?

It controls how many options are visible within the listbox which does indirectly control the height of the listbox. https://html.spec.whatwg.org/multipage/form-elements.html#attr-select-size

Is this necessary if folks can use css to control listbox dimensions?

gregwhitworth · 2020-08-07T16:16:01Z

FYI to @gregwhitworth that we're officially starting work in FAST on select as part of our partnership

Can you make sure to file or provide feedback against the Open UI spec as you find gaps and if you have a proposal put it into the issue or file a PR?

specs/select.spec.md

awentzel · 2020-08-10T16:04:33Z

specs/select.spec.md

@@ -0,0 +1,158 @@
+# Select + Select-Option


I think there should be some documentation around proper usage of a Select inside or outside of a <form>

specs/select.spec.md

janechu · 2020-08-10T19:43:38Z

specs/select.spec.md

+- `menu-open` -If the menu of the `<fast-option>` is open or not
+- `multiple` - Allows user to select more than one `<fast-option>`
+- `name` - Name of the control
+- `options` - Returns an array of the `<fast-option>` elements contained by the `<fast-select>` element


Are we expecting this list of options to be updated at any point? If you are the use of index for selected-index and selected-options may be problematic.

We use this type of language elsewhere like active-id or selected-index the are attributes that can be updated in the DOM when a selection change is made. It can be initially set by the app author. Tabs is a goos example of this:

specs/select.spec.md


        feat: add select spec


        small edits


        removed form attr covered by form accosiated


        some edits


        moved spec


        changes


        Addressed more PR comments


        More edits


        more updates

eljefe223 requested review from EisenbergEffect, nicholasrice and chrisdholt Aug 4, 2020

eljefe223 requested review from awentzel, Falkicon and janechu as code owners Aug 4, 2020

eljefe223 self-assigned this Aug 4, 2020

eljefe223 force-pushed the users/jes/select-spec branch from 012934b to 10ae476 Aug 4, 2020

eljefe223 force-pushed the users/jes/select-spec branch from f752eed to fcc3600 Aug 5, 2020

eljefe223 force-pushed the users/jes/select-spec branch from fcc3600 to 408eaaf Aug 6, 2020

EisenbergEffect requested changes Aug 7, 2020

View changes

scomea reviewed Aug 7, 2020

View changes

specs/select.spec.md Show resolved Hide resolved

scomea reviewed Aug 7, 2020

View changes

specs/select.spec.md Show resolved Hide resolved

awentzel reviewed Aug 10, 2020

View changes

specs/select.spec.md

@@ -0,0 +1,158 @@

# Select + Select-Option

This comment has been minimized.

Sign in to view

Copy link

awentzel Aug 10, 2020
Member

I think there should be some documentation around proper usage of a Select inside or outside of a <form>

janechu reviewed Aug 10, 2020

View changes

eljefe223 added 6 commits Aug 4, 2020

feat: add select spec

3b5acfc

small edits

b3ad385

removed form attr covered by form accosiated

217791c

some edits

abfb073

moved spec

9a87a10

changes

0965597

eljefe223 added 3 commits Aug 7, 2020

Addressed more PR comments

757e6f2

More edits

67b5e3f

more updates

Loading status checks…

f45015e

eljefe223 force-pushed the users/jes/select-spec branch from e85dd9c to f45015e Aug 12, 2020

microsoft / fast

feat: add select spec #3619

feat: add select spec #3619

eljefe223 commented Aug 4, 2020

EisenbergEffect commented Aug 4, 2020

chrisdholt commented Aug 4, 2020

EisenbergEffect commented Aug 4, 2020

janechu commented Aug 5, 2020

eljefe223 commented Aug 5, 2020

janechu commented Aug 5, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

gregwhitworth commented Aug 7, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

microsoft / fast

Join GitHub today

feat: add select spec #3619

feat: add select spec #3619

Conversation

eljefe223 commented Aug 4, 2020

Description

Issue type checklist

Process & policy checklist

EisenbergEffect commented Aug 4, 2020

chrisdholt commented Aug 4, 2020

EisenbergEffect commented Aug 4, 2020

janechu commented Aug 5, 2020

eljefe223 commented Aug 5, 2020

janechu commented Aug 5, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

gregwhitworth commented Aug 7, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.