fix(range): range knob does not overflow in item #27188
Closed
Conversation
This file contains 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
|
|
|
The updated syntax/screenshots appear to have caught a visual bug with the knob positioning/clipping when used without a label. I'll circle back to confirming that + opening a bug report if that is the case. |
sean-perkins
changed the title
2 tasks
sean-perkins
added a commit
that referenced
this pull request
Apr 17, 2023
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Developers that are using Ionic v7 are experiencing an issue where implementations that are intended to use the modern control syntax will render with the legacy syntax and a warning will be displayed. The issue is most easily reproduced by not assigning a label to the control and then asynchronously assigning a label after a duration. Angular example: ```html <ion-item> <ion-input [label]="label"></ion-input> </ion-item> ``` ```ts @component({ ... }) export class MyComponent { @input() label?: string; // initially unset ngOnInit() { setTimeout(() => this.label = 'Hello world', 500); } } ``` <!-- Issues are required for both bug fixes and features. --> Issue URL: resolves #27085 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Form controls that do not have a decorative label or `aria-label`/`aria-labelledby` assigned, will default render as modern controls. - Legacy form implementations that render an `<ion-label>` within the item, will continue to render with the legacy template and a warning will be displayed in the console. - Modern form syntax supports dynamically set labels ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> Legacy implementations that do not have a decorative label and do not specify `aria-label` on the control, will be upgraded to the modern syntax. For example: ```html <ion-item> <ion-input></ion-input> </ion-item> ``` Developers that do not want to update to the modern syntax yet should add the `legacy="true"` attribute to their form control. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `7.0.2-dev.11681157690.1060bc7f` When migrating the range tests to modern syntax, I observed a visual clipping issue. This is being addressed in: #27188. This PR simply adds the legacy flag so that screenshots are the same as `main`.
liamdebeasi
pushed a commit
that referenced
this pull request
Apr 19, 2023
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Developers that are using Ionic v7 are experiencing an issue where implementations that are intended to use the modern control syntax will render with the legacy syntax and a warning will be displayed. The issue is most easily reproduced by not assigning a label to the control and then asynchronously assigning a label after a duration. Angular example: ```html <ion-item> <ion-input [label]="label"></ion-input> </ion-item> ``` ```ts @component({ ... }) export class MyComponent { @input() label?: string; // initially unset ngOnInit() { setTimeout(() => this.label = 'Hello world', 500); } } ``` <!-- Issues are required for both bug fixes and features. --> Issue URL: resolves #27085 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Form controls that do not have a decorative label or `aria-label`/`aria-labelledby` assigned, will default render as modern controls. - Legacy form implementations that render an `<ion-label>` within the item, will continue to render with the legacy template and a warning will be displayed in the console. - Modern form syntax supports dynamically set labels ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> Legacy implementations that do not have a decorative label and do not specify `aria-label` on the control, will be upgraded to the modern syntax. For example: ```html <ion-item> <ion-input></ion-input> </ion-item> ``` Developers that do not want to update to the modern syntax yet should add the `legacy="true"` attribute to their form control. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `7.0.2-dev.11681157690.1060bc7f` When migrating the range tests to modern syntax, I observed a visual clipping issue. This is being addressed in: #27188. This PR simply adds the legacy flag so that screenshots are the same as `main`.
thetaPC
requested changes
May 9, 2023
sean-perkins
force-pushed
the
fix/range-tests
branch
from
a67c3c3
to
198e3a9
Compare
|
I need to dig into this screenshot test: The current style changes target |
|
Ok, I dug into this further and I am no longer concerned with that screenshot diff. The reason for clipping is that the bounding box does not contain the knob overflow:
So when playwright captures the element screenshot, it results in the clipped appearance. In an application, this should not occur (unless they have a container with Once CI passes, I think this is ready for review to see if the team is in favor of the approach for solving this bug. Open to other ideas/suggestions as well 👍 |
thetaPC
reviewed
Jun 23, 2023
...ge/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png
Show resolved
Hide resolved
thetaPC
reviewed
Jul 12, 2023
There was a problem hiding this comment.
Everything looks good. One thing that I noticed is that the focused blue circle is getting clipped when there isn't an icon when moving the knob either far right or far left.
Is it possible to have the focused circle to render on top?
Screen.Recording.2023-07-12.at.11.23.15.AM.mov
|
@thetaPC here's an approach we could take: Kapture.2023-07-12.at.15.39.11.mp4It requires bumping the default padding from Thoughts? I think if we do this, we should target for a minor release since we are adjusting default values in pursuit of correcting visual issues. |
2 pixels feels like a lot. I do agree that if we make this change then it should be a minor. I'm leaning towards starting a with the rest of the team for their thoughts. Otherwise, your solution works but wondering if it could lead to issues later. |
This prevents the focus indicator in MD from being clipped when there is no start icon or label with the ion-range.
sean-perkins
force-pushed
the
fix/range-tests
branch
from
f3ed1b0
to
02c1d61
Compare
2 tasks
|
Closing this PR in favor of #28199 |
github-merge-queue bot
pushed a commit
that referenced
this pull request
Sep 20, 2023
Issue number: resolves #27199 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using the modern range in an item, the knob will get cut off by the item when the value is at either the min or the max. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Range knob is no longer cut off by the item ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This is an extension of #27188. I decided to make a separate branch/PR since I added tests and changed the implementation a bit. Feel free to take all/some/none of this code. --------- Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: ionitron <[email protected]>
liamdebeasi
added a commit
that referenced
this pull request
Sep 22, 2023
Issue number: resolves #27199 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using the modern range in an item, the knob will get cut off by the item when the value is at either the min or the max. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Range knob is no longer cut off by the item ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This is an extension of #27188. I decided to make a separate branch/PR since I added tests and changed the implementation a bit. Feel free to take all/some/none of this code. --------- Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: ionitron <[email protected]>
liamdebeasi
added a commit
that referenced
this pull request
Sep 26, 2023
Issue number: resolves #27199 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using the modern range in an item, the knob will get cut off by the item when the value is at either the min or the max. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Range knob is no longer cut off by the item ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This is an extension of #27188. I decided to make a separate branch/PR since I added tests and changed the implementation a bit. Feel free to take all/some/none of this code. --------- Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: ionitron <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 is the current behavior?
The range knob will clip when displayed without a label inside of
ion-item.Additionally, there are legacy range tests that do not use the correct syntax.
Issue URL: #27199
What is the new behavior?
ion-itemwith the modern form syntaxlegacy="true"Does this introduce a breaking change?
Other information