From 2dfc33e93c3517640d6dc6a0f43609bce8c967f1 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Fri, 26 Mar 2021 14:17:58 +0000 Subject: [PATCH 1/3] move padding to content wrapper --- src/list/index.tsx | 42 +++++++++++++++---------- src/theme/default/list-item.m.css | 8 ++--- src/theme/default/list-item.m.css.d.ts | 2 +- src/theme/dojo/list-item.m.css | 5 ++- src/theme/material/list-item.m.css | 9 +++--- src/theme/material/list-item.m.css.d.ts | 2 +- 6 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/list/index.tsx b/src/list/index.tsx index dd62560802..8b25fdb2e5 100644 --- a/src/list/index.tsx +++ b/src/list/index.tsx @@ -116,7 +116,7 @@ export interface ListItemChildren { const listItemFactory = create({ theme }) .properties() - .children(); + .children(); export const ListItem = listItemFactory(function ListItem({ properties, @@ -153,10 +153,29 @@ export const ListItem = listItemFactory(function ListItem({ !disabled && !active && onRequestActive(); } - const [firstChild, ...otherChildren] = children(); - const { leading = undefined, primary, trailing = undefined } = isRenderResult(firstChild) - ? { primary: [firstChild, ...otherChildren] } - : firstChild; + const [firstChild] = children(); + let listContents: RenderResult; + + if (isRenderResult(firstChild)) { + listContents = firstChild; + } else { + const { leading = undefined, primary, trailing = undefined } = firstChild; + listContents = ( +
+ {leading ? {leading} : undefined} + {primary} + {trailing ? {trailing} : undefined} + {draggable && !trailing && ( + + )} +
+ ); + } return (
- {leading ? {leading} : undefined} - {primary} - {trailing ? {trailing} : undefined} - {draggable && !trailing && ( - - )} + {listContents}
); }); diff --git a/src/theme/default/list-item.m.css b/src/theme/default/list-item.m.css index b4fdeb192b..25c314c1c1 100644 --- a/src/theme/default/list-item.m.css +++ b/src/theme/default/list-item.m.css @@ -1,15 +1,15 @@ /* Root class of each menu item */ .root { - background: white; - padding: 10px; border: 1px solid transparent; box-sizing: border-box; - min-height: 45px; cursor: pointer; position: relative; } -.height { +.contentWrapper { + padding: 10px; + min-height: 45px; + background: white; } /* Added to selected items */ diff --git a/src/theme/default/list-item.m.css.d.ts b/src/theme/default/list-item.m.css.d.ts index 834ac98a4b..896967f076 100644 --- a/src/theme/default/list-item.m.css.d.ts +++ b/src/theme/default/list-item.m.css.d.ts @@ -1,5 +1,5 @@ export const root: string; -export const height: string; +export const contentWrapper: string; export const selected: string; export const active: string; export const disabled: string; diff --git a/src/theme/dojo/list-item.m.css b/src/theme/dojo/list-item.m.css index 7d70a6013a..9ebee6f1f6 100644 --- a/src/theme/dojo/list-item.m.css +++ b/src/theme/dojo/list-item.m.css @@ -1,5 +1,4 @@ .root { - padding: var(--spacing-regular); border: 1px solid transparent; color: var(--color-text-primary); font-family: var(--font-family); @@ -13,6 +12,10 @@ display: flex; } +.root .contentWrapper { + padding: var(--spacing-regular); +} + .root.active { border: 1px solid var(--color-highlight-border); transition: none; diff --git a/src/theme/material/list-item.m.css b/src/theme/material/list-item.m.css index 6aa2bdadee..846146b4e3 100644 --- a/src/theme/material/list-item.m.css +++ b/src/theme/material/list-item.m.css @@ -1,16 +1,16 @@ .root { - composes: mdc-list-item from '@material/list/dist/mdc.list.css'; color: var(--mdc-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} - -.root.height { min-height: 48px; height: 100%; } +.contentWrapper { + composes: mdc-list-item from '@material/list/dist/mdc.list.css'; +} + .root:hover { background: var(--mdc-theme-on-surface); } @@ -22,7 +22,6 @@ .active { border: none; background: var(--mdc-theme-on-surface); - min-height: 48px; height: 100%; box-shadow: none; } diff --git a/src/theme/material/list-item.m.css.d.ts b/src/theme/material/list-item.m.css.d.ts index e32b9dc3dd..67ae978112 100644 --- a/src/theme/material/list-item.m.css.d.ts +++ b/src/theme/material/list-item.m.css.d.ts @@ -1,5 +1,5 @@ export const root: string; -export const height: string; +export const contentWrapper: string; export const selected: string; export const active: string; export const collapsed: string; From faa62e90c22b4a2ce976b62aeeafe953253e2297 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Fri, 26 Mar 2021 14:45:58 +0000 Subject: [PATCH 2/3] add padding property to list item --- src/examples/src/config.tsx | 6 ++++ src/examples/src/widgets/list/NoPadding.tsx | 39 +++++++++++++++++++++ src/list/index.tsx | 27 +++++++++++--- src/theme/default/list-item.m.css | 14 ++++++-- src/theme/default/list-item.m.css.d.ts | 4 ++- src/theme/dojo/list-item.m.css | 10 +++++- src/theme/dojo/list-item.m.css.d.ts | 3 ++ src/theme/material/list-item.m.css | 13 +++++-- src/theme/material/list-item.m.css.d.ts | 4 ++- 9 files changed, 108 insertions(+), 12 deletions(-) create mode 100644 src/examples/src/widgets/list/NoPadding.tsx diff --git a/src/examples/src/config.tsx b/src/examples/src/config.tsx index 4640da5182..7ed6d47847 100644 --- a/src/examples/src/config.tsx +++ b/src/examples/src/config.tsx @@ -107,6 +107,7 @@ 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 NoPadding from './widgets/list/NoPadding'; import FetchedResource from './widgets/list/FetchedResource'; import DisabledList from './widgets/list/Disabled'; import DraggableList from './widgets/list/Draggable'; @@ -1077,6 +1078,11 @@ export const config = { module: ListItemRenderer, title: 'ListItem Renderer' }, + { + filename: 'NoPadding', + module: NoPadding, + title: 'No Padding' + }, { description: 'This example shows the menu used as a Listbox. This allows for a selection to be made and persisted. Useful for user selections and within selects / typeahead etc.', diff --git a/src/examples/src/widgets/list/NoPadding.tsx b/src/examples/src/widgets/list/NoPadding.tsx new file mode 100644 index 0000000000..7f5425fe5e --- /dev/null +++ b/src/examples/src/widgets/list/NoPadding.tsx @@ -0,0 +1,39 @@ +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'; + +const resource = createResourceMiddleware(); +const factory = create({ icache, resource }); +const template = createResourceTemplate('value'); + +export default factory(function NoPadding({ id, middleware: { icache, resource } }) { + return ( + + { + icache.set('value', value); + }} + itemsInView={8} + > + {({ value, label }, props) => ( + + {{ + primary: label + }} + + )} + +

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

+ + ); +}); diff --git a/src/list/index.tsx b/src/list/index.tsx index 8b25fdb2e5..df734368c6 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; + /** Specifies if the list item should be padded, defaults to small */ + padding?: 'none' | 'small' | 'medium'; } export interface ListItemChildren { @@ -140,7 +142,8 @@ export const ListItem = listItemFactory(function ListItem({ movedDown, collapsed, theme: themeProp, - variant + variant, + padding = 'medium' } = properties(); const themedCss = theme.classes(listItemCss); @@ -161,7 +164,7 @@ export const ListItem = listItemFactory(function ListItem({ } else { const { leading = undefined, primary, trailing = undefined } = firstChild; listContents = ( -
+ {leading ? {leading} : undefined} {primary} {trailing ? {trailing} : undefined} @@ -173,10 +176,25 @@ export const ListItem = listItemFactory(function ListItem({ variant={variant} /> )} -
+ ); } + let paddingClass: string | undefined; + switch (padding) { + case 'small': + paddingClass = themedCss.smallPadding; + break; + case 'medium': + paddingClass = themedCss.mediumPadding; + break; + case 'none': + paddingClass = themedCss.noPadding; + break; + default: + break; + } + return (
{ requestActive(); diff --git a/src/theme/default/list-item.m.css b/src/theme/default/list-item.m.css index 25c314c1c1..fc7b1975bf 100644 --- a/src/theme/default/list-item.m.css +++ b/src/theme/default/list-item.m.css @@ -4,12 +4,20 @@ box-sizing: border-box; cursor: pointer; position: relative; + background: white; + min-height: 45px; } -.contentWrapper { +.smallPadding { padding: 10px; - min-height: 45px; - background: white; +} + +.mediumPadding { + padding: 20px; +} + +.noPadding { + padding: 0; } /* Added to selected items */ diff --git a/src/theme/default/list-item.m.css.d.ts b/src/theme/default/list-item.m.css.d.ts index 896967f076..347ee43cb7 100644 --- a/src/theme/default/list-item.m.css.d.ts +++ b/src/theme/default/list-item.m.css.d.ts @@ -1,5 +1,7 @@ export const root: string; -export const contentWrapper: string; +export const smallPadding: string; +export const mediumPadding: string; +export const noPadding: string; export const selected: string; export const active: string; export const disabled: string; diff --git a/src/theme/dojo/list-item.m.css b/src/theme/dojo/list-item.m.css index 9ebee6f1f6..aed8ced170 100644 --- a/src/theme/dojo/list-item.m.css +++ b/src/theme/dojo/list-item.m.css @@ -12,10 +12,18 @@ display: flex; } -.root .contentWrapper { +.smallPadding { padding: var(--spacing-regular); } +.mediumPadding { + padding: var(--spacing-large); +} + +.noPadding { + padding: 0; +} + .root.active { border: 1px solid var(--color-highlight-border); transition: none; diff --git a/src/theme/dojo/list-item.m.css.d.ts b/src/theme/dojo/list-item.m.css.d.ts index 99e786f097..bd74bde226 100644 --- a/src/theme/dojo/list-item.m.css.d.ts +++ b/src/theme/dojo/list-item.m.css.d.ts @@ -1,4 +1,7 @@ export const root: string; +export const smallPadding: string; +export const mediumPadding: string; +export const noPadding: string; export const active: string; export const selected: string; export const disabled: string; diff --git a/src/theme/material/list-item.m.css b/src/theme/material/list-item.m.css index 846146b4e3..21798a08f0 100644 --- a/src/theme/material/list-item.m.css +++ b/src/theme/material/list-item.m.css @@ -5,10 +5,19 @@ white-space: nowrap; min-height: 48px; height: 100%; + composes: mdc-list-item from '@material/list/dist/mdc.list.css'; } -.contentWrapper { - composes: mdc-list-item from '@material/list/dist/mdc.list.css'; +.smallPadding { +} + +.mediumPadding { + padding-left: calc(var(--mdc-theme-grid-base) * 2); + padding-right: calc(var(--mdc-theme-grid-base) * 2); +} + +.noPadding { + padding: 0 !important; } .root:hover { diff --git a/src/theme/material/list-item.m.css.d.ts b/src/theme/material/list-item.m.css.d.ts index 67ae978112..9478049af0 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 contentWrapper: string; +export const smallPadding: string; +export const mediumPadding: string; +export const noPadding: string; export const selected: string; export const active: string; export const collapsed: string; From 9ee7fe2b5afe24455864a73c3d0b398354f2bbf5 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Fri, 26 Mar 2021 17:17:09 +0000 Subject: [PATCH 3/3] fix tests --- src/list/tests/ListItem.spec.tsx | 86 ++++++++++++++++++-------------- 1 file changed, 48 insertions(+), 38 deletions(-) diff --git a/src/list/tests/ListItem.spec.tsx b/src/list/tests/ListItem.spec.tsx index eb8bd73049..5845d90de2 100644 --- a/src/list/tests/ListItem.spec.tsx +++ b/src/list/tests/ListItem.spec.tsx @@ -17,7 +17,6 @@ describe('ListBoxItem', () => { classes={[ undefined, css.root, - css.height, false, false, false, @@ -25,7 +24,8 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - undefined + undefined, + css.mediumPadding ]} draggable={undefined} onclick={noop} @@ -42,14 +42,13 @@ describe('ListBoxItem', () => { visibility: undefined }} > - test + test )); const disabledTemplate = template .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, css.disabled, @@ -57,7 +56,8 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - undefined + undefined, + css.mediumPadding ]) .setProperty(WrappedRoot, 'aria-disabled', 'true'); @@ -87,9 +87,13 @@ describe('ListBoxItem', () => { )); r.expect( - template - .prepend(WrappedRoot, () => In front) - .append(WrappedRoot, () => After) + template.setChildren(WrappedRoot, () => ( + + In front + test + After + + )) ); }); @@ -103,7 +107,6 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, css.selected, false, false, @@ -111,7 +114,8 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - undefined + undefined, + css.mediumPadding ]) .setProperty(WrappedRoot, 'aria-selected', 'true'); r.expect(selectedTemplate); @@ -135,7 +139,6 @@ describe('ListBoxItem', () => { const activeTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, css.active, false, @@ -143,7 +146,8 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - undefined + undefined, + css.mediumPadding ]); r.expect(activeTemplate); }); @@ -157,7 +161,6 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -165,7 +168,8 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - undefined + undefined, + css.mediumPadding ]); r.expect(selectedTemplate); }); @@ -179,7 +183,6 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -187,7 +190,8 @@ describe('ListBoxItem', () => { css.movedDown, undefined, undefined, - undefined + undefined, + css.mediumPadding ]); r.expect(selectedTemplate); }); @@ -201,7 +205,6 @@ describe('ListBoxItem', () => { const selectedTemplate = template.setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -209,7 +212,8 @@ describe('ListBoxItem', () => { undefined, css.collapsed, undefined, - undefined + undefined, + css.mediumPadding ]); r.expect(selectedTemplate); }); @@ -224,7 +228,6 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -232,7 +235,8 @@ describe('ListBoxItem', () => { undefined, undefined, css.dragged, - undefined + undefined, + css.mediumPadding ]) .setProperty(WrappedRoot, 'styles', { visibility: 'hidden' }); r.expect(selectedTemplate); @@ -241,7 +245,7 @@ describe('ListBoxItem', () => { it('renders draggable', () => { const r = renderer(() => ( - test + {{ primary: 'test' }} )); const draggableTemplate = template @@ -249,7 +253,6 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -257,16 +260,20 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - css.draggable + css.draggable, + css.mediumPadding ]) - .append(WrappedRoot, () => [ - - ]); + .setChildren(WrappedRoot, () => ( + + test + + + )); r.expect(draggableTemplate); }); @@ -284,7 +291,6 @@ describe('ListBoxItem', () => { .setProperty(WrappedRoot, 'classes', [ undefined, css.root, - css.height, false, false, false, @@ -292,13 +298,17 @@ describe('ListBoxItem', () => { undefined, undefined, undefined, - css.draggable + css.draggable, + css.mediumPadding ]) - .append(WrappedRoot, () => [ - - - - ]); + .setChildren(WrappedRoot, () => ( + + test + + + + + )); r.expect(draggableTemplate); });