From 1bea9698f052269d578145236198b475720dbf55 Mon Sep 17 00:00:00 2001 From: Anthony Ciccarello Date: Tue, 23 Mar 2021 11:38:07 -0700 Subject: [PATCH 1/2] Support secondary text in ListItem widget closes #1688 --- .../src/widgets/list/ListItemRenderer.tsx | 5 +- src/list/index.tsx | 34 ++++++-- src/list/tests/ListItem.spec.tsx | 79 ++++++++++++++++--- src/theme/default/list-item.m.css | 32 +++++++- src/theme/default/list-item.m.css.d.ts | 7 +- src/theme/dojo/list-item.m.css | 34 ++++++++ src/theme/dojo/list-item.m.css.d.ts | 9 ++- src/theme/material/list-item.m.css | 36 +++++++-- src/theme/material/list-item.m.css.d.ts | 10 ++- 9 files changed, 216 insertions(+), 30 deletions(-) diff --git a/src/examples/src/widgets/list/ListItemRenderer.tsx b/src/examples/src/widgets/list/ListItemRenderer.tsx index 8666cdc82f..077ffe87d7 100644 --- a/src/examples/src/widgets/list/ListItemRenderer.tsx +++ b/src/examples/src/widgets/list/ListItemRenderer.tsx @@ -1,6 +1,6 @@ import { create, tsx } from '@dojo/framework/core/vdom'; import List, { ListItem } from '@dojo/widgets/list'; -import Icon from '@dojo/widgets/icon'; +import Avatar from '@dojo/widgets/avatar'; import states from './states'; import icache from '@dojo/framework/core/middleware/icache'; import Example from '../../Example'; @@ -29,8 +29,9 @@ export default factory(function ListItemRenderer({ id, middleware: { icache, res {({ value, label }, props) => ( {{ - leading: , + leading: {label[0]}, primary: label, + secondary: `This state's name has ${label.length} letters`, trailing: value }} diff --git a/src/list/index.tsx b/src/list/index.tsx index dd62560802..02293cf409 100644 --- a/src/list/index.tsx +++ b/src/list/index.tsx @@ -103,6 +103,8 @@ export interface ListItemProperties { onDrop?: (event: DragEvent) => void; /** Determines if this item is visually collapsed during DnD */ collapsed?: boolean; + /** Height of list item. Defaults to 'medium' if secondary text is passed or 'small' otherwise. */ + height?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge'; } export interface ListItemChildren { @@ -110,6 +112,8 @@ export interface ListItemChildren { leading?: RenderResult; /** The main content of the item, typically text */ primary?: RenderResult; + /** The further details about the item to display below the primary content, typically text */ + secondary?: RenderResult; /** Icon or text to place after the primary content */ trailing?: RenderResult; } @@ -132,6 +136,7 @@ export const ListItem = listItemFactory(function ListItem({ widgetId, draggable, dragged, + height, onDragStart, onDragEnd, onDragOver, @@ -154,9 +159,25 @@ export const ListItem = listItemFactory(function ListItem({ } const [firstChild, ...otherChildren] = children(); - const { leading = undefined, primary, trailing = undefined } = isRenderResult(firstChild) - ? { primary: [firstChild, ...otherChildren] } - : firstChild; + const { + leading = undefined, + primary, + secondary = undefined, + trailing = undefined + } = isRenderResult(firstChild) ? { primary: [firstChild, ...otherChildren] } : firstChild; + const size = height || (secondary ? 'medium' : 'small'); + const sizeStyle = + size === 'extraSmall' + ? themedCss.extraSmall + : size === 'small' + ? themedCss.small + : size === 'medium' + ? themedCss.medium + : size === 'large' + ? themedCss.large + : size === 'extraLarge' + ? themedCss.extraLarge + : undefined; return (
{leading ? {leading} : undefined} - {primary} + + {primary} + {secondary ? {secondary} : undefined} + {trailing ? {trailing} : undefined} {draggable && !trailing && ( {}; const WrappedRoot = wrap('div'); +const WrappedPrimary = wrap('span'); describe('ListBoxItem', () => { const template = assertion(() => ( @@ -17,7 +18,7 @@ describe('ListBoxItem', () => { classes={[ undefined, css.root, - css.height, + css.small, false, false, false, @@ -42,14 +43,14 @@ describe('ListBoxItem', () => { visibility: undefined }} > - test + test )); const disabledTemplate = template .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, css.disabled, @@ -93,6 +94,62 @@ describe('ListBoxItem', () => { ); }); + it('accepts a height property', () => { + const r = renderer(() => ( + + {{ + primary: 'test' + }} + + )); + r.expect( + template.setProperty(WrappedRoot, 'classes', [ + undefined, + css.root, + css.extraSmall, + false, + false, + false, + undefined, + undefined, + undefined, + undefined, + undefined + ]) + ); + }); + + it('renders with secondary text', () => { + const r = renderer(() => ( + + {{ + primary: 'test', + secondary: 'Less important' + }} + + )); + r.expect( + template + .setProperty(WrappedRoot, 'classes', [ + undefined, + css.root, + css.medium, + false, + false, + false, + undefined, + undefined, + undefined, + undefined, + undefined + ]) + .replaceChildren(WrappedPrimary, () => [ + 'test', + Less important + ]) + ); + }); + it('renders selected', () => { const r = renderer(() => ( @@ -103,7 +160,7 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, css.selected, false, false, @@ -135,7 +192,7 @@ describe('ListBoxItem', () => { const activeTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, css.active, false, @@ -157,7 +214,7 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, @@ -179,7 +236,7 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, @@ -201,7 +258,7 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, @@ -224,7 +281,7 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, @@ -249,7 +306,7 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, @@ -284,7 +341,7 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, + css.small, false, false, false, diff --git a/src/theme/default/list-item.m.css b/src/theme/default/list-item.m.css index b4fdeb192b..2aae5d84a9 100644 --- a/src/theme/default/list-item.m.css +++ b/src/theme/default/list-item.m.css @@ -9,9 +9,6 @@ position: relative; } -.height { -} - /* Added to selected items */ .selected { background: lightgrey; @@ -62,6 +59,10 @@ .primary { } +/* Wrapper for the secondary content of the item */ +.secondary { +} + /* Wrapper for the leading content in front of the primary content */ .leading { } @@ -69,3 +70,28 @@ /* Wrapper for the trailing content after the primary content*/ .trailing { } + +/* Extra small list item height, suitable for text only */ +.extraSmall { + height: 48px; +} + +/* Small list item height, suitable for displaying icons and avatars */ +.small { + height: 56px; +} + +/* Large list item height, suitable for displaying two lines of text */ +.medium { + height: 64px; +} + +/* Large list item height, suitable for displaying two lines of text */ +.large { + height: 72px; +} + +/* Extra large list item height, suitable for displaying three lines of text */ +.extraLarge { + height: 88px; +} diff --git a/src/theme/default/list-item.m.css.d.ts b/src/theme/default/list-item.m.css.d.ts index 834ac98a4b..da9899bee6 100644 --- a/src/theme/default/list-item.m.css.d.ts +++ b/src/theme/default/list-item.m.css.d.ts @@ -1,5 +1,4 @@ export const root: string; -export const height: string; export const selected: string; export const active: string; export const disabled: string; @@ -10,5 +9,11 @@ export const movedDown: string; export const dragged: string; export const dragIcon: string; export const primary: string; +export const secondary: string; export const leading: string; export const trailing: string; +export const extraSmall: string; +export const small: string; +export const medium: string; +export const large: string; +export const extraLarge: string; diff --git a/src/theme/dojo/list-item.m.css b/src/theme/dojo/list-item.m.css index 7d70a6013a..6b455deec4 100644 --- a/src/theme/dojo/list-item.m.css +++ b/src/theme/dojo/list-item.m.css @@ -27,6 +27,10 @@ font-style: italic; } +.disabled .leading { + font-style: normal; +} + .root.movedUp { padding-bottom: calc(var(--grid-base) * 6.5); } @@ -51,10 +55,20 @@ right: var(--grid-base); } +.text { + color: red; +} + .primary { flex-grow: 1; } +.secondary { + margin-left: var(--grid-base); + font-size: 0.875rem; + color: var(--color-text-faded); +} + .leading { margin-right: var(--grid-base); } @@ -62,3 +76,23 @@ .trailing { margin-left: var(--grid-base); } + +.extraSmall { + height: calc(6 * var(--grid-base)); +} + +.small { + height: calc(7 * var(--grid-base)); +} + +.medium { + height: calc(8 * var(--grid-base)); +} + +.large { + height: calc(9 * var(--grid-base)); +} + +.extraLarge { + height: calc(11 * var(--grid-base)); +} diff --git a/src/theme/dojo/list-item.m.css.d.ts b/src/theme/dojo/list-item.m.css.d.ts index 99e786f097..d0141922fe 100644 --- a/src/theme/dojo/list-item.m.css.d.ts +++ b/src/theme/dojo/list-item.m.css.d.ts @@ -2,10 +2,17 @@ export const root: string; export const active: string; export const selected: string; export const disabled: string; +export const leading: string; export const movedUp: string; export const movedDown: string; export const collapsed: string; export const dragIcon: string; +export const text: string; export const primary: string; -export const leading: string; +export const secondary: string; export const trailing: string; +export const extraSmall: string; +export const small: string; +export const medium: string; +export const large: string; +export const extraLarge: string; diff --git a/src/theme/material/list-item.m.css b/src/theme/material/list-item.m.css index 6aa2bdadee..dd77b1b061 100644 --- a/src/theme/material/list-item.m.css +++ b/src/theme/material/list-item.m.css @@ -6,11 +6,6 @@ white-space: nowrap; } -.root.height { - min-height: 48px; - height: 100%; -} - .root:hover { background: var(--mdc-theme-on-surface); } @@ -27,6 +22,10 @@ box-shadow: none; } +.disabled .leading { + font-style: normal; +} + .collapsed { height: 0 !important; padding: 0 !important; @@ -60,6 +59,13 @@ .primary { composes: mdc-list-item__text from '@material/list/dist/mdc.list.css'; + display: flex; + flex-direction: column; + line-height: normal; +} + +.secondary { + composes: mdc-list-item__secondary-text from '@material/list/dist/mdc.list.css'; } .leading { @@ -69,3 +75,23 @@ .trailing { composes: mdc-list-item__meta from '@material/list/dist/mdc.list.css'; } + +.extraSmall { + height: calc(6 * var(--mdc-theme-grid-base)); +} + +.small { + height: calc(7 * var(--mdc-theme-grid-base)); +} + +.medium { + height: calc(8 * var(--mdc-theme-grid-base)); +} + +.large { + height: calc(9 * var(--mdc-theme-grid-base)); +} + +.extraLarge { + height: calc(11 * var(--mdc-theme-grid-base)); +} diff --git a/src/theme/material/list-item.m.css.d.ts b/src/theme/material/list-item.m.css.d.ts index e32b9dc3dd..b860fa20fa 100644 --- a/src/theme/material/list-item.m.css.d.ts +++ b/src/theme/material/list-item.m.css.d.ts @@ -1,11 +1,17 @@ export const root: string; -export const height: string; export const selected: string; export const active: string; +export const disabled: string; +export const leading: string; export const collapsed: string; export const movedUp: string; export const movedDown: string; export const dragIcon: string; export const primary: string; -export const leading: string; +export const secondary: string; export const trailing: string; +export const extraSmall: string; +export const small: string; +export const medium: string; +export const large: string; +export const extraLarge: string; From abd8a9cb53941656b2604de1b7b8b4053709e631 Mon Sep 17 00:00:00 2001 From: Anthony Ciccarello Date: Thu, 25 Mar 2021 09:50:14 -0700 Subject: [PATCH 2/2] use padding and a new class for two line list items this makes the height more flexible also rename main content wrapper class to .text since it wraps primary and secondary. The leading content is given a min-width of 40px For 24px leading icons, they will align to the front This does not align leading icons to the top right on two-line list items This is because the top/bottom padding is set to 8px instead of 16px --- src/examples/src/config.tsx | 14 ++-- src/examples/src/widgets/list/ListItem.tsx | 42 ++++++++++++ ...stItemRenderer.tsx => TwoLineListItem.tsx} | 5 +- src/list/index.tsx | 21 +----- src/list/tests/ListItem.spec.tsx | 64 ++++++++----------- src/theme/default/list-item.m.css | 38 +++-------- src/theme/default/list-item.m.css.d.ts | 9 +-- src/theme/dojo/list-item.m.css | 24 ------- src/theme/dojo/list-item.m.css.d.ts | 6 -- src/theme/material/list-item.m.css | 42 ++++++------ src/theme/material/list-item.m.css.d.ts | 9 +-- 11 files changed, 120 insertions(+), 154 deletions(-) create mode 100644 src/examples/src/widgets/list/ListItem.tsx rename src/examples/src/widgets/list/{ListItemRenderer.tsx => TwoLineListItem.tsx} (91%) diff --git a/src/examples/src/config.tsx b/src/examples/src/config.tsx index c32c29e896..a7c6823ce6 100644 --- a/src/examples/src/config.tsx +++ b/src/examples/src/config.tsx @@ -106,7 +106,8 @@ import FillList from './widgets/list/Fill'; import DividedList from './widgets/list/Dividers'; import ControlledList from './widgets/list/Controlled'; import ItemRenderer from './widgets/list/ItemRenderer'; -import ListItemRenderer from './widgets/list/ListItemRenderer'; +import ListItem from './widgets/list/ListItem'; +import TwoLineListItem from './widgets/list/TwoLineListItem'; import FetchedResource from './widgets/list/FetchedResource'; import DisabledList from './widgets/list/Disabled'; import DraggableList from './widgets/list/Draggable'; @@ -1072,9 +1073,14 @@ export const config = { title: 'Item Renderer' }, { - filename: 'ListItemRenderer', - module: ListItemRenderer, - title: 'ListItem Renderer' + filename: 'ListItem', + module: ListItem, + title: 'Single Line ListItem' + }, + { + filename: 'TwoLineListItem', + module: TwoLineListItem, + title: 'Two Line ListItem' }, { description: diff --git a/src/examples/src/widgets/list/ListItem.tsx b/src/examples/src/widgets/list/ListItem.tsx new file mode 100644 index 0000000000..a2b683f49a --- /dev/null +++ b/src/examples/src/widgets/list/ListItem.tsx @@ -0,0 +1,42 @@ +import { create, tsx } from '@dojo/framework/core/vdom'; +import List, { ListItem } from '@dojo/widgets/list'; +import states from './states'; +import icache from '@dojo/framework/core/middleware/icache'; +import Example from '../../Example'; +import { + createResourceTemplate, + createResourceMiddleware +} from '@dojo/framework/core/middleware/resources'; +import Icon from '@dojo/widgets/icon'; + +const resource = createResourceMiddleware(); +const factory = create({ icache, resource }); +const template = createResourceTemplate('value'); + +export default factory(function ListItemRenderer({ id, middleware: { icache, resource } }) { + return ( + + { + icache.set('value', value); + }} + itemsInView={8} + > + {({ value, label }, props) => ( + + {{ + leading: , + primary: label, + trailing: value + }} + + )} + +

{`Clicked On: ${JSON.stringify(icache.getOrSet('value', ''))}`}

+ + ); +}); diff --git a/src/examples/src/widgets/list/ListItemRenderer.tsx b/src/examples/src/widgets/list/TwoLineListItem.tsx similarity index 91% rename from src/examples/src/widgets/list/ListItemRenderer.tsx rename to src/examples/src/widgets/list/TwoLineListItem.tsx index 077ffe87d7..ca8f508a29 100644 --- a/src/examples/src/widgets/list/ListItemRenderer.tsx +++ b/src/examples/src/widgets/list/TwoLineListItem.tsx @@ -8,6 +8,7 @@ import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources'; +import Icon from '@dojo/widgets/icon'; const resource = createResourceMiddleware(); const factory = create({ icache, resource }); @@ -26,13 +27,13 @@ export default factory(function ListItemRenderer({ id, middleware: { icache, res }} itemsInView={8} > - {({ value, label }, props) => ( + {({ label }, props) => ( {{ leading: {label[0]}, primary: label, secondary: `This state's name has ${label.length} letters`, - trailing: value + trailing: }} )} diff --git a/src/list/index.tsx b/src/list/index.tsx index 02293cf409..7668b0df5a 100644 --- a/src/list/index.tsx +++ b/src/list/index.tsx @@ -103,8 +103,6 @@ export interface ListItemProperties { onDrop?: (event: DragEvent) => void; /** Determines if this item is visually collapsed during DnD */ collapsed?: boolean; - /** Height of list item. Defaults to 'medium' if secondary text is passed or 'small' otherwise. */ - height?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge'; } export interface ListItemChildren { @@ -136,7 +134,6 @@ export const ListItem = listItemFactory(function ListItem({ widgetId, draggable, dragged, - height, onDragStart, onDragEnd, onDragOver, @@ -165,19 +162,6 @@ export const ListItem = listItemFactory(function ListItem({ secondary = undefined, trailing = undefined } = isRenderResult(firstChild) ? { primary: [firstChild, ...otherChildren] } : firstChild; - const size = height || (secondary ? 'medium' : 'small'); - const sizeStyle = - size === 'extraSmall' - ? themedCss.extraSmall - : size === 'small' - ? themedCss.small - : size === 'medium' - ? themedCss.medium - : size === 'large' - ? themedCss.large - : size === 'extraLarge' - ? themedCss.extraLarge - : undefined; return (
{leading ? {leading} : undefined} - + {primary} {secondary ? {secondary} : undefined} diff --git a/src/list/tests/ListItem.spec.tsx b/src/list/tests/ListItem.spec.tsx index 8a49430bba..4547d33836 100644 --- a/src/list/tests/ListItem.spec.tsx +++ b/src/list/tests/ListItem.spec.tsx @@ -8,7 +8,7 @@ const { describe, it, after } = intern.getInterface('bdd'); const noop: any = () => {}; const WrappedRoot = wrap('div'); -const WrappedPrimary = wrap('span'); +const WrappedText = wrap('span'); describe('ListBoxItem', () => { const template = assertion(() => ( @@ -18,7 +18,8 @@ describe('ListBoxItem', () => { classes={[ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -43,14 +44,15 @@ describe('ListBoxItem', () => { visibility: undefined }} > - test + test )); const disabledTemplate = template .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, css.disabled, @@ -94,31 +96,6 @@ describe('ListBoxItem', () => { ); }); - it('accepts a height property', () => { - const r = renderer(() => ( - - {{ - primary: 'test' - }} - - )); - r.expect( - template.setProperty(WrappedRoot, 'classes', [ - undefined, - css.root, - css.extraSmall, - false, - false, - false, - undefined, - undefined, - undefined, - undefined, - undefined - ]) - ); - }); - it('renders with secondary text', () => { const r = renderer(() => ( @@ -133,7 +110,8 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.medium, + css.height, + css.twoLine, false, false, false, @@ -143,7 +121,7 @@ describe('ListBoxItem', () => { undefined, undefined ]) - .replaceChildren(WrappedPrimary, () => [ + .replaceChildren(WrappedText, () => [ 'test', Less important ]) @@ -160,7 +138,8 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, css.selected, false, false, @@ -192,7 +171,8 @@ describe('ListBoxItem', () => { const activeTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, css.active, false, @@ -214,7 +194,8 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -236,7 +217,8 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -258,7 +240,8 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -281,7 +264,8 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -306,7 +290,8 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, @@ -341,7 +326,8 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.small, + css.height, + false, false, false, false, diff --git a/src/theme/default/list-item.m.css b/src/theme/default/list-item.m.css index 2aae5d84a9..1dbbeca264 100644 --- a/src/theme/default/list-item.m.css +++ b/src/theme/default/list-item.m.css @@ -9,6 +9,13 @@ position: relative; } +.height { +} + +/* Added to ListItem with primary and secondary text */ +.twoLine { +} + /* Added to selected items */ .selected { background: lightgrey; @@ -55,11 +62,11 @@ .dragIcon { } -/* Wrapper for the main content of the item */ -.primary { +/* Wrapper for the main text of the item */ +.text { } -/* Wrapper for the secondary content of the item */ +/* Wrapper for the secondary text of the item */ .secondary { } @@ -70,28 +77,3 @@ /* Wrapper for the trailing content after the primary content*/ .trailing { } - -/* Extra small list item height, suitable for text only */ -.extraSmall { - height: 48px; -} - -/* Small list item height, suitable for displaying icons and avatars */ -.small { - height: 56px; -} - -/* Large list item height, suitable for displaying two lines of text */ -.medium { - height: 64px; -} - -/* Large list item height, suitable for displaying two lines of text */ -.large { - height: 72px; -} - -/* Extra large list item height, suitable for displaying three lines of text */ -.extraLarge { - height: 88px; -} diff --git a/src/theme/default/list-item.m.css.d.ts b/src/theme/default/list-item.m.css.d.ts index da9899bee6..d712ae8a5b 100644 --- a/src/theme/default/list-item.m.css.d.ts +++ b/src/theme/default/list-item.m.css.d.ts @@ -1,4 +1,6 @@ export const root: string; +export const height: string; +export const twoLine: string; export const selected: string; export const active: string; export const disabled: string; @@ -8,12 +10,7 @@ export const movedUp: string; export const movedDown: string; export const dragged: string; export const dragIcon: string; -export const primary: string; +export const text: string; export const secondary: string; export const leading: string; export const trailing: string; -export const extraSmall: string; -export const small: string; -export const medium: string; -export const large: string; -export const extraLarge: string; diff --git a/src/theme/dojo/list-item.m.css b/src/theme/dojo/list-item.m.css index 6b455deec4..7d0de39721 100644 --- a/src/theme/dojo/list-item.m.css +++ b/src/theme/dojo/list-item.m.css @@ -56,10 +56,6 @@ } .text { - color: red; -} - -.primary { flex-grow: 1; } @@ -76,23 +72,3 @@ .trailing { margin-left: var(--grid-base); } - -.extraSmall { - height: calc(6 * var(--grid-base)); -} - -.small { - height: calc(7 * var(--grid-base)); -} - -.medium { - height: calc(8 * var(--grid-base)); -} - -.large { - height: calc(9 * var(--grid-base)); -} - -.extraLarge { - height: calc(11 * var(--grid-base)); -} diff --git a/src/theme/dojo/list-item.m.css.d.ts b/src/theme/dojo/list-item.m.css.d.ts index d0141922fe..bdfaeeb722 100644 --- a/src/theme/dojo/list-item.m.css.d.ts +++ b/src/theme/dojo/list-item.m.css.d.ts @@ -8,11 +8,5 @@ export const movedDown: string; export const collapsed: string; export const dragIcon: string; export const text: string; -export const primary: string; export const secondary: string; export const trailing: string; -export const extraSmall: string; -export const small: string; -export const medium: string; -export const large: string; -export const extraLarge: string; diff --git a/src/theme/material/list-item.m.css b/src/theme/material/list-item.m.css index dd77b1b061..204fdabd43 100644 --- a/src/theme/material/list-item.m.css +++ b/src/theme/material/list-item.m.css @@ -4,6 +4,12 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + padding: var(--mdc-theme-grid-base) calc(2 * var(--mdc-theme-grid-base)); +} + +.root.height { + min-height: calc(6 * var(--mdc-theme-grid-base)); + height: 100%; } .root:hover { @@ -14,6 +20,10 @@ background: var(--mdc-theme-on-surface-hover); } +.root.twoLine { + min-height: calc(8 * var(--mdc-theme-grid-base)); +} + .active { border: none; background: var(--mdc-theme-on-surface); @@ -57,7 +67,7 @@ right: 16px; } -.primary { +.text { composes: mdc-list-item__text from '@material/list/dist/mdc.list.css'; display: flex; flex-direction: column; @@ -70,28 +80,18 @@ .leading { composes: mdc-list-item__graphic from '@material/list/dist/mdc.list.css'; + height: unset; + width: unset; + min-height: calc(5 * var(--mdc-theme-grid-base)); + min-width: calc(5 * var(--mdc-theme-grid-base)); + margin-right: calc(2 * var(--mdc-theme-grid-base)); + justify-content: start; } -.trailing { - composes: mdc-list-item__meta from '@material/list/dist/mdc.list.css'; -} - -.extraSmall { - height: calc(6 * var(--mdc-theme-grid-base)); +.twoLine .leading { + min-height: calc(7 * var(--mdc-theme-grid-base)); } -.small { - height: calc(7 * var(--mdc-theme-grid-base)); -} - -.medium { - height: calc(8 * var(--mdc-theme-grid-base)); -} - -.large { - height: calc(9 * var(--mdc-theme-grid-base)); -} - -.extraLarge { - height: calc(11 * var(--mdc-theme-grid-base)); +.trailing { + composes: mdc-list-item__meta from '@material/list/dist/mdc.list.css'; } diff --git a/src/theme/material/list-item.m.css.d.ts b/src/theme/material/list-item.m.css.d.ts index b860fa20fa..af890dd887 100644 --- a/src/theme/material/list-item.m.css.d.ts +++ b/src/theme/material/list-item.m.css.d.ts @@ -1,5 +1,7 @@ export const root: string; +export const height: string; export const selected: string; +export const twoLine: string; export const active: string; export const disabled: string; export const leading: string; @@ -7,11 +9,6 @@ export const collapsed: string; export const movedUp: string; export const movedDown: string; export const dragIcon: string; -export const primary: string; +export const text: string; export const secondary: string; export const trailing: string; -export const extraSmall: string; -export const small: string; -export const medium: string; -export const large: string; -export const extraLarge: string;