From 582541dd4df4b1b0262efdaea0f5ad33679d194f Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 8 May 2024 12:06:33 +0100 Subject: [PATCH 1/9] chore: remove supported/unsupported/partial from Table exports --- src/core/Table.tsx | 13 +----------- src/core/Table/TableCell.tsx | 40 +----------------------------------- src/core/Table/data.tsx | 22 +++++++++++++++++++- 3 files changed, 23 insertions(+), 52 deletions(-) diff --git a/src/core/Table.tsx b/src/core/Table.tsx index 9d035b501..a077f77d0 100644 --- a/src/core/Table.tsx +++ b/src/core/Table.tsx @@ -1,14 +1,6 @@ import { Table, TableRowHeader, TableHeader, TableBody } from "./Table/Table"; import { TableRow } from "./Table/TableRow"; -import { - TableCell, - LabelCell, - HeaderCell, - CtaCell, - Supported, - Unsupported, - Partial, -} from "./Table/TableCell"; +import { TableCell, LabelCell, HeaderCell, CtaCell } from "./Table/TableCell"; export default { Root: Table, @@ -20,7 +12,4 @@ export default { RowHeader: TableRowHeader, Body: TableBody, Header: TableHeader, - Supported, - Unsupported, - Partial, }; diff --git a/src/core/Table/TableCell.tsx b/src/core/Table/TableCell.tsx index 3a6476868..ccde4b875 100644 --- a/src/core/Table/TableCell.tsx +++ b/src/core/Table/TableCell.tsx @@ -1,39 +1,9 @@ import React, { PropsWithChildren } from "react"; -import Icon from "../Icon"; type TableCellProps = { isRowHeader?: boolean; } & React.TdHTMLAttributes; -const Supported = () => ( - -); - -const Unsupported = () => ( - -); - -const Partial = () => ( - -); - const LabelCell = ({ children, ...rest @@ -98,12 +68,4 @@ const CtaCell = ({ ); -export { - TableCell, - LabelCell, - HeaderCell, - CtaCell, - Supported, - Unsupported, - Partial, -}; +export { TableCell, LabelCell, HeaderCell, CtaCell }; diff --git a/src/core/Table/data.tsx b/src/core/Table/data.tsx index 0a09bb566..6ec86d0fa 100644 --- a/src/core/Table/data.tsx +++ b/src/core/Table/data.tsx @@ -1,8 +1,28 @@ import React, { Fragment } from "react"; import Tooltip from "../Tooltip"; -import { Supported, Unsupported } from "./TableCell"; import Table from "../Table"; +import Icon from "../Icon"; + +const Supported = () => ( + +); + +const Unsupported = () => ( + +); const testRow = (index) => ({ label: `Label ${index + 1}`, From 711dbb7ffa2835d7b75e196298260a33ccf70d02 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 8 May 2024 12:38:07 +0100 Subject: [PATCH 2/9] chore: take off Expander active/focus css states (design request) --- src/core/Expander.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Expander.tsx b/src/core/Expander.tsx index c63fc21b6..853ac8395 100644 --- a/src/core/Expander.tsx +++ b/src/core/Expander.tsx @@ -51,7 +51,7 @@ const Expander = ({ onClick={() => setExpanded(!expanded)} onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)} tabIndex={0} - className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus" + className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light" > {expanded ? "View less -" : "View all +"} From bef5e0f098c10b81dcb21d3ecc1e120ed6401052 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 9 May 2024 14:47:00 +0100 Subject: [PATCH 3/9] chore: remove auto negative top from table header row --- src/core/Table/Table.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/Table/Table.tsx b/src/core/Table/Table.tsx index 1d5726d72..7cb5acaa3 100644 --- a/src/core/Table/Table.tsx +++ b/src/core/Table/Table.tsx @@ -52,7 +52,6 @@ export const TableRowHeader = ({ className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${ rest?.className ?? "" }`} - style={{ top: "4rem" }} > {cloneElement(children as ReactElement, { isRowHeader: true })} From 05d35fa8569e5333ab977d6734aa440e974cb93d Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 9 May 2024 15:45:07 +0100 Subject: [PATCH 4/9] feat: continuous scrolling for Slider navigation, no opacity animation, lifted pagination position --- src/core/Slider.tsx | 42 +++++++++++++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx index 3c2ee1235..721898079 100644 --- a/src/core/Slider.tsx +++ b/src/core/Slider.tsx @@ -18,6 +18,8 @@ interface SliderIndicatorProps { isInline?: boolean; } +const SLIDE_TRANSITION_LENGTH = 500; + const SlideIndicator = ({ numSlides, activeIndex, @@ -28,7 +30,7 @@ const SlideIndicator = ({ return (
    {Array.from({ length: numSlides }, (_, i) => @@ -63,16 +65,27 @@ const SlideIndicator = ({ ); }; +const setupSlides = (children: ReactNode[], activeIndex: number) => [ + children[activeIndex === 0 ? children.length - 1 : activeIndex - 1], + children[activeIndex], + children[activeIndex === children.length - 1 ? 0 : activeIndex + 1], +]; + const Slider = ({ children, options }: SliderProps) => { const [activeIndex, setActiveIndex] = useState(0); const [touchStartX, setTouchStartX] = useState(0); const [touchEndX, setTouchEndX] = useState(0); + const [slides, setSlides] = useState( + setupSlides(children, activeIndex) + ); + const [translationCoefficient, setTranslationCoefficient] = useState(0); const timerRef = useRef(null); const isInline = options?.controlPosition === "inline"; const next = () => { setActiveIndex((prevIndex) => (prevIndex + 1) % children.length); + setTranslationCoefficient(1); resetInterval(); }; @@ -80,6 +93,7 @@ const Slider = ({ children, options }: SliderProps) => { setActiveIndex((prevIndex) => prevIndex > 0 ? prevIndex - 1 : children.length - 1 ); + setTranslationCoefficient(-1); resetInterval(); }; @@ -112,6 +126,13 @@ const Slider = ({ children, options }: SliderProps) => { }; }, [children.length, options?.interval]); + useEffect(() => { + setTimeout(() => { + setSlides(setupSlides(children, activeIndex)); + setTranslationCoefficient(0); + }, SLIDE_TRANSITION_LENGTH); + }, [activeIndex]); + return (
    { >
    - {children.map((child, index) => ( + {slides.map((child, index) => (
    {child}
    @@ -141,7 +165,7 @@ const Slider = ({ children, options }: SliderProps) => {
    From 334629ab0855e0dd53c2207c97a0e04ad8b1db4b Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 10 May 2024 14:20:54 +0100 Subject: [PATCH 5/9] chore: remove bg assertion from Table RowHeader --- src/core/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Table/Table.tsx b/src/core/Table/Table.tsx index 7cb5acaa3..cc8b5fea1 100644 --- a/src/core/Table/Table.tsx +++ b/src/core/Table/Table.tsx @@ -49,7 +49,7 @@ export const TableRowHeader = ({ ...rest }: PropsWithChildren>) => ( From ae75f492ee46565e5f2a0c1c739a2a10e84c0298 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Mon, 13 May 2024 18:13:28 +0100 Subject: [PATCH 6/9] chore: add classname overrides to Accordion outer element --- src/core/Accordion.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx index 1201a33ed..27e22d6c0 100644 --- a/src/core/Accordion.tsx +++ b/src/core/Accordion.tsx @@ -25,6 +25,7 @@ export type AccordionProps = { bottomBorder?: boolean; id?: string; autoClose?: boolean; + className?: string; }; const AccordionRow = ({ @@ -104,6 +105,7 @@ const Accordion = ({ bottomBorder, arrowIcon, autoClose, + className, }: AccordionProps) => { const [activeIndexes, setActiveIndexes] = useState([]); @@ -122,7 +124,7 @@ const Accordion = ({ }; return ( -
    +
    {data.map((item, currentIndex) => { return ( Date: Mon, 13 May 2024 18:15:02 +0100 Subject: [PATCH 7/9] Publish v14.0.0-dev.ae75f49 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3d64ff014..8db0f9710 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.2944826", + "version": "14.0.0-dev.ae75f49", "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", From 450e3028d09cc1ec55dda02a813b6629eb5c6def Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 14 May 2024 14:13:52 +0100 Subject: [PATCH 8/9] fix: add slide lock to stabilise slider transitions --- src/core/Slider.tsx | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx index 721898079..2196384cf 100644 --- a/src/core/Slider.tsx +++ b/src/core/Slider.tsx @@ -18,7 +18,7 @@ interface SliderIndicatorProps { isInline?: boolean; } -const SLIDE_TRANSITION_LENGTH = 500; +const SLIDE_TRANSITION_LENGTH = 300; const SlideIndicator = ({ numSlides, @@ -80,21 +80,28 @@ const Slider = ({ children, options }: SliderProps) => { ); const [translationCoefficient, setTranslationCoefficient] = useState(0); const timerRef = useRef(null); + const [slideLock, setSlideLock] = useState(false); const isInline = options?.controlPosition === "inline"; const next = () => { - setActiveIndex((prevIndex) => (prevIndex + 1) % children.length); - setTranslationCoefficient(1); - resetInterval(); + if (!slideLock) { + setActiveIndex((prevIndex) => (prevIndex + 1) % children.length); + setTranslationCoefficient(1); + resetInterval(); + setSlideLock(true); + } }; const prev = () => { - setActiveIndex((prevIndex) => - prevIndex > 0 ? prevIndex - 1 : children.length - 1 - ); - setTranslationCoefficient(-1); - resetInterval(); + if (!slideLock) { + setActiveIndex((prevIndex) => + prevIndex > 0 ? prevIndex - 1 : children.length - 1 + ); + setTranslationCoefficient(-1); + resetInterval(); + setSlideLock(true); + } }; const resetInterval = () => { @@ -130,6 +137,7 @@ const Slider = ({ children, options }: SliderProps) => { setTimeout(() => { setSlides(setupSlides(children, activeIndex)); setTranslationCoefficient(0); + setSlideLock(false); }, SLIDE_TRANSITION_LENGTH); }, [activeIndex]); From a59916dc15f11d670df9f65347db14ff0a9deab3 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 14 May 2024 14:14:14 +0100 Subject: [PATCH 9/9] Publish v14.0.0-dev.450e302 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8db0f9710..7611bf8fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.ae75f49", + "version": "14.0.0-dev.450e302", "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",