Conversation
✅ Deploy Preview for ionic-theme-md3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Playwright test results
Details
|
|
📊 Playwright Test Report View the detailed test report: https://rdlabo-team.github.io/ionic-theme-md3/pr-5/ |
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
| &.range-dual-knobs { | ||
| &.range-pressed-a::part(knob-a), | ||
| &.range-pressed-b::part(knob-b) { | ||
| width: 2px; | ||
| transform: translateX(calc(var(--knob-size) / 2 - 1px)); | ||
| } | ||
|
|
||
| &.range-value-min { | ||
| &::part(bar), | ||
| &::part(bar-active) { | ||
| border-top-left-radius: calc(var(--knob-border-radius) / 2); | ||
| border-bottom-left-radius: calc(var(--knob-border-radius) / 2); | ||
| margin-left: 6px; | ||
| } | ||
| &::part(bar) { | ||
| width: calc(100% - 6px); | ||
| } | ||
| } | ||
| &.range-value-max { | ||
| &::part(bar), | ||
| &::part(bar-active) { | ||
| border-top-right-radius: calc(var(--knob-border-radius) / 2); | ||
| border-bottom-right-radius: calc(var(--knob-border-radius) / 2); | ||
| margin-right: 6px; | ||
| } | ||
| &::part(bar) { | ||
| width: calc(100% - 6px); | ||
| } | ||
| } | ||
| &.range-value-min.range-value-max::part(bar) { | ||
| width: calc(100% - 12px); | ||
| } | ||
|
|
||
| &:not(.range-value-min)::part(knob-lower), | ||
| &:not(.range-value-max)::part(knob-upper) { | ||
| outline: 6px solid var(--ion-background-color, #ffffff); | ||
| } | ||
|
|
||
| &.range-pressed:not(.range-value-min)::part(knob-lower), | ||
| &.range-pressed:not(.range-value-max)::part(knob-upper) { | ||
| outline: 7px solid var(--ion-background-color, #ffffff); | ||
| } |
There was a problem hiding this comment.
🟡 Dual-knobs bar-active loses gap/rounding when knobs are not at extreme positions
In the old code, the active bar in dual-knob mode always had border-radius and margins on both sides (via the general &::part(bar-active) rule at old line 42-46 and the &[dual-knobs]::part(bar-active) rule at old line 66-68), creating a visual gap between the bar and the knobs. In the new code (src/styles/components/ion-range.scss:84-105), left-side rounding/margin is only applied when .range-value-min and right-side rounding/margin only when .range-value-max. In the common case where neither knob is at its extreme, bar-active gets no border-radius and no margins, causing it to visually butt up against the knobs without the intended gap. This is inconsistent with the single-knob behavior where bar-active always gets right rounding/margin when not at max (line 51-55).
Prompt for agents
In src/styles/components/ion-range.scss, inside the `&.range-dual-knobs` block (lines 77-119), add general bar-active styling that applies regardless of min/max state, similar to what existed in the old code. Specifically, add a rule like:
&::part(bar-active) {
border-radius: calc(var(--knob-border-radius) / 2);
margin-left: 6px;
margin-right: 6px;
}
This should be placed after line 82 (after the pressed knob rules) and before the .range-value-min block at line 84. This ensures the active bar always has rounded corners and visual gaps from the knobs in dual-knob mode, matching the old behavior and being consistent with the single-knob bar-active styling at lines 51-55.
Was this helpful? React with 👍 or 👎 to provide feedback.
|
📊 Playwright Test Report View the detailed test report: https://rdlabo-team.github.io/ionic-theme-md3/pr-5/ |
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
|
📊 Playwright Test Report View the detailed test report: https://rdlabo-team.github.io/ionic-theme-md3/pr-5/ |
src/styles/components/ion-range.scss
Outdated
| right: 0; | ||
| &:not(.range-value-min):not(.range-value-max)::part(knob) { | ||
| outline: 6px solid var(--ion-background-color, #ffffff); | ||
| transition: outline var(--token-expressive-fast-effects); |
There was a problem hiding this comment.
🟡 Transition property override causes loss of width/transform animations on knob
On line 48, transition: outline var(--token-expressive-fast-effects) completely overrides the base transition: width ..., transform ... set at lines 19-21 (src/styles/components/ion-range.scss:19-21). The selector at line 46 (&:not(.range-dual-knobs):not(.range-value-min):not(.range-value-max)::part(knob)) has higher specificity than the base &::part(knob) selector. Since transition is not an additive property, this replaces the width and transform transitions entirely. The result is that in the most common state (slider not at min or max), pressing the knob causes it to snap from 4px→2px width and shift transform without any animation, defeating the purpose of the transition added at lines 19-21.
| transition: outline var(--token-expressive-fast-effects); | |
| transition: outline var(--token-expressive-fast-effects), width var(--token-expressive-fast-effects), transform var(--token-expressive-fast-effects); |
Was this helpful? React with 👍 or 👎 to provide feedback.
src/styles/components/ion-range.scss
Outdated
| &:not(.range-value-min)::part(knob-lower), | ||
| &:not(.range-value-max)::part(knob-upper) { | ||
| outline: 6px solid var(--ion-background-color, #ffffff); | ||
| transition: outline var(--token-expressive-fast-effects); |
There was a problem hiding this comment.
🟡 Transition property override causes loss of width/transform animations on dual-knob
Same issue as BUG-0001 but for dual knobs. At line 116, transition: outline var(--token-expressive-fast-effects) overrides the base transition (lines 19-21) for ::part(knob-lower) and ::part(knob-upper). The ::part(knob) base rule at src/styles/components/ion-range.scss:17 may or may not match knob-lower/knob-upper parts depending on Ionic's implementation, but if it does, the same override problem applies — width and transform animations would be lost when the outline transition is set.
| transition: outline var(--token-expressive-fast-effects); | |
| transition: outline var(--token-expressive-fast-effects), width var(--token-expressive-fast-effects), transform var(--token-expressive-fast-effects); |
Was this helpful? React with 👍 or 👎 to provide feedback.
|
📊 Playwright Test Report View the detailed test report: https://rdlabo-team.github.io/ionic-theme-md3/pr-5/ |
|
📊 Playwright Test Report View the detailed test report: https://rdlabo-team.github.io/ionic-theme-md3/pr-5/ |
1 participant
Uh oh!
There was an error while loading. Please reload this page.