Morph MORPH
SIGN IN SIGN UP
ionic-team / ionic-framework UNCLAIMED

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 0 TypeScript
Normal View History Raw
feat(range): expose label wrapper as shadow part (#28601)
2023-11-30 10:36:21 -05:00
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');
}
feat(range): add classes and expose parts to allow individual styling of dual knobs (#30941) 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>
2026-03-04 10:36:50 -05:00
// 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}"]`);
feat(range): expose label wrapper as shadow part (#28601)
2023-11-30 10:36:21 -05:00
const pass = shadowPart !== null;
const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
return {
pass,
message: () => message,
};
},
});
Reference in New Issue Copy Permalink