core, drawer, modal, popover
- #866 Refactor and improve the drawer JS module
  - Better alignment of drawer component with the BEM methodology. Specifically in regards to required structure elements who's naming implies them being elements of the drawer block, they're now their own class definitions. These classes can now also be customized using the $class-frame and $class-main variables.
  - Breakpoint has been refactored and made into a core module. This module creates and tracks a media query list object and runs a passed handler anytime the match property changes.
  - FocusTrap has been refactored and has a more coherent API. This module creates and handles focus trap implementations.
  - You can now pass custom configurations to a specific drawer using the data-drawer-config data attribute. Takes a JSON object as its value.
  - Drawer local storage feature has been refactored and now uses the new localStore module which handles creating and updating a localStorage object using a proxy that is tracked as a global drawer property.
  - Refactored and now shared updateGlobalState module that handles setting overflow and inert states.
  - Styles for drawers have been updated to now slide in from the left by default. To switch positioning to the right of the viewport, apply the drawer_switch modifier. This replaced the use of drawer_pos_[key] modifiers. Non-positioned drawers are no longer supported.
  - Added support for multi-attribute triggers with space separated ID lists as the value. This allows for better management of multi-drawer apps/websites that open from the same side.
  - Better handling of initial state of drawers.
  - Better handling of focus management. Each drawer trigger is now tracked on a per-drawer basis.
  - Drawer mode is now handled using the collection entry API entry.mode property to more easily track and switch drawer modes between 'inline' and 'modal'.

:fire: Breaking Changes

core, drawer, modal, popover
- #866 Refactor and improve the drawer JS module
  - Class changes
    - drawer__wrapper => drawer-frame
    - drawer__main => drawer-main
    - drawer_pos_left => deprecated: Drawers are now positioned left by default.
    - drawer_pos_right => drawer_switch
  - CSS variable changes
    - $wrapper-height: 100%; => $frame-height: 100vh;
  - Option changes
    - dataDrawer => selectorDrawer: Takes a valid CSS selector string.
    - dataDialog => selectorDialog: Takes a valid CSS selector string.
    - dataFocus => selectorFocus: Takes a valid CSS selector string (defaults to[data-focus]).
    - stateSave => store
    - stateKey => storeKey: Default value has been changed from 'DrawerState' => 'VB:DrawerState'
  - API changes
    - setTabindex() => deprecated. Tabindex is now managed on drawer registration.
    - stateSet() => deprecated
    - stateSave() => deprecated
    - stateClear() => deprecated
    - switchToDefault() => deprecated
    - switchToModal() => deprecated
  - Events
    - drawer:toDefault and drawer:toModal events have been deprecated in favor of drawer:switchMode which is emitted whenever a drawer's mode changes. To check the mode state, use event.target and check for the drawer_modal class, or get the collection entry and check entry.mode property for current state.

2.0.0

Diff

sebnitu

published 2.0.0 • 3 years ago

Changelog

Source

v2.0.0 (2022-03-17)

:tada: New Feature

core, drawer, modal, popover
- #853 Refactor and improve the modal JS module
  - Modal stacking: multiple modals can now be open at the same time. Use data-modal-replace trigger or modal.replace() method for support of close to open functionality between modals.
  - Teleport: moveModal has been removed in favor of a teleport and teleportReturn API that are now attached to each collection entries modal object.
  - Better handling of accessibility attributes for modals (role and aria-modal).
  - Better handling of modal specific configurations.
  - Better handling of modal initial and document global states.

:fire: Breaking Changes

core, drawer, modal, popover
- #853 Refactor and improve the modal JS module
  - Modals now require an id attribute instead of the data-modal data attribute. The dialog data attribute data-modal-dialog has also been deprecated and is no longer required.
  - Option changes
    - moveModals.ref => teleport: Takes a valid CSS selector string.
    - moveModals.type => teleportMethod: Method options include 'after', 'before', 'append' and 'prepend'.
    - dataModal => selectorModal: Takes a valid CSS selector string.
    - dataDialog => selectorDialog: Takes a valid CSS selector string.
    - dataRequired => selectorRequired: Takes a valid CSS selector string.
    - dataFocus => selectorFocus: Takes a valid CSS selector string (defaults to[data-focus]).