All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
yarn format
to include new files
(48d3d7f)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
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: false
ListItemChildren
component that allows you to get all the styling of
the children within a ListItem
without requiring the use of the ListItem
ListItemAddon
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 ListSubheader
ListSubheader
now renders children
instead of using a primaryText
propListItemControl
component and built-in functionality for
rendering checkbox, radio, or switch elements within a ListItem
List
component renamed the inline
prop to horizontal
List
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