Range - a11y
--
+
+
+
+ + +
From 368add2a5ca3820a1f9623c96d29bcccfa693fdc Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 10 May 2023 10:13:26 -0500
Subject: [PATCH] feat(range): add label prop (#27408)
Issue number: N/A
---------
## What is the current behavior?
Labels on `ion-range` can only be set via the `label` slot. When only
plain text is needed, this is cumbersome because you need to add an
entire new element to wrap the label.
## What is the new behavior?
Label prop added. If both the prop and slot are used, the prop will take
priority.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
- Docs PR: https://github.com/ionic-team/ionic-docs/pull/2955
- Dev build: `7.0.6-dev.11683657201.139d03f4`
---
angular/src/directives/proxies.ts | 4 +--
core/api.txt | 1 +
core/src/components.d.ts | 8 ++++++
core/src/components/range/range.md.scss | 3 +-
core/src/components/range/range.scss | 2 +-
core/src/components/range/range.tsx | 13 +++++++--
.../src/components/range/test/a11y/index.html | 14 ++++++----
.../components/range/test/label/index.html | 16 +++++++++++
.../components/range/test/label/range.e2e.ts | 26 ++++++++++++++++++
...l-prop-end-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 6564 bytes
...-prop-end-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2379 bytes
...l-prop-end-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 6578 bytes
...l-prop-end-ios-rtl-Mobile-Chrome-linux.png | Bin 0 -> 6555 bytes
...-prop-end-ios-rtl-Mobile-Firefox-linux.png | Bin 0 -> 2342 bytes
...l-prop-end-ios-rtl-Mobile-Safari-linux.png | Bin 0 -> 6575 bytes
...el-prop-end-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5046 bytes
...l-prop-end-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1737 bytes
...el-prop-end-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 4764 bytes
...el-prop-end-md-rtl-Mobile-Chrome-linux.png | Bin 0 -> 4888 bytes
...l-prop-end-md-rtl-Mobile-Firefox-linux.png | Bin 0 -> 1720 bytes
...el-prop-end-md-rtl-Mobile-Safari-linux.png | Bin 0 -> 4790 bytes
...prop-fixed-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 8282 bytes
...rop-fixed-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2914 bytes
...prop-fixed-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 8358 bytes
...prop-fixed-ios-rtl-Mobile-Chrome-linux.png | Bin 0 -> 8187 bytes
...rop-fixed-ios-rtl-Mobile-Firefox-linux.png | Bin 0 -> 2903 bytes
...prop-fixed-ios-rtl-Mobile-Safari-linux.png | Bin 0 -> 8346 bytes
...-prop-fixed-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5170 bytes
...prop-fixed-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1816 bytes
...-prop-fixed-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 5146 bytes
...-prop-fixed-md-rtl-Mobile-Chrome-linux.png | Bin 0 -> 5163 bytes
...prop-fixed-md-rtl-Mobile-Firefox-linux.png | Bin 0 -> 1818 bytes
...-prop-fixed-md-rtl-Mobile-Safari-linux.png | Bin 0 -> 5098 bytes
...prop-start-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 8156 bytes
...rop-start-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2831 bytes
...prop-start-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 8318 bytes
...prop-start-ios-rtl-Mobile-Chrome-linux.png | Bin 0 -> 8128 bytes
...rop-start-ios-rtl-Mobile-Firefox-linux.png | Bin 0 -> 2820 bytes
...prop-start-ios-rtl-Mobile-Safari-linux.png | Bin 0 -> 8309 bytes
...-prop-start-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5155 bytes
...prop-start-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1812 bytes
...-prop-start-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 5143 bytes
...-prop-start-md-rtl-Mobile-Chrome-linux.png | Bin 0 -> 5143 bytes
...prop-start-md-rtl-Mobile-Firefox-linux.png | Bin 0 -> 1808 bytes
...-prop-start-md-rtl-Mobile-Safari-linux.png | Bin 0 -> 5087 bytes
.../components/range/test/label/range.spec.ts | 23 ++++++++++++++++
packages/vue/src/proxies.ts | 1 +
47 files changed, 98 insertions(+), 13 deletions(-)
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Chrome-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Firefox-linux.png
create mode 100644 core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Safari-linux.png
create mode 100644 core/src/components/range/test/label/range.spec.ts
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index e7e8a46950..c7bc83527c 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1619,14 +1619,14 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
@ProxyCmp({
- inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
})
@Component({
selector: 'ion-range',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '