All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
eslint
(8111cd3)Typography
(30cf056)stylelint
(22d1598)lib.d.tsprop-types package.TabsManager tabs prop
(45d9458)yarn format to include new files
(48d3d7f)Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
prettier after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
Note: Version bump only for package @react-md/tabs
sideEffects field to package.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>
);TabsManager allows for the Tabs and TabPanel to be as a child at
any depth of the TabsManager since the tabs configuration and state is now
managed with React contextTabPanels now support lazy-loading/dynamic rendering or being persistent
within the DOMMenuTab componentTabsContainer component$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 the scrollable prop is enabled on the Tabs
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$md-tab-height to $rmd-tab-height and changed the default value
from 48px to 3rem$md-tab-icon-height to $rmd-tab-stacked-height and changed the
default value from 72px to 4.5rem$md-tab-mobile-min-width to $rmd-tab-min-width and changed the
default value from 72px to 5.625rem$md-tab-max-width to $rmd-tab-max-width and changed the default
value from 264px to 20rem$md-tab-indicator-height to rmd-tab-active-indicator-height and
changed the default value from 2px to 0.125rem$md-tab-padding to $rmd-tab-horizontal-padding and changed the
default value from 12px to 1rem$md-tab-include-icons since the styles are always included$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$md-tab-include-pagination-overflow since it never worked to begin
with and is no longer supported$md-tab-include-menu-overflow since it never worked to begin with
and is no longer supported$md-tab-include-swipeable since swiping is no longer supported$md-tab-multiline-font-size since multiline text tabs aren't
supported$md-tab-single-line-padding-bottom since there multiline text tabs
aren't supported$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$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