-
Notifications
You must be signed in to change notification settings - Fork 13.4k
fix(segment-view): scroll and select the right item when the component is in RTL context; #30675
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
1079566
- calculate scroll having into consideration dir value;
JoaoFerreira-FrontEnd 0596d4d
- add page with dir="rtl";
JoaoFerreira-FrontEnd c605440
- fix duplicated test;
JoaoFerreira-FrontEnd 62ffe16
Update core/src/components/segment-view/test/basic/segment-view.e2e.ts
JoaoFerreira-FrontEnd 8053d64
- use RTL helper;
JoaoFerreira-FrontEnd f56e089
lint.fix
JoaoFerreira-FrontEnd 7fbc53a
-lint.fix;
JoaoFerreira-FrontEnd File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="rtl"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>RTL Segment View - Basic</title> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" | ||
| /> | ||
| <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" /> | ||
| <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" /> | ||
| <script src="../../../../../scripts/testing/scripts.js"></script> | ||
| <script nomodule src="../../../../../dist/ionic/ionic.js"></script> | ||
| <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> | ||
|
|
||
| <style> | ||
| ion-segment-view { | ||
| height: 100px; | ||
|
|
||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| ion-segment-content { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| ion-segment-content:nth-of-type(3n + 1) { | ||
| background: lightpink; | ||
| } | ||
|
|
||
| ion-segment-content:nth-of-type(3n + 2) { | ||
| background: lightblue; | ||
| } | ||
|
|
||
| ion-segment-content:nth-of-type(3n + 3) { | ||
| background: lightgreen; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>RTL Segment View - Basic</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-segment id="noValueSegment"> | ||
| <ion-segment-button content-id="no" value="no"> | ||
| <ion-label>No</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="value" value="value"> | ||
| <ion-label>Value</ion-label> | ||
| </ion-segment-button> | ||
| </ion-segment> | ||
| <ion-segment-view id="noValueSegmentView"> | ||
| <ion-segment-content id="no">No</ion-segment-content> | ||
| <ion-segment-content id="value">Value</ion-segment-content> | ||
| </ion-segment-view> | ||
|
|
||
| <ion-segment value="free"> | ||
| <ion-segment-button content-id="paid" value="paid"> | ||
| <ion-label>Paid</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button style="min-width: 200px" content-id="free" value="free"> | ||
| <ion-label>Free</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="top" value="top"> | ||
| <ion-label>Top</ion-label> | ||
| </ion-segment-button> | ||
| </ion-segment> | ||
| <ion-segment-view> | ||
| <ion-segment-content id="paid">Paid</ion-segment-content> | ||
| <ion-segment-content id="free">Free</ion-segment-content> | ||
| <ion-segment-content id="top">Top</ion-segment-content> | ||
| </ion-segment-view> | ||
|
|
||
| <ion-segment value="peach" scrollable> | ||
| <ion-segment-button content-id="orange" value="orange"> | ||
| <ion-label>Orange</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="banana" value="banana"> | ||
| <ion-label>Banana</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="pear" value="pear"> | ||
| <ion-label>Pear</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="peach" value="peach"> | ||
| <ion-label>Peach</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="grape" value="grape"> | ||
| <ion-label>Grape</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="mango" value="mango"> | ||
| <ion-label>Mango</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="apple" value="apple"> | ||
| <ion-label>Apple</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="strawberry" value="strawberry"> | ||
| <ion-label>Strawberry</ion-label> | ||
| </ion-segment-button> | ||
| <ion-segment-button content-id="cherry" value="cherry"> | ||
| <ion-label>Cherry</ion-label> | ||
| </ion-segment-button> | ||
| </ion-segment> | ||
| <ion-segment-view> | ||
| <ion-segment-content id="orange">Orange</ion-segment-content> | ||
| <ion-segment-content id="banana">Banana</ion-segment-content> | ||
| <ion-segment-content id="pear">Pear</ion-segment-content> | ||
| <ion-segment-content id="peach">Peach</ion-segment-content> | ||
| <ion-segment-content id="grape">Grape</ion-segment-content> | ||
| <ion-segment-content id="mango">Mango</ion-segment-content> | ||
| <ion-segment-content id="apple">Apple</ion-segment-content> | ||
| <ion-segment-content id="strawberry">Strawberry</ion-segment-content> | ||
| <ion-segment-content id="cherry">Cherry</ion-segment-content> | ||
| </ion-segment-view> | ||
|
|
||
| <button class="expand" onClick="changeSegmentContent()">Change Segment Content</button> | ||
|
|
||
| <button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button> | ||
|
|
||
| <button class="expand" onClick="addSegmentButtonAndContent()">Add New Segment Button & Content</button> | ||
| </ion-content> | ||
|
|
||
| <ion-footer> | ||
| <ion-toolbar> | ||
| <ion-title>Footer</ion-title> | ||
| </ion-toolbar> | ||
| </ion-footer> | ||
|
|
||
| <script> | ||
| function changeSegmentContent() { | ||
| const segment = document.querySelector('#noValueSegment'); | ||
| const segmentView = document.querySelector('#noValueSegmentView'); | ||
|
|
||
| let currentValue = segment.value; | ||
|
|
||
| if (currentValue === 'value') { | ||
| currentValue = 'no'; | ||
| } else { | ||
| currentValue = 'value'; | ||
| } | ||
|
|
||
| segment.value = currentValue; | ||
| } | ||
|
|
||
| async function clearSegmentValue() { | ||
| const segmentView = document.querySelector('#noValueSegmentView'); | ||
| segmentView.setContent('no', false); | ||
|
|
||
| // Set timeout to ensure the value is cleared after | ||
| // the segment content is updated | ||
| setTimeout(() => { | ||
| const segment = document.querySelector('#noValueSegment'); | ||
| segment.value = undefined; | ||
| }); | ||
| } | ||
|
|
||
| async function addSegmentButtonAndContent() { | ||
| const segment = document.querySelector('ion-segment'); | ||
| const segmentView = document.querySelector('ion-segment-view'); | ||
|
|
||
| const newButton = document.createElement('ion-segment-button'); | ||
| const newId = `new-${Date.now()}`; | ||
| newButton.setAttribute('content-id', newId); | ||
| newButton.setAttribute('value', newId); | ||
| newButton.innerHTML = '<ion-label>New Button</ion-label>'; | ||
|
|
||
| segment.appendChild(newButton); | ||
|
|
||
| setTimeout(() => { | ||
| // Timeout to test waitForSegmentContent() in segment-button | ||
| const newContent = document.createElement('ion-segment-content'); | ||
| newContent.setAttribute('id', newId); | ||
| newContent.innerHTML = 'New Content'; | ||
|
|
||
| segmentView.appendChild(newContent); | ||
|
|
||
| // Necessary timeout to ensure the value is set after the content is added. | ||
| // Otherwise, the transition is unsuccessful and the content is not shown. | ||
| setTimeout(() => { | ||
| segment.setAttribute('value', newId); | ||
| }, 200); | ||
| }, 200); | ||
| } | ||
| </script> | ||
| </ion-app> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.