Merge pull request #608 from Neovici/feat/9174-expand-button

refactor: replace paper-icon-button with button
Neovici · Apr 3, 2024 · d156c8b · d156c8b
2 parents 817da64 + 7c39cc0
commit d156c8b
Show file tree

Hide file tree

Showing 5 changed files with 292 additions and 271 deletions.
diff --git a/cosmoz-omnitable-styles.js b/cosmoz-omnitable-styles.js
@@ -452,7 +452,7 @@ export default css`
 	.itemRow:hover .checkbox:not(:checked):not(:hover) {
 		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.54) inset;
 	}
-	.groupRow:hover .fold:not(:hover),
+	.groupRow:hover .expand:not(:hover),
 	.itemRow:hover .expand:not(:hover) {
 		color: rgba(0, 0, 0, 0.54);
 	}
@@ -468,17 +468,30 @@ export default css`
 		height: 24px;
 		padding: 0;
 		flex: none;
-	}
-
-	.expand,
-	.fold {
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+		background: none;
+		transition: 0.15s background ease-in;
+		outline: none;
 		color: rgba(0, 0, 0, 0.16);
-	}
 
-	.expand:hover,
-	.fold:hover {
+	}
+	.expand svg {
+		fill: currentColor;
+	}
+	.expand:not([aria-expanded]) svg {
+		transform: scaleY(-1);
+	}
+	.expand:active {
+		background: rgba(33,33,33,0.25)
+	}
+	.expand:hover {
 		color: #000;
 	}
+	.groupRow .expand {
+		margin: 8px;
+	}
 
 	.sg {
 		display: inline-flex;

diff --git a/cosmoz-omnitable.js b/cosmoz-omnitable.js
@@ -2,7 +2,6 @@
 /* eslint-disable max-lines */
 import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
-import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-spinner/paper-spinner-lite';
 
 import '@neovici/cosmoz-grouped-list';

diff --git a/lib/use-list.js b/lib/use-list.js
@@ -4,101 +4,119 @@ import { indexSymbol } from './utils';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { onItemChange as _onItemChange } from './utils-data';
 
+const arrow = html`
+	<svg
+		viewBox="0 0 24 24"
+		preserveAspectRatio="xMidYMid meet"
+		focusable="false"
+	>
+		<g>
+			<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
+		</g>
+	</svg>
+`;
+
 const _getGroupRowClasses = (folded) =>
-		folded ? 'groupRow groupRow-folded' : 'groupRow',
-	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
-	renderItem =
-		({
-			columns,
-			collapsedColumns,
-			onItemClick,
-			onCheckboxChange,
-			dataIsValid,
-			groupOnColumn,
-			onItemChange,
-			rowPartFn,
-		}) =>
-		(item, index, { selected, expanded, toggleCollapse }) =>
-			html` <div class="item-row-wrapper">
-				<div
-					?selected=${selected}
-					part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
-						.filter(Boolean)
-						.join(' ')}"
-					.dataIndex=${item[indexSymbol]}
-					.dataItem=${item}
-					class="itemRow"
-					@click=${onItemClick}
-				>
-					<input
-						class="checkbox"
-						type="checkbox"
-						part="checkbox"
-						.checked=${selected}
-						.dataItem=${item}
-						@input=${onCheckboxChange}
-						?disabled=${!dataIsValid}
-					/>
-					<cosmoz-omnitable-item-row
-						.columns=${columns}
-						.index=${index}
-						.selected=${selected}
-						.expanded=${expanded}
-						.item=${item}
-						.groupOnColumn=${groupOnColumn}
-						.onItemChange=${onItemChange}
-					>
-					</cosmoz-omnitable-item-row>
-					<paper-icon-button
-						class="expand"
-						?hidden=${isEmpty(collapsedColumns.length)}
-						.icon=${_getFoldIcon(expanded)}
-						@click=${toggleCollapse}
-					></paper-icon-button>
-				</div>
-				<cosmoz-omnitable-item-expand
-					.columns=${collapsedColumns}
-					.item=${item}
-					.index=${index}
-					?selected=${selected}
-					?expanded=${expanded}
-					.groupOnColumn=${groupOnColumn}
-					part="item-expand"
-				>
-				</cosmoz-omnitable-item-expand>
-			</div>`,
-	renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
-		return (item, index, { selected, folded, toggleFold }) =>
-			html` <div
-				class="${_getGroupRowClasses(folded)}"
-				part="groupRow groupRow-${item[indexSymbol]}"
+	folded ? 'groupRow groupRow-folded' : 'groupRow';
+
+const renderItem =
+	({
+		columns,
+		collapsedColumns,
+		onItemClick,
+		onCheckboxChange,
+		dataIsValid,
+		groupOnColumn,
+		onItemChange,
+		rowPartFn,
+	}) =>
+	(item, index, { selected, expanded, toggleCollapse }) =>
+		html` <div class="item-row-wrapper">
+			<div
+				?selected=${selected}
+				part="${[
+					'itemRow',
+					`itemRow-${item[indexSymbol]}`,
+					rowPartFn?.(item, index),
+				]
+					.filter(Boolean)
+					.join(' ')}"
+				.dataIndex=${item[indexSymbol]}
+				.dataItem=${item}
+				class="itemRow"
+				@click=${onItemClick}
 			>
 				<input
 					class="checkbox"
 					type="checkbox"
+					part="checkbox"
 					.checked=${selected}
 					.dataItem=${item}
 					@input=${onCheckboxChange}
 					?disabled=${!dataIsValid}
 				/>
-				<h3 class="groupRow-label">
-					<div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
-					<cosmoz-omnitable-group-row
-						.column=${groupOnColumn}
-						.item=${item.items?.[0]}
-						.selected=${selected}
-						.folded=${folded}
-						.group=${item}
-					></cosmoz-omnitable-group-row>
-				</h3>
-				<div class="groupRow-badge">${item.items.length}</div>
-				<paper-icon-button
-					class="fold"
-					.icon=${_getFoldIcon(folded)}
-					@click=${toggleFold}
-				></paper-icon-button>
-			</div>`;
-	};
+				<cosmoz-omnitable-item-row
+					.columns=${columns}
+					.index=${index}
+					.selected=${selected}
+					.expanded=${expanded}
+					.item=${item}
+					.groupOnColumn=${groupOnColumn}
+					.onItemChange=${onItemChange}
+				>
+				</cosmoz-omnitable-item-row>
+
+				<button
+					class="expand"
+					?hidden="${isEmpty(collapsedColumns.length)}"
+					?aria-expanded="${expanded}"
+					@click="${toggleCollapse}"
+				>
+					${arrow}
+				</button>
+			</div>
+			<cosmoz-omnitable-item-expand
+				.columns=${collapsedColumns}
+				.item=${item}
+				.index=${index}
+				?selected=${selected}
+				?expanded=${expanded}
+				.groupOnColumn=${groupOnColumn}
+				part="item-expand"
+			>
+			</cosmoz-omnitable-item-expand>
+		</div>`;
+
+const renderGroup =
+	({ onCheckboxChange, dataIsValid, groupOnColumn }) =>
+	(item, index, { selected, folded, toggleFold }) =>
+		html` <div
+			class="${_getGroupRowClasses(folded)}"
+			part="groupRow groupRow-${item[indexSymbol]}"
+		>
+			<input
+				class="checkbox"
+				type="checkbox"
+				.checked=${selected}
+				.dataItem=${item}
+				@input=${onCheckboxChange}
+				?disabled=${!dataIsValid}
+			/>
+			<h3 class="groupRow-label">
+				<div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
+				<cosmoz-omnitable-group-row
+					.column=${groupOnColumn}
+					.item=${item.items?.[0]}
+					.selected=${selected}
+					.folded=${folded}
+					.group=${item}
+				></cosmoz-omnitable-group-row>
+			</h3>
+			<div class="groupRow-badge">${item.items.length}</div>
+			<button class="expand" ?aria-expanded="${folded}" @click=${toggleFold}>
+				${arrow}
+			</button>
+		</div>`;
 
 export const useList = ({
 	host,