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/tabs
5.1.3 (2022-05-07)
- fix typos throughout codebase (725d1a2)
- typos: fix additional typos throughout repo (ef20132)
5.1.2 (2022-04-02)
5.1.0 (2022-03-18)
- run lint-scripts --fix for consistent-type-imports (42d839d)
5.0.0 (2022-01-31)
Note: Version bump only for package @react-md/tabs
4.0.3 (2021-12-31)
4.0.1 (2021-11-27)
Note: Version bump only for package @react-md/tabs
4.0.0 (2021-11-24)
- Update to use new JSX Transform and latest
eslint
(8111cd3) - @react-md/transition: No longer use findDOMNode for transitions (cb952da)
- @react-md/typography: Renamed Text to
Typography
(30cf056)
- always skip lib check (229cef1)
- react-md: Remove prop-types package and usage (2637a6f)
- stylelint: Updated to use
stylelint
(22d1598)
- Minimum React version is now 16.14 instead of 16.8
- @react-md/typography: The Text component has been renamed to Typography to
help with auto-imports conflicting with the Text element that exists in
lib.d.ts
- react-md: There will no longer be run-time prop validation with
the
prop-types
package.
3.1.1 (2021-09-12)
- typescript: added missing readonly prefix to
TabsManager
tabs prop (45d9458)
3.1.0 (2021-09-10)
- typescript: updated all array types to be readonly (8f71bcb)
- ran
yarn format
to include new files (48d3d7f)
3.0.1 (2021-08-15)
3.0.0 (2021-08-13)
Note: Version bump only for package @react-md/tabs
2.9.1 (2021-07-27)
- 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/tabs
2.8.5 (2021-07-03)
Note: Version bump only for package @react-md/tabs
2.8.4 (2021-06-10)
- ran
prettier
after upgrading to v2.3.0 (3ce236a)
2.8.3 (2021-05-18)
- react-md.dev: updated tsdoc to work with
typedoc
(cf54c35)
2.8.2 (2021-04-23)
Note: Version bump only for package @react-md/tabs
2.8.0 (2021-04-22)
- tsconfig: separate tsconfig by package instead of a single root (b278230)
2.7.1 (2021-03-23)
Note: Version bump only for package @react-md/tabs
2.7.0 (2021-02-28)
- tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
- tsdoc: fixed some tsdoc annotations and styling (0449b86)
- tsdoc: updated @since annotations (c62027e)
- updated test coverage to not include conditional component PropTypes (24e5df1)
2.6.0 (2021-02-13)
Note: Version bump only for package @react-md/tabs
2.5.5 (2021-01-30)
Note: Version bump only for package @react-md/tabs
2.5.4 (2021-01-27)
Note: Version bump only for package @react-md/tabs
2.5.0 (2020-12-15)
Note: Version bump only for package @react-md/tabs
2.4.2 (2020-10-23)
Note: Version bump only for package @react-md/tabs
2.4.1 (2020-10-17)
Note: Version bump only for package @react-md/tabs
2.4.0 (2020-10-17)
- @react-md/tabs: updated tabs to use the new resize observer API (052b3f2)
- @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)
2.3.1 (2020-09-15)
Note: Version bump only for package @react-md/tabs
2.3.0 (2020-09-10)
- @react-md/tabs: updated tabs to use the new resize observer API (052b3f2)
2.2.2 (2020-09-02)
Note: Version bump only for package @react-md/tabs
2.2.1 (2020-09-02)
Note: Version bump only for package @react-md/tabs
2.1.2 (2020-08-01)
Note: Version bump only for package @react-md/tabs
2.1.1 (2020-07-21)
Note: Version bump only for package @react-md/tabs
2.1.0 (2020-07-12)
Note: Version bump only for package @react-md/tabs
2.0.2 (2020-06-30)
- LICENSE: Removed the time range from license since it was incorrect (50c9021)
- Added
sideEffects
field topackage.json
(31820b9) sideEffects
formatting (78a7b6b)
No changes.
Tabs were completely re-written for the v2 release to help fix the missing accessibility issues from v1. The API was changed a lot to hopefully make working with tabs a bit easier by no longer doing weird things under the hood like cloning props into each tab and content.
Starting with v2, the tabs will be created by initializing a TabsManager
component with a DOM id prefix to use for each tab as well as an ordered list
tabs that can either be a renderable element or a configuration object for each
tab. To render the tabs, just render the Tabs
component as a child of the
TabsManager
. The "tricky" part with the new API is that
const tabs = ["Tab 1", "Tab 2", "Tab 3"];
const Example = () => (
<TabsManager tabs={tabs} tabsId="basic-usage-tabs">
<Tabs />
<TabPanels>
<TabPanel>
<Typography type="headline-4">Panel 1</Typography>
</TabPanel>
<TabPanel>
<Typography type="headline-4">Panel 2</Typography>
</TabPanel>
<TabPanel>
<Typography type="headline-4">Panel 3</Typography>
</TabPanel>
</TabPanels>
</TabsManager>
);
- the new
TabsManager
allows for theTabs
andTabPanel
to be as a child at any depth of theTabsManager
since the tabs configuration and state is now managed with React context - the
TabPanel
s now support lazy-loading/dynamic rendering or being persistent within the DOM - fixed the accessibility issues for the tabs and correctly implement the tab widget specifications
- the tab indicator color can now be configured with SCSS variables
- removed the built-in (somewhat broken) support for swiping on mobile devices to change tabs
- removed the built-in (completely broken) support for switching to a dropdown menu on desktop for additional tabs
- removed the
MenuTab
component - removed the
TabsContainer
component - dropped support for multiline text tabs
$rmd-tab-veritcal-padding: 0.75rem !default
- the amount of padding to apply to the top and bottom of the tab's content$rmd-tab-indicator-color: rmd-theme-var(primary) !default
- The background color for the active tab indicator$rmd-tab-active-color: rmd-theme-var(text-primary-on-background) !default
- The text color to use for an active tab$rmd-tab-inactive-color: rmd-theme-var(text-secondary-on-background) !default
- The text color to use for an inactive tab$rmd-tab-disabled-color: rmd-theme(text-disabled-on-background) !default
- The text color to use for a disabled tab$rmd-tabs-scrollable-padding: 3.25rem !default
- The amount of padding tp use before the first tab when thescrollable
prop is enabled on theTabs
component@function rmd-tabs-theme
- gets one of the theme values and validates that the theme name is valid@function rmd-tabs-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-tabs-theme
- applies one of the theme values to a css property as a css variable@mixin rmd-tabs-theme-update-var
- updates one of the theme values as a css variable
- renamed
$md-tab-height
to$rmd-tab-height
and changed the default value from48px
to3rem
- renamed
$md-tab-icon-height
to$rmd-tab-stacked-height
and changed the default value from72px
to4.5rem
- renamed
$md-tab-mobile-min-width
to$rmd-tab-min-width
and changed the default value from72px
to5.625rem
- renamed
$md-tab-max-width
to$rmd-tab-max-width
and changed the default value from264px
to20rem
- renamed
$md-tab-indicator-height
tormd-tab-active-indicator-height
and changed the default value from2px
to0.125rem
- renamed
$md-tab-padding
to$rmd-tab-horizontal-padding
and changed the default value from12px
to1rem
- removed
$md-tab-include-icons
since the styles are always included - removed
$md-tab-include-toolbars
and$md-tab-include-prominent-toolbars
since this is no longer required and should work automatically with the new @react-md/app-bar - removed
$md-tab-include-pagination-overflow
since it never worked to begin with and is no longer supported - removed
$md-tab-include-menu-overflow
since it never worked to begin with and is no longer supported - removed
$md-tab-include-swipeable
since swiping is no longer supported - removed
$md-tab-multiline-font-size
since multiline text tabs aren't supported - removed
$md-tab-single-line-padding-bottom
since there multiline text tabs aren't supported - removed
$md-tab-desktop-font-size
,$md-tab-desktop-min-width
, and$md-tab-desktop-padding
since the size no longer changes between mobile and desktop - removed
$md-tab-icon-padding-bottom
and$md-tab-icon-margin-bottom
since the icon spacing comes from the @react-md/icon package's$rmd-text-icon-spacing
variable