144 Commits

Author SHA1 Message Date
Elliott Marquez
c346f5b977 build: visibility changes
PiperOrigin-RevId: 569032710
2023-09-27 19:46:00 -07:00
Elizabeth Mitchell
54c4ddba4c fix(list): text items are no longer tabbable, links cannot be disabled
PiperOrigin-RevId: 568318309
2023-09-25 14:03:12 -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
Elizabeth Mitchell
b35212a9ac feat(items): add <md-item> to @material/web/labs
PiperOrigin-RevId: 567734991
2023-09-22 15:42:42 -07:00
Elizabeth Mitchell
753677489b refactor(list)!: refactor list using md-item
BREAKING CHANGE: `<md-list-item>` now uses slots instead of properties and has removed many prescriptive items (such as avatar, image, and video items). The default slot can be used for any custom content.
```html
<md-list-item>
  <div slot="overline">OVERLINE</div>
  <div slot="headline">First line</div>
  <div slot="supporting-text">Second+ lines</div>
  <div slot="trailing-supporting-text">Trailing</div>
  <md-icon slot="start">star</md-icon>
  <md-icon slot="end">star</md-icon>
</md-list-item>
```
Add `type="button"` or `type="link"` for interactive list items.

PiperOrigin-RevId: 567732201
2023-09-22 15:30:06 -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
Andrew Jakubowicz
3b5cbc4ede fix(list)!: list items are now noninteractive by default
BREAKING CHANGE: the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring.
What to change:
- To preserve prior default behavior, add the `interactive` attribute explicitly.
- Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior.

PiperOrigin-RevId: 566696782
2023-09-19 11:43:59 -07:00
Elliott Marquez
1f31df818b refactor(list,menu,select)!: remove data-variant slotted variant selectors
BREAKING CHANGE: the data-variant=".." selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form `md-icon[slot=end][data-variant=icon]` should now be `md-icon[slot=end-icon]`.

PiperOrigin-RevId: 566258893
2023-09-18 04:11:38 -07:00
Elliott Marquez
9447ec7d72 refactor(list)!: move list aria to host
BREAKING CHANGE: Aria and roles on List have been moved to the host element. list-tabindex attribute should be migrated to tabindex attribute. type attribute should be migrated to role attribute.

PiperOrigin-RevId: 565767899
2023-09-15 13:45:32 -07:00
Elliott Marquez
af171df086 fix(list,menu): clicking items in a list followed by keyboard nav functions as expected
PiperOrigin-RevId: 565539367
2023-09-14 18:59:35 -07:00
Elliott Marquez
ed689952dd feat(list,menu,select): add slots for specific slotted variants
PiperOrigin-RevId: 565536994
2023-09-14 18:42:43 -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
Elliott Marquez
fad6104391 fix(list,menu): list items left right keyboard navigation
PiperOrigin-RevId: 565526741
2023-09-14 17:47:55 -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
Material Web Team
556e6f95e4 chore: fix closure compiler issues
PiperOrigin-RevId: 564867173
2023-09-12 16:30:19 -07:00
Elliott Marquez
368991ce30 fix(menu): fix submenus on mobile
PiperOrigin-RevId: 563531654
2023-09-07 13:39:19 -07:00
Elizabeth Mitchell
ca2cd56bd1 fix(list): remove font shorthand tokens
BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563162539
2023-09-06 11:22:42 -07:00
Elliott Marquez
b85b57fa79 fix(menu,list,select): do not stopPropagation on native events when handled only prevent default
Fixes #4817

We need to communicate between components when an event has been handled (e.g. keyboard navigation or clicking). This CL focuses on listening to `defaultPrevented` in order to communicate that something was handled. We also have to patch ripple on submenu to make sure that the ripple isn't triggered.

PiperOrigin-RevId: 561748634
2023-08-31 13:48:20 -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
Andrew Jakubowicz
32a8c4410e fix(list,menu): restrict type to only supported aria roles
## Why?

Because currently `md-list` and `md-menu` can accept any aria role as a `type` property. However this can result in invalid roles being added, e.g. `progressbar` is allowed as a valid `type`.

Instead this change scopes the `type` to the following:
 - `<md-list>` `type` can be any of: `'menu'|'menubar'|'listbox'|'list'|''`.
 - `<md-menu>` `type` can be any of: `'menu'|'menubar'|'listbox'|'list'`.

PiperOrigin-RevId: 560180446
2023-08-25 13:27:21 -07:00
Andrew Jakubowicz
641142dff0 fix(list): remove internal md3-* class prefix
PiperOrigin-RevId: 559909180
2023-08-24 16:47:21 -07:00
Copybara-Service
449a11b3b7 Merge pull request #4671 from davidurco:main
PiperOrigin-RevId: 559592182
2023-08-23 17:33:18 -07:00
Elliott Marquez
e0201e5a66 docs(list): fix list demo
PiperOrigin-RevId: 559258437
2023-08-22 16:37:58 -07:00
Dávid Ďurčo
1169347c9c fix(list): list item body min-width: 0 instead of max-width: 100% 2023-08-21 21:15:31 +02:00
Elliott Marquez
aa3fe3d1ec feat(list): change default host display to flex so max-width can be set without user setting display
PiperOrigin-RevId: 558234104
2023-08-18 13:36:33 -07:00
Elliott Marquez
1530aca17d fix(list): use margin over padding on slotted content and fix extraneous spacing
trailing text had an extra 16px added to its inline margin. Also use margin over padding because padding was messing with shape tokens applying to the padding whitespace.

PiperOrigin-RevId: 557581151
2023-08-16 13:16:04 -07:00
Elliott Marquez
2d9352e3f4 refactor(list-item)!: remove duplicate list-item menu-item from custom prop names
BREAKING: renames custom props from this:

`--md-list-item-list-item-...`
`--md-menu-item-list-item-...`

to:
`--md-list-item-...`
`--md-menu-item-...`
PiperOrigin-RevId: 557337871
2023-08-15 20:48:25 -07:00
Elizabeth Mitchell
0e492ade43 chore: remove sass theme utilities
PiperOrigin-RevId: 556915539
2023-08-14 14:39:19 -07:00
Elizabeth Mitchell
0510496e60 chore: avoid this in static context
PiperOrigin-RevId: 554933524
2023-08-08 14:00:25 -07:00
Dávid Ďurčo
327737d345 fix(list): list item body overflow issue 2023-08-07 22:45:50 +02:00
Elliott Marquez
65d04a3cf3 feat(list,menu): add css shadow parts to sub components
PiperOrigin-RevId: 553896396
2023-08-04 13:25:32 -07:00
Elliott Marquez
09cb6da8fb refactor(list,menu)!: add href to (list|menu)-item and remove (menu|list)-item-link
BREAKING CHANGE: list-item-link and menu-item-link have been removed and their functionality has been added to menu-item and list-item respectively.

PiperOrigin-RevId: 553894393
2023-08-04 13:18:38 -07:00
Elliott Marquez
ff60a88843 refactor(icon)!: remove css custom props from icon and apply values directly on host
BREAKING CHANGE: Remove css custom properties from icon and prefer applying normal css properties on host except for font-family.

PiperOrigin-RevId: 553577562
2023-08-03 13:43:59 -07:00
Elliott Marquez
fa63178238 refactor(menu): remove :has selectors
PiperOrigin-RevId: 552615347
2023-07-31 15:54:20 -07:00
Elizabeth Mitchell
b1259ae1ae chore(list): make listRoot and handleKeydown private
PiperOrigin-RevId: 551700277
2023-07-27 18:36:44 -07:00
Elliott Marquez
86ccec3e7e build: use firebase for hosting and remove url prefixes 2023-07-27 09:17:27 -07:00
Elizabeth Mitchell
d49f9b89e4 fix(focus)!: rename import to md-focus-ring.ts
BREAKING CHANGE: Change `@material/web/focus/focus-ring.js` to `@material/web/focus/md-focus-ring.js`.

PiperOrigin-RevId: 550608428
2023-07-24 10:43:31 -07:00
Andrew Jakubowicz
c6e6f65445 fix(list)!: rename "lib" directory to "internal"
BREAKING CHANGE: Rename `@material/web/list/lib` to `@material/web/list/internal`. Prefer not using internal files.

PiperOrigin-RevId: 550585246
2023-07-24 09:29:15 -07:00
Elliott Marquez
e9ef7ec5b4 fix(list,menu,select): update layout tokens to latest values and fix targets
The layout for the end padding in listitem has changed to 24px, and i realized that I had tokens pointing to the wrong values, so I fixed that too.

PiperOrigin-RevId: 549469035
2023-07-19 17:20:50 -07:00
Andrew Jakubowicz
10f60d23e0 chore: rename e to event
PiperOrigin-RevId: 549039407
2023-07-18 10:16:37 -07:00
Elizabeth Mitchell
243e231a13 feat(all): expose focus-ring parts
PiperOrigin-RevId: 548873009
2023-07-17 20:28:04 -07:00
Elizabeth Mitchell
fd28dd1a5b chore(all): move focus tokens to focus ring element
PiperOrigin-RevId: 548872335
2023-07-17 20:24:46 -07:00
Copybara-Service
8363542981 Merge pull request #4350 from vdegenne:item-link
PiperOrigin-RevId: 545751505
2023-07-05 12:19:22 -07:00
Elliott Marquez
0dfd2b841b test(list): increase test coverage for list and list-item
PiperOrigin-RevId: 544476519
2023-06-29 15:18:52 -07:00
Andrew Jakubowicz
0e3fe72f8f fix(list)!: change compound attribute names to kebab-case
BREAKING_CHANGE: Attributes `listtabindex`, `supportingtext`, `multilinesupportingtext`, `trailingsupportingtext`, and `itemtabindex` have been renamed to `list-tabindex`, `supporting-text`, `multi-line-supporting-text`, `trailing-supporting-text`, and `item-tabindex`.
PiperOrigin-RevId: 542629274
2023-06-22 12:08:11 -07:00
Elliott Marquez
30937acd18 feat(list,menu): expose activate next and prev items
PiperOrigin-RevId: 542315413
2023-06-21 11:33:26 -07:00
Elizabeth Mitchell
1790a5bbf8 chore: remove closure comments from static blocks
PiperOrigin-RevId: 539772537
2023-06-12 15:07:36 -07:00
Elizabeth Mitchell
0607d9ca53 chore: fix jscompiler issues
PiperOrigin-RevId: 539716693
2023-06-12 11:42:52 -07:00
Elliott Marquez
2be1b78241 feat(list): expose list item role
PiperOrigin-RevId: 538579598
2023-06-07 13:39:14 -07:00
Copybara-Service
eeb6a6dd68 Merge pull request #4337 from VandeurenGlenn:patch-1
PiperOrigin-RevId: 536570449
2023-05-30 19:08:52 -07:00