Skip to content

Conversation

tomdye
Copy link
Member

@tomdye tomdye commented Mar 26, 2021

Type: bug / feature

The following has been addressed in the PR:

  • There is a related issue
  • All code matches the style guide
  • Unit tests are included in the PR
  • For new widgets, an entry has been added to the .dojorc
  • For new widgets, theme.variant() is added to the root domnode
  • Any widget variant uses theme.compose like this
  • WidgetProperties are exported

Description:

  • Changes list items to only put content in the primary span if typed children are used, this allows for full-width content to be passed.
  • adds padding property with specified sizes to ListItem to allow the padding to be easily reduced or increased.

Resolves #1709

@vercel
Copy link

vercel bot commented Mar 26, 2021

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.

widget-test-docs – ./

🔍 Inspect: https://vercel.com/dojo/widget-test-docs/EYyzdnsyvfPEyWRTmgbvrFNJmugs
✅ Preview: https://widget-test-docs-git-fork-tomdye-1709-list-item-structure-dojo1.vercel.app

dojo.widgets – ./

🔍 Inspect: https://vercel.com/dojo/dojo.widgets/74fyTdUpkKX6KQt2HSggavsNXwGL
✅ Preview: https://dojowidgets-git-fork-tomdye-1709-list-item-structure-dojo1.vercel.app

@codecov
Copy link

codecov bot commented Mar 26, 2021

Codecov Report

❌ Patch coverage is 65.00000% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.95%. Comparing base (650a556) to head (9ee7fe2).
⚠️ Report is 66 commits behind head on master.

Files with missing lines Patch % Lines
src/list/index.tsx 65.00% 5 Missing and 2 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1710      +/-   ##
==========================================
- Coverage   90.07%   89.95%   -0.12%     
==========================================
  Files          94       94              
  Lines        5047     5059      +12     
  Branches     1375     1377       +2     
==========================================
+ Hits         4546     4551       +5     
- Misses        249      254       +5     
- Partials      252      254       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

let listContents: RenderResult;

if (isRenderResult(firstChild)) {
listContents = firstChild;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it is only taking the first child, users of the widget will need to wrap the content in a <virtual> element. Should this pass all the children so it could be used like the following?

<ListItem>
  Text node
  <span>sibling node</span>
</ListItem>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good question

case 'small':
paddingClass = themedCss.smallPadding;
break;
case 'medium':
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the options be 'small' and 'large'?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could always add a large too, but that's fine by me

composes: mdc-list-item from '@material/list/dist/mdc.list.css';
}

.smallPadding {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this padding default to?

padding-right: calc(var(--mdc-theme-grid-base) * 2);
}

.noPadding {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you avoid !important by adding .root to the selector?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

most likely, could be that material css is using a gnarly selector though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New ListItem structure prohibits full-width list item
2 participants