4513 Commits

Author SHA1 Message Date
vdegenne
56070593ce fix(md-item): exclude start slot from hidden overflow 2023-09-27 18:51:28 +02:00
vdegenne
e0871411dd fix(md-item): exclude start slot from hidden overflow 2023-09-27 12:18:36 +02:00
Elliott Marquez
e8fcfa3889 docs(list): update the list docs off of old list implementation
PiperOrigin-RevId: 568694592
2023-09-26 17:28:31 -07:00
Andrew Jakubowicz
e10186e91b fix(tabs): revert isTab check so it is possible to create your own tab
PiperOrigin-RevId: 568670280
2023-09-26 15:48:02 -07:00
Copybara-Service
036ea7b04c Merge pull request #4861 from material-components:release-please--branches--main--components--web
PiperOrigin-RevId: 568656313
v1.0.0
2023-09-26 14:54:04 -07:00
release-please[bot]
f5d408e940
chore: release 1.0.0 2023-09-26 21:49:18 +00:00
Elizabeth Mitchell
911455948e chore: revert changelog commit
PiperOrigin-RevId: 568654393
2023-09-26 14:47:17 -07:00
release-please[bot]
106b03614a chore: release 1.0.0
🤖 I have created a release *beep* *boop*
---

## [1.0.0](https://github.com/material-components/material-web/compare/v1.0.0-pre.17...v1.0.0) (2023-09-25)

### ⚠ BREAKING CHANGES

* **list:** the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page.
* **list:** `<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.
* **menu:** 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
* **menu,select:** refactor `fixed` property to `positioning="fixed"` in Menu and `menuFixed` to `menuPositioning="fixed"`
* **menu:** 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`.
* **menu:** We have deleted `md-sub-menu-item`. Instead it is recommended to use `md-sub-menu` which can have `md-menu-item[slot=item]` and `md-menu[slot=menu]` slotted into it. This makes `sub-menu-item` accessible for screen readers using linear navigation
* **menu:** 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.
* **iconbutton:** Replace `container-size` tokens with `container-width` and `container-height`.
* **list:** 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.
* **menu:** rename corner and focus state values lowercase with dashes
* **chips:** chips now follow the [aria toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/). Chip sets are toolbars and chips are buttons or links. Filter chips are toggle buttons. What to change:
    - Remove `type` attribute from `<md-chip-set>` (you can mix and match chip types!)
    - Remove `single-select` from `<md-chip-set>`. Use JS to control filter chips if single selection is required. Radio filter chips will come in a future update.
    - Disabled chips CAN be focused with the keyboard if `always-focusable` is set.
    - Filter chips no longer dispatch a `"selected"` event. Listen to `"click"` and use `event.target.selected` instead.
    - ArrowUp and ArrowDown no longer navigate between chips. These are reserved for chip actions, like dropdown menu chips.
* **list,menu,select:** 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]`.
* **menu:** menu selected container color changed to secondary-container
* **list:**
* **list:** 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.
* **list,menu,select:** removed `active` from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.
* **select:** `option.selected` no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.
* **dialog:** if overriding margin on a dialog's content, swap it to padding. If a dialog's slotted first or last child has built-in margin (such as `<h3>` or `<p>`), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing).
* **tabs:** Rename the `selected` index property on md-tabs to `activeTabIndex` (`active-tab-index` attribute). Rename `select-on-focus` to `auto-activate`
* **typography:** composite `-type` tokens are no longer supported. Use discrete `-font`, `-size`, `-line-height`, and `-weight` tokens instead.
* **tabs:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`
* **tabs:** rename `selected` to `active` for primary and secondary tabs.
* **textfield:** replace slot names `leadingicon` and `trailingicon` with `leading-icon` and `trailing-icon`
* **select:** replace `leadingicon` and `trailingicon` slot names with `leading-icon` and `trailing-icon`
* **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon

### Features

* **chips:** swap to toolbar a11y pattern ([16bfac1](16bfac1343))
* **iconbutton:** update tokens to v0.192 ([e8b5b29](e8b5b29d1e))
* **item:** add `&lt;md-item&gt;` layout component ([ffe4f79](ffe4f79b5d))
* **items:** add `&lt;md-item&gt;` to `@material/web/labs` ([b35212a](b35212a9ac))
* **list,menu,select:** add slots for specific slotted variants ([ed68995](ed689952dd))
* **menu:** create a Menu interface for easier md-menu wrapping ([5fad4f0](5fad4f088f))
* **menu:** do not close menu if anchor is clicked ([c7c276f](c7c276fdfa))
* **menu:** implement md-sub-menu ([54fbb2e](54fbb2ed5e))
* **menu:** menus will resize and flip corners to stay in viewport ([235a203](235a2033d7))
* **menu:** update tokens to v0.192 ([94b5c81](94b5c8125e))
* **select:** add required and form association ([4ad2336](4ad2336b87)), closes [#4903](https://github.com/material-components/material-web/issues/4903)
* **tabs:** add `tabs` property to retrieve tab elements ([bf48fc3](bf48fc307e))
* **typography:** add typography Sass APIs ([8e480de](8e480deae3))

### Bug Fixes

* aria polyfill overrides user values and user values override internals values ([8aa4faf](8aa4faf14a))
* **catalog:** remove TODO from home page ([af27ff8](af27ff8374))
* **dialog:** change content margin to padding ([8613fe6](8613fe6a58))
* **dialog:** not delegating focus in closure ([375b766](375b7664ef))
* **iconbutton:** allow prevent default click for toggles ([ed539c6](ed539c6853)), closes [#4857](https://github.com/material-components/material-web/issues/4857)
* **iconbutton:** fix HCM disabled opacity and outlined ([1163315](1163315948))
* **linearprogress:** linear progress buffer dots now visible in HCM ([70bfea8](70bfea8738))
* **list,menu:** clicking items in a list followed by keyboard nav functions as expected ([af171df](af171df086))
* **list,menu:** list items left right keyboard navigation ([fad6104](fad6104391))
* **list:** list items are now noninteractive by default ([3b5cbc4](3b5cbc4ede))
* **list:** update tokens to 0.192 ([58539b1](58539b1569))
* **menu:** allow submenus to close when focus is lost ([7a19c7e](7a19c7e97a))
* **menu:** apply padding to dividers per spec ([df52d92](df52d92724))
* **menu:** fix submenus on mobile ([368991c](368991ce30))
* **menu:** menu's default focus behavior follows google accessibility practices ([2927245](2927245114))
* **menu:** update default min width to spec and allow max-width to inherit ([2e25bf8](2e25bf8ce2))
* **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon ([f019ac3](f019ac37fe))
* **radio:** dispatches input event on select ([e444de3](e444de3c02))
* **select:** change slot names to kebab-case ([059dad5](059dad5d44))
* **select:** don't reflect `selected` attribute ([573caae](573caaee1b))
* **select:** select can reopen when animation interrupted ([78e7c17](78e7c1742f))
* **select:** update select docs and fix initial selection ([5e4434b](5e4434bfed))
* **slider:** border should only appear when handle nubs are overlapping ([6e72a8e](6e72a8e5f4))
* **slider:** label should not changed size when stacked ([b50d5c8](b50d5c87b3))
* **slider:** make tickmarks visible when slider is disabled ([e9d1e7d](e9d1e7d3c4))
* **tabs:** a11y and tabs sometimes not activating ([58f2446](58f2446246))
* **tabs:** remove font shorthand tokens ([88eb175](88eb1759c5))
* **tabs:** remove previously selected tab property ([70ce0d2](70ce0d2779))
* **tabs:** remove public indicator property ([d296316](d296316a2b))
* **tabs:** rename tab `selected` to `active` ([23b291b](23b291b2dd))
* **tabs:** scrollable divider not taking up full width ([a0fca90](a0fca90bdf))
* **tabs:** setting `active` on tab selects them ([1442f9b](1442f9b223))
* **textfield,focus,ripple:** fix textfield SSR ([f576b60](f576b60aec))
* **textfield:** add demo a11y and fix outlined label navigation ([7866a93](7866a939b9))
* **textfield:** broken required validity on Safari ([c26a578](c26a578448)), closes [#4796](https://github.com/material-components/material-web/issues/4796)
* **textfield:** change slot names to kebab-case ([82e9e92](82e9e92a19))
* **textfield:** don't show focus indicator when focused on icon ([61c8f6d](61c8f6db46))
* **textfield:** remove icon that appears in search input in chrome and safari ([86aaacd](86aaacd32c))
* **tokens:** generate tokens v0.192 ([116b448](116b448639))
* **tokens:** update components to v0.192 ([cfd053c](cfd053c397))

### Miscellaneous Chores

* prep release version ([df508ef](df508ef5fd))

### Code Refactoring

* **list,menu,select:** remove active concept and now parent controls tabIndex and focus ([d446315](d4463154cc))
* **list,menu,select:** remove data-variant slotted variant selectors ([1f31df8](1f31df818b))
* **list:** move list aria to host ([9447ec7](9447ec7d72))
* **list:** refactor list to reuse ListController ([6d0c7e8](6d0c7e8538))
* **list:** refactor list using md-item ([7536774](753677489b))
* **menu,select:** rename `fixed` to `positioning` ([63b0142](63b01425e7))
* **menu:** pull logic out of menuitem into a controller & change enum vals ([1217b62](1217b62ef2))
* **menu:** refactor menu-item to use md-item and not rely on md-list-item ([2a1d877](2a1d8776a7))
* **menu:** remove sub-menu-item in favor of sub-menu ([d6cbf74](d6cbf74137))
* **menu:** rename corner and focus state values lowercase with dashes ([6e54048](6e54048f1e))
* **menu:** update menu to use host-aria ([0384507](0384507447))

---
This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).

COPYBARA_INTEGRATE_REVIEW=https://github.com/material-components/material-web/pull/4861 from material-components:release-please--branches--main--components--web 326c90e54feed2fbf1487d6154fdb1394963eec5
PiperOrigin-RevId: 568652033
2023-09-26 14:38:37 -07:00
Elizabeth Mitchell
c4146ebfab docs: update roadmap
PiperOrigin-RevId: 568650855
2023-09-26 14:33:49 -07:00
Elizabeth Mitchell
2f549a4f74 docs: mark select as stable
PiperOrigin-RevId: 568345715
2023-09-25 15:51:22 -07:00
Elliott Marquez
d27ef2e059 fix(menu): expose item custom properties and fix selected color
PiperOrigin-RevId: 568344744
2023-09-25 15:47:19 -07:00
Elizabeth Mitchell
b7262d9f2f docs: mark menu as stable
PiperOrigin-RevId: 568338996
2023-09-25 15:24:46 -07:00
Elizabeth Mitchell
682a39c480 chore(menu): update demo a11y
PiperOrigin-RevId: 568337321
2023-09-25 15:16:42 -07:00
Elizabeth Mitchell
83aaf6c848 chore(select): update demo a11y
PiperOrigin-RevId: 568335268
2023-09-25 15:08:50 -07:00
Copybara-Service
74c06cfda3 Merge pull request #4963 from material-components:auto-update-docs
PiperOrigin-RevId: 568328326
2023-09-25 14:46:06 -07:00
lit-robot
84df854bb7 docs: update API docs 2023-09-25 21:32:35 +00:00
Elliott Marquez
aeb5103e1c fix(menu,select): fix final aria issues
PiperOrigin-RevId: 568326002
2023-09-25 14:31:52 -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
Elliott Marquez
c789c99036 chore(fab): explicitly mark function as protected for API docs
PiperOrigin-RevId: 568274397
2023-09-25 11:20:26 -07:00
Elliott Marquez
1636d91d3a chore: update the analyzer to update the docs for select
PiperOrigin-RevId: 567918915
2023-09-23 17:17:29 -07:00
Elliott Marquez
0e3a4af9ef docs(menu): update menu docs to use new item format
PiperOrigin-RevId: 567885727
2023-09-23 11:23:59 -07:00
Copybara-Service
1b0461884e Merge pull request #4981 from material-components:catalog-fixes
PiperOrigin-RevId: 567885328
2023-09-23 11:19:40 -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
Elliott Marquez
5f6a011f93 prefer Material web over MWC per branding guidelines 2023-09-22 23:38:53 -07:00
Elliott Marquez
9250d95fa8 set url bar and favicon 2023-09-22 23:35:46 -07:00
Elliott Marquez
186e8fc188 add all docs content to the catalog 2023-09-22 23:05:50 -07:00
Elliott Marquez
446558081a docs(catalog): misc catalog fixes 2023-09-22 19:28:01 -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
Elizabeth Mitchell
b35212a9ac feat(items): add <md-item> to @material/web/labs
PiperOrigin-RevId: 567734991
2023-09-22 15:42:42 -07:00
Elliott Marquez
dbf930a946 docs(catalog): import all ssr definitions to the server
PiperOrigin-RevId: 567733162
2023-09-22 15:34:44 -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
5fad4f088f feat(menu): create a Menu interface for easier md-menu wrapping
PiperOrigin-RevId: 567728911
2023-09-22 15:15:41 -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
Copybara-Service
61b382a9df Merge pull request #4968 from material-components:issue-template
PiperOrigin-RevId: 567706687
2023-09-22 13:43:12 -07:00
Elliott Marquez
d6cbf74137 refactor(menu)!: remove sub-menu-item in favor of sub-menu
BREAKING CHANGE: We have deleted `md-sub-menu-item`. Instead it is recommended to use `md-sub-menu` which can have `md-menu-item[slot=item]` and `md-menu[slot=menu]` slotted into it. This makes `sub-menu-item` accessible for screen readers using linear navigation

PiperOrigin-RevId: 567706398
2023-09-22 13:41:43 -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
Andrew Jakubowicz
1b0b072b65 code review feedback 2023-09-22 13:16:48 -07:00
Andrew Jakubowicz
e6925b267a add documentation specific bug 2023-09-21 17:19:26 -07:00
Andrew Jakubowicz
eb7ad966dd Add GitHub issue templates for bugs & links to docs and community 2023-09-21 17:13:08 -07:00
Elizabeth Mitchell
375b7664ef fix(dialog): not delegating focus in closure
PiperOrigin-RevId: 567363579
2023-09-21 11:17:12 -07:00
Andrew Jakubowicz
448fcddfa2 chore: decouple field component from interface imported from menu
PiperOrigin-RevId: 567361278
2023-09-21 11:09:34 -07:00
Elliott Marquez
c7c276fdfa feat(menu): do not close menu if anchor is clicked
PiperOrigin-RevId: 567096832
2023-09-20 15:25:03 -07:00
Elizabeth Mitchell
ffe4f79b5d feat(item): add <md-item> layout component
PiperOrigin-RevId: 567095805
2023-09-20 15:23:19 -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
Copybara-Service
dc75fbc639 Merge pull request #4956 from material-components:auto-update-docs
PiperOrigin-RevId: 566993280
2023-09-20 09:46:09 -07:00
lit-robot
621192bc12 docs: update API docs 2023-09-20 06:58:11 +00:00