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/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
typedoc
(cf54c35)Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
ListItem disabled
colors to optionally include addons
(a40b6b3),
closes #997ListItem no longer
focusable by default when disabled
(06e91ca),
closes #997Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
Note: Version bump only for package @react-md/list
ListItem disabled states
(7b37292)sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
This package has a lot of changes from the v1 API that should hopefully make it
easier to use. There are also new components to help with styling and
positioning of addons that can be used without a ListItem/List component.
ref to the DOM elementdense spec instead of using mobile/desktop which is
enabled by default once desktop media matches but can be disabled by setting
$rmd-utils-auto-dense: falseListItemChildren component that allows you to get all the styling of
the children within a ListItem without requiring the use of the ListItemListItemAddon component that can be used to add spacing between the
children and an addon with the ListItem spacing stylesSimpleListItem component if you don't want to create a clickable
ListItem but honestly shouldn't be used too much due to how screen readers
read <li> elementsListItemText component that allows you to render the primary and
optional secondary text that is normally stackedListItemLink component that allows you to render a link with the
ListItem stylesListItem no longer renders as an AccessibleFakeButton and has a
simpler HTML structureListItem now supports rendering images with two different sizesListItem now renders children to the left and/or right of the
text/children with the new leftAddon, leftAddonType, rightAddon, and
rightAddonType propsListItem now supports rendering the addons in different vertical
positions by default with the leftAddonPosition and rightAddonPosition
propsListItem now supports rendering the children as the primaryText when
enabling the textChildren propSubheader component was renamed to ListSubheaderListSubheader now renders children instead of using a primaryText
propListItemControl component and built-in functionality for
rendering checkbox, radio, or switch elements within a ListItemList component renamed the inline prop to horizontalList component now renders with role="none" by defaultListSubheader component no longer supports styling text with the primary
theme color out of the box@react-md/tree to handle those use-casesListItem component is a breaking change$rmd-list-dense-horizontal-padding: 0 !default - a new variable if you want
to add left/right padding to the List component$rmd-list-dense-horizontal-padding: $rmd-list-horizontal-padding !default -
a new variable if you want to add left/right padding to the List component
when using the dense spec$rmd-list-item-vertical-padding: 0.5rem !default - the amount of padding to
add to the top and bottom of each list item$rmd-list-item-horizontal-padding: 1rem !default - the amount of padding to
add to the left and right of each list item$rmd-list-item-extra-large-height: 4.5rem !default - the height for a list
item that has a single line of text with an image or two lines of text with an
addon that is not an image$rmd-list-item-dense-extra-large-height: 4.5rem !default - the height for a
list item that has a single line of text with an image or two lines of text
with an addon that is not an image when using the dense spec$rmd-list-item-secondary-text-line-height: 1.42857 !default - the
line-height to use for the secondary text within a list item$rmd-list-item-secondary-text-three-line-max-height: 3rem !default - the max
height allowed for a list item's secondary text so that the line-clamp
functionality works correctly$rmd-list-item-dense-secondary-text-three-line-max-height: 2.25rem !default
-the max height allowed for a list item's secondary text so that the
line-clamp functionality works correctly with the dense spec$rmd-list-item-media-size: 3.5rem !default - the horizontal size to use for
a media item within a list item$rmd-list-item-media-large-size: 6.25rem !default - the horizontal size to
use for a large media item within a list item$rmd-list-item-media-spacing: 1rem !default - the amount of spacing to place
between a media addon and the main content within a list item@function rmd-list-theme - gets one of the list's theme values@function rmd-list-theme-var - gets one of the list's theme values as a css
variable@mixin rmd-list-theme - applies one of the list's theme values as a css
property@mixin rmd-list-theme-update-var - updates one of the list's theme css
variables@mixin rmd-list-unstyled - a new mixin that can be used to disable the list
styles quickly@mixin rmd-list-dense-theme - applies styles to implement a dense theme for
the List component@mixin rmd-list-item-dense-theme - applies styles to implement a dense theme
for the ListItem component$md-list-mobile-padding to $rmd-list-vertical-padding and changed
the default value from 8px to 0.5rem$md-list-mobile-primary-font-size to $rmd-list-font-size and
changed the default value from 16px to 1rem$md-list-mobile-height to $rmd-list-item-height and changed the
default value from 48px to 3rem$md-list-mobile-avatar-height to $rmd-list-item-medium-height and
changed the default value from 56px to 3.5rem$md-list-mobile-two-lines-height to $rmd-list-item-large-height
and changed the default value from 72px to 4rem$md-list-mobile-three-lines-height to
$rmd-list-item-three-line-height and changed the default value from 88px
to 5.5rem$md-list-desktop-padding to $rmd-list-dense-vertical-padding and
changed the default value from 4px to 0.25rem$md-list-desktop-primary-font-size to $rmd-list-dense-font-size
and changed the default value from 13px to 0.8125rem$md-list-desktop-height to $rmd-list-item-dense-height and changed
the default value from 40px to 2.5rem$md-list-desktop-avatar-height to
$rmd-list-item-dense-medium-height and changed the default value from 48px
to 3rem$md-list-desktop-two-lines-height to
$rmd-list-item-dense-large-height and changed the default value from 60px
to 3.5rem$md-list-desktop-three-lines-height to
$rmd-list-item-dense-three-line-height and changed the default value from
76px to 5rem$md-list-left-padding to $rmd-list-item-text-keyline and changed
the default value from 72px to 4.5rem$md-list-inline-padding$md-list-include-icon, $md-list-include-avatar,
md-list-include-two-lines, $md-list-include-three-lines,
$md-list-include-controls, $md-list-include-inline, and
$md-list-include-unstyled-class-name variables$md-list-divider-margin since it is no longer needed$md-list-nested-items-depth, $md-list-nested-items-increment,
and $md-list-nested-items-initial-padding variables since the functionality
for nested items was removed$md-list-desktop-secondary-font-size, $md-list-padding,
$md-list-primary-font-size, $md-list-secondary-font-size,
$md-list-height, $md-list-avatar-height, $md-list-two-lines-height,
$md-list-three-lines-height, and $md-list-three-lines-addon-margin-top
since primary and secondary text now have the same font size by default$md-list-addon-line-height,
$md-list-mobile-three-lines-addon-margin-top,
$md-list-desktop-three-lines-addon-margin-top since it is no longer needed%md-list-unstyled placeholder since placeholders are considered bad
practicereact-md-theme-lists mixin since the background colors now are
inherited with the --rmd-theme-background/--rmd-theme-surface css
variables