From 36a55f8462183c9e02f8d1c74c26301fcc51f64b Mon Sep 17 00:00:00 2001 From: lmeyer Date: Wed, 9 Oct 2024 13:14:05 +0200 Subject: [PATCH 1/7] feat(List): add header --- .../src/components/List/List.module.css | 17 ++++++ .../components/src/components/List/List.tsx | 13 ++++- .../List/stories/Default.stories.tsx | 58 ++++++++++++++++++- 3 files changed, 84 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/List/List.module.css b/packages/components/src/components/List/List.module.css index 8ee9aadbd..4442ab92e 100644 --- a/packages/components/src/components/List/List.module.css +++ b/packages/components/src/components/List/List.module.css @@ -3,4 +3,21 @@ flex-direction: column; row-gap: var(--list--block-to-block-spacing); container-type: inline-size; + + .headerItem { + border-width: var(--list-item--border-width); + border-bottom-width: 0; + border-style: var(--list-item--border-style); + border-color: var(--list-item--border-color); + padding: var(--list-item--padding); + border-top-left-radius: var(--list-item--corner-radius); + border-top-right-radius: var(--list-item--corner-radius); + } + + :has(.headerItem) { + :global(.flow--list--items) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } } diff --git a/packages/components/src/components/List/List.tsx b/packages/components/src/components/List/List.tsx index 7bb52dfd9..2f3382ab6 100644 --- a/packages/components/src/components/List/List.tsx +++ b/packages/components/src/components/List/List.tsx @@ -25,7 +25,7 @@ import { Table } from "@/components/List/components/Table"; import { Table as TableSetupComponent } from "@/components/List/setupComponents/Table"; import { TableHeader } from "@/components/List/setupComponents/TableHeader"; import { TableBody } from "@/components/List/setupComponents/TableBody"; -import { TunnelProvider } from "@mittwald/react-tunnel"; +import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel"; import { type PropsContext, PropsContextProvider } from "@/lib/propsContext"; import headerStyles from "./components/Header/Header.module.css"; import { ActionGroup } from "@/components/ActionGroup"; @@ -152,6 +152,10 @@ export const List = flowComponent("List", (props) => { tunnelId: "actions", ignoreBreakpoint: true, }, + Header: { + tunnelId: "header", + className: styles.headerItem, + }, }; const hasActionGroup = !!deepFindOfType(children, ActionGroup); @@ -168,8 +172,11 @@ export const List = flowComponent("List", (props) => {
{children}
- {listModel.viewMode === "list" && } - {listModel.viewMode === "table" && } +
+ + {listModel.viewMode === "list" && } + {listModel.viewMode === "table" &&
} +
diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx index 2d8a244ac..0ef4390b9 100644 --- a/packages/components/src/components/List/stories/Default.stories.tsx +++ b/packages/components/src/components/List/stories/Default.stories.tsx @@ -12,10 +12,11 @@ import AlertBadge from "@/components/AlertBadge"; import type { Domain } from "../testData/domainApi"; import { getDomains, getTypes } from "../testData/domainApi"; import { Section } from "@/components/Section"; -import { typedList } from "@/components/List"; +import { ListItemView, typedList } from "@/components/List"; import { Button } from "@/components/Button"; import IconDownload from "@/components/Icon/components/icons/IconDownload"; import { ActionGroup } from "@/components/ActionGroup"; +import { Header } from "@/components/Header"; const loadDomains: AsyncDataLoader = async (opts) => { const response = await getDomains({ @@ -137,3 +138,58 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const WithHeader: Story = { + render: () => { + const InvoiceList = typedList<{ id: string; amount: string }>(); + + return ( +
+ Invoices + +
+ + Gesamtpreis: 42,00 € + +
+ + + + + + + + ID + Amount + + + + + + {(invoice) => invoice.id} + + + {(invoice) => invoice.amount} + + + + + + {(invoice) => ( + + {invoice.id} + {invoice.amount} + + )} + + +
+ ); + }, +}; From b07860b9b1fffdfb4685c811b85d0ce9449f5b1e Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 06:27:00 +0200 Subject: [PATCH 2/7] docs(List): add header example --- .../structure/list/examples/header.tsx | 70 +++++++++++++++++++ .../03-components/structure/list/overview.mdx | 7 ++ 2 files changed, 77 insertions(+) create mode 100644 packages/docs/src/content/03-components/structure/list/examples/header.tsx diff --git a/packages/docs/src/content/03-components/structure/list/examples/header.tsx b/packages/docs/src/content/03-components/structure/list/examples/header.tsx new file mode 100644 index 000000000..c7cf79b4f --- /dev/null +++ b/packages/docs/src/content/03-components/structure/list/examples/header.tsx @@ -0,0 +1,70 @@ +import { + ListItemView, + typedList, +} from "@mittwald/flow-react-components/List"; +import Heading from "@mittwald/flow-react-components/Heading"; +import Text from "@mittwald/flow-react-components/Text"; +import { Header } from "@mittwald/flow-react-components/Header"; + +export default () => { + const InvoiceList = typedList<{ + id: string; + amount: string; + }>(); + + return ( + +
+ + Gesamtpreis: 41,00 € + +
+ + + + + + + + + ID + + + Amount + + + + + + + {(invoice) => invoice.id} + + + {(invoice) => invoice.amount} + + + + + + {(invoice) => ( + + {invoice.id} + {invoice.amount} + + )} + + + ); +}; diff --git a/packages/docs/src/content/03-components/structure/list/overview.mdx b/packages/docs/src/content/03-components/structure/list/overview.mdx index 38cc5d22a..ac73ae80d 100644 --- a/packages/docs/src/content/03-components/structure/list/overview.mdx +++ b/packages/docs/src/content/03-components/structure/list/overview.mdx @@ -53,3 +53,10 @@ Standard 10 Einträge an und lädt über einen Klick auf "Mehr anzeigen" jeweils Einträge nach. Diese Werte lassen sich über die `batchSize` Property anpassen. + +## Header + +Verwende einen `
` innerhalb der List, um beliebigen übergeordneten +Inhalt, wie beispielsweise eine Zusammenfassung der Beträge Liste anzuzeigen. + + From 02774378a4c86e81f2f4a1d96f738a1b23d21dd3 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 09:54:02 +0200 Subject: [PATCH 3/7] feat(List): add summary --- .../src/components/List/List.module.css | 12 +--------- .../components/src/components/List/List.tsx | 17 ++++++------- .../ListSummary/ListSummary.module.scss | 9 +++++++ .../components/ListSummary/ListSummary.tsx | 24 +++++++++++++++++++ .../List/components/ListSummary/index.ts | 4 ++++ .../components/src/components/List/index.ts | 1 + .../List/stories/Default.stories.tsx | 11 ++++----- .../src/components/propTypes/index.ts | 3 +++ .../list/examples/{header.tsx => summary.tsx} | 5 ++-- .../03-components/structure/list/overview.mdx | 6 ++--- 10 files changed, 61 insertions(+), 31 deletions(-) create mode 100644 packages/components/src/components/List/components/ListSummary/ListSummary.module.scss create mode 100644 packages/components/src/components/List/components/ListSummary/ListSummary.tsx create mode 100644 packages/components/src/components/List/components/ListSummary/index.ts rename packages/docs/src/content/03-components/structure/list/examples/{header.tsx => summary.tsx} (95%) diff --git a/packages/components/src/components/List/List.module.css b/packages/components/src/components/List/List.module.css index 4442ab92e..b8a4eb384 100644 --- a/packages/components/src/components/List/List.module.css +++ b/packages/components/src/components/List/List.module.css @@ -4,17 +4,7 @@ row-gap: var(--list--block-to-block-spacing); container-type: inline-size; - .headerItem { - border-width: var(--list-item--border-width); - border-bottom-width: 0; - border-style: var(--list-item--border-style); - border-color: var(--list-item--border-color); - padding: var(--list-item--padding); - border-top-left-radius: var(--list-item--corner-radius); - border-top-right-radius: var(--list-item--corner-radius); - } - - :has(.headerItem) { + :has(:global(.flow--list--list-summary)) { :global(.flow--list--items) { border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/packages/components/src/components/List/List.tsx b/packages/components/src/components/List/List.tsx index 2f3382ab6..f8b3489a9 100644 --- a/packages/components/src/components/List/List.tsx +++ b/packages/components/src/components/List/List.tsx @@ -152,9 +152,8 @@ export const List = flowComponent("List", (props) => { tunnelId: "actions", ignoreBreakpoint: true, }, - Header: { - tunnelId: "header", - className: styles.headerItem, + ListSummary: { + tunnelId: "listSummary", }, }; @@ -172,11 +171,13 @@ export const List = flowComponent("List", (props) => {
{children}
-
- - {listModel.viewMode === "list" && } - {listModel.viewMode === "table" &&
} - + {listModel.viewMode === "list" && ( +
+ + +
+ )} + {listModel.viewMode === "table" &&
}
diff --git a/packages/components/src/components/List/components/ListSummary/ListSummary.module.scss b/packages/components/src/components/List/components/ListSummary/ListSummary.module.scss new file mode 100644 index 000000000..c75c1908b --- /dev/null +++ b/packages/components/src/components/List/components/ListSummary/ListSummary.module.scss @@ -0,0 +1,9 @@ +.listSummary { + border-width: var(--list-item--border-width); + border-bottom-width: 0; + border-style: var(--list-item--border-style); + border-color: var(--list-item--border-color); + padding: var(--list-item--padding); + border-top-left-radius: var(--list-item--corner-radius); + border-top-right-radius: var(--list-item--corner-radius); +} diff --git a/packages/components/src/components/List/components/ListSummary/ListSummary.tsx b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx new file mode 100644 index 000000000..811e8c69e --- /dev/null +++ b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx @@ -0,0 +1,24 @@ +import type { FC, PropsWithChildren } from "react"; +import React from "react"; +import styles from "./ListSummary.module.scss"; +import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; +import { flowComponent } from "@/lib/componentFactory/flowComponent"; + +export interface ListSummaryProps + extends FlowComponentProps, + PropsWithChildren {} + +export const ListSummary: FC = flowComponent( + "ListSummary", + (props) => { + const { children } = props; + + return ( +
+ {children} +
+ ); + }, +); + +export default ListSummary; diff --git a/packages/components/src/components/List/components/ListSummary/index.ts b/packages/components/src/components/List/components/ListSummary/index.ts new file mode 100644 index 000000000..27c2ed949 --- /dev/null +++ b/packages/components/src/components/List/components/ListSummary/index.ts @@ -0,0 +1,4 @@ +import { ListSummary } from "./ListSummary"; + +export { ListSummary } from "./ListSummary"; +export default ListSummary; diff --git a/packages/components/src/components/List/index.ts b/packages/components/src/components/List/index.ts index 3e5cbe0a4..58d2dd657 100644 --- a/packages/components/src/components/List/index.ts +++ b/packages/components/src/components/List/index.ts @@ -6,6 +6,7 @@ export type { } from "@/components/List/model/loading/types"; export type { RenderItemFn } from "@/components/List/model/item/types"; export { View as ListItemView } from "./components/Items/components/Item/components/View"; +export * from "./components/ListSummary"; export * from "./List"; export * from "./setupComponents/ListFilter"; export * from "./setupComponents/ListSorting"; diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx index 0ef4390b9..42713215f 100644 --- a/packages/components/src/components/List/stories/Default.stories.tsx +++ b/packages/components/src/components/List/stories/Default.stories.tsx @@ -12,11 +12,10 @@ import AlertBadge from "@/components/AlertBadge"; import type { Domain } from "../testData/domainApi"; import { getDomains, getTypes } from "../testData/domainApi"; import { Section } from "@/components/Section"; -import { ListItemView, typedList } from "@/components/List"; +import { ListItemView, ListSummary, typedList } from "@/components/List"; import { Button } from "@/components/Button"; import IconDownload from "@/components/Icon/components/icons/IconDownload"; import { ActionGroup } from "@/components/ActionGroup"; -import { Header } from "@/components/Header"; const loadDomains: AsyncDataLoader = async (opts) => { const response = await getDomains({ @@ -139,7 +138,7 @@ type Story = StoryObj; export const Default: Story = {}; -export const WithHeader: Story = { +export const WithSummary: Story = { render: () => { const InvoiceList = typedList<{ id: string; amount: string }>(); @@ -147,11 +146,11 @@ export const WithHeader: Story = {
Invoices -
- + + Gesamtpreis: 42,00 € -
+ ; + ListSummary: ListSummaryProps; MenuItem: MenuItemProps; Modal: ModalProps; ModalTrigger: OverlayTriggerProps; @@ -139,6 +141,7 @@ const propsContextSupportingComponentsMap: Record< LayoutCard: true, Link: true, List: true, + ListSummary: true, MenuItem: true, Modal: true, ModalTrigger: true, diff --git a/packages/docs/src/content/03-components/structure/list/examples/header.tsx b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx similarity index 95% rename from packages/docs/src/content/03-components/structure/list/examples/header.tsx rename to packages/docs/src/content/03-components/structure/list/examples/summary.tsx index c7cf79b4f..e9c972336 100644 --- a/packages/docs/src/content/03-components/structure/list/examples/header.tsx +++ b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx @@ -4,7 +4,6 @@ import { } from "@mittwald/flow-react-components/List"; import Heading from "@mittwald/flow-react-components/Heading"; import Text from "@mittwald/flow-react-components/Text"; -import { Header } from "@mittwald/flow-react-components/Header"; export default () => { const InvoiceList = typedList<{ @@ -14,13 +13,13 @@ export default () => { return ( -
+ Gesamtpreis: 41,00 € -
+ -## Header +## Summary -Verwende einen `
` innerhalb der List, um beliebigen übergeordneten -Inhalt, wie beispielsweise eine Zusammenfassung der Beträge Liste anzuzeigen. +Verwende eine `` innerhalb der Liste, um eine Zusammenfassung, wir +beispielsweise die Summe der Beträge anzuzeigen. From 2e7d308b976f155f35a2d615c67ae7ed445ffa4f Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 10:42:00 +0200 Subject: [PATCH 4/7] feat(List): add table footer --- .../src/components/Action/Action.tsx | 4 +-- .../ContextMenuTrigger/ContextMenuTrigger.tsx | 4 +-- .../components/CounterBadge/CounterBadge.tsx | 22 ++++++------- .../components/src/components/List/List.tsx | 3 ++ .../components/ListSummary/ListSummary.tsx | 21 ++++++------- .../List/components/Table/Table.tsx | 2 ++ .../List/stories/Default.stories.tsx | 5 +++ .../PopoverTrigger/PopoverTrigger.tsx | 31 +++++++------------ .../src/components/Slider/Slider.tsx | 4 +-- .../TableFooterRow/TableFooterRow.tsx | 11 +++++-- .../src/components/propTypes/index.ts | 3 ++ .../structure/list/examples/summary.tsx | 1 + 12 files changed, 56 insertions(+), 55 deletions(-) diff --git a/packages/components/src/components/Action/Action.tsx b/packages/components/src/components/Action/Action.tsx index 852c3f1b9..91ae1e780 100644 --- a/packages/components/src/components/Action/Action.tsx +++ b/packages/components/src/components/Action/Action.tsx @@ -1,9 +1,7 @@ -import type { FC } from "react"; import React from "react"; import { ActionModel as ActionModel } from "@/components/Action/models/ActionModel"; import type { PropsContext } from "@/lib/propsContext"; import { dynamic, PropsContextProvider } from "@/lib/propsContext"; -import type { ActionProps } from "@/components/Action/types"; import { ActionContextProvider } from "@/components/Action/context"; import { useActionStateContext } from "@/components/Action/models/ActionStateContext"; import { useConfirmationModalButtonSlot } from "@/components/Action/hooks/useConfirmationModalButtonSlot"; @@ -39,7 +37,7 @@ const actionButtonContext: ComponentPropsContext<"Button"> = { }), }; -export const Action: FC = flowComponent("Action", (props) => { +export const Action = flowComponent("Action", (props) => { const { children, actionModel: actionModelFromProps, ...actionProps } = props; const newActionModel = ActionModel.useNew(actionProps); const actionModel = actionModelFromProps ?? newActionModel; diff --git a/packages/components/src/components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.tsx b/packages/components/src/components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.tsx index 927d8f793..338e6cf21 100644 --- a/packages/components/src/components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.tsx +++ b/packages/components/src/components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.tsx @@ -1,11 +1,9 @@ import * as Aria from "react-aria-components"; -import type { FC } from "react"; import React from "react"; -import type { OverlayTriggerProps } from "@/components/OverlayTrigger"; import { OverlayTrigger } from "@/components/OverlayTrigger"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; -export const ContextMenuTrigger: FC = flowComponent( +export const ContextMenuTrigger = flowComponent( "ContextMenuTrigger", (props) => { const { children, ...triggerProps } = props; diff --git a/packages/components/src/components/CounterBadge/CounterBadge.tsx b/packages/components/src/components/CounterBadge/CounterBadge.tsx index 5355f0d34..ba02954ff 100644 --- a/packages/components/src/components/CounterBadge/CounterBadge.tsx +++ b/packages/components/src/components/CounterBadge/CounterBadge.tsx @@ -1,4 +1,3 @@ -import type { FC } from "react"; import React from "react"; import type { PropsWithElementType } from "@/lib/types/props"; import clsx from "clsx"; @@ -12,19 +11,16 @@ export interface CounterBadgeProps count?: number; } -export const CounterBadge: FC = flowComponent( - "CounterBadge", - (props) => { - const { className, count, refProp: ref, ...rest } = props; +export const CounterBadge = flowComponent("CounterBadge", (props) => { + const { className, count, refProp: ref, ...rest } = props; - const rootClassName = clsx(styles.counterBadge, className); + const rootClassName = clsx(styles.counterBadge, className); - return ( - - {count && count > 99 ? "99+" : count} - - ); - }, -); + return ( + + {count && count > 99 ? "99+" : count} + + ); +}); export default CounterBadge; diff --git a/packages/components/src/components/List/List.tsx b/packages/components/src/components/List/List.tsx index f8b3489a9..33e18e743 100644 --- a/packages/components/src/components/List/List.tsx +++ b/packages/components/src/components/List/List.tsx @@ -155,6 +155,9 @@ export const List = flowComponent("List", (props) => { ListSummary: { tunnelId: "listSummary", }, + TableFooterRow: { + tunnelId: "tableFooterRow", + }, }; const hasActionGroup = !!deepFindOfType(children, ActionGroup); diff --git a/packages/components/src/components/List/components/ListSummary/ListSummary.tsx b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx index 811e8c69e..85c4778ed 100644 --- a/packages/components/src/components/List/components/ListSummary/ListSummary.tsx +++ b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx @@ -1,4 +1,4 @@ -import type { FC, PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react"; import React from "react"; import styles from "./ListSummary.module.scss"; import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; @@ -8,17 +8,14 @@ export interface ListSummaryProps extends FlowComponentProps, PropsWithChildren {} -export const ListSummary: FC = flowComponent( - "ListSummary", - (props) => { - const { children } = props; +export const ListSummary = flowComponent("ListSummary", (props) => { + const { children } = props; - return ( -
- {children} -
- ); - }, -); + return ( +
+ {children} +
+ ); +}); export default ListSummary; diff --git a/packages/components/src/components/List/components/Table/Table.tsx b/packages/components/src/components/List/components/Table/Table.tsx index 2d55cfe86..f7c4ba0ea 100644 --- a/packages/components/src/components/List/components/Table/Table.tsx +++ b/packages/components/src/components/List/components/Table/Table.tsx @@ -13,6 +13,7 @@ import { TableLoadingView } from "@/components/List/components/Table/components/ import styles from "./Table.module.css"; import clsx from "clsx"; import { EmptyView } from "@/components/List/components/EmptyView/EmptyView"; +import { TunnelExit } from "@mittwald/react-tunnel"; export const Table: FC = () => { const list = useList(); @@ -79,6 +80,7 @@ export const Table: FC = () => { ))} ))} + ); diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx index 42713215f..c9bcc7f26 100644 --- a/packages/components/src/components/List/stories/Default.stories.tsx +++ b/packages/components/src/components/List/stories/Default.stories.tsx @@ -16,6 +16,7 @@ import { ListItemView, ListSummary, typedList } from "@/components/List"; import { Button } from "@/components/Button"; import IconDownload from "@/components/Icon/components/icons/IconDownload"; import { ActionGroup } from "@/components/ActionGroup"; +import { TableCell, TableFooterRow } from "@/components/Table"; const loadDomains: AsyncDataLoader = async (opts) => { const response = await getDomains({ @@ -177,6 +178,10 @@ export const WithSummary: Story = { {(invoice) => invoice.amount} + + total + 41,00 € + diff --git a/packages/components/src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx b/packages/components/src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx index 76f99e79d..af9cdd553 100644 --- a/packages/components/src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx +++ b/packages/components/src/components/Popover/components/PopoverTrigger/PopoverTrigger.tsx @@ -1,24 +1,17 @@ import * as Aria from "react-aria-components"; -import type { FC } from "react"; import React from "react"; -import type { OverlayTriggerProps } from "@/components/OverlayTrigger"; import { OverlayTrigger } from "@/components/OverlayTrigger"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; -type Props = Omit; - -export const PopoverTrigger: FC = flowComponent( - "PopoverTrigger", - (props) => { - const { children, ...triggerProps } = props; - return ( - - {children} - - ); - }, -); +export const PopoverTrigger = flowComponent("PopoverTrigger", (props) => { + const { children, ...triggerProps } = props; + return ( + + {children} + + ); +}); diff --git a/packages/components/src/components/Slider/Slider.tsx b/packages/components/src/components/Slider/Slider.tsx index 9ad5a361d..667aa2409 100644 --- a/packages/components/src/components/Slider/Slider.tsx +++ b/packages/components/src/components/Slider/Slider.tsx @@ -1,4 +1,4 @@ -import type { FC, PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react"; import React from "react"; import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; @@ -19,7 +19,7 @@ export interface SliderProps showInitialMarker?: boolean; } -export const Slider: FC = flowComponent("Slider", (props) => { +export const Slider = flowComponent("Slider", (props) => { const { className, children, diff --git a/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx b/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx index 23dae95ec..f8440126d 100644 --- a/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx +++ b/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx @@ -1,10 +1,15 @@ -import type { FC } from "react"; import React from "react"; import type { TableRowProps } from "../TableRow"; import { TableRow } from "../TableRow"; +import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; +import { flowComponent } from "@/lib/componentFactory/flowComponent"; -export const TableFooterRow: FC = (props) => { +export interface TableFooterRowProps + extends FlowComponentProps, + TableRowProps {} + +export const TableFooterRow = flowComponent("TableFooterRow", (props) => { return ; -}; +}); export default TableFooterRow; diff --git a/packages/components/src/components/propTypes/index.ts b/packages/components/src/components/propTypes/index.ts index 5f82889b9..45de5538b 100644 --- a/packages/components/src/components/propTypes/index.ts +++ b/packages/components/src/components/propTypes/index.ts @@ -50,6 +50,7 @@ import type { DateRangePickerProps } from "@/components/DateRangePicker"; import type { TimeFieldProps } from "@/components/TimeField"; import type { AlertIconProps } from "@/components/AlertIcon"; import type { ListSummaryProps } from "@/components/List/components/ListSummary/ListSummary"; +import type { TableFooterRowProps } from "@/components/Table/components/TableFooterRow/TableFooterRow"; export * from "./types"; @@ -101,6 +102,7 @@ export interface FlowComponentPropsTypes { Select: SelectProps; Slider: SliderProps; Switch: SwitchProps; + TableFooterRow: TableFooterRowProps; Tabs: TabsProps; TabTitle: TabsProps; Text: TextProps; @@ -160,6 +162,7 @@ const propsContextSupportingComponentsMap: Record< Select: true, Slider: true, Switch: true, + TableFooterRow: true, Tabs: true, TabTitle: true, TestComponent: true, diff --git a/packages/docs/src/content/03-components/structure/list/examples/summary.tsx b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx index e9c972336..b471b060f 100644 --- a/packages/docs/src/content/03-components/structure/list/examples/summary.tsx +++ b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx @@ -1,5 +1,6 @@ import { ListItemView, + ListSummary, typedList, } from "@mittwald/flow-react-components/List"; import Heading from "@mittwald/flow-react-components/Heading"; From f628dd45f0f64d39c1c90f89d4b781a950686dd8 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 10:43:19 +0200 Subject: [PATCH 5/7] feat(List): add table footer --- CHANGELOG.md | 19 +++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 19 +++++++ packages/components/package.json | 2 +- .../List/components/Header/Header.module.css | 4 +- .../ActiveFilters/ActiveFilters.tsx | 22 +++++++- .../components/List/locales/de-DE.locale.json | 1 + .../components/List/locales/en-EN.locale.json | 1 + .../src/components/List/model/List.ts | 4 ++ .../components/List/model/filter/Filter.ts | 5 ++ .../List/stories/Default.stories.tsx | 1 + .../src/components/Table/Table.module.scss | 7 +++ .../components/src/components/Table/Table.tsx | 13 +++-- .../Table/stories/Default.stories.tsx | 7 ++- packages/design-tokens/CHANGELOG.md | 9 +++ packages/design-tokens/package.json | 2 +- .../spacing/examples/falseSpacing.tsx | 42 ++++++++++++++ .../spacing/examples/rightSpacing.tsx | 42 ++++++++++++++ .../structure/spacing/index.mdx | 2 + .../structure/spacing/overview.mdx | 55 +++++++++++++++++++ packages/react-tunnel/CHANGELOG.md | 9 +++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++ packages/stylesheet/package.json | 2 +- 24 files changed, 268 insertions(+), 13 deletions(-) create mode 100644 packages/docs/src/content/02-foundations/structure/spacing/examples/falseSpacing.tsx create mode 100644 packages/docs/src/content/02-foundations/structure/spacing/examples/rightSpacing.tsx create mode 100644 packages/docs/src/content/02-foundations/structure/spacing/index.mdx create mode 100644 packages/docs/src/content/02-foundations/structure/spacing/overview.mdx diff --git a/CHANGELOG.md b/CHANGELOG.md index 443d7a0fb..4515e7cc7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.279](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.279) (2024-10-10) + +### Bug Fixes + +- **List:** fix overflowing filters + ([f022f9b](https://github.com/mittwald/flow/commit/f022f9bf84b626dbf8c5fcfbc069fd91b43a1fb3)) +- **Table:** fix scrollbar + ([64ba89b](https://github.com/mittwald/flow/commit/64ba89be22887a6850b7c4aa4d9ea0947735ae3d)) + +### Reverts + +- Revert "feat(Modal): add experimental "no-unmount"-feature" + ([3f45849](https://github.com/mittwald/flow/commit/3f458493a5779f11690453da0fc454b0b89c9314)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.278](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.278) (2024-10-10) ### Bug Fixes diff --git a/lerna.json b/lerna.json index d01f6874f..66005fbc9 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.278" + "version": "0.1.0-alpha.279" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0f36c569d..2a18b6330 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.279](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.279) (2024-10-10) + +### Bug Fixes + +- **List:** fix overflowing filters + ([f022f9b](https://github.com/mittwald/flow/commit/f022f9bf84b626dbf8c5fcfbc069fd91b43a1fb3)) +- **Table:** fix scrollbar + ([64ba89b](https://github.com/mittwald/flow/commit/64ba89be22887a6850b7c4aa4d9ea0947735ae3d)) + +### Reverts + +- Revert "feat(Modal): add experimental "no-unmount"-feature" + ([3f45849](https://github.com/mittwald/flow/commit/3f458493a5779f11690453da0fc454b0b89c9314)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.278](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.278) (2024-10-10) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 92f4e80a2..c3a8a98f2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.278", + "version": "0.1.0-alpha.279", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/components/src/components/List/components/Header/Header.module.css b/packages/components/src/components/List/components/Header/Header.module.css index 36c5942ce..d2d3ac0fa 100644 --- a/packages/components/src/components/List/components/Header/Header.module.css +++ b/packages/components/src/components/List/components/Header/Header.module.css @@ -14,8 +14,8 @@ .pickerList { display: flex; flex-grow: 9999; - flex-shrink: 0; - column-gap: var(--list--content-to-content-spacing); + flex-wrap: wrap; + gap: var(--list--content-to-content-spacing); } .searchAndActions { diff --git a/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx b/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx index 35bc95321..9cd7a92ae 100644 --- a/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx +++ b/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx @@ -4,7 +4,7 @@ import { useList } from "@/components/List/hooks/useList"; import styles from "./ActiveFilters.module.scss"; import { Text } from "@/components/Text"; import { Button } from "@/components/Button"; -import { IconSave } from "@/components/Icon/components/icons"; +import { IconDelete, IconSave } from "@/components/Icon/components/icons"; import locales from "../../../../locales/*.locale.json"; import { Translate } from "@/lib/react/components/Translate"; import { observer } from "mobx-react-lite"; @@ -68,6 +68,25 @@ export const ActiveFilters: FC = observer(() => { ) : undefined; + const removeAllFiltersButton = + activeFilters.length > 0 ? ( + + + list.filters.clear + + + + ) : undefined; + if ( activeFilters.length === 0 && !storeFiltersButton && @@ -81,6 +100,7 @@ export const ActiveFilters: FC = observer(() => { {activeFilters} {storeFiltersButton} {resetFiltersButton} + {removeAllFiltersButton} ); }); diff --git a/packages/components/src/components/List/locales/de-DE.locale.json b/packages/components/src/components/List/locales/de-DE.locale.json index 91bb1515b..72a7677f7 100644 --- a/packages/components/src/components/List/locales/de-DE.locale.json +++ b/packages/components/src/components/List/locales/de-DE.locale.json @@ -1,4 +1,5 @@ { + "list.filters.clear": "Filter entfernen", "list.filters.reset": "Filter zurücksetzen", "list.filters.store": "Filter speichern", "list.noResult.heading": "Keine Suchergebnisse gefunden", diff --git a/packages/components/src/components/List/locales/en-EN.locale.json b/packages/components/src/components/List/locales/en-EN.locale.json index 31d56cf0d..9b36f8e0f 100644 --- a/packages/components/src/components/List/locales/en-EN.locale.json +++ b/packages/components/src/components/List/locales/en-EN.locale.json @@ -1,4 +1,5 @@ { + "list.filters.clear": "Clear filters", "list.filters.reset": "Reset filters", "list.filters.store": "Store filters", "list.noResult.heading": "No search results found", diff --git a/packages/components/src/components/List/model/List.ts b/packages/components/src/components/List/model/List.ts index db44cf6c6..06a2645e5 100644 --- a/packages/components/src/components/List/model/List.ts +++ b/packages/components/src/components/List/model/List.ts @@ -181,6 +181,10 @@ export class List { return this.filters.forEach((f) => f.resetValues()); } + public clearFilters(): void { + return this.filters.forEach((f) => f.clear()); + } + public useIsEmpty(): boolean { return !this.loader.useIsLoading() && this.items.entries.length === 0; } diff --git a/packages/components/src/components/List/model/filter/Filter.ts b/packages/components/src/components/List/model/filter/Filter.ts index 61409d864..63de7e2fa 100644 --- a/packages/components/src/components/List/model/filter/Filter.ts +++ b/packages/components/src/components/List/model/filter/Filter.ts @@ -244,6 +244,11 @@ export class Filter, TMatchValue> { this.onFilterUpdateCallbacks.forEach((cb) => cb()); } + public clear(): void { + this.list.reactTable.getTableColumn(this.property).setFilterValue(null); + this.onFilterUpdateCallbacks.forEach((cb) => cb()); + } + public toggleValue(newValue: FilterValue): void { const currentValueAsArray = this.getArrayValue(); diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx index c9bcc7f26..312be1e66 100644 --- a/packages/components/src/components/List/stories/Default.stories.tsx +++ b/packages/components/src/components/List/stories/Default.stories.tsx @@ -69,6 +69,7 @@ const meta: Meta = { property="type" mode="all" name="Typ" + defaultSelected={["Domain"]} /> diff --git a/packages/components/src/components/Table/Table.module.scss b/packages/components/src/components/Table/Table.module.scss index e636d0486..a54bd37f1 100644 --- a/packages/components/src/components/Table/Table.module.scss +++ b/packages/components/src/components/Table/Table.module.scss @@ -52,4 +52,11 @@ text-align: start; vertical-align: top; } + + &.vertical-align-middle { + .cell, + .column { + vertical-align: middle; + } + } } diff --git a/packages/components/src/components/Table/Table.tsx b/packages/components/src/components/Table/Table.tsx index d9c15f37c..e6c86b693 100644 --- a/packages/components/src/components/Table/Table.tsx +++ b/packages/components/src/components/Table/Table.tsx @@ -4,12 +4,17 @@ import * as Aria from "react-aria-components"; import clsx from "clsx"; import styles from "./Table.module.scss"; -export type TableProps = Aria.TableProps; - +export type TableProps = Aria.TableProps & { + verticalAlign?: "top" | "middle"; +}; export const Table: FC = (props) => { - const { children, className, ...rest } = props; + const { children, className, verticalAlign = "top", ...rest } = props; - const rootClassName = clsx(styles.table, className); + const rootClassName = clsx( + styles.table, + styles[`vertical-align-${verticalAlign}`], + className, + ); return (
diff --git a/packages/components/src/components/Table/stories/Default.stories.tsx b/packages/components/src/components/Table/stories/Default.stories.tsx index d64874b43..e0f08135e 100644 --- a/packages/components/src/components/Table/stories/Default.stories.tsx +++ b/packages/components/src/components/Table/stories/Default.stories.tsx @@ -9,6 +9,7 @@ import { TableRow, } from "@/components/Table"; import { InlineCode } from "@/components/InlineCode"; +import { dummyText } from "@/lib/dev/dummyText"; import { TableFooterRow } from "@/components/Table/components/TableFooterRow"; const meta: Meta = { @@ -45,7 +46,7 @@ const meta: Meta = { m | s m - The size of the button + {dummyText.long}
@@ -58,6 +59,10 @@ type Story = StoryObj; export const Default: Story = {}; +export const VerticallyCenteredRows: Story = { + args: { verticalAlign: "middle" }, +}; + export const WithFooter: Story = { render: (props) => ( diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 1facf01c3..bed556a57 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.279](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.279) (2024-10-10) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.278](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.278) (2024-10-10) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 4325073f6..ecc16bbc7 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.278", + "version": "0.1.0-alpha.279", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/docs/src/content/02-foundations/structure/spacing/examples/falseSpacing.tsx b/packages/docs/src/content/02-foundations/structure/spacing/examples/falseSpacing.tsx new file mode 100644 index 000000000..3ef6cc345 --- /dev/null +++ b/packages/docs/src/content/02-foundations/structure/spacing/examples/falseSpacing.tsx @@ -0,0 +1,42 @@ +import { Initials } from "@mittwald/flow-react-components/Initials"; +import { Avatar } from "@mittwald/flow-react-components/Avatar"; +import { Text } from "@mittwald/flow-react-components/Text"; +import { Content } from "@mittwald/flow-react-components/Content"; + + +
+ + Sven Fuchs + +
+ + Sven Fuchs + + + Projektentwickler + +; diff --git a/packages/docs/src/content/02-foundations/structure/spacing/examples/rightSpacing.tsx b/packages/docs/src/content/02-foundations/structure/spacing/examples/rightSpacing.tsx new file mode 100644 index 000000000..52613da65 --- /dev/null +++ b/packages/docs/src/content/02-foundations/structure/spacing/examples/rightSpacing.tsx @@ -0,0 +1,42 @@ +import { Initials } from "@mittwald/flow-react-components/Initials"; +import { Avatar } from "@mittwald/flow-react-components/Avatar"; +import { Text } from "@mittwald/flow-react-components/Text"; +import { Content } from "@mittwald/flow-react-components/Content"; + + +
+ + Sven Fuchs + +
+ + Sven Fuchs + + + Projektentwickler + +; diff --git a/packages/docs/src/content/02-foundations/structure/spacing/index.mdx b/packages/docs/src/content/02-foundations/structure/spacing/index.mdx new file mode 100644 index 000000000..d298520e2 --- /dev/null +++ b/packages/docs/src/content/02-foundations/structure/spacing/index.mdx @@ -0,0 +1,2 @@ +Spacing definiert die vertikalen und horizontalen Abstände zwischen Elementen +und sorgt so für ein harmonisches Layout. diff --git a/packages/docs/src/content/02-foundations/structure/spacing/overview.mdx b/packages/docs/src/content/02-foundations/structure/spacing/overview.mdx new file mode 100644 index 000000000..e3ef3cf06 --- /dev/null +++ b/packages/docs/src/content/02-foundations/structure/spacing/overview.mdx @@ -0,0 +1,55 @@ +Die Spacings und generell alle Größen in Flow basieren auf 8-Pixel-Schritten. Da +jedoch oft kleinere Spacings als 8px benötigt werden, stehen zusätzlich feinere +Abstufungen von 4px und 2px zur Verfügung. Standardmäßig folgen alle Components +den definierten Spacings. Für ein optimales Spacing – das Einfluss auf das +Layout hat – sollten die Components +[ColumnLayout](/03-components/structure/column-layout) und +[Section](/03-components/structure/section) verwendet werden. + +## Best practices + +Um mit dem Spacing ein harmonisches Layout zu erschaffen, achte auf folgende +Punkte: + +- Verwende die Layout-Components + [ColumnLayout](/03-components/structure/column-layout) und + [Section](/03-components/structure/section), um dadurch das richtige vertikale + und horizontale Spacing zu erhalten. +- Spacing hilft bei der Gruppierung von Elementen auf Benutzeroberflächen. Je + geringer das Spacing zwischen den Elementen ist, desto größer ist das Gefühl + der Zusammengehörigkeit. +- Optisch kann es sinnvoll sein, das Spacing zwischen größeren Elementen größer + und zwischen kleineren Elementen kleiner zu wählen. + + + + Zwischen dem [Avatar](/03-components/content/avatar) und dem Namen und + Untertitel ist ein Spacing von 8px definiert, da diese Größe ein gutes + Zusammengehörigkeitsgefühl vermittelt. + + + Wenn das Spacing zu groß ist, fühlt sich der Avatar nicht mehr zum Namen und + Untertitel gehörig an. + + + +--- + +# Spacing-Tabelle + +Alle Spacings in der Tabelle können sowohl vertikal und horizontal verwendet +werden. Spacings werden in REM angegeben, wenn sie zwischen Elementen eingesetzt +werden, die ebenfalls in REM definiert sind. Dies ist zum Beispiel bei Text der +Fall, damit der Abstand beim Skalieren der Schriftgröße konsistent bleibt. +Zwischen zwei Elementen muss jedoch nicht zwingend ein Spacing verwendet werden, +da nicht immer ein Abstand erforderlich ist. + +| | Pixel | REM | (Vertical) Visual | +| ----- | ----- | --------- | -------------------------------------------------------------------------------------------------------- | +| `xxs` | 2px | 0,125 rem |
| +| `xs` | 4px | 0,25 rem |
| +| `s` | 8px | 0,5 rem |
| +| `m` | 16px | 1 rem |
| +| `l` | 24px | 1,5 rem |
| +| `xl` | 32px | 2 rem |
| +| `xxl` | 64px | 4 rem |
| diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index 0275c8459..827be78d6 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.279](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.279) (2024-10-10) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.278](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.278) (2024-10-10) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index c2eb2e03a..b1244b215 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.278", + "version": "0.1.0-alpha.279", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 914daced2..045f96339 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.279](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.279) (2024-10-10) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.278](https://github.com/mittwald/flow/compare/0.1.0-alpha.277...0.1.0-alpha.278) (2024-10-10) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 69cbaa49c..23bda1648 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.278", + "version": "0.1.0-alpha.279", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 3507c15528941d9bf3ae27a6fcc6978a36d20ebf Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 11:07:41 +0200 Subject: [PATCH 6/7] feat(List): add summary --- .../src/components/List/List.module.css | 3 +- .../components/src/components/List/List.tsx | 16 +++--- .../List/components/Table/Table.tsx | 2 - .../List/stories/Default.stories.tsx | 44 +++++---------- .../TableFooterRow/TableFooterRow.tsx | 11 ++-- .../src/components/propTypes/index.ts | 3 -- .../structure/list/examples/summary.tsx | 53 +++++++------------ .../03-components/structure/list/overview.mdx | 6 +-- 8 files changed, 46 insertions(+), 92 deletions(-) diff --git a/packages/components/src/components/List/List.module.css b/packages/components/src/components/List/List.module.css index b8a4eb384..1ac14819f 100644 --- a/packages/components/src/components/List/List.module.css +++ b/packages/components/src/components/List/List.module.css @@ -5,7 +5,8 @@ container-type: inline-size; :has(:global(.flow--list--list-summary)) { - :global(.flow--list--items) { + :global(.flow--list--items), + :global(.flow--list--table) { border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/packages/components/src/components/List/List.tsx b/packages/components/src/components/List/List.tsx index 33e18e743..26622ed19 100644 --- a/packages/components/src/components/List/List.tsx +++ b/packages/components/src/components/List/List.tsx @@ -155,9 +155,6 @@ export const List = flowComponent("List", (props) => { ListSummary: { tunnelId: "listSummary", }, - TableFooterRow: { - tunnelId: "tableFooterRow", - }, }; const hasActionGroup = !!deepFindOfType(children, ActionGroup); @@ -174,13 +171,12 @@ export const List = flowComponent("List", (props) => {
{children}
- {listModel.viewMode === "list" && ( -
- - -
- )} - {listModel.viewMode === "table" &&
} + +
+ + {listModel.viewMode === "list" && } + {listModel.viewMode === "table" &&
} +
diff --git a/packages/components/src/components/List/components/Table/Table.tsx b/packages/components/src/components/List/components/Table/Table.tsx index f7c4ba0ea..2d55cfe86 100644 --- a/packages/components/src/components/List/components/Table/Table.tsx +++ b/packages/components/src/components/List/components/Table/Table.tsx @@ -13,7 +13,6 @@ import { TableLoadingView } from "@/components/List/components/Table/components/ import styles from "./Table.module.css"; import clsx from "clsx"; import { EmptyView } from "@/components/List/components/EmptyView/EmptyView"; -import { TunnelExit } from "@mittwald/react-tunnel"; export const Table: FC = () => { const list = useList(); @@ -80,7 +79,6 @@ export const Table: FC = () => { ))} ))} - ); diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx index 312be1e66..7829c0821 100644 --- a/packages/components/src/components/List/stories/Default.stories.tsx +++ b/packages/components/src/components/List/stories/Default.stories.tsx @@ -16,7 +16,6 @@ import { ListItemView, ListSummary, typedList } from "@/components/List"; import { Button } from "@/components/Button"; import IconDownload from "@/components/Icon/components/icons/IconDownload"; import { ActionGroup } from "@/components/ActionGroup"; -import { TableCell, TableFooterRow } from "@/components/Table"; const loadDomains: AsyncDataLoader = async (opts) => { const response = await getDomains({ @@ -142,7 +141,11 @@ export const Default: Story = {}; export const WithSummary: Story = { render: () => { - const InvoiceList = typedList<{ id: string; amount: string }>(); + const InvoiceList = typedList<{ + id: string; + date: string; + amount: string; + }>(); return (
@@ -150,46 +153,23 @@ export const WithSummary: Story = { - Gesamtpreis: 42,00 € + total: 42,00 € - - - - - - - ID - Amount - - - - - - {(invoice) => invoice.id} - - - {(invoice) => invoice.amount} - - - - total - 41,00 € - - - {(invoice) => ( {invoice.id} - {invoice.amount} + + {invoice.date} - {invoice.amount} + )} diff --git a/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx b/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx index f8440126d..23dae95ec 100644 --- a/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx +++ b/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.tsx @@ -1,15 +1,10 @@ +import type { FC } from "react"; import React from "react"; import type { TableRowProps } from "../TableRow"; import { TableRow } from "../TableRow"; -import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; -import { flowComponent } from "@/lib/componentFactory/flowComponent"; -export interface TableFooterRowProps - extends FlowComponentProps, - TableRowProps {} - -export const TableFooterRow = flowComponent("TableFooterRow", (props) => { +export const TableFooterRow: FC = (props) => { return ; -}); +}; export default TableFooterRow; diff --git a/packages/components/src/components/propTypes/index.ts b/packages/components/src/components/propTypes/index.ts index 45de5538b..5f82889b9 100644 --- a/packages/components/src/components/propTypes/index.ts +++ b/packages/components/src/components/propTypes/index.ts @@ -50,7 +50,6 @@ import type { DateRangePickerProps } from "@/components/DateRangePicker"; import type { TimeFieldProps } from "@/components/TimeField"; import type { AlertIconProps } from "@/components/AlertIcon"; import type { ListSummaryProps } from "@/components/List/components/ListSummary/ListSummary"; -import type { TableFooterRowProps } from "@/components/Table/components/TableFooterRow/TableFooterRow"; export * from "./types"; @@ -102,7 +101,6 @@ export interface FlowComponentPropsTypes { Select: SelectProps; Slider: SliderProps; Switch: SwitchProps; - TableFooterRow: TableFooterRowProps; Tabs: TabsProps; TabTitle: TabsProps; Text: TextProps; @@ -162,7 +160,6 @@ const propsContextSupportingComponentsMap: Record< Select: true, Slider: true, Switch: true, - TableFooterRow: true, Tabs: true, TabTitle: true, TestComponent: true, diff --git a/packages/docs/src/content/03-components/structure/list/examples/summary.tsx b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx index b471b060f..c9d29acd1 100644 --- a/packages/docs/src/content/03-components/structure/list/examples/summary.tsx +++ b/packages/docs/src/content/03-components/structure/list/examples/summary.tsx @@ -9,6 +9,7 @@ import Text from "@mittwald/flow-react-components/Text"; export default () => { const InvoiceList = typedList<{ id: string; + date: string; amount: string; }>(); @@ -18,50 +19,36 @@ export default () => { - Gesamtpreis: 41,00 € + Gesamt: 41,00 € - - - - - - - - ID - - - Amount - - - - - - {(invoice) => invoice.id} - - - {(invoice) => invoice.amount} - - - - {(invoice) => ( {invoice.id} - {invoice.amount} + + {invoice.date} - {invoice.amount} + )} diff --git a/packages/docs/src/content/03-components/structure/list/overview.mdx b/packages/docs/src/content/03-components/structure/list/overview.mdx index 20c6f3b89..07a3c1899 100644 --- a/packages/docs/src/content/03-components/structure/list/overview.mdx +++ b/packages/docs/src/content/03-components/structure/list/overview.mdx @@ -56,7 +56,7 @@ Einträge nach. Diese Werte lassen sich über die `batchSize` Property anpassen. ## Summary -Verwende eine `` innerhalb der Liste, um eine Zusammenfassung, wir -beispielsweise die Summe der Beträge anzuzeigen. +Verwende eine `` um eine Zusammenfassung, wie beispielsweise die +Summe der Beträge, anzuzeigen. - + From 8a872ee53998dbbff34d551614881cb925f86c30 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 10 Oct 2024 11:32:26 +0200 Subject: [PATCH 7/7] feat(List): add summary --- .../components/List/components/ListSummary/ListSummary.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/List/components/ListSummary/ListSummary.tsx b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx index 85c4778ed..e8d65a534 100644 --- a/packages/components/src/components/List/components/ListSummary/ListSummary.tsx +++ b/packages/components/src/components/List/components/ListSummary/ListSummary.tsx @@ -12,9 +12,9 @@ export const ListSummary = flowComponent("ListSummary", (props) => { const { children } = props; return ( -
+
{children} -
+ ); });