Commit Graph

82 Commits

Author SHA1 Message Date
Elliott Marquez
8912019b90 feat(select): add keyboard support for arrow end and home
PiperOrigin-RevId: 592643729
2023-12-20 13:29:14 -08:00
Elliott Marquez
50a9ffae46 feat(select): add menuAlign to allow end-aligning the select menu
PiperOrigin-RevId: 592384480
2023-12-19 17:10:25 -08:00
Elliott Marquez
4bb9418a52 feat(select): support width fit-content
width: fit-content will resize the select to be the width of its text content + icons. We need to add a wrapper to the menu that is width: 0px so that the width of the menu does not affect the size of the host.
PiperOrigin-RevId: 592382035
2023-12-19 16:59:37 -08:00
Elizabeth Mitchell
eca1357f1a fix: rename and move internal/controller/events
Split `internal/controller/events` into `internal/events/redispatch-event` and `internal/events/form-label-activation`

PiperOrigin-RevId: 592350371
2023-12-19 14:49:35 -08:00
Material Web Team
edb3559a1c fix(select): expose SelectOption interface
PiperOrigin-RevId: 592022961
2023-12-18 15:14:41 -08:00
Elizabeth Mitchell
2bb480fb82 chore: move events out of controller folder
PiperOrigin-RevId: 592021123
2023-12-18 15:07:51 -08:00
Elliott Marquez
af49b64ab4 feat(menu,select): allow menu and select typeahead to read default slot text content
PiperOrigin-RevId: 587864760
2023-12-04 15:45:18 -08:00
Elliott Marquez
a5a40b6dd3 feat(select): match menu width to select and introduce clamp-menu-width
fixes #5112
fixes #5133

upon opening the select, the menu with calculate the width of the select and set the min-width of the corresponding menu to match. If the user has an item with a really long headline, then clap-menu-width will clamp the max-width of the menu to that of the select.

PiperOrigin-RevId: 587862332
2023-12-04 15:36:27 -08:00
Elizabeth Mitchell
897d9775c2 fix(select): focus() delegates properly, focus on reporting validity
PiperOrigin-RevId: 586815117
2023-11-30 16:05:54 -08:00
Elizabeth Mitchell
33c1afece2 refactor(select): use shared validation mixins
PiperOrigin-RevId: 585751913
2023-11-27 13:56:46 -08:00
Elliott Marquez
2adcb1479a docs: document events in jsdoc
PiperOrigin-RevId: 581041601
2023-11-09 15:25:21 -08:00
Elliott Marquez
a2b32042bd fix(select): select menu render is over most stacking contexts with popover
Fixes #4812

This feature defaults to using the popover API for the underlying menu in select. If not available (FF and older versions of Safari and Chrome), defaults to using fixed.

PiperOrigin-RevId: 580666310
2023-11-08 14:50:19 -08:00
Elliott Marquez
6b5ab21332 fix(select,textfield): native form validation shows error state
PiperOrigin-RevId: 578632986
2023-11-01 13:59:55 -07:00
Elizabeth Mitchell
87dfee41af chore(field): reduce HCM styles and move from textfield/select to field
PiperOrigin-RevId: 578351982
2023-10-31 17:33:28 -07:00
Elizabeth Mitchell
1f55d4111f chore(behaviors): update form controls to use shared mixins
PiperOrigin-RevId: 578297611
2023-10-31 14:08:39 -07:00
Elizabeth Mitchell
c390291687 chore: format files with prettier
PiperOrigin-RevId: 576601342
2023-10-25 11:59:00 -07:00
Elliott Marquez
a5a6974dec fix(select): form failure no longer throws non-focusable error
fixes #5078

PiperOrigin-RevId: 575361459
2023-10-20 18:10:02 -07:00
Elliott Marquez
ff250dc983 fix(select): cursor on select options should be pointer
per: https://m3.material.io/components/menus/guidelines#73531839-5ef8-46cd-9a5e-223f32912edb

fixes #5066

PiperOrigin-RevId: 572347324
2023-10-10 13:20:12 -07:00
Elizabeth Mitchell
c9aadeb585 chore(menu): merge HCM styles
PiperOrigin-RevId: 571239710
2023-10-05 23:28:28 -07:00
Elliott Marquez
8ae8c02866 fix(menu,select): enter clicks href items
PiperOrigin-RevId: 571104363
2023-10-05 12:55:39 -07:00
Elizabeth Mitchell
83aaf6c848 chore(select): update demo a11y
PiperOrigin-RevId: 568335268
2023-09-25 15:08:50 -07:00
Elliott Marquez
aeb5103e1c fix(menu,select): fix final aria issues
PiperOrigin-RevId: 568326002
2023-09-25 14:31:52 -07:00
Elliott Marquez
6d0c7e8538 refactor(list)!: refactor list to reuse ListController
fixes #4967

also fixes list-root focus ring and focusout

BREAKING CHANGE: the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page.

PiperOrigin-RevId: 568300155
2023-09-25 12:54:12 -07:00
Elliott Marquez
5e4434bfed fix(select): update select docs and fix initial selection
PiperOrigin-RevId: 567884899
2023-09-23 11:14:56 -07:00
Elizabeth Mitchell
205bdc6ccf chore: update catalog usage of md-list-item
PiperOrigin-RevId: 567738815
2023-09-22 16:01:28 -07:00
Elliott Marquez
f81ce1131b refactor(select): refactor select so that it doesn't rely on menuitem & use logic controller
PiperOrigin-RevId: 567735675
2023-09-22 15:45:50 -07:00
Elliott Marquez
1217b62ef2 refactor(menu)!: pull logic out of menuitem into a controller & change enum vals
BREAKING CHANGE: Several enums in menu had their values changed from SCREAM_CASE to kebab-case to follow style guide. They are NAVIGABLE_KEYS -> NavigableKey, SELECTION_KEY -> SelectionKey, CLOSE_REASON -> CloseReason, KEYDOWN_CLOSE_KEY -> KeydownCloseKey

PiperOrigin-RevId: 567727434
2023-09-22 15:09:41 -07:00
Elliott Marquez
63b01425e7 refactor(menu,select)!: rename fixed to positioning
This will enable forwards compatibility for `positioning="top-layer"` with popover.

BREAKING CHANGE: refactor `fixed` property to `positioning="fixed"` in Menu and `menuFixed` to `menuPositioning="fixed"`

PiperOrigin-RevId: 567723646
2023-09-22 14:54:57 -07:00
Elliott Marquez
2a1d8776a7 refactor(menu)!: refactor menu-item to use md-item and not rely on md-list-item
BREAKING CHANGE: This change refactors menu-item to no longer subclass or import from list-item. It also refactors it to use md-item directly which means that the API of menu item has moved from properties to slots. `start-*` and `end-*` slots are now just `start` and `end`, many tokens are now gone in favor of slotting. `headline` property is now a `slot="headline"` slot. Typeahead search text can now be set via `typeaheadText` which defaults to the slotted headline `textContent`. `select-option` now has the `displayText` which is used to display text in the `md-select` when the option is selected; defaults to the slotted headline `textContent`.

PiperOrigin-RevId: 567719483
2023-09-22 14:35:46 -07:00
Elliott Marquez
0384507447 refactor(menu)!: update menu to use host-aria
BREAKING CHANGE: Menu no longer uses md-list internally which means the list-related properties such as `list-tabindex` and `type` should now be on the host of md-menu. The new attributes should be `tabindex` and `role` respectively.

PiperOrigin-RevId: 567702229
2023-09-22 13:24:21 -07:00
Elliott Marquez
54fbb2ed5e feat(menu): implement md-sub-menu
md-sub-menu will succeed md-sub-menu-item. It allows for screen reader linear navigation

PiperOrigin-RevId: 567057310
2023-09-20 13:09:44 -07:00
Elliott Marquez
6e54048f1e refactor(menu)!: rename corner and focus state values lowercase with dashes
BREAKING: for style guide enum consistency, we have renamed the corner values START_START etc. to be lowercase with dashes. e.g. start-start. The same has been done with MdMenu.defaultFocus' values.
PiperOrigin-RevId: 566454879
2023-09-18 17:09:17 -07:00
Elliott Marquez
d4463154cc refactor(list,menu,select)!: remove active concept and now parent controls tabIndex and focus
Note: tests have changed significantly because there is no longer a concept of "nothing activated" in the list.

BREAKING CHANGE: removed `active` from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.

PiperOrigin-RevId: 565531998
2023-09-14 18:14:59 -07:00
Elizabeth Mitchell
4ad2336b87 feat(select): add required and form association
Fixes #4903

PiperOrigin-RevId: 565260839
2023-09-13 22:45:10 -07:00
Elliott Marquez
2927245114 fix(menu): menu's default focus behavior follows google accessibility practices
default focus is now FIRST_ITEM and instead of LIST_ROOT and the menu / list itself has tabindex -1 by default as our a11y model recommends

PiperOrigin-RevId: 565244488
2023-09-13 21:02:33 -07:00
Elizabeth Mitchell
573caaee1b fix(select)!: don't reflect selected attribute
Why? This is needed for selects in forms, which uses the `selected` attribute to indicate default selected values when resetting.

BREAKING CHANGE: `option.selected` no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.

PiperOrigin-RevId: 565212026
2023-09-13 17:51:17 -07:00
Elizabeth Mitchell
4b40e67b82 chore(select): re-organize public/protected/private members
PiperOrigin-RevId: 565187172
2023-09-13 16:01:06 -07:00
Material Web Team
556e6f95e4 chore: fix closure compiler issues
PiperOrigin-RevId: 564867173
2023-09-12 16:30:19 -07:00
Elliott Marquez
78e7c1742f fix(select): select can reopen when animation interrupted
PiperOrigin-RevId: 564826332
2023-09-12 14:01:39 -07:00
Andrew Jakubowicz
059dad5d44 fix(select): change slot names to kebab-case
BREAKING CHANGE: replace `leadingicon` and `trailingicon` slot names with `leading-icon` and `trailing-icon`

PiperOrigin-RevId: 563583658
2023-09-07 16:54:42 -07:00
Elizabeth Mitchell
0c5a2a2886 fix(text-field,select): remove font shorthand tokens
BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563160975
2023-09-06 11:18:59 -07:00
Elliott Marquez
fcfc696c46 test(list,menu,select)!: clean up internal testing patterns from harnesses
lots of hard coded stuff to enable our tests. Cleaning this up for generalized client usage.

BREAKING CHANGE: menu harnesses will not automatically open menus in quick mode anymore and interactions in menu and list harnesses will not automatically go to the first item but rather the menu roots.

PiperOrigin-RevId: 561746073
2023-08-31 13:34:31 -07:00
Elliott Marquez
2c892c4114 fix(select): announce typeahead selection when select is closed
PiperOrigin-RevId: 561675276
2023-08-31 09:23:19 -07:00
Elliott Marquez
8d4917173a refactor(select): remove the select-* prefix from select events
PiperOrigin-RevId: 561435986
2023-08-30 13:38:50 -07:00
Elliott Marquez
5ba348dfd0 feat(menu)!: allow anchoring with idref string and set element ref on anchorElement
BREAKING: `MdMenu.prototype.anchor` now only accepts a string which will querySelector the rootNode of the menu. The method now to anchor to an element reference is to set `MdMenu.prototype.anchorElement`. This matches the `popover` anchoring proposal more closely, but that proposal may not pass in favor of a CSS approach.
PiperOrigin-RevId: 560955779
2023-08-29 01:40:36 -07:00
Elliott Marquez
1a1fb93be7 feat(select): dispatch select-(open|close)(ing|ed) events
This will allow for the case of data fetching select options only when the select menu has opened.

We prepend the menu events with `select-*` and do not bubble because we have historically had the issue where a select inside a dialog or another menu has had event name clashes causing user runtime issues. I can probably keep them the same names but still not have them bubble if y'all think that's better.

See more discussion in linked github issue

fixes #4798

PiperOrigin-RevId: 560849772
2023-08-28 16:27:22 -07:00
Elizabeth Mitchell
0e492ade43 chore: remove sass theme utilities
PiperOrigin-RevId: 556915539
2023-08-14 14:39:19 -07:00
Elliott Marquez
4ab2e393d4 fix(select)!: add trailing icon indicator and fix icon token application
BREAKING CHANGE: select will now show an arrow indicator and will apply default styles to slotted icons

PiperOrigin-RevId: 553597960
2023-08-03 14:53:36 -07:00
Elliott Marquez
98daf6688a refactor(select): make selects events use Event rather than subclassing it
PiperOrigin-RevId: 553583222
2023-08-03 14:03:09 -07:00
Elliott Marquez
043d548270 refactor(menu)!: events no longer subclass Event but rather use CustomEvent
Fixes issues running in ES5

BREAKING CHANGE: subclassing events is not supported in ES5 so all menu-related events now use CustomEvent rather than subclassing Event

PiperOrigin-RevId: 553304128
2023-08-02 17:23:36 -07:00