This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

dojo.widgets – ./

🔍 Inspect: https://vercel.com/dojo/dojo.widgets/FadnaiZbuQhsF6VbdjNu51epM36C
✅ Preview: https://dojowidgets-git-fork-aciccarello-1688-secondary-list-61d513.vercel.app

widget-test-docs – ./

🔍 Inspect: https://vercel.com/dojo/widget-test-docs/CeeWryaQ88wFXjMAttferCTAfFxy
✅ Preview: https://widget-test-do-git-fork-aciccarello-1688-secondary-list-455719.vercel.app

Codecov Report

Merging #1700 (abd8a9c) into master (6b9d384) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #1700      +/-   ##
==========================================
+ Coverage   90.07%   90.08%   +0.01%     
==========================================
  Files          94       94              
  Lines        5046     5052       +6     
  Branches     1374     1379       +5     
==========================================
+ Hits         4545     4551       +6     
  Misses        249      249              
  Partials      252      252              

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6b9d384...abd8a9c. Read the comment docs.

@tomdye I reworked this to remove the height property that was added. Instead it depends on a mix of min-height and padding to ensure things fit well. The leading content is also given a min-width of 40px so even if you have a 24px icon it still aligns to the material spec. I did not do anything special for the two line list to float a 24px icon to the top since that would seem unexpected for users and would need another 8px of padding which wouldn't be needed if you have a 56px high leading image.

I also renamed the .primary class name to .text since it wraps both the primary and secondary text. This was added since the last release so it shouldn't be a breaking change.

Updated screenshots

I've split the example into two, one for single line and a second for two line however they both are pretty simplistic. In the committed code I'm using the location icon example for the single line example and the avatar for the two line example but a variety is shown for the sake of the PR.

In case I (or anyone else) want this manual testing example code later later:

export function differentListItemTypes({value, label = ''}: MenuOption, secondary?: string) {
	const graphicStyles = {height: '56px', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center'};
	switch (label[0]) {
		case 'A':
			return {
				primary: label,
				secondary
			}
		case 'C':
			return {
				leading: <Icon type="locationIcon" />,
				primary: label,
				secondary,
				trailing: value
			}
		case 'D':
		case 'E':
		case 'F':
		case 'G':
			return {
				leading: <Avatar>{label[0]}</Avatar>,
				primary: label,
				secondary,
				trailing: <Icon type="starIcon" />
			}
		case 'W':
			return {
				leading: <div styles={{...graphicStyles, width: '100px', background: 'purple'}}>56 x 100</div>,
				primary: label,
				secondary,
				trailing: <Icon type="starIcon" />
			}
		default:
			return {
				leading: <div styles={{...graphicStyles, width: '56px', background: 'blue', 'fontSize': '0.875rem'}}>56 x 56</div>,
				primary: label,
				secondary,
				trailing: value
			}
	}
}