mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
5bcf921841
Issue number: resolves #29862 --------- ## What is the current behavior? Range exposes a single part for both knobs & pins. This makes it impossible to style the knobs/pins differently when dual knobs is enabled. ## What is the new behavior? - Fixes a bug where the knobs would swap A & B when they cross over each other - Fixes the focus behavior so that dual knobs act the same as a single knob range when focusing a knob - Adds the following classes to the host element when `dualKnobs` is enabled: - `range-dual-knobs` - `range-pressed-a` when the knob with name A is pressed - `range-pressed-b` when the knob with name B is pressed - `range-pressed-lower` when the lower knob is pressed - `range-pressed-upper` when the upper knob is pressed - Adds parts for the following: - `knob-handle-a` — The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `knob-handle-b` — The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `knob-handle-lower` — The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross. - `knob-handle-upper` — The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross. - `pin-a` — The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `pin-b` — The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `pin-lower` — The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross. - `pin-upper` — The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross. - `knob-a` — The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `knob-b` — The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value. - `knob-lower` — The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross. - `knob-upper` — The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross. - `activated` — Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`. - `focused` — Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`. - `hover` — Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`. - `pressed` — Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`. - Adds e2e tests for the following: - customizing label part - customizing bar parts - customizing pin parts - customizing tick parts - customizing knob parts - customizing dual knob a & b parts - customizing dual knob lower & upper parts - verifies that a & b parts stay on the original elements but lower & upper parts swap when the values swap - Adds spec tests for the following: - css classes - value state classes - boolean property classes - pressed state classes - shadow parts - static shadow parts - verifies the shadow parts exist based on the existence of certain range properties - state shadow parts - verifies the shadow parts exist based on the state of the range knob (pressed, focused, activated, hover) ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
24 lines
793 B
JavaScript
24 lines
793 B
JavaScript
expect.extend({
|
|
toHaveShadowPart(received, part) {
|
|
if (typeof part !== 'string') {
|
|
throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name');
|
|
}
|
|
|
|
if (received.shadowRoot === null) {
|
|
throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
|
|
}
|
|
|
|
// Use attribute selector with ~= to match space-separated part values
|
|
// e.g., [part~="knob"] matches elements with part="knob" or part="knob knob-a"
|
|
const shadowPart = received.shadowRoot.querySelector(`[part~="${part}"]`);
|
|
const pass = shadowPart !== null;
|
|
|
|
const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
|
|
|
|
return {
|
|
pass,
|
|
message: () => message,
|
|
};
|
|
},
|
|
});
|