This document logs all notable changes to the Vrembem project.
Tags:
- 🔥
breaking:Breaking Changes - 🎉
feat:New Feature - 🐛
fix:Bug Fix - ✅
test:Testing - 📚
docs:Documentation - 🔨
chore:Chore - 🏠
refactor:Refactor
core- #2021 Refactor how focusable selectors is applied
drawer,modal- #1989 Remove inert polyfill
- #1909 Update github workflows
- Deploy dev and dist assets
- Dependency bumps
- #1692 Bump to current year 2024
- Dependency bumps
- Dependency bumps
drawer- #1352 Fix drawer transition styles
core- #1334 Fix transition bug when child elements transition event bubbles
- Dependency bumps
- #1193 Remove the coveralls dependency
- #1080 Bump to current year
base,breadcrumb,button-group,button,card,checkbox,core,dialog,drawer,grid,icon-action,icon,input,level,media,menu,modal,notice,popover,radio,section,switch,table,tooltip,utility,vrembem- #1075 Remove touchend events from modal and drawer click handling
core- #943 Add core root.scss to the NPM files field
core,vrembem- #942 Fix core Sass module order and move root manifest
core,drawer,modal- #895 Remove the use of proxies in favor of modules
core- #894 Remove console log
core,drawer- #893 Fix support for proxy polyfill and available traps
base,card,core,dialog,drawer,modal,notice,popover,table,utility- #890 Refactor core module, theme variables and removal of unused functions and mixins
popover- #888 Refactor custom properties output in popover component
drawer,grid,input,modal,popover,utility- #889 Update example templates
popover- #886 Fix missing aria-describedby check in close and handler functions
drawer- #884 Fix drawer class variables default
core,drawer,popover,vrembem- #883 Update custom property output methodology
- #885 Update docs css dir to scss
checkbox,core,drawer,modal,popover- #881 Rename css directories to scss
- #882 Run build on push to main branch
core,drawer,popover- #880 Trim custom property values and create getPrefix module
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-frameand$class-mainvariables. Breakpointhas 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.FocusTraphas 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-configdata attribute. Takes a JSON object as its value. - Drawer local storage feature has been refactored and now uses the new
localStoremodule which handles creating and updating alocalStorageobject using a proxy that is tracked as a global drawer property. - Refactored and now shared
updateGlobalStatemodule 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_switchmodifier. This replaced the use ofdrawer_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.modeproperty to more easily track and switch drawer modes between'inline'and'modal'.
- 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
- #866 Refactor and improve the drawer JS module
core,drawer,modal,popover- #866 Refactor and improve the drawer JS module
- Class changes
drawer__wrapper=>drawer-framedrawer__main=>drawer-maindrawer_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=>storestateKey=>storeKey: Default value has been changed from'DrawerState'=>'VB:DrawerState'
- API changes
setTabindex()=> deprecated. Tabindex is now managed on drawer registration.stateSet()=> deprecatedstateSave()=> deprecatedstateClear()=> deprecatedswitchToDefault()=> deprecatedswitchToModal()=> deprecated
- Events
drawer:toDefaultanddrawer:toModalevents have been deprecated in favor ofdrawer:switchModewhich is emitted whenever a drawer's mode changes. To check the mode state, useevent.targetand check for thedrawer_modalclass, or get the collection entry and checkentry.modeproperty for current state.
- Class changes
- #866 Refactor and improve the drawer JS module
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-replacetrigger ormodal.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 (
roleandaria-modal). - Better handling of modal specific configurations.
- Better handling of modal initial and document global states.
- Modal stacking: multiple modals can now be open at the same time. Use
- #853 Refactor and improve the modal JS module
core,drawer,modal,popover- #853 Refactor and improve the modal JS module
- Modals now require an
idattribute instead of thedata-modaldata attribute. The dialog data attributedata-modal-dialoghas 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]).
- Modals now require an
- #853 Refactor and improve the modal JS module
modal- #857 Allow configuring a modal on a per-modal basis
popover- #852 Accessible popover tooltip support using aria-describedby
- #850 Update docs popover implementation
popover- #838 Further refactor Popover JS module and improve a11y
- #849 Add lint, test and coveralls to deploy workflow
- #845 Refactor gh-actions and add new deploy flow
drawer- #844 Add IE11 mediaQueryList event listener support
checkbox,core,drawer,modal,popover- #832 Refactor JS modules
core,drawer- #831 Add option to disable core root output and update docs for drawer breakpoints
popover- #830 Add trigger memory support for popover component
core,drawer,popover- #815 Use custom properties for sharing values between CSS and JavaScript
- #824 Bump node js to the most current version
- #822 Update github workflows build node versions to match tool-version
popover,tooltip,vrembem- #788 Merge tooltip into the popover component as a modifier
drawer,modal- #771 Attach a components module to custom events detail
core- #770 Add refresh functionality to the focus trap module
core- #713 Move focusable selectors into array and join when needed
grid,level- #684 Add new level nowrap modifier
level- #683 Fix max-width for children elements of the level component
modal- #681 Update modal size scale to more usable values
modal- #680 Add more size modifiers to modal component
button,icon-action,input- #668 Use box-shadows instead of outline on form control components
button,icon-action- #667 Update the subtle button and icon-action styles
button,checkbox,core,icon-action,input,radio,switch- #665 Improve focus states and internal variant generation logic on form-control components
popover- #666 Update popover arrow size default and fix missing docs argument
base,button,checkbox,core,icon-action,menu,radio,switch- #664 Improve focus and focus-visible styles of form-control components
button,icon-action- #660 Update button and icon-action styles and deprecate
button_outline_[value]modifier
- #660 Update button and icon-action styles and deprecate
button- #657 Add new state modifier to button component
utility- #656 Add the position module to utilities
base,breadcrumb,button-group,button,card,checkbox,core,dialog,drawer,grid,icon-action,icon,input,level,media,menu,modal,notice,popover,radio,section,switch,table,tooltip,utility,vrembem- #642 Add homepage value to package json files
dialog,drawer,modal- #640 Change zindex variable names to z-index
drawer,modal- #641 Update modal and drawer docs to include missing JS API parameter docs
base,core,dropdown,popover,vrembem- #614 Refactor dropdown component, rename to popover and implement popper js
base,core,dropdown,popover,vrembem- #614 Refactor dropdown component, rename to popover and implement popper js
menu- #624 Fix menu text element overflow bug
drawer,grid,input,modal,utility,vrembem- 5be1181 Remove extra
/from favicon href in example files
- 5be1181 Remove extra
menu- Run build and ensure correct assets are being used in unpkg source
drawer,modal- #621 Use KeyboardEvent.key instead of the deprecated KeyboardEvent.keyCode
menu- #607 Audit and refactor menu component
- Menu now stacks as the default styles and removes the
menu_stack_[value]modifier - Adds the new
menu_inline_[value]modifier for making a menu inline (horizontal styles) - Adds new
menu_size_[value]modifier and matches sizing scale to other form-control components - Refactors, renames and deprecates a number of menu variables
- Menu now stacks as the default styles and removes the
- #607 Audit and refactor menu component
menu- #607 Audit and refactor menu component
input- #613 Add missing mixin documentation for input component
button,utility- #606 Add background-clip-[value] utilities and border-color-transparent
modal- #602 Apply init/destroy EventListeners feature to modal component
core,drawer,modal- #603 Fix setTabindex from removing tabindex attributes when set to false
button,icon-action- #604 Use the color module scale method instead of darken function
drawer- #605 Update MediaQueryList to use addEventListener instead of the deprecated addListener
base,checkbox,radio,switch- #600 Add size modifiers to checkbox, radio and switch components
button,checkbox,core,input,menu,radio,switch- #599 Add form-control size variables to core that form-control components inherit
button,core,input,notice- #580 Audit and refactor the input and button components
core- #594 Migrate the use of slash to math.div
icon-action,notice- #590 Rename type modifier to state to be more accurate
drawer,grid,modal,utility,vrembem- #595 Update example templates
drawer- #587 Add ability to disable event listeners on init
drawer,modal- #579 Add copy about tabindex -1 to modal and fix typos
icon-action- #574 Audit and refactor the icon-action component
table- #575 Audit and refactor the table component
card,dialog- #573 Add README docs for dialog component
card- #572 Add README docs for card component
base,breadcrumb,button-group,button,checkbox,drawer,grid,icon,level,media,modal,notice,radio,section,switch- #571 Fix copy on shared table descriptions
switch- #556 Add README docs for switch component
checkbox,radio- #555 Add README docs for radio component
breadcrumb- #551 Add breadcrumb component README documentation
button,grid,media,notice- #544 Add button readme docs
icon- #521 Add new icon size modifier
drawer- #524 Fix drawer initial state when local storage returns an empty object
button-group- #522 Fix reference links in button-group docs
section- #434 Audit and refactor section component
container,utility,vrembem- #432 Deprecate container component in favor of new max-width and updated margin-auto utilities
utility- #409 Add default direction variants for padding and margin utilities
base,breadcrumb,button-group,button,card,checkbox,container,core,dialog,drawer,dropdown,grid,icon-action,icon,input,level,media,menu,modal,notice,radio,section,switch,table,tooltip,utility,vrembem- #401 Add microbundle to output more optimal bundles
checkbox,core,drawer,modal,vrembem- #394 Optimize bundles
checkbox,core,drawer,modal,vrembem- #393 Add esm bundle and update pkg module fields
utility,vrembem- #391 Add more flexbox utilities
core,utility,vrembem- #390 Split font properties into their own utility module
level,vrembem- #379 Give level children max-width of 100% to fix overflow
grid,utility,vrembem- #378 Move span to the grid component and refactor
base,button-group,button,card,checkbox,core,grid,icon-action,level,media,menu,notice,radio,section,switch,table,utility,vrembem- #370 Add new flex-gap and gap modules
icon-action,notice,vrembem- #377 Refactored notice component to remove unneeded complexity
core- #372 Add new gap mixin to core
core- #371 Add the new gap and gap-map variables to core
base,button,card,core,dialog,dropdown,icon-action,input,notice,table,utility,vrembem- #364 Add new heading-scale variable map and heading-levels mixin
base,core,utility- #364 Also includes the following changes:
- Remove the text-lead utility.
- Adds better variable overrides to the base component.
- Fix core line-height variable values.
- Fix core padding-lg variable values.
- #364 Also includes the following changes:
level,vrembemmedia,vrembem- #355 Add gap-x and gap-y modifiers to the media component
grid,level,vrembem- #354 Add gap-x and gap-y modifiers to grid component
base,vrembem- #358 Add better li element margins
button-group,grid,media,vrembem- #362 Refactor the button-group component
notice,utility,vrembem- #359 Change hori and vert padding/margin class names to x/y
media,vrembem- #355 Add gap-x and gap-y modifiers to the media component
grid,vrembem- #353 Refactor grid component break modifier to stack for library consistency
utility,vrembem- #351 Add specific side application utilities for radius
core,modal,vrembem- #339 Change the order or args in moveElement module
arrow,base,notice,vrembem- #338 Merge arrow component as a base module
panel,vrembem- #336 Deprecate the panel component
base,core,grid,media,notice,utility,vrembem- #335 Add ability to pass map key to spacing mixin and update spacing map units from rem to em
base,drawer,modal,notice,vrembem- #331 Add @vrembem/core to vrembem forwards
media,vrembem- #321 Add improved styles for combined media modifiers
core,drawer,modal,vrembem- #322 Add inner item check before storing and returning scroll position
checkbox,core,drawer,modal,vrembem- #320 Modular component scripts
core,drawer,modal,vrembem- #322 Improve styles on documentation website
modal,vrembem- #319 Change the order of methods run on init
checkbox,core,drawer,modal,vrembem- #312 Update package entries and bundle output
modal,vrembem- #308 Retain scroll position when getFocusable is called
checkbox,drawer,modal,vrembem- #302 Refactor constructors
core,drawer,modal,vrembem- #301 Add main field to core package.json
dismissible,vrembem- #295 Deprecate the dismissible component
checkbox,dismissible,drawer,modal- #294 Use consistent namespace for iife bundles
checkbox,core,dismissible,drawer,modal,vrembem- #293 Fix package exports and bundles
drawer,modal,vrembem- #292 Add touch event for modal screen
drawer,modal,vrembem- #290 Improve accessibility for drawer component in modal drawer state
modal,vrembem- #289 Improve modal component error handling
dialog,vrembem- #288 Add spacing for children of header and footer dialog elements
modal,vrembem- #280 Fix modal hidden focusable bug
modal,vrembem- #279 Add modal focus trap feature
utility,vrembem- #270 Adds left and right margin-auto utility classes
utility- #267 Add output vars to utility component
base,breadcrumb,button-group,button,card,checkbox,core,dialog,drawer,dropdown,icon-action,input,menu,modal,notice,panel,radio,switch,table,tooltip,utility,vrembem- #265 Add output variables to better control base output
drawer,vrembem- #262 Add data drawer open
- #249 Improve root README with CDN usage documentation
modal,vrembem- #255 Improve modal component by adding toggleOverflow and transition options
checkbox,core,dismissible,drawer,modal,vrembem- #242 Improve test coverage
drawer,vrembem- #238 Refactor drawer breakpoint methods
vrembem- #234 Add scroll-stash to docs and cleanup imports
drawer,vrembem- #228 Add width and max-width variables to Drawer component
menu,vrembem- #211 Remove relative positioning from menu items
arrow,base,breadcrumb,button-group,button,card,checkbox,container,core,dialog,dismissible,drawer,dropdown,grid,icon-action,icon,input,level,media,menu,modal,notice,panel,radio,section,switch,table,tooltip,utility,vrembem- #207 Update deprecated rollup plugins
checkbox,core,dismissible,drawer,modal,vrembem- #206 New drawer breakpoint API and custom events
grid,utility
grid,table,utility,vrembem- #201 Add readme docs
dismissible,span,utility,vrembem- #200 Convert span to a utlity and remove span package
base,dismissible,dropdown,menu,notice,span,utility,vrembem- #199 Remove utility naming convention from utility classes
dismissible,span,utility,vrembem- #200 Convert span to a utlity and remove span package
base,dismissible,dropdown,menu,notice,span,utility,vrembem- #199 Remove utility naming convention from utility classes
checkbox,dismissible,drawer,modal,vrembem- #196 Add drawer and modal custom events
checkbox,dismissible,drawer,modal,vrembem- #196 Add drawer and modal custom events
input,vrembem- #195 fix: add appearance none to root input component
- Other
- #194 Improve UX of docs drawer menu
core,drawer,vrembem- #191 Update documentation for drawer component
core,drawer,vrembem- #189 Use the same variable name for breakpoints in both Sass and JS
table,vrembem- #193 Make mobile-label styles less heavy
arrow,base,breadcrumb,button-group,button,card,checkbox,container,core,dialog,dismissible,drawer,dropdown,grid,icon-action,icon,input,level,media,menu,modal,notice,panel,radio,section,span,switch,table,tooltip,utility,vrembem- #185 Add links between readme and web documentation
vrembem- #184 Fix repository directory value
- #176 Add changelog
core,table,vrembem- #177 Add responsive table modifier
button-group,button,core,grid,media,menu,span,table,utility,vrembem- #182 Make component breakpoints override-able on a per component basis
core- #181 Core functions to use built-in modules
base,button-group,button,card,checkbox,core,grid,icon-action,media,menu,radio,section,span,switch,table,utility,vrembem- #180 Use sass:map in core mixins
arrow,base,breadcrumb,button-group,button,card,checkbox,container,core,dialog,drawer,dropdown,grid,icon-action,icon,input,level,media,menu,modal,notice,panel,radio,section,span,switch,table,tooltip,utility,vrembem- #173 Add custom prefix support to BEM class naming
button-group,vrembem- #167 Add breakpoint modifiers to button-group component and more other improvements