FLOW-968 align property introduced on f-tcell. (#202)

* FLOW-968 align property added on f-tcell * FLOW-968 align property added on f-tcell
ollionorg · Nov 29, 2023 · ecda224 · ecda224
1 parent 3073433
commit ecda224
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 55 deletions.
diff --git a/packages/flow-core/README.md b/packages/flow-core/README.md
@@ -30,7 +30,7 @@ For a new project, Flow has put together starter kits with basic dependencies to
 - [Aungular](https://github.com/cldcvr/flow-starterkit-angular)
 - [React](https://github.com/cldcvr/flow-starterkit-react)
 
-If you would like to contribute to an existing starter kit or write a new one for a different framework, write to <flow@cldcvr.com> or ping on our slack channel.
+If you would like to contribute to an existing starter kit or write a new one for a different framework, write to <flow@ollion.com> or ping on our slack channel.
 
 **VScode Plugin**: [Install Flow's Plugin](https://marketplace.visualstudio.com/items?itemName=dev-vikas.flow-intellisense-vscode) to access components, icons, values, etc, and documentation inside of VScode.
 

diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.0] - 2023-11-28
+
+### Minor Changes
+
+- `align` property introduced on `f-tcell`.
+
 ## [2.1.0] - 2023-11-28
 
 ### Minor Changes

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -5,7 +5,7 @@ import { html, HTMLTemplateResult, nothing, PropertyValueMap, unsafeCSS } from "
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import { property, query, state } from "lit/decorators.js";
 import { FTable, FTableSelectable, FTableSize, FTableVariant } from "../f-table/f-table";
-import { FTcell, FTcellActions } from "../f-tcell/f-tcell";
+import { FTcell, FTcellActions, FTcellAlign } from "../f-tcell/f-tcell";
 import { FTrow, FTrowChevronPosition, FTrowState } from "../f-trow/f-trow";
 import eleStyle from "./f-table-schema.scss?inline";
 import globalStyle from "./f-table-schema-global.scss?inline";
@@ -32,6 +32,7 @@ export type FTableSchemaData = {
 export type FTableSchemaCell<T = any> = {
 	value: T;
 	actions?: FTcellActions;
+	align?: FTcellAlign;
 	template?: (highlightText?: string | null) => HTMLTemplateResult;
 	toString?: () => string;
 };
@@ -40,6 +41,7 @@ export type FTableSchemaHeaderCell<T = any> = {
 	value: T;
 	template?: () => HTMLTemplateResult;
 	width?: string;
+	align?: FTcellAlign;
 	selected?: boolean;
 	disableSort?: boolean;
 	sticky?: boolean;
@@ -185,6 +187,7 @@ export class FTableSchema extends FRoot {
 							part="cell"
 							.selected=${selected}
 							.width=${width}
+							.align=${columnHeader[1].align}
 							?sticky-left=${ifDefined(sticky)}
 							?sticky-top=${ifDefined(this.stickyHeader)}
 							@selected-column=${this.handleColumnSelection}
@@ -249,6 +252,7 @@ export class FTableSchema extends FRoot {
 							.selected=${selected}
 							.width=${width}
 							.actions=${actions}
+							.align=${cell.align}
 							?sticky-left=${ifDefined(sticky)}
 							>${this.getCellTemplate(row.data[columnHeader[0]], highlightTerm)}
 						</f-tcell>`;
@@ -537,7 +541,7 @@ export class FTableSchema extends FRoot {
 			return cell.template(highlightTerm);
 		}
 
-		return html`<f-text style="height:100%" .highlight=${highlightTerm}>${cell.value}</f-text>`;
+		return html`<f-text .highlight=${highlightTerm}>${cell.value}</f-text>`;
 	}
 
 	handleColumnSelection(e: CustomEvent) {

diff --git a/packages/flow-table/src/components/f-table/f-table-global.scss b/packages/flow-table/src/components/f-table/f-table-global.scss
@@ -180,16 +180,19 @@ f-table {
 	}
 
 	&[variant="bordered"] {
-		border-top: 1px solid var(--color-border-default);
-		border-left: 1px solid var(--color-border-default);
-		border-right: 1px solid var(--color-border-default);
-
 		> f-trow {
 			--border-bottom: 1px solid var(--color-border-default);
 			--border-left: 1px solid var(--color-border-default);
+			&:first-child {
+				> f-tcell {
+					border-top: 1px solid var(--color-border-default);
+				}
+			}
 			> f-tcell {
-				&:not(:last-child) {
-					border-right: 1px solid var(--color-border-default);
+				border-right: 1px solid var(--color-border-default);
+
+				&:first-child {
+					border-left: 1px solid var(--color-border-default);
 				}
 				border-bottom: 1px solid var(--color-border-default);
 			}

diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.scss b/packages/flow-table/src/components/f-tcell/f-tcell.scss
@@ -2,9 +2,7 @@
 	.cell-radio {
 		display: var(--display-cell-radio);
 	}
-	.details-toggle {
-		margin-left: auto;
-	}
+
 	.f-tcell-wrapper {
 		display: flex;
 		justify-content: flex-start;
@@ -20,5 +18,8 @@
 		.row-toggler.left {
 			margin-right: 12px;
 		}
+		.f-tcell-content {
+			flex: 1 1;
+		}
 	}
 }
diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.ts b/packages/flow-table/src/components/f-tcell/f-tcell.ts
@@ -22,6 +22,17 @@ export type FTcellAction = {
 
 export type FTcellActions = FTcellAction[];
 
+export type FTcellAlign =
+	| "top-left"
+	| "top-center"
+	| "top-right"
+	| "middle-left"
+	| "middle-center"
+	| "middle-right"
+	| "bottom-left"
+	| "bottom-center"
+	| "bottom-right";
+
 @flowElement("f-tcell")
 export class FTcell extends FRoot {
 	/**
@@ -49,6 +60,9 @@ export class FTcell extends FRoot {
 	@property({ type: String, reflect: true })
 	width?: string;
 
+	@property({ type: String, reflect: true })
+	align?: FTcellAlign = "top-left";
+
 	@state()
 	selectable?: FTableSelectable = "none";
 
@@ -107,37 +121,39 @@ export class FTcell extends FRoot {
 
 	render() {
 		return html`<div class="f-tcell-wrapper">
-			${this.selectable === "multiple"
-				? html`<f-checkbox
-						?disabled=${this.isDisabled}
-						@input=${this.handleSelection}
-				  ></f-checkbox>`
-				: nothing}
-			${this.selectable === "single"
-				? html`<f-radio
-						?disabled=${this.isDisabled}
-						@input=${this.handleSelection}
-						class="cell-radio"
-				  ></f-radio>`
-				: nothing}
-			${this.expandIcon && this.expandIconPosition === "left"
-				? html`
-						<f-icon-button
-							size="medium"
-							category="packed"
-							class="row-toggler left"
-							state="neutral"
-							@click=${this.toggleDetails}
-							icon="i-chevron-down"
-						></f-icon-button>
-				  `
-				: nothing}<slot></slot>
+			<f-div .align=${this.align} height="100%" class="f-tcell-content">
+				${this.selectable === "multiple"
+					? html`<f-checkbox
+							?disabled=${this.isDisabled}
+							@input=${this.handleSelection}
+					  ></f-checkbox>`
+					: nothing}
+				${this.selectable === "single"
+					? html`<f-radio
+							?disabled=${this.isDisabled}
+							@input=${this.handleSelection}
+							class="cell-radio"
+					  ></f-radio>`
+					: nothing}
+				${this.expandIcon && this.expandIconPosition === "left"
+					? html`
+							<f-icon-button
+								size="medium"
+								category="packed"
+								class="row-toggler left"
+								state="neutral"
+								@click=${this.toggleDetails}
+								icon="i-chevron-down"
+							></f-icon-button>
+					  `
+					: nothing}<slot></slot>
+			</f-div>
 			<f-div
 				class="details-toggle"
 				height="100%"
 				width="hug-content"
 				gap="medium"
-				align="middle-right"
+				.align=${this.align ?? "middle-right"}
 			>
 				${this.renderActions()}
 				${this.expandIcon && this.expandIconPosition === "right"

diff --git a/stories/flow-table/f-tcell.stories.js → stories/flow-table/f-tcell.stories.ts b/stories/flow-table/f-tcell.stories.js → stories/flow-table/f-tcell.stories.ts
@@ -13,15 +13,15 @@ export default {
 };
 
 export const Playground = {
-	render: args => {
+	render: (args: Record<string, unknown>) => {
 		return html`
 			<f-table>
 				<f-trow slot="header">
 					${[1, 2, 3].map(cellNumber => {
 						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
 					})}
 				</f-trow>
-				${[1, 2, 3].map(rowNumber => {
+				${[1, 2, 3].map(() => {
 					return html`<f-trow>
 						${[1, 2, 3].map(cellNumber => {
 							return html`<f-tcell .actions=${args.actions}>
@@ -74,7 +74,7 @@ export const Anatomy = {
 };
 
 export const Actions = {
-	render: args =>
+	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large">
 			<f-text>3rd column has actions</f-text>
 			<f-table>
@@ -83,7 +83,7 @@ export const Actions = {
 						return html`<f-tcell> Header ${cellNumber} </f-tcell>`;
 					})}
 				</f-trow>
-				${[1, 2, 3].map(rowNumber => {
+				${[1, 2, 3].map(() => {
 					return html`<f-trow>
 						${[1, 2, 3].map(cellNumber => {
 							return html`<f-tcell
@@ -116,10 +116,10 @@ export const Actions = {
 };
 
 export const Selected = {
-	render: args =>
+	render: () =>
 		html`<f-div direction="column" state="subtle" padding="small" gap="large"
 			>${[true].map(
-				selected =>
+				() =>
 					html`<f-text>2nd column is selected</f-text
 						><f-table>
 							<f-trow slot="header">
@@ -129,7 +129,7 @@ export const Selected = {
 									</f-tcell>`;
 								})}
 							</f-trow>
-							${[1, 2, 3].map(rowNumber => {
+							${[1, 2, 3].map(() => {
 								return html`<f-trow>
 									${[1, 2, 3].map(cellNumber => {
 										return html`<f-tcell .selected=${cellNumber === 2}>
@@ -145,19 +145,59 @@ export const Selected = {
 	name: "selected"
 };
 
+export const Align = {
+	render: () => {
+		const alignValues = [
+			"top-left",
+			"top-center",
+			"top-right",
+			"middle-left",
+			"middle-center",
+			"middle-right",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		];
+		return html`<f-div padding="x-large"
+			><f-table variant="bordered">
+				<f-trow slot="header">
+					${alignValues.map(align => {
+						return html`<f-tcell width="300px" .align=${align}> ${align} </f-tcell>`;
+					})}
+					<f-tcell> Cell with height </f-tcell>
+				</f-trow>
+				${[1, 2, 3].map(() => {
+					return html`<f-trow>
+						${alignValues.map(align => {
+							return html`<f-tcell .align=${align}>
+								<f-text inline> align="${align}" </f-text>
+							</f-tcell>`;
+						})}
+						<f-tcell>
+							<f-div height="200px"></f-div>
+						</f-tcell>
+					</f-trow>`;
+				})}
+			</f-table></f-div
+		>`;
+	},
+
+	name: "align"
+};
+
 export const HighlightColumn = {
-	render: args => {
+	render: () => {
 		const fieldRef = createRef();
 
-		const highlightColumnHandler = event => {
+		const highlightColumnHandler = (event: CustomEvent) => {
 			if (fieldRef.value) {
 				fieldRef.value.textContent = JSON.stringify(event.detail, undefined, 2);
 			}
 		};
 
 		return html`<f-div direction="column" state="subtle" padding="small" gap="large"
 				>${[true].map(
-					selected =>
+					() =>
 						html`<f-text>Hover on header cell, it will trigger 'highlight-column' event </f-text>
 							<f-table>
 								<f-trow slot="header">
@@ -170,7 +210,7 @@ export const HighlightColumn = {
 										</f-tcell>`;
 									})}
 								</f-trow>
-								${[1, 2, 3].map(rowNumber => {
+								${[1, 2, 3].map(() => {
 									return html`<f-trow>
 										${[1, 2, 3].map(cellNumber => {
 											return html`<f-tcell .selected=${cellNumber === 2}>
@@ -193,18 +233,18 @@ export const HighlightColumn = {
 };
 
 export const SelectedColumn = {
-	render: args => {
+	render: () => {
 		const fieldRef = createRef();
 
-		const selectedColumnHandler = event => {
+		const selectedColumnHandler = (event: CustomEvent) => {
 			if (fieldRef.value) {
 				fieldRef.value.textContent = JSON.stringify(event.detail, undefined, 2);
 			}
 		};
 
 		return html`<f-div direction="column" state="subtle" padding="small" gap="large"
 				>${[true].map(
-					selected =>
+					() =>
 						html`<f-text>Click on header cell, it will trigger 'selected-column' event </f-text>
 							<f-table>
 								<f-trow slot="header">
@@ -217,7 +257,7 @@ export const SelectedColumn = {
 										</f-tcell>`;
 									})}
 								</f-trow>
-								${[1, 2, 3].map(rowNumber => {
+								${[1, 2, 3].map(() => {
 									return html`<f-trow>
 										${[1, 2, 3].map(cellNumber => {
 											return html`<f-tcell .selected=${cellNumber === 2}>

diff --git a/stories/utils/mock-users-data.ts b/stories/utils/mock-users-data.ts
@@ -15,7 +15,10 @@ export default function getFakeUsers(rowCount = 100, columnCount = 8): FTableSch
 	const users = [];
 
 	for (let i = 0; i < rowCount; i++) {
-		const firstName = { value: faker.name.firstName() };
+		const firstName: FTableSchemaCell<string> = {
+			value: faker.name.firstName(),
+			align: "middle-left"
+		};
 		const lastName = {
 			value: faker.name.lastName(),
 			template: function () {