Add support for RTL writing direction #1102
Open
Conversation
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
- Updated Carousel component to handle smooth scrolling behavior based on initial load state. - Introduced RTL support in useMeasurement hook for accurate scroll offsets. - Added isRTL utility function to determine text direction for proper layout handling.
- Improved Carousel component to prevent unnecessary scroll animations during initial load. - Updated useMeasurement hook to correctly handle negative scroll offsets in RTL mode. - Added utility function to detect RTL layout for better scroll behavior management.
- Consolidated RTL direction tests in browser utility to use parameterized tests for better readability and maintainability. - Simplified RTL offset tests in useMeasurement by utilizing a mock element and parameterized test cases for various scroll distances.
- Streamlined the parameterized test for RTL direction in browser utility by consolidating the test structure, enhancing clarity and maintainability.
- Introduced a new story for the Carousel component that demonstrates its functionality in a right-to-left (RTL) layout. - Added buttons for navigating between slides in the RTL context, enhancing the component's usability for RTL users.
- Updated the isRTL function to accept an optional HTMLElement parameter, allowing detection of RTL mode based on computed styles. - Enhanced the useMeasurement hook to utilize the updated isRTL function with the container element. - Added tests to verify RTL detection from element styles and inheritance from parent elements.
- Added JSDoc comments to the isRTL function to clarify its purpose and usage for detecting right-to-left (RTL) layouts. - Enhanced code readability and maintainability by providing detailed descriptions of the function's behavior.
- Simplified the scrolling logic in the Carousel component to enhance smooth scrolling after the initial load. - Removed unnecessary checks and streamlined the handling of the initial page load to prevent unwanted animations. - Ensured that the scroll behavior is consistent and responsive to the current page state.
🦋 Changeset detectedLatest commit: 5642edf The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@julesyoungberg is attempting to deploy a commit to the formidable-labs Team on Vercel. A member of the Team first needs to authorize it. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
useMeasurementhook to calculate negative scroll offsets for RTL layoutsisRTLutility function to detect text direction from element or documentDescription
This PR adds comprehensive RTL (Right-to-Left) language support to the Carousel component, enabling proper functionality for languages like Arabic and Hebrew.
Changes include:
useMeasurement: Enhanced the hook to detect RTL direction and calculate negative scroll offsets for RTL layouts. In RTL mode,scrollLeftuses negative values to scroll right, so all offsets (except the first page at 0) are negatedisRTLutility: Added utility function inbrowser.tsthat detects RTL mode from element computed styles or document direction attributedir="rtl"wrapper and navigation buttonsisRTLutility and RTL-specific behavior inuseMeasurementThese changes ensure the carousel works correctly for international users using RTL languages without modifying any existing carousel behavior.
Type of Change
How Has This Been Tested?
Unit Tests:
isRTLutility function (59 lines in browser.test.ts)useMeasurementhook (62 lines)Manual Testing Scenarios:
scrollDistanceset to 'screen', 'slide', and numeric valuesChecklist
pnpm run lint)pnpm run test:ci-with-server/pnpm run test)pnpm changeset.