From 5bb7383c56b73bdc0edfee2f939186c9fecda86e Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 13 Feb 2025 16:46:53 +0100 Subject: [PATCH 1/3] docs(Slider): add partial option example --- .../Slider/__stories__/Options.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/ui/src/components/Slider/__stories__/Options.stories.tsx b/packages/ui/src/components/Slider/__stories__/Options.stories.tsx index faaecd238f..1997c80f42 100644 --- a/packages/ui/src/components/Slider/__stories__/Options.stories.tsx +++ b/packages/ui/src/components/Slider/__stories__/Options.stories.tsx @@ -14,6 +14,15 @@ const options = [ { label: '1 Gbps', value: 1000 }, ] +const partialOptions = [ + { label: '1 Mbps', value: 1 }, + { label: '', value: 10 }, + { label: '', value: 100 }, + { label: '', value: 200 }, + { label: '', value: 500 }, + { label: '1 Gbps', value: 1000 }, +] + export const Options: StoryFn = args => { const [value, setValue] = useState(3) const [doubleValue, setDoubleValue] = useState([1, 3]) @@ -47,6 +56,18 @@ export const Options: StoryFn = args => { /> + + + + Date: Thu, 13 Feb 2025 17:58:39 +0100 Subject: [PATCH 2/3] fix(Popup): recompute position when out of screen --- .changeset/beige-suits-shake.md | 5 +++++ packages/ui/src/components/Popup/helpers.ts | 24 ++++++++++----------- 2 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 .changeset/beige-suits-shake.md diff --git a/.changeset/beige-suits-shake.md b/.changeset/beige-suits-shake.md new file mode 100644 index 0000000000..3888a3de95 --- /dev/null +++ b/.changeset/beige-suits-shake.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `Popup` internal component to position better when it is attached to `document.body` diff --git a/packages/ui/src/components/Popup/helpers.ts b/packages/ui/src/components/Popup/helpers.ts index 2675dfa2a4..4cd86924e5 100644 --- a/packages/ui/src/components/Popup/helpers.ts +++ b/packages/ui/src/components/Popup/helpers.ts @@ -108,7 +108,8 @@ const findOffsetParent = (element: RefObject) => { /** * This function will check if there is an overflow of the popup compared to the parent it is set in. * Depending on the position, for top and bottom the overflow will be on X axis and for left and right - * the overflow will be Y axis. The function return the number of pixels the popup is overflowing. + * the overflow will be Y axis. The function return the number of pixels the popup is overflowing + * and that needs to be reajusted. * @param position the position of the popup * @param offsetParentRect the rect of the parent element where the children is located in * @param childrenRect the rect of the children element, the children element is the one that will trigger the popup @@ -116,7 +117,7 @@ const findOffsetParent = (element: RefObject) => { */ const getPopupOverflowFromParent = ( position: 'top' | 'right' | 'bottom' | 'left', - offsetParentRect: DOMRect, + offsetParentRect: { top: number; left: number; right: number }, childrenRect: DOMRect, popupStructuredRef: DOMRect, arrowWidth: number, @@ -217,8 +218,9 @@ export const computePositions = ({ const offsetParentRect = offsetParent?.getBoundingClientRect() ?? { top: 0, left: 0, - right: 0, + right: window?.innerWidth ?? 0, } + const popupStructuredRef = ( popupRef.current as HTMLDivElement ).getBoundingClientRect() @@ -266,15 +268,13 @@ export const computePositions = ({ ? childrenRight : childrenLeft - parentLeft + childrenWidth - const popupOverflow = isPopupPortalTargetBody - ? 0 - : getPopupOverflowFromParent( - placementBasedOnWindowSize, - offsetParentRect, - childrenRect, - popupStructuredRef, - arrowWidth, - ) + const popupOverflow = getPopupOverflowFromParent( + placementBasedOnWindowSize, + offsetParentRect, + childrenRect, + popupStructuredRef, + arrowWidth, + ) const isAligned = align === 'start' From bdbbe361bc5b2ef5d01d891ce6819f1b5f744d80 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 13 Feb 2025 17:59:36 +0100 Subject: [PATCH 3/3] Revert "fix(Popup): recompute position when out of screen" This reverts commit fcba3716e1e2064b4d13898720a18e9fef197b22. --- .changeset/beige-suits-shake.md | 5 ----- packages/ui/src/components/Popup/helpers.ts | 24 ++++++++++----------- 2 files changed, 12 insertions(+), 17 deletions(-) delete mode 100644 .changeset/beige-suits-shake.md diff --git a/.changeset/beige-suits-shake.md b/.changeset/beige-suits-shake.md deleted file mode 100644 index 3888a3de95..0000000000 --- a/.changeset/beige-suits-shake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@ultraviolet/ui": patch ---- - -Fix `Popup` internal component to position better when it is attached to `document.body` diff --git a/packages/ui/src/components/Popup/helpers.ts b/packages/ui/src/components/Popup/helpers.ts index 4cd86924e5..2675dfa2a4 100644 --- a/packages/ui/src/components/Popup/helpers.ts +++ b/packages/ui/src/components/Popup/helpers.ts @@ -108,8 +108,7 @@ const findOffsetParent = (element: RefObject) => { /** * This function will check if there is an overflow of the popup compared to the parent it is set in. * Depending on the position, for top and bottom the overflow will be on X axis and for left and right - * the overflow will be Y axis. The function return the number of pixels the popup is overflowing - * and that needs to be reajusted. + * the overflow will be Y axis. The function return the number of pixels the popup is overflowing. * @param position the position of the popup * @param offsetParentRect the rect of the parent element where the children is located in * @param childrenRect the rect of the children element, the children element is the one that will trigger the popup @@ -117,7 +116,7 @@ const findOffsetParent = (element: RefObject) => { */ const getPopupOverflowFromParent = ( position: 'top' | 'right' | 'bottom' | 'left', - offsetParentRect: { top: number; left: number; right: number }, + offsetParentRect: DOMRect, childrenRect: DOMRect, popupStructuredRef: DOMRect, arrowWidth: number, @@ -218,9 +217,8 @@ export const computePositions = ({ const offsetParentRect = offsetParent?.getBoundingClientRect() ?? { top: 0, left: 0, - right: window?.innerWidth ?? 0, + right: 0, } - const popupStructuredRef = ( popupRef.current as HTMLDivElement ).getBoundingClientRect() @@ -268,13 +266,15 @@ export const computePositions = ({ ? childrenRight : childrenLeft - parentLeft + childrenWidth - const popupOverflow = getPopupOverflowFromParent( - placementBasedOnWindowSize, - offsetParentRect, - childrenRect, - popupStructuredRef, - arrowWidth, - ) + const popupOverflow = isPopupPortalTargetBody + ? 0 + : getPopupOverflowFromParent( + placementBasedOnWindowSize, + offsetParentRect, + childrenRect, + popupStructuredRef, + arrowWidth, + ) const isAligned = align === 'start'