Skip to content

v1.0.0

Compare
Choose a tag to compare
@release-please release-please released this 26 Sep 21:57

1.0.0 (2023-09-26)

⚠ 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. 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)
  • iconbutton: update tokens to v0.192 (e8b5b29)
  • item: add &lt;md-item&gt; layout component (ffe4f79)
  • items: add &lt;md-item&gt; to @material/web/labs (b35212a)
  • list,menu,select: add slots for specific slotted variants (ed68995)
  • menu: create a Menu interface for easier md-menu wrapping (5fad4f0)
  • menu: do not close menu if anchor is clicked (c7c276f)
  • menu: implement md-sub-menu (54fbb2e)
  • menu: menus will resize and flip corners to stay in viewport (235a203)
  • menu: update tokens to v0.192 (94b5c81)
  • select: add required and form association (4ad2336), closes #4903
  • tabs: add tabs property to retrieve tab elements (bf48fc3)
  • typography: add typography Sass APIs (8e480de)

Bug Fixes

  • aria polyfill overrides user values and user values override internals values (8aa4faf)
  • catalog: remove TODO from home page (af27ff8)
  • dialog: change content margin to padding (8613fe6)
  • dialog: not delegating focus in closure (375b766)
  • iconbutton: allow prevent default click for toggles (ed539c6), closes #4857
  • iconbutton: fix HCM disabled opacity and outlined (1163315)
  • linearprogress: linear progress buffer dots now visible in HCM (70bfea8)
  • list,menu: clicking items in a list followed by keyboard nav functions as expected (af171df)
  • list,menu: list items left right keyboard navigation (fad6104)
  • list: list items are now noninteractive by default (3b5cbc4)
  • list: text items are no longer tabbable, links cannot be disabled (54c4ddb)
  • list: update tokens to 0.192 (58539b1)
  • menu,select: fix final aria issues (aeb5103)
  • menu: allow submenus to close when focus is lost (7a19c7e)
  • menu: apply padding to dividers per spec (df52d92)
  • menu: expose item custom properties and fix selected color (d27ef2e)
  • menu: fix submenus on mobile (368991c)
  • menu: menu's default focus behavior follows google accessibility practices (2927245)
  • menu: update default min width to spec and allow max-width to inherit (2e25bf8)
  • navigationtab: change slot names activeIcon and inactiveIcon to active-icon and inactive-icon (f019ac3)
  • radio: dispatches input event on select (e444de3)
  • select: change slot names to kebab-case (059dad5)
  • select: don't reflect selected attribute (573caae)
  • select: select can reopen when animation interrupted (78e7c17)
  • select: update select docs and fix initial selection (5e4434b)
  • slider: border should only appear when handle nubs are overlapping (6e72a8e)
  • slider: label should not changed size when stacked (b50d5c8)
  • slider: make tickmarks visible when slider is disabled (e9d1e7d)
  • tabs: a11y and tabs sometimes not activating (58f2446)
  • tabs: remove font shorthand tokens (88eb175)
  • tabs: remove previously selected tab property (70ce0d2)
  • tabs: remove public indicator property (d296316)
  • tabs: rename tab selected to active (23b291b)
  • tabs: scrollable divider not taking up full width (a0fca90)
  • tabs: setting active on tab selects them (1442f9b)
  • textfield,focus,ripple: fix textfield SSR (f576b60)
  • textfield: add demo a11y and fix outlined label navigation (7866a93)
  • textfield: broken required validity on Safari (c26a578), closes #4796
  • textfield: change slot names to kebab-case (82e9e92)
  • textfield: don't show focus indicator when focused on icon (61c8f6d)
  • textfield: remove icon that appears in search input in chrome and safari (86aaacd)
  • tokens: generate tokens v0.192 (116b448)
  • tokens: update components to v0.192 (cfd053c)

Miscellaneous Chores

Code Refactoring

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