Commit Graph

99 Commits

Author SHA1 Message Date
Jesper Noordsij
b157a877ef
Fix typo in select.ts 2024-05-29 12:07:48 +02:00
Copybara-Service
c5e87b23a1 Merge pull request #5616 from npeters-dev:text-field-optional-asterisk
PiperOrigin-RevId: 636585863
2024-05-23 10:02:19 -07:00
Nino Peters
8f194a51db feat(select): make required asterisk optional 2024-05-22 14:46:03 +02:00
Material Web Team
7a6cf16a4e fix(select): select.click() opens the menu
PiperOrigin-RevId: 622981111
2024-04-08 16:20:39 -07:00
Elizabeth Mitchell
41bfda8dca chore(select): remove fixed todo
PiperOrigin-RevId: 612439510
2024-03-04 07:14:51 -08:00
Elizabeth Mitchell
c35bad0c64 fix: rename internal <styles>.css.js to <styles>.css
We are changing the names of these files to reduce similarity with CSS modules and avoid clashing with tooling built around that. If you're importing `*/internal/styles.css.js`, swap to `*/internal/styles.js`.

PiperOrigin-RevId: 611265000
2024-02-28 16:20:22 -08:00
Elizabeth Mitchell
c6ffd70fc8 feat(menu): add no-navigation-wrap to fix select accessibility
PiperOrigin-RevId: 610514684
2024-02-26 13:46:47 -08:00
Elizabeth Mitchell
ec0a8ebf6e chore: use CSSResultOrNative instead of CSSResult for static styles
PiperOrigin-RevId: 609760445
2024-02-23 10:01:56 -08:00
Elizabeth Mitchell
ce41b7bfb3 fix: use explicit CSSResult[] types for static styles
PiperOrigin-RevId: 609494809
2024-02-22 14:15:11 -08:00
Elizabeth Mitchell
7154a44fec chore: remove obsolete bug todo
PiperOrigin-RevId: 608779974
2024-02-20 16:25:29 -08:00
Elizabeth Mitchell
5e40a1bcec chore: create shape logical tokens in Sass component token files
Adds `@material/web/tokens/internal/shape` to take a shape token and create 4 logical tokens from its value.

All components' logical shape tokens are now generated by the token files themselves, rather than added in each component's styles.

PiperOrigin-RevId: 601783846
2024-01-26 09:13:58 -08:00
Elizabeth Mitchell
84536d7416 chore: update components to use custom properties from tokens
PiperOrigin-RevId: 601597083
2024-01-25 16:13:41 -08:00
Jan Kuehle
4b4c373a6b chore: use import and export types
PiperOrigin-RevId: 599338980
2024-01-17 17:39:46 -08:00
Elizabeth Mitchell
7dd7a68ae9 fix: forms correctly focus the first invalid control instead of last
Previously all text fields would focus themselves when the form reports validity, meaning the last one got focus. In reality, reportValidity is supposed to focus the first invalid control.

I added a "call" method wrapper around the `onReportValidity` callback that handles focusing logic.

PiperOrigin-RevId: 597904790
2024-01-12 11:43:47 -08:00
Material Web Team
73725be670 fix(select): allow aria-expanded to be set to false
fixes #5360

PiperOrigin-RevId: 597381616
2024-01-10 16:09:04 -08:00
Elliott Marquez
043bbad6f3 fix(select): clicking select toggles the menu rather than just open
PiperOrigin-RevId: 595540752
2024-01-03 17:07:06 -08:00
Material Web Team
89427158b7 fix(select): ensure md-select selection logic uses fresh DOM references
Previously selectItem would work with cached references to select-option elements which could become stale causing the deactivation logic to fail. This cl just ensures that selectItem always re-fetches the nodes to avoid the issue.

PiperOrigin-RevId: 595524158
2024-01-03 15:50:56 -08:00
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