From 7f40fb6668c6f4eb619bca756dae9aef992d9e4b Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 28 Aug 2025 11:10:45 +0200 Subject: [PATCH 1/9] Fix paginator component responsiveness --- .../lib/src/paginator/Paginator.stories.tsx | 18 ++++ packages/lib/src/paginator/Paginator.tsx | 90 +++++++++++++++++++ 2 files changed, 108 insertions(+) diff --git a/packages/lib/src/paginator/Paginator.stories.tsx b/packages/lib/src/paginator/Paginator.stories.tsx index 76593dd4c..65e640d37 100644 --- a/packages/lib/src/paginator/Paginator.stories.tsx +++ b/packages/lib/src/paginator/Paginator.stories.tsx @@ -8,6 +8,16 @@ export default { component: DxcPaginator, } as Meta; +const customViewports = { + resizedScreen: { + name: "Custom viewport", + styles: { + width: "481px", + height: "1600px", + }, + }, +}; + const Paginator = () => ( <> @@ -67,3 +77,11 @@ type Story = StoryObj; export const Chromatic: Story = { render: Paginator, }; + +export const ResponsivePaginator: Story = { + render: Paginator, + parameters: { + viewport: { viewports: customViewports, defaultViewport: "resizedScreen" }, + chromatic: { viewports: [481] }, + }, +}; diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index cf89b8969..fd303e4f4 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -4,6 +4,7 @@ import DxcButton from "../button/Button"; import DxcSelect from "../select/Select"; import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; +import { responsiveSizes } from "../common/variables"; const DxcPaginator = ({ currentPage = 1, @@ -39,6 +40,23 @@ const DxcPaginator = ({ background-color: var(--color-bg-neutral-lighter); color: var(--color-fg-neutral-dark); padding: var(--spacing-padding-xs) var(--spacing-padding-xl); + + @media (max-width: ${responsiveSizes.medium}rem) { + justify-content: center; + flex-direction: column; + row-gap: var(--spacing-gap-s); + column-gap: var(--spacing-gap-l); + padding: var(--spacing-padding-s) var(--spacing-padding-l); + } + + @media (max-width: ${responsiveSizes.small}rem) { + padding: var(--spacing-padding-xs) var(--spacing-padding-s); + row-gap: var(--spacing-gap-xs); + } + + @media (max-width: ${responsiveSizes.xsmall}rem) { + padding: var(--spacing-padding-xs); + } `; const ItemsPerPageContainer = styled.span` @@ -46,32 +64,104 @@ const DxcPaginator = ({ align-items: center; gap: var(--spacing-gap-s); margin-right: var(--spacing-gap-ml); + + @media (max-width: ${responsiveSizes.medium}rem) { + width: 100%; + justify-content: center; + margin-right: 0; + order: 1; + gap: var(--spacing-gap-s); + text-align: center; + } `; const SelectContainer = styled.div` min-width: 6.25rem; + + @media (max-width: ${responsiveSizes.medium}rem) { + min-width: 5rem; + } + + @media (max-width: ${responsiveSizes.small}rem) { + min-width: 4rem; + width: 100%; + max-width: 60px; + } `; const TotalItemsContainer = styled.span` margin-right: var(--spacing-gap-xxl); + + @media (max-width: ${responsiveSizes.medium}rem) { + margin-right: 0; + order: 2; + text-align: center; + } + + @media (max-width: ${responsiveSizes.small}rem) { + margin-bottom: var(--spacing-gap-xs); + } `; const GoToPageContainer = styled.div` display: flex; align-items: center; gap: var(--spacing-gap-ml); + + @media (max-width: ${responsiveSizes.medium}rem) { + max-width: 100%; + gap: var(--spacing-gap-l); + order: 3; + } + + @media (max-width: ${responsiveSizes.small}rem) { + flex-wrap: wrap; + justify-content: space-around; + width: 100%; + } + + @media (max-width: ${responsiveSizes.xsmall}rem) { + gap: var(--spacing-gap-xs); + } `; const ButtonsContainer = styled.div` display: flex; align-items: center; gap: var(--spacing-gap-s); + flex-shrink: 0; + + @media (max-width: ${responsiveSizes.small}rem) { + gap: var(--spacing-gap-xs); + justify-content: center; + } + + @media (max-width: ${responsiveSizes.xsmall}rem) { + flex-wrap: wrap; + gap: 4px; + } `; const PageToSelectContainer = styled.span` display: flex; align-items: center; gap: var(--spacing-gap-s); + flex-shrink: 0; + + @media (max-width: ${responsiveSizes.medium}rem) { + justify-content: center; + margin-right: 0; + gap: var(--spacing-gap-s); + text-align: center; + } + + @media (max-width: ${responsiveSizes.small}rem) { + width: 100%; + order: -1; + gap: var(--spacing-gap-xs); + width: 100%; + margin-bottom: var(--spacing-gap-s); + } `; return ( From 2f8741337d6435d6c9a9bd8e260f1a17ec3135e7 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 28 Aug 2025 14:48:06 +0200 Subject: [PATCH 2/9] Fix media querys into width props depending on the father element and re-design of page selector --- .../lib/src/paginator/Paginator.stories.tsx | 4 +- packages/lib/src/paginator/Paginator.tsx | 209 ++++++------------ 2 files changed, 70 insertions(+), 143 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.stories.tsx b/packages/lib/src/paginator/Paginator.stories.tsx index 65e640d37..4bf6702b3 100644 --- a/packages/lib/src/paginator/Paginator.stories.tsx +++ b/packages/lib/src/paginator/Paginator.stories.tsx @@ -12,7 +12,7 @@ const customViewports = { resizedScreen: { name: "Custom viewport", styles: { - width: "481px", + width: "400px", height: "1600px", }, }, @@ -82,6 +82,6 @@ export const ResponsivePaginator: Story = { render: Paginator, parameters: { viewport: { viewports: customViewports, defaultViewport: "resizedScreen" }, - chromatic: { viewports: [481] }, + chromatic: { viewports: [400] }, }, }; diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index fd303e4f4..acf03e1f4 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -1,10 +1,66 @@ -import { useContext } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import DxcButton from "../button/Button"; import DxcSelect from "../select/Select"; import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; import { responsiveSizes } from "../common/variables"; +import useWidth from "../utils/useWidth"; + +const DxcPaginatorContainer = styled.div<{ width: number }>` + display: flex; + justify-content: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "center" : "flex-end")}; + flex-wrap: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "wrap" : "nowrap")}; + gap: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "var(--spacing-gap-s)" : "0")}; + align-items: center; + width: 100%; + min-height: 48px; + box-sizing: border-box; + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + background-color: var(--color-bg-neutral-lighter); + color: var(--color-fg-neutral-dark); + padding: var(--spacing-padding-xs) var(--spacing-padding-xl); +`; + +const ItemsPerPageContainer = styled.span<{ width: number }>` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + margin-right: ${({ width }) => + width && width <= Number(responsiveSizes.medium) * 16 ? "0" : "var(--spacing-gap-ml)"}; +`; + +const SelectContainer = styled.div` + min-width: 6.25rem; +`; + +const TotalItemsContainer = styled.span<{ width: number }>` + margin-right: ${({ width }) => + width && width <= Number(responsiveSizes.medium) * 16 ? "0" : "var(--spacing-gap-xxl)"}; +`; + +const GoToPageContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-ml); +`; + +const ButtonsContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + flex-shrink: 0; +`; + +const PageToSelectContainer = styled.span<{ width: number }>` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + flex-shrink: 0; + flex-wrap: wrap; +`; const DxcPaginator = ({ currentPage = 1, @@ -27,147 +83,18 @@ const DxcPaginator = ({ const translatedLabels = useContext(HalstackLanguageContext); - const DxcPaginatorContainer = styled.div` - display: flex; - justify-content: flex-end; - align-items: center; - width: 100%; - min-height: 48px; - box-sizing: border-box; - font-family: var(--typography-font-family); - font-size: var(--typography-label-m); - font-weight: var(--typography-label-regular); - background-color: var(--color-bg-neutral-lighter); - color: var(--color-fg-neutral-dark); - padding: var(--spacing-padding-xs) var(--spacing-padding-xl); + const containerRef = useRef(null); + const width = useWidth(containerRef.current); - @media (max-width: ${responsiveSizes.medium}rem) { - justify-content: center; - flex-direction: column; - row-gap: var(--spacing-gap-s); - column-gap: var(--spacing-gap-l); - padding: var(--spacing-padding-s) var(--spacing-padding-l); - } - - @media (max-width: ${responsiveSizes.small}rem) { - padding: var(--spacing-padding-xs) var(--spacing-padding-s); - row-gap: var(--spacing-gap-xs); - } - - @media (max-width: ${responsiveSizes.xsmall}rem) { - padding: var(--spacing-padding-xs); - } - `; - - const ItemsPerPageContainer = styled.span` - display: flex; - align-items: center; - gap: var(--spacing-gap-s); - margin-right: var(--spacing-gap-ml); - - @media (max-width: ${responsiveSizes.medium}rem) { - width: 100%; - justify-content: center; - margin-right: 0; - order: 1; - gap: var(--spacing-gap-s); - text-align: center; - } - `; - - const SelectContainer = styled.div` - min-width: 6.25rem; - - @media (max-width: ${responsiveSizes.medium}rem) { - min-width: 5rem; - } - - @media (max-width: ${responsiveSizes.small}rem) { - min-width: 4rem; - width: 100%; - max-width: 60px; - } - `; - - const TotalItemsContainer = styled.span` - margin-right: var(--spacing-gap-xxl); - - @media (max-width: ${responsiveSizes.medium}rem) { - margin-right: 0; - order: 2; - text-align: center; - } - - @media (max-width: ${responsiveSizes.small}rem) { - margin-bottom: var(--spacing-gap-xs); - } - `; - - const GoToPageContainer = styled.div` - display: flex; - align-items: center; - gap: var(--spacing-gap-ml); - - @media (max-width: ${responsiveSizes.medium}rem) { - max-width: 100%; - gap: var(--spacing-gap-l); - order: 3; - } - - @media (max-width: ${responsiveSizes.small}rem) { - flex-wrap: wrap; - justify-content: space-around; - width: 100%; - } - - @media (max-width: ${responsiveSizes.xsmall}rem) { - gap: var(--spacing-gap-xs); - } - `; - - const ButtonsContainer = styled.div` - display: flex; - align-items: center; - gap: var(--spacing-gap-s); - flex-shrink: 0; - - @media (max-width: ${responsiveSizes.small}rem) { - gap: var(--spacing-gap-xs); - justify-content: center; - } - - @media (max-width: ${responsiveSizes.xsmall}rem) { - flex-wrap: wrap; - gap: 4px; - } - `; - - const PageToSelectContainer = styled.span` - display: flex; - align-items: center; - gap: var(--spacing-gap-s); - flex-shrink: 0; - - @media (max-width: ${responsiveSizes.medium}rem) { - justify-content: center; - margin-right: 0; - gap: var(--spacing-gap-s); - text-align: center; - } - - @media (max-width: ${responsiveSizes.small}rem) { - width: 100%; - order: -1; - gap: var(--spacing-gap-xs); - width: 100%; - margin-bottom: var(--spacing-gap-s); - } - `; + const [refAquired, setRefAquired] = useState(false); + useEffect(() => { + setRefAquired(true); + }, []); return ( - + {itemsPerPageOptions && ( - + {translatedLabels.paginator.itemsPerPageText} )} - + {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} @@ -217,8 +144,8 @@ const DxcPaginator = ({ )} {showGoToPage ? ( - - {translatedLabels.paginator.goToPageText} + + {width >= Number(responsiveSizes.small) * 16 && {translatedLabels.paginator.goToPageText}} ({ From 57eb66181a1c40ffb4e0e4c71f19ecd731eb0894 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 11:40:06 +0200 Subject: [PATCH 3/9] Fix useWidth function --- packages/lib/src/paginator/Paginator.tsx | 12 +++------ packages/lib/src/utils/useWidth.ts | 31 +++++++++++++----------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index acf03e1f4..396b6e5c9 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -83,13 +83,7 @@ const DxcPaginator = ({ const translatedLabels = useContext(HalstackLanguageContext); - const containerRef = useRef(null); - const width = useWidth(containerRef.current); - - const [refAquired, setRefAquired] = useState(false); - useEffect(() => { - setRefAquired(true); - }, []); + const [containerRef, width] = useWidth(); return ( @@ -145,7 +139,9 @@ const DxcPaginator = ({ )} {showGoToPage ? ( - {width >= Number(responsiveSizes.small) * 16 && {translatedLabels.paginator.goToPageText}} + {!onPageChange && width >= Number(responsiveSizes.small) * 16 && ( + {translatedLabels.paginator.goToPageText} + )} ({ diff --git a/packages/lib/src/utils/useWidth.ts b/packages/lib/src/utils/useWidth.ts index a17ff906f..0d555422b 100644 --- a/packages/lib/src/utils/useWidth.ts +++ b/packages/lib/src/utils/useWidth.ts @@ -1,31 +1,34 @@ -import { useLayoutEffect, useState } from "react"; +import { useCallback, useRef, useState } from "react"; /** * Custom hook to get the width of an element and keep it updated when it changes. - * @param target - * @returns + * @param target + * @returns */ -const useWidth = (target: T | null) => { +const useWidth = () => { const [width, setWidth] = useState(0); + const observerRef = useRef(null); - useLayoutEffect(() => { - if (target != null) { + const ref = useCallback((target: T | null) => { + if (observerRef.current) { + observerRef.current.disconnect(); + observerRef.current = null; + } + + if (target) { setWidth(target.getBoundingClientRect().width); const triggerObserver = new ResizeObserver((entries) => { const rect = entries[0]?.target.getBoundingClientRect(); - if (rect) { - setWidth(rect.width); - } + if (rect) setWidth(rect.width); }); + triggerObserver.observe(target); - return () => { - triggerObserver.unobserve(target); - }; + observerRef.current = triggerObserver; } - }, [target]); + }, []); - return width; + return [ref, width] as const; }; export default useWidth; From 5132891755165052270a4a8a5d2cb99d22f6bec3 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 13:16:36 +0200 Subject: [PATCH 4/9] Fix useWidth to be compatible with all the use cases from the other components --- packages/lib/src/dropdown/Dropdown.tsx | 2 +- packages/lib/src/paginator/Paginator.tsx | 4 +++- packages/lib/src/select/Select.tsx | 2 +- packages/lib/src/tabs/Tabs.tsx | 2 +- packages/lib/src/text-input/TextInput.tsx | 2 +- packages/lib/src/utils/useWidth.ts | 27 +++++++++++------------ 6 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 654046628..90084ed57 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -134,7 +134,7 @@ const DxcDropdown = ({ const triggerRef = useRef(null); const menuRef = useRef(null); - const width = useWidth(triggerRef.current); + const width = useWidth(triggerRef); const handleOnOpenMenu = () => { changeIsOpen(true); diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 396b6e5c9..fa6dd10d1 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -83,7 +83,9 @@ const DxcPaginator = ({ const translatedLabels = useContext(HalstackLanguageContext); - const [containerRef, width] = useWidth(); + const containerRef = useRef(null); + const width = useWidth(containerRef); + console.log(containerRef, width); return ( diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 13aac549b..afce7df42 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -211,7 +211,7 @@ const DxcSelect = forwardRef( const selectRef = useRef(null); const selectSearchInputRef = useRef(null); - const width = useWidth(selectRef.current); + const width = useWidth(selectRef); const translatedLabels = useContext(HalstackLanguageContext); const optionalItem = useMemo(() => ({ label: placeholder, value: "" }), [placeholder]); diff --git a/packages/lib/src/tabs/Tabs.tsx b/packages/lib/src/tabs/Tabs.tsx index 3d6d3dce1..06b6831a9 100644 --- a/packages/lib/src/tabs/Tabs.tsx +++ b/packages/lib/src/tabs/Tabs.tsx @@ -112,7 +112,7 @@ const DxcTabs = ({ children, iconPosition = "left", margin, tabIndex = 0 }: Tabs const refTabListContainer = useRef(null); const refTabList = useRef(null); const translatedLabels = useContext(HalstackLanguageContext); - const viewWidth = useWidth(refTabList.current); + const viewWidth = useWidth(refTabList); const contextValue = useMemo(() => { const focusedChild = innerFocusIndex != null ? childrenArray[innerFocusIndex] : null; return { diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 1b101c748..9299563f1 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -151,7 +151,7 @@ const DxcTextInput = forwardRef( const [isAutosuggestError, changeIsAutosuggestError] = useState(false); const [filteredSuggestions, changeFilteredSuggestions] = useState([]); const [visualFocusIndex, changeVisualFocusIndex] = useState(-1); - const width = useWidth(inputContainerRef.current); + const width = useWidth(inputContainerRef); const getNumberErrorMessage = (checkedValue: number) => numberInputContext?.minNumber != null && checkedValue < numberInputContext?.minNumber diff --git a/packages/lib/src/utils/useWidth.ts b/packages/lib/src/utils/useWidth.ts index 0d555422b..aa4071ac4 100644 --- a/packages/lib/src/utils/useWidth.ts +++ b/packages/lib/src/utils/useWidth.ts @@ -1,34 +1,33 @@ -import { useCallback, useRef, useState } from "react"; +import { useLayoutEffect, useState } from "react"; /** * Custom hook to get the width of an element and keep it updated when it changes. * @param target * @returns */ -const useWidth = () => { +const useWidth = (ref: React.RefObject) => { const [width, setWidth] = useState(0); - const observerRef = useRef(null); - const ref = useCallback((target: T | null) => { - if (observerRef.current) { - observerRef.current.disconnect(); - observerRef.current = null; - } + useLayoutEffect(() => { + const target = ref?.current; - if (target) { + if (target != null) { setWidth(target.getBoundingClientRect().width); const triggerObserver = new ResizeObserver((entries) => { const rect = entries[0]?.target.getBoundingClientRect(); - if (rect) setWidth(rect.width); + if (rect) { + setWidth(rect.width); + } }); - triggerObserver.observe(target); - observerRef.current = triggerObserver; + return () => { + triggerObserver.unobserve(target); + }; } - }, []); + }, [ref]); - return [ref, width] as const; + return width; }; export default useWidth; From beb2f97156cb0efba1111844f35f51dcd1e0bc39 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 14:00:43 +0200 Subject: [PATCH 5/9] Fix Go to page test error --- packages/lib/src/paginator/Paginator.test.tsx | 4 ---- packages/lib/src/paginator/Paginator.tsx | 3 +-- packages/lib/src/utils/useWidth.ts | 2 +- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.test.tsx b/packages/lib/src/paginator/Paginator.test.tsx index 4902eba8b..a9a943b5d 100644 --- a/packages/lib/src/paginator/Paginator.test.tsx +++ b/packages/lib/src/paginator/Paginator.test.tsx @@ -15,10 +15,6 @@ import DxcPaginator from "./Paginator"; disconnect() {} }; -(global as any).DOMRect = { - fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }), -}; - describe("Paginator component tests", () => { test("Paginator renders with default values", () => { const { getByText } = render(); diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index fa6dd10d1..c6393950d 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -85,7 +85,6 @@ const DxcPaginator = ({ const containerRef = useRef(null); const width = useWidth(containerRef); - console.log(containerRef, width); return ( @@ -141,7 +140,7 @@ const DxcPaginator = ({ )} {showGoToPage ? ( - {!onPageChange && width >= Number(responsiveSizes.small) * 16 && ( + {(width >= Number(responsiveSizes.small) * 16 || !onPageChange) && ( {translatedLabels.paginator.goToPageText} )} diff --git a/packages/lib/src/utils/useWidth.ts b/packages/lib/src/utils/useWidth.ts index aa4071ac4..9a408e8d7 100644 --- a/packages/lib/src/utils/useWidth.ts +++ b/packages/lib/src/utils/useWidth.ts @@ -25,7 +25,7 @@ const useWidth = (ref: React.RefObject) => { triggerObserver.unobserve(target); }; } - }, [ref]); + }, []); return width; }; From 04658cfd6c9dd20f4523a77cb217d8815393c7c7 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 14:16:22 +0200 Subject: [PATCH 6/9] Fix test --- packages/lib/src/paginator/Paginator.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/lib/src/paginator/Paginator.test.tsx b/packages/lib/src/paginator/Paginator.test.tsx index a9a943b5d..4902eba8b 100644 --- a/packages/lib/src/paginator/Paginator.test.tsx +++ b/packages/lib/src/paginator/Paginator.test.tsx @@ -15,6 +15,10 @@ import DxcPaginator from "./Paginator"; disconnect() {} }; +(global as any).DOMRect = { + fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }), +}; + describe("Paginator component tests", () => { test("Paginator renders with default values", () => { const { getByText } = render(); From c1db34303f02045be84547684bf54d9dbdbc75ea Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 14:45:50 +0200 Subject: [PATCH 7/9] Implement isMobile function instead of repeating the width conditional --- packages/lib/src/paginator/Paginator.tsx | 15 +++++++-------- packages/lib/src/paginator/utils.ts | 3 +++ 2 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 packages/lib/src/paginator/utils.ts diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index c6393950d..1c1865fa5 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect, useRef, useState } from "react"; +import { useContext, useRef } from "react"; import styled from "@emotion/styled"; import DxcButton from "../button/Button"; import DxcSelect from "../select/Select"; @@ -6,12 +6,13 @@ import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; import { responsiveSizes } from "../common/variables"; import useWidth from "../utils/useWidth"; +import { isMobile } from "./utils"; const DxcPaginatorContainer = styled.div<{ width: number }>` display: flex; - justify-content: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "center" : "flex-end")}; - flex-wrap: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "wrap" : "nowrap")}; - gap: ${({ width }) => (width && width <= Number(responsiveSizes.medium) * 16 ? "var(--spacing-gap-s)" : "0")}; + justify-content: ${({ width }) => (isMobile(width) ? "center" : "flex-end")}; + flex-wrap: ${({ width }) => (isMobile(width) ? "wrap" : "nowrap")}; + gap: ${({ width }) => (isMobile(width) ? "var(--spacing-gap-s)" : "0")}; align-items: center; width: 100%; min-height: 48px; @@ -28,8 +29,7 @@ const ItemsPerPageContainer = styled.span<{ width: number }>` display: flex; align-items: center; gap: var(--spacing-gap-s); - margin-right: ${({ width }) => - width && width <= Number(responsiveSizes.medium) * 16 ? "0" : "var(--spacing-gap-ml)"}; + margin-right: ${({ width }) => (isMobile(width) ? "0" : "var(--spacing-gap-ml)")}; `; const SelectContainer = styled.div` @@ -37,8 +37,7 @@ const SelectContainer = styled.div` `; const TotalItemsContainer = styled.span<{ width: number }>` - margin-right: ${({ width }) => - width && width <= Number(responsiveSizes.medium) * 16 ? "0" : "var(--spacing-gap-xxl)"}; + margin-right: ${({ width }) => (isMobile(width) ? "0" : "var(--spacing-gap-xxl)")}; `; const GoToPageContainer = styled.div` diff --git a/packages/lib/src/paginator/utils.ts b/packages/lib/src/paginator/utils.ts new file mode 100644 index 000000000..e92785d91 --- /dev/null +++ b/packages/lib/src/paginator/utils.ts @@ -0,0 +1,3 @@ +import { responsiveSizes } from "../common/variables"; + +export const isMobile = (width: number) => width && width <= Number(responsiveSizes.medium) * 16; From fec55b4a9464fd4911baaf255e6e59c3307ca949 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 29 Aug 2025 14:56:01 +0200 Subject: [PATCH 8/9] Change isMobile to isResponsive --- packages/lib/src/paginator/Paginator.tsx | 12 ++++++------ packages/lib/src/paginator/utils.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 1c1865fa5..28fdba864 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -6,13 +6,13 @@ import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; import { responsiveSizes } from "../common/variables"; import useWidth from "../utils/useWidth"; -import { isMobile } from "./utils"; +import { isResponsive } from "./utils"; const DxcPaginatorContainer = styled.div<{ width: number }>` display: flex; - justify-content: ${({ width }) => (isMobile(width) ? "center" : "flex-end")}; - flex-wrap: ${({ width }) => (isMobile(width) ? "wrap" : "nowrap")}; - gap: ${({ width }) => (isMobile(width) ? "var(--spacing-gap-s)" : "0")}; + justify-content: ${({ width }) => (isResponsive(width) ? "center" : "flex-end")}; + flex-wrap: ${({ width }) => (isResponsive(width) ? "wrap" : "nowrap")}; + gap: ${({ width }) => (isResponsive(width) ? "var(--spacing-gap-s)" : "0")}; align-items: center; width: 100%; min-height: 48px; @@ -29,7 +29,7 @@ const ItemsPerPageContainer = styled.span<{ width: number }>` display: flex; align-items: center; gap: var(--spacing-gap-s); - margin-right: ${({ width }) => (isMobile(width) ? "0" : "var(--spacing-gap-ml)")}; + margin-right: ${({ width }) => (isResponsive(width) ? "0" : "var(--spacing-gap-ml)")}; `; const SelectContainer = styled.div` @@ -37,7 +37,7 @@ const SelectContainer = styled.div` `; const TotalItemsContainer = styled.span<{ width: number }>` - margin-right: ${({ width }) => (isMobile(width) ? "0" : "var(--spacing-gap-xxl)")}; + margin-right: ${({ width }) => (isResponsive(width) ? "0" : "var(--spacing-gap-xxl)")}; `; const GoToPageContainer = styled.div` diff --git a/packages/lib/src/paginator/utils.ts b/packages/lib/src/paginator/utils.ts index e92785d91..a2bd89712 100644 --- a/packages/lib/src/paginator/utils.ts +++ b/packages/lib/src/paginator/utils.ts @@ -1,3 +1,3 @@ import { responsiveSizes } from "../common/variables"; -export const isMobile = (width: number) => width && width <= Number(responsiveSizes.medium) * 16; +export const isResponsive = (width: number) => width && width <= Number(responsiveSizes.medium) * 16; From 8116e807d3537dfa7216455c661fbb1f3c5b713b Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Mon, 1 Sep 2025 10:44:25 +0200 Subject: [PATCH 9/9] Fix accessibility test errors --- .../src/breadcrumbs/Breadcrumbs.accessibility.test.tsx | 8 ++++++++ packages/lib/src/header/Header.accessibility.test.tsx | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.accessibility.test.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.accessibility.test.tsx index dbfe3efb3..e10125df9 100644 --- a/packages/lib/src/breadcrumbs/Breadcrumbs.accessibility.test.tsx +++ b/packages/lib/src/breadcrumbs/Breadcrumbs.accessibility.test.tsx @@ -3,6 +3,14 @@ import { axe, formatRules } from "../../test/accessibility/axe-helper"; import DxcBreadcrumbs from "./Breadcrumbs"; import { disabledRules as rules } from "../../test/accessibility/rules/specific/breadcrumbs/disabledRules"; +(global as any).ResizeObserver = class ResizeObserver { + observe() {} + + unobserve() {} + + disconnect() {} +}; + const disabledRules = { rules: formatRules(rules), }; diff --git a/packages/lib/src/header/Header.accessibility.test.tsx b/packages/lib/src/header/Header.accessibility.test.tsx index de590f591..d31e16d36 100644 --- a/packages/lib/src/header/Header.accessibility.test.tsx +++ b/packages/lib/src/header/Header.accessibility.test.tsx @@ -5,6 +5,14 @@ import DxcFlex from "../flex/Flex"; import DxcLink from "../link/Link"; import DxcHeader from "./Header"; +(global as any).ResizeObserver = class ResizeObserver { + observe() {} + + unobserve() {} + + disconnect() {} +}; + const disabledRules = { rules: formatRules(rules), };