diff --git a/package.json b/package.json index f19a2ad9..63640990 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.6d5cd62", + "version": "14.0.0-dev.99c9769", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx index a4f28592..f62e8d56 100644 --- a/src/core/Icon/Icon.stories.tsx +++ b/src/core/Icon/Icon.stories.tsx @@ -38,6 +38,7 @@ const coreIcons = [ "icon-gui-link-arrow", "icon-gui-live-chat", "icon-gui-minus", + "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", diff --git a/src/core/Table.tsx b/src/core/Table.tsx index 4e59e2ba..9d035b50 100644 --- a/src/core/Table.tsx +++ b/src/core/Table.tsx @@ -7,6 +7,7 @@ import { CtaCell, Supported, Unsupported, + Partial, } from "./Table/TableCell"; export default { @@ -21,4 +22,5 @@ export default { Header: TableHeader, Supported, Unsupported, + Partial, }; diff --git a/src/core/Table/Table.tsx b/src/core/Table/Table.tsx index 42bbe647..1d5726d7 100644 --- a/src/core/Table/Table.tsx +++ b/src/core/Table/Table.tsx @@ -1,28 +1,57 @@ -import React, { PropsWithChildren, ReactElement, cloneElement } from "react"; +import React, { + PropsWithChildren, + ReactElement, + TableHTMLAttributes, + cloneElement, +} from "react"; type TableProps = { id?: string; }; -export const Table = ({ id, children }: PropsWithChildren) => ( - +export const Table = ({ + id, + children, + ...rest +}: PropsWithChildren>) => ( +
{children}
); -export const TableBody = ({ children }: PropsWithChildren) => ( - {children} +export const TableBody = ({ + children, + ...rest +}: PropsWithChildren>) => ( + {children} ); -export const TableHeader = ({ children }: PropsWithChildren) => ( - +export const TableHeader = ({ + children, + ...rest +}: PropsWithChildren>) => ( + {cloneElement(children as ReactElement, { isHeader: true })} ); -export const TableRowHeader = ({ children }: PropsWithChildren) => ( +export const TableRowHeader = ({ + children, + ...rest +}: PropsWithChildren>) => ( {cloneElement(children as ReactElement, { isRowHeader: true })} diff --git a/src/core/Table/TableCell.tsx b/src/core/Table/TableCell.tsx index fba944a6..93570bf0 100644 --- a/src/core/Table/TableCell.tsx +++ b/src/core/Table/TableCell.tsx @@ -25,13 +25,22 @@ const Unsupported = () => ( /> ); +const Partial = () => ( + +); + const LabelCell = ({ children, ...rest }: PropsWithChildren>) => { const classes = ` ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${ - rest.className ?? "" + rest?.className ?? "" } `; @@ -56,7 +65,7 @@ const TableCell = ({ ? "rounded-l-none rounded-r sm:rounded-lg py-20 px-24" : "py-6" } - ${rest.className ?? ""} + ${rest?.className ?? ""} `} > {children} @@ -67,7 +76,12 @@ const HeaderCell = ({ children, ...rest }: PropsWithChildren>) => ( - + {children} ); @@ -76,9 +90,20 @@ const CtaCell = ({ children, ...rest }: PropsWithChildren>) => ( - + {children} ); -export { TableCell, LabelCell, HeaderCell, CtaCell, Supported, Unsupported }; +export { + TableCell, + LabelCell, + HeaderCell, + CtaCell, + Supported, + Unsupported, + Partial, +}; diff --git a/src/core/Tooltip.tsx b/src/core/Tooltip.tsx index ae92ec8b..736f2ea4 100644 --- a/src/core/Tooltip.tsx +++ b/src/core/Tooltip.tsx @@ -1,6 +1,24 @@ -import React, { PropsWithChildren, useEffect, useRef, useState } from "react"; +import React, { + ButtonHTMLAttributes, + HTMLAttributes, + PropsWithChildren, + useEffect, + useRef, + useState, +} from "react"; import Icon from "./Icon"; -const Tooltip = ({ children }: PropsWithChildren) => { + +type TooltipProps = { + triggerProps?: ButtonHTMLAttributes; + tooltipProps?: HTMLAttributes; +} & HTMLAttributes; + +const Tooltip = ({ + children, + triggerProps, + tooltipProps, + ...rest +}: PropsWithChildren) => { const [open, setOpen] = useState(false); const [position, setPosition] = useState({ x: 0, y: 0 }); const offset = 8; @@ -26,21 +44,28 @@ const Tooltip = ({ children }: PropsWithChildren) => { }, [open]); return ( -
+
{open ? (
{ left: -position.x, boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)", }} + {...tooltipProps} + className={`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${ + tooltipProps?.className ?? "" + }`} >
{children}
diff --git a/src/core/icons/icon-gui-partial.svg b/src/core/icons/icon-gui-partial.svg new file mode 100644 index 00000000..9cda5ac6 --- /dev/null +++ b/src/core/icons/icon-gui-partial.svg @@ -0,0 +1,4 @@ + + + +