react-md
react-md - App Bar - Changelog

Change Log

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

5.1.6 (2023-12-11)

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

5.1.3 (2022-05-07)

Documentation

  • fix typos throughout codebase (725d1a2)

5.1.2 (2022-04-02)

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

5.1.0 (2022-03-18)

Bug Fixes

  • @react-md/app-bar: AppBarTitle now applies flex: 1 1 auto (4a47c92)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

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

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

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

4.0.0 (2021-11-24)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)
  • stylelint: Updated to use stylelint (22d1598)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Bug Fixes

  • sass: use math.div instead of division since it's deprecated (d8c3f12)

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

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

2.8.5 (2021-07-03)

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

2.8.4 (2021-06-10)

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

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

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

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Other Internal Changes

  • ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Documentation

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

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

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

2.5.5 (2021-01-30)

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

2.5.4 (2021-01-27)

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

2.5.0 (2020-12-15)

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

2.4.2 (2020-10-23)

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

2.4.1 (2020-10-17)

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

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

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

2.3.0 (2020-09-10)

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

2.2.2 (2020-09-02)

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

2.2.1 (2020-09-02)

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

2.2.0 (2020-08-11)

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

2.1.2 (2020-08-01)

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

2.1.1 (2020-07-21)

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

2.1.0 (2020-07-12)

Bug Fixes

  • AppBar text color now defaults to rmd-theme-var(text-primary-on-background) (2c3ea5e)

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 a replacement of the old Toolbar component in v1 that has now been separated into multiple components for additional customization.

Now exports:

  • AppBar
  • AppBarTitle
  • AppBarNav
  • AppBarAction

New Behavior and Features

  • now exports multiple components for rendering an AppBar
  • now supports right-to-left languages out of the box to update margin and padding as needed
  • can now be rendered at the bottom of the page
  • better support for prominent sizing with nested AppBars for rows
  • slightly better support for automatic color inherit logic for AppBar specific components (means other components won't inherit the color automatically by default)
  • the height no longer changes on mobile and tablet devices depending on if its orientation
  • automatically updates the theme colors to have accessible text
  • now supports multiple themes: "primary", "secondary", and "default"

Breaking Changes

  • the sizing behavior was updated to use a height prop instead of multiple boolean flags
  • the AppBar no longer supports the nav, title actions, actionLeft, and actionRight props since they are new components that should be used as children of the AppBar
  • no longer supports the titleMenu props since it is no longer required
New SCSS Variables, Functions, and Mixins
  • $rmd-app-bar-fixed-elevation: 2 !default - the material design elevation (box-shadow) to apply when an AppBar is fixed to the top or bottom of the page
  • $rmd-app-bar-height: 3.5rem !default - the default height for the app bar
  • $rmd-app-bar-dense-height: 3rem !default - the dense height for the app bar
  • $rmd-app-bar-prominent-height: $rmd-app-bar-height * 2 !default - the prominent height for the app bar
  • $rmd-app-bar-prominent-dense-height: $rmd-app-bar-dense-height * 2 !default - the prominent and dense height for the app bar
  • $rmd-app-bar-nav-margin: $rmd-app-bar-keyline - (($rmd-button-icon-size - $rmd-icon-size) / 2) - the amount of margin to apply to the `AppBarNav``
  • $rmd-app-bar-keyline: 1rem !default - the default keyline to use for either the AppBarNav or AppBarTitle to align with other content on the page
  • $rmd-app-bar-lr-margin: 0.25rem !default - the amount of margin to apply to the first and last elements in the AppBar
  • $rmd-app-bar-primary-background-color: rmd-theme-var(primary) !default - the "primary" theme background-color
  • $rmd-app-bar-primary-color: rmd-theme-var(on-primary) !default - the "primary" theme text color
  • $rmd-app-bar-secondary-background-color: rmd-theme-var(secondary) !default - the "secondary" theme background-color
  • $rmd-app-bar-secondary-color: rmd-theme-var(on-secondary) !default - the "secondary" theme text color
  • $rmd-app-bar-default-light-theme-background-color: $rmd-grey-100 !default - the background color to use for the "default" theme on light themed apps
  • $rmd-app-bar-default-light-theme-color: if(rmd-theme-tone($rmd-app-bar-default-light-theme-background-color) == light, $rmd-black-base, $rmd-white-base) !default - the text color to use for the "default" theme on light themed apps
  • $rmd-app-bar-default-dark-theme-background-color: $rmd-grey-900 !default - the background color to use for the "default" theme on dark themed apps
  • $rmd-app-bar-default-dark-theme-color: if(rmd-theme-tone($rmd-app-bar-default-dark-theme-background-color) == light, $rmd-black-base, $rmd-white-base) !default - the background color to use for the "default" theme on dark themed apps
  • $rmd-app-bar-default-background-color: if(rmd-theme-tone($rmd-theme-background) == light, $rmd-app-bar-default-light-theme-background-color, $rmd-app-bar-default-dark-theme-background-color) !default - the background color to use for the "default" theme
  • $rmd-app-bar-default-color: if(rmd-theme-tone($rmd-app-bar-default-background-color) == light, $rmd-app-bar-default-light-theme-color, $rmd-app-bar-default-dark-theme-color) !default - the text color to use for the "default" theme
  • @function rmd-app-bar-theme - gets one of the theme values and validates that the theme name is valid
  • @function rmd-app-bar-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
  • @mixin rmd-app-bar-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-app-bar-theme-update-var - updates one of the theme values as a css variable
  • @mixin rmd-app-bar-offset($property: padding-top, $height-type: height) - a mixin that can be used to apply one of the app bar's height types as a css property
Renamed SCSS Variables, Functions, and Mixins
  • renamed $md-toolbar-z-index to $rmd-app-bar-z-index and changed the default value from 15 to 10
  • renamed $md-toolbar-title-keyline to $rmd-app-bar-title-keyline and changed the default value from null to 4.5rem
Removed SCSS Variables Placeholders, and Mixins
  • removed $md-toolbar-include-themed since it is no longer required
  • removed $md-toolbar-include-prominent since it is no longer required
  • removed $md-toolbar-include-btn-text, $md-toolbar-btn-keyline, md-toolbar-mobile-btn-keyline, md-toolbar-tablet-btn-keyline, and md-toolbar-desktop-btn-keyline since they are no longer required
  • removed $md-toolbar-include-text-fields since it is no longer required
  • removed $md-toolbar-include-autocomplete since it is no longer required
  • removed $md-toolbar-include-select-field, $md-toolbar-select-field-margin, $md-toolbar-mobile-select-field-margin, $md-toolbar-tablet-select-field-margin, $md-toolbar-tablet-landscape-select-field-margin, and $md-toolbar-desktop-select-field-margin since they are no longer required
  • removed $m-toolbar-relative-padding and $md-toolbar-include-relative-padding-class-names since the functionality was changed
  • removed $md-toolbar-inset-margin since it is no longer required
  • removed $md-toolbar-mobile-title-keyline, $md-toolbar-tablet-title-keyline, and $md-toolbar-desktop-title-keyline since they are no longer required
  • removed $md-toolbar-prominent-title-font-size since it is no longer supported
  • removed the $md-toolbar-mobile-portrait-height, $md-toolbar-mobile-landscape-height, $md-toolbar-mobile-prominent-height, $md-toolbar-tablet-height, $md-toolbar-tablet-prominent-height, $md-toolbar-desktop-height, $md-toolbar-desktop-prominent-height, $md-toolbar-height, and $md-toolbar-prominent-height in favor of the new height variables