Skip to main content
react-md
Utils - Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.7.0 (2021-02-28)

Features

  • @react-md/utils: added a low level RadioGroup widget for the radiogroup role (76d6d27)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)
  • tsdoc: updated @since annotations (c62027e)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)
  • @react-md/utils: added tryToSubmitRelatedForm util to help with additional a11y (0566e14)
  • @react-md/utils: updated loop util to allow for a specific min value (51bcf92)

2.6.0 (2021-02-13)

Other Internal Changes

  • @react-md/utils: Added better dev display names for UserInteractionMode context parts (01f6e3d)
  • @react-md/utils: refactored UserInteractionMode hooks and components (af72791)

2.5.5 (2021-01-30)

Bug Fixes

2.5.0 (2020-12-15)

Bug Fixes

Features

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/utils

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/utils

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/utils

2.3.0 (2020-09-10)

Features

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/utils

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/utils

2.1.0 (2020-07-12)

Bug Fixes

  • Booleans in dist/scssVariables (f6d43a3)
  • Scroll active element into view while focusing (a9a0902)

Features

  • Added new mixin for optional css-modules (28ba828)

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

This package is pretty new for react-md, but might be seen as a replacement for the old grid, helpers, and utils.

New Behavior and Features

  • automatically update styles for right to left languages (opt-out)
  • static sizing across all screen sizes with opt-in support for an auto-dense theme if desired
  • better keyboard focus behavior for temporary elements so that keyboard focus is not lost after traversing between multiple menus, dialogs, sheets, etc
  • better keyboard movement with aria-activedescendant behavior or focus behavior
  • built-in keyboard search for DOM elements that require it
  • built-in support for determining the current app size based on media queries with both mixins and hooks
  • lots of additional utility mixins for common styling patterns
  • the default grid system now uses css grid instead of flexbox for layout
  • a second grid system that creates dynamic number of columns based on a max width provided
  • the grid system no longer uses its own breakpoints and uses the phone, tablet, and desktop breakpoints
  • simplified css reset touching as few html tags as possible: html and body only. still applies box-sizing: border-box to all elements though
  • "feature detection" utility mixin to only include styles for installed scoped react-md packages with react-md-utils

Breaking Changes

  • removed react-md-helpers-everything
  • removed .md-full-width, .md-inline-block, and .md-block-centered helper classes
  • changed the media query behavior and device detection
  • grid system now uses grid instead of flexbox and no longer supports a custom max-width through the scss variables with a container
  • FocusContainer renamed all of the props
  • renamed/removed all remaining scss variables, functions, mixins, and placeholders
New Components, Hooks, and Utils

This package contains many useful utilities for internal use, but also exports some components and hooks that might be useful externally.

  • AppSizeListener and useAppSize are used to determine the current app size based on media queries. Multiple components within react-md rely on this behavior
  • ResizeListener is a component that can be used to trigger a callback on throttled window resize events and a useResizeListener hook version
  • ResizeObserver is a component that is used to use the ResizeObserverAPI to track a specific element resizing as well as a useResizeObserver hook version
  • PhoneOnly, MobileOnly, TabletOnly, and DesktopOnly components can be used to conditionally render content only when one of the media types are active
  • UserInteractionModeListener, useUserInterationMode, and useIsUserInteractionMode are used to determine how the current user is interacting with your app with either: touch, mouse, or keyboard
  • Grid and GridCell can be used to create a CSS Grid layout using the material design grid layout or a static number of columns
  • GridList and GridListCell can be used to create a flex based layout where each cell grows up to the specified max width and tries to fit as many cells as possible based on the GridList's width
  • useTabFocusWrap hook for containing focus within an element if the FocusContainer does not suit your needs
  • useFocusOnMount hook if you'd like to focus a specific element when a component mounts if the FocusContainer does not suit your needs
  • usePreviousFocus hook if you'd like to focus the previously focused element in the DOM before this component mounted once this component unmounts
  • useScrollLock hook to temporarily disable scrollbars within the app for temporary elements
  • useCloseOnOutsideClick hook if a callback should be fired once an element outside of a container element has been clicked
Honorable Mentions
  • isContrastCompliant - utility function to check if two hex colors meet a minimal contrast ratio compliance for accessibility
  • bem - if you like using BEM for class name convention, helps dynamically apply classes as needed
  • caseInsensitiveFilter and fuzzyFilter utils for filtering a list of data
  • findIgnoreCase - utility to find the first match within a list
  • useKeyboardSearch - accessibility hook to allow a list of to be keyboard searchable within the DOM
  • useKeyboardFocusMovement and useActiveDescendantMovement for handling custom keyboard movement of DOM elements
  • getFixedPosition - utility to generate styles for an element so it is fixed within the viewport. However, you most likely are looking for the useFixedPositioning hook in @react-md/transition
New SCSS Variables, Functions, and Mixins
  • $rmd-utils-phone-max-width: 47.9375em !default - the max width to still be considered a phone while in portrait or landscape mode
  • $rmd-utils-tablet-max-width: 64em !default - the max width to still be considered a tablet while in portrait or landscape mode
  • $rmd-utils-large-desktop-min-width: 80em !default - a new min-width for a large desktop screen (normally for 1440p or 4k monitors)
  • $rmd-grid-padding: 1rem !default - the static padding for a grid
  • $rmd-grid-cell-margin: 1rem !default - the static amount of margin for each grid cell
  • $rmd-grid-golumns: null !default - a new variable that allows you to configure a static number of columns across all screen sizes instead of using the 4, 8, and 12 grid system from material design
  • $rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default - a new variable for if you want to configure the number of columns in the grid system for large desktop screens
  • $rmd-grid-list-padding: 0.5rem !default - the amount of to use for the flex-based grid approach
  • $rmd-grid-list-cell-margin: 0.5rem !default - the amount of margin to use for the flex-based grid approach for each cell
  • $rmd-grid-list-cell-max-size: 0.375rem !default - the default max-size that each cell within the flex-based grid apporach can be before the DOM has loaded
  • @function rmd-utils-negate-var - a utility function that can be used to negate a css variable
  • @mixin rmd-utils-map-to-styles - a utility mixin to convert a Map into styles
  • @mixin rmd-utils-rtl - a utility mixin to apply styles only for right to left languages
  • @mixin rmd-utils-rtl-auto - a utility mixin that can automatically swap some styles to an inversed value for right to left languages
  • @mixin rmd-utils-block-centered - a utility mixin to style an element centered horizontally within a non-flex container
  • @mixin rmd-utils-absolute-centered - a utility mixin to style an element centered horizontally and vertically using position: absolute
  • @mixin rmd-utils-scroll - a utility mixin to allow scrolling with fixing scroll momentum on iOS
  • @mixin rmd-utils-hide-focus-outline - utility mixin to hide the default browser focus styles for an element and fixing the firefox custom focus rings
  • @mixin rmd-utils-full-screen - a utility mixin for making an element full screen or the same size as the parent element
  • @mixin rmd-utils-pseudo-element - a utility mixin to create a pseudo element that won't be interactable. generally used for focus behavior
  • @mixin rmd-utils-sr-only-focusable - a utility mixin to make an element visible only while being focused by a screen reader
  • @mixin rmd-utils-sr-only - a utility mixin to make an element visible for screen readers only
  • @mixin rmd-utils-hide-scrollbar - a utility mixin to hide the scrollbar for an element while still allowing it to be scrollable
  • @mixin rmd-utils-phone-media - a utility mixin to apply styles only for phone devices
  • @mixin rmd-utils-tablet-media - a utility mixin to apply styles when the tablet min-width is reached
  • @mixin rmd-utils-tablet-only-media - a utility mixin to apply styles only for tablets based on min and max width
  • @mixin rmd-utils-desktop-media - a utility mixin to apply styles when the desktop min width is reached
  • @mixin rmd-utils-large-desktop-media - a utility mixin to apply styles when the large desktop min width is reached
  • @mixin rmd-utils-touch-only - a utility mixin to apply styles only while the app is being interacted by touch
  • @mixin rmd-utils-keyboard-only - a utility mixin to apply styles only while the app is being interacted with a keyboard
  • @mixin rmd-utils-mouse-only - a utility mixin to apply styles only while the app is being interacted with a mouse
Renamed SCSS Variables and Values
  • renamed $md-tablet-min-width to $rmd-utils-tablet-min-width and changed the default value from 768px to 48em
  • renamed $md-desktop-min-width to $rmd-desktop-min-width and changed the default value from 1025px to 64.0625rem
  • renamed $md-grid-phone-columns to $rmd-grid-phone-columns
  • renamed $md-grid-tablet-columns to $rmd-grid-tablet-columns
  • renamed $md-grid-desktop-columns to $rmd-grid-desktop-columns
Removed SCSS Variables, Functions, and Mixins
  • removed $md-mobile-min-width since the media queries will use max-width for phones instead
  • removed $md-portrait-media and $md-landscape-media since they are no longer used
  • removed $md-mobile-media, $md-mobile-portrait-media and $md-mobile-landscape-media since the rmd-utils-mobile-media mixin should be used instead
  • removed $md-tablet-media, $md-tablet-portrait-media, and $md-tablet-landscape-media since the rmd-utils-tablet-media and rmd-utils-tablet-only-media mixins should be used instead
  • removed $md-media-included since the rmd-utils-dense mixin should be used instead if you want to automatically create a dense theme on desktops
  • removed $md-tablet-breakpoint and $md-desktop-breakpoint since the grid uses the same breakpoints as all other components now
  • removed $md-grid-phone-margin, $md-grid-phone-gutter, $md-grid-tablet-margin, $md-grid-tablet-gutter, $md-grid-desktop-margin, and $md-grid-desktop-gutter since there is now a static size across all app sizes
  • removed all the old grid mixins: react-md-grid, react-md-make-grid-container, react-md-grid-mobile, react-md-grid-tablet, react-md-grid-desktop, react-md-make-custom-grid, react-md-make-grid, react-md-make-cells, react-md-grid-media, react-md-cell-size, react-md-grid-full, and react-md-cell-offset since the new grid system doesn't need styling in this manner