feat(responsive): add useContainerWidth hook#1144
Open
JeanMarcMilletScality wants to merge 4 commits into
Open
feat(responsive): add useContainerWidth hook#1144JeanMarcMilletScality wants to merge 4 commits into
JeanMarcMilletScality wants to merge 4 commits into
Conversation
Container-width (not viewport) responsiveness primitive for narrow host side-panels. Exposes isNarrow / isNarrowerThan(px) for multi-tier layouts via a callback-ref ResizeObserver, with an optional hysteresis band to prevent flicker on a breakpoint. Ships the NARROW_BREAKPOINT_PX and TABLE_NARROW_BREAKPOINT_PX constants and is exported from the library entry point. Opt-in; no existing behaviour changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Hello jeanmarcmilletscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Stubs a controllable ResizeObserver to verify the hook reports wide-first before measuring, flips on the breakpoint in both directions, rounds the measured width, honours a custom breakpoint and the hysteresis band, and stops observing a detached node. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rename the test cases to state the exact return value being asserted (isNarrow / isNarrowerThan / width) and to flag the ones relying on the default breakpoint. Their widths are derived from NARROW_BREAKPOINT_PX so the relationship to the default is explicit. No behaviour change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
JeanMarcMilletScality
force-pushed
the
improvement/responsive-use-container-width-hook
branch
from
0e09fca to
218e4d8
Compare
useContainerWidth should report the element's own width — matching its CSS width and the breakpoint constants — rather than a value that shifts with the container's padding. Read borderBoxSize in the observer, and where it is unsupported re-measure the target's border box (instead of contentRect's content box) so every path agrees with the getBoundingClientRect sync read and isNarrow never flips after mount. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
JeanMarcMilletScality
force-pushed
the
improvement/responsive-use-container-width-hook
branch
from
218e4d8 to
c736d3f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
First of a progressive series merging the responsive-panels exploration into
development/1.0. This PR adds only the foundational hook —useContainerWidth— plus its library export and unit tests. Nothing else from the exploration branch (AdaptivePanels, column-drop, icon-only buttons, fluid forms, navbar/sidebar/table changes) is included here.Details
useContainerWidthis a container-width (not viewport) responsiveness primitive, for screens that must stay usable when a host side-panel shrinks the available space without changing the viewport width.ResizeObserver; returnsisNarrow/isNarrowerThan(px)for multi-tier layouts.hysteresisband to avoid flicker when the container rests on a breakpoint.NARROW_BREAKPOINT_PX(640) andTABLE_NARROW_BREAKPOINT_PX(820) constants, plusUseContainerWidthOptions/UseContainerWidthResulttypes.src/lib/index.ts.Compatibility
Purely additive / opt-in — no existing component behaviour changes.
Verification
tsc --noEmitcleaneslintclean on changed filesjest— 9 unit tests covering wide-first-before-measure, breakpoint flips in both directions, width rounding, custom breakpoint, the hysteresis band, and detaching the observed node🤖 Generated with Claude Code