From 7e0dd91293818249997393319bb624044cfc0ae0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Tue, 29 Oct 2024 18:29:00 +0000 Subject: [PATCH 01/22] First commit --- core/api.txt | 110 +------------- core/src/components/range/range.ionic.scss | 140 ++++++++++++++++++ .../components/range/range.ionic.vars.scss | 75 ++++++++++ core/src/components/range/range.tsx | 2 +- 4 files changed, 217 insertions(+), 110 deletions(-) create mode 100644 core/src/components/range/range.ionic.scss create mode 100644 core/src/components/range/range.ionic.vars.scss diff --git a/core/api.txt b/core/api.txt index 2f199c85334..bf5aa84c7a1 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1187,7 +1187,6 @@ ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,f ion-label,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-label,css-prop,--color,ionic ion-label,css-prop,--color,ios -ion-label,css-prop,--color,md ion-list,none ion-list,prop,inset,boolean,false,false,false @@ -1204,22 +1203,16 @@ ion-list-header,prop,mode,"ios" | "md",undefined,false,false ion-list-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-list-header,css-prop,--background,ionic ion-list-header,css-prop,--background,ios -ion-list-header,css-prop,--background,md ion-list-header,css-prop,--border-color,ionic ion-list-header,css-prop,--border-color,ios -ion-list-header,css-prop,--border-color,md ion-list-header,css-prop,--border-style,ionic ion-list-header,css-prop,--border-style,ios -ion-list-header,css-prop,--border-style,md ion-list-header,css-prop,--border-width,ionic ion-list-header,css-prop,--border-width,ios -ion-list-header,css-prop,--border-width,md ion-list-header,css-prop,--color,ionic ion-list-header,css-prop,--color,ios -ion-list-header,css-prop,--color,md ion-list-header,css-prop,--inner-border-width,ionic ion-list-header,css-prop,--inner-border-width,ios -ion-list-header,css-prop,--inner-border-width,md ion-loading,scoped ion-loading,prop,animated,boolean,true,false,false @@ -1492,20 +1485,14 @@ ion-note,shadow ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-note,prop,mode,"ios" | "md",undefined,false,false ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-note,css-prop,--color,ionic -ion-note,css-prop,--color,ios -ion-note,css-prop,--color,md ion-picker,shadow ion-picker,prop,mode,"ios" | "md",undefined,false,false ion-picker,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-picker,css-prop,--fade-background-rgb,ionic ion-picker,css-prop,--fade-background-rgb,ios ion-picker,css-prop,--fade-background-rgb,md -ion-picker,css-prop,--highlight-background,ionic ion-picker,css-prop,--highlight-background,ios ion-picker,css-prop,--highlight-background,md -ion-picker,css-prop,--highlight-border-radius,ionic ion-picker,css-prop,--highlight-border-radius,ios ion-picker,css-prop,--highlight-border-radius,md @@ -1735,37 +1722,26 @@ ion-range,event,ionFocus,void,true ion-range,event,ionInput,RangeChangeEventDetail,true ion-range,event,ionKnobMoveEnd,RangeKnobMoveEndEventDetail,true ion-range,event,ionKnobMoveStart,RangeKnobMoveStartEventDetail,true -ion-range,css-prop,--bar-background,ionic ion-range,css-prop,--bar-background,ios ion-range,css-prop,--bar-background,md -ion-range,css-prop,--bar-background-active,ionic ion-range,css-prop,--bar-background-active,ios ion-range,css-prop,--bar-background-active,md -ion-range,css-prop,--bar-border-radius,ionic ion-range,css-prop,--bar-border-radius,ios ion-range,css-prop,--bar-border-radius,md -ion-range,css-prop,--bar-height,ionic ion-range,css-prop,--bar-height,ios ion-range,css-prop,--bar-height,md -ion-range,css-prop,--height,ionic ion-range,css-prop,--height,ios ion-range,css-prop,--height,md -ion-range,css-prop,--knob-background,ionic ion-range,css-prop,--knob-background,ios ion-range,css-prop,--knob-background,md -ion-range,css-prop,--knob-border-radius,ionic ion-range,css-prop,--knob-border-radius,ios ion-range,css-prop,--knob-border-radius,md -ion-range,css-prop,--knob-box-shadow,ionic ion-range,css-prop,--knob-box-shadow,ios ion-range,css-prop,--knob-box-shadow,md -ion-range,css-prop,--knob-size,ionic ion-range,css-prop,--knob-size,ios ion-range,css-prop,--knob-size,md -ion-range,css-prop,--pin-background,ionic ion-range,css-prop,--pin-background,ios ion-range,css-prop,--pin-background,md -ion-range,css-prop,--pin-color,ionic ion-range,css-prop,--pin-color,ios ion-range,css-prop,--pin-color,md ion-range,part,bar @@ -2066,54 +2042,6 @@ ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectChangeEventDetail,true ion-select,event,ionDismiss,void,true ion-select,event,ionFocus,void,true -ion-select,css-prop,--background,ionic -ion-select,css-prop,--background,ios -ion-select,css-prop,--background,md -ion-select,css-prop,--border-color,ionic -ion-select,css-prop,--border-color,ios -ion-select,css-prop,--border-color,md -ion-select,css-prop,--border-radius,ionic -ion-select,css-prop,--border-radius,ios -ion-select,css-prop,--border-radius,md -ion-select,css-prop,--border-style,ionic -ion-select,css-prop,--border-style,ios -ion-select,css-prop,--border-style,md -ion-select,css-prop,--border-width,ionic -ion-select,css-prop,--border-width,ios -ion-select,css-prop,--border-width,md -ion-select,css-prop,--highlight-color-focused,ionic -ion-select,css-prop,--highlight-color-focused,ios -ion-select,css-prop,--highlight-color-focused,md -ion-select,css-prop,--highlight-color-invalid,ionic -ion-select,css-prop,--highlight-color-invalid,ios -ion-select,css-prop,--highlight-color-invalid,md -ion-select,css-prop,--highlight-color-valid,ionic -ion-select,css-prop,--highlight-color-valid,ios -ion-select,css-prop,--highlight-color-valid,md -ion-select,css-prop,--highlight-height,ionic -ion-select,css-prop,--highlight-height,ios -ion-select,css-prop,--highlight-height,md -ion-select,css-prop,--padding-bottom,ionic -ion-select,css-prop,--padding-bottom,ios -ion-select,css-prop,--padding-bottom,md -ion-select,css-prop,--padding-end,ionic -ion-select,css-prop,--padding-end,ios -ion-select,css-prop,--padding-end,md -ion-select,css-prop,--padding-start,ionic -ion-select,css-prop,--padding-start,ios -ion-select,css-prop,--padding-start,md -ion-select,css-prop,--padding-top,ionic -ion-select,css-prop,--padding-top,ios -ion-select,css-prop,--padding-top,md -ion-select,css-prop,--placeholder-color,ionic -ion-select,css-prop,--placeholder-color,ios -ion-select,css-prop,--placeholder-color,md -ion-select,css-prop,--placeholder-opacity,ionic -ion-select,css-prop,--placeholder-opacity,ios -ion-select,css-prop,--placeholder-opacity,md -ion-select,css-prop,--ripple-color,ionic -ion-select,css-prop,--ripple-color,ios -ion-select,css-prop,--ripple-color,md ion-select,part,container ion-select,part,icon ion-select,part,label @@ -2347,15 +2275,12 @@ ion-textarea,css-prop,--placeholder-opacity,md ion-thumbnail,shadow ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false ion-thumbnail,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-thumbnail,css-prop,--border-radius -ion-thumbnail,css-prop,--size ion-title,shadow ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-title,prop,mode,"ios" | "md",undefined,false,false ion-title,prop,size,"large" | "small" | undefined,undefined,false,false ion-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-title,css-prop,--color,ionic ion-title,css-prop,--color,ios ion-title,css-prop,--color,md @@ -2510,37 +2435,4 @@ ion-toggle,part,track ion-toolbar,shadow ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-toolbar,prop,mode,"ios" | "md",undefined,false,false -ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-toolbar,css-prop,--background,ionic -ion-toolbar,css-prop,--background,ios -ion-toolbar,css-prop,--background,md -ion-toolbar,css-prop,--border-color,ionic -ion-toolbar,css-prop,--border-color,ios -ion-toolbar,css-prop,--border-color,md -ion-toolbar,css-prop,--border-style,ionic -ion-toolbar,css-prop,--border-style,ios -ion-toolbar,css-prop,--border-style,md -ion-toolbar,css-prop,--border-width,ionic -ion-toolbar,css-prop,--border-width,ios -ion-toolbar,css-prop,--border-width,md -ion-toolbar,css-prop,--color,ionic -ion-toolbar,css-prop,--color,ios -ion-toolbar,css-prop,--color,md -ion-toolbar,css-prop,--min-height,ionic -ion-toolbar,css-prop,--min-height,ios -ion-toolbar,css-prop,--min-height,md -ion-toolbar,css-prop,--opacity,ionic -ion-toolbar,css-prop,--opacity,ios -ion-toolbar,css-prop,--opacity,md -ion-toolbar,css-prop,--padding-bottom,ionic -ion-toolbar,css-prop,--padding-bottom,ios -ion-toolbar,css-prop,--padding-bottom,md -ion-toolbar,css-prop,--padding-end,ionic -ion-toolbar,css-prop,--padding-end,ios -ion-toolbar,css-prop,--padding-end,md -ion-toolbar,css-prop,--padding-start,ionic -ion-toolbar,css-prop,--padding-start,ios -ion-toolbar,css-prop,--padding-start,md -ion-toolbar,css-prop,--padding-top,ionic -ion-toolbar,css-prop,--padding-top,ios -ion-toolbar,css-prop,--padding-top,md \ No newline at end of file +ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false \ No newline at end of file diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss new file mode 100644 index 00000000000..6bbea07c483 --- /dev/null +++ b/core/src/components/range/range.ionic.scss @@ -0,0 +1,140 @@ +@import "./range"; +@import "./range.ionic.vars"; +@import "../../foundations/ionic.vars"; + +// Ionic Range +// -------------------------------------------------- + +:host { + --knob-border-radius: 50%; + --knob-background: #{$range-ion-knob-background-color}; + --knob-box-shadow: #{$range-ion-knob-box-shadow}; + --knob-size: #{$range-ion-knob-width}; + --bar-height: #{$range-ion-bar-height}; + --bar-background: #{$range-ion-bar-background-color}; + --bar-background-active: #{ion-color(primary, base)}; + --bar-border-radius: #{$range-ion-bar-border-radius}; + --height: #{$range-ion-slider-height}; +} + +:host(.range-item-start-adjustment) { + @include padding(null, null, null, $range-ion-item-padding-horizontal); +} + +:host(.range-item-end-adjustment) { + @include padding(null, $range-ion-item-padding-horizontal, null, null); +} + +:host(.ion-color) .range-bar-active, +:host(.ion-color) .range-tick-active { + background: current-color(base); +} + +::slotted([slot="start"]) { + @include margin(0, 16px, 0, 0); +} + +::slotted([slot="end"]) { + @include margin(0, 0, 0, 16px); +} + +:host(.range-has-pin:not(.range-label-placement-stacked)) { + /** + * The pin should not overlap any elements that are + * above the range. By adding padding to the top of the + * range, it provides a buffer for the pin to move into + * when it is pressed. + * + * The padding is not included when the label is stacked + * because the pin is below the label. + * It still requires a buffer to prevent the pin from + * overlapping the range. The buffer is added to the + * bottom of the range label instead of the host. + */ + @include padding(calc($range-ion-padding-vertical + $range-ion-pin-font-size), null, null, null); +} + +:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper { + /** + * The pin should not overlap the stacked label. By adding + * margin to the bottom of the label, it provides a buffer + * for the pin to move into when it is pressed. + */ + @include margin(null, null, calc($range-ion-padding-vertical + $range-ion-pin-font-size), null); +} + +.range-bar-active { + bottom: 0; + + width: auto; + + background: var(--bar-background-active); + + &.has-ticks { + @include border-radius(0); + @include margin(null, calc(-1 * $range-ion-tick-width * 0.5), null, calc(-1 * $range-ion-tick-width * 0.5)); + } +} + +.range-tick { + @include margin(null, calc($range-ios-tick-width * -0.5), null, null); + @include border-radius($range-ion-tick-border-radius); + + position: absolute; + top: ($range-ion-hit-height * 0.5) - ($range-ion-tick-height * 0.5); + + width: $range-ion-tick-width; + height: $range-ion-tick-height; + + background: $range-ion-tick-background-color; + pointer-events: none; +} + +.range-tick-active { + background: var(--bar-background-active); +} + +.range-pin { + @include transform(translate3d(0, 100%, 0), scale(0.01)); + @include padding( + $range-ion-pin-padding-top, + $range-ion-pin-padding-end, + $range-ion-pin-padding-bottom, + $range-ion-pin-padding-start + ); + + min-width: 28px; + + transition: transform 120ms ease; + + background: $range-ion-pin-background-color; + color: $range-ion-pin-color; + + font-size: $range-ion-pin-font-size; + + text-align: center; +} + +/** + * The -100% ensures the pin sits on top + * of the range-knob-handle container. + * We apply 11px so that the pin + * text is closer to the knob inside of the container. + * We also apply the 11px here instead of using "top" + * otherwise the pin text will translate below the knob + * when the text is scaled. + */ +.range-knob-pressed .range-pin, +.range-knob-handle.ion-focused .range-pin { + transform: translate3d(0, calc(-100% + 11px), 0) scale(1); +} + +// iOS Range: Disabled +// -------------------------------------------------- +// When the range is disabled, the entire range, +// range label, any slotted labels, and any slotted +// icons need to receive the same opacity. + +:host(.range-disabled) { + opacity: $range-ion-disabled-opacity; +} diff --git a/core/src/components/range/range.ionic.vars.scss b/core/src/components/range/range.ionic.vars.scss new file mode 100644 index 00000000000..24e448bfccf --- /dev/null +++ b/core/src/components/range/range.ionic.vars.scss @@ -0,0 +1,75 @@ +@import "../../foundations/ionic.vars"; +@import "../../themes/native/native.globals.ios"; + +// Ionic Range +// -------------------------------------------------- + +/// @prop - Padding top/bottom of the range +$range-ion-padding-vertical: 8px; + +/// @prop - Padding start/end of the range - modern syntax +/** + * 24px was chosen so the knob and its + * shadow do not get cut off by the item. + */ +$range-ion-item-padding-horizontal: 24px; + +/// @prop - Height of the range slider +$range-ion-slider-height: 42px; + +/// @prop - Height of the area that will select the range knob +$range-ion-hit-height: $range-ion-slider-height; + +/// @prop - Height of the range bar +$range-ion-bar-height: $ion-scale-200; + +/// @prop - Background of the range bar +$range-ion-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)); + +/// @prop - Border radius of the range bar +$range-ion-bar-border-radius: 2px; + +/// @prop - Width of the range knob +$range-ion-knob-width: 26px; + +/// @prop - Box shadow of the range knob +$range-ion-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12); + +/// @prop - Background of the range knob +$range-ion-knob-background-color: #ffffff; + +/// @prop - Width of the range tick +$range-ion-tick-width: $range-ion-bar-height; + +/// @prop - Height of the range tick +$range-ion-tick-height: 8px; + +/// @prop - Border radius of the range tick +$range-ion-tick-border-radius: 0; + +/// @prop - Background of the range tick +$range-ion-tick-background-color: $range-ion-bar-background-color; + +/// @prop - Background of the range pin +$range-ion-pin-background-color: transparent; + +/// @prop - Color of the range pin +$range-ion-pin-color: $text-color; + +/// @prop - Font size of the range pin +$range-ion-pin-font-size: dynamic-font(12px); + +/// @prop - Padding top of the range pin +$range-ion-pin-padding-top: 8px; + +/// @prop - Padding end of the range pin +$range-ion-pin-padding-end: $range-ion-pin-padding-top; + +/// @prop - Padding bottom of the range pin +$range-ion-pin-padding-bottom: $range-ion-pin-padding-top; + +/// @prop - Padding start of the range pin +$range-ion-pin-padding-start: $range-ion-pin-padding-end; + +/// @prop - Opacity of the disabled range +$range-ion-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index af2f2519435..9b749941919 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -43,7 +43,7 @@ import type { styleUrls: { ios: 'range.ios.scss', md: 'range.md.scss', - ionic: 'range.md.scss', + ionic: 'range.ionic.scss', }, shadow: true, }) From 4b36e739b0e6bdc361b12056bd1da3ae5683e7f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Wed, 30 Oct 2024 12:44:46 +0000 Subject: [PATCH 02/22] Finishing range styling --- core/api.txt | 110 +++++++++++++++++- core/src/components/range/range.ionic.scss | 13 ++- .../components/range/range.ionic.vars.scss | 25 ++-- 3 files changed, 133 insertions(+), 15 deletions(-) diff --git a/core/api.txt b/core/api.txt index bf5aa84c7a1..2f199c85334 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1187,6 +1187,7 @@ ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,f ion-label,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-label,css-prop,--color,ionic ion-label,css-prop,--color,ios +ion-label,css-prop,--color,md ion-list,none ion-list,prop,inset,boolean,false,false,false @@ -1203,16 +1204,22 @@ ion-list-header,prop,mode,"ios" | "md",undefined,false,false ion-list-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-list-header,css-prop,--background,ionic ion-list-header,css-prop,--background,ios +ion-list-header,css-prop,--background,md ion-list-header,css-prop,--border-color,ionic ion-list-header,css-prop,--border-color,ios +ion-list-header,css-prop,--border-color,md ion-list-header,css-prop,--border-style,ionic ion-list-header,css-prop,--border-style,ios +ion-list-header,css-prop,--border-style,md ion-list-header,css-prop,--border-width,ionic ion-list-header,css-prop,--border-width,ios +ion-list-header,css-prop,--border-width,md ion-list-header,css-prop,--color,ionic ion-list-header,css-prop,--color,ios +ion-list-header,css-prop,--color,md ion-list-header,css-prop,--inner-border-width,ionic ion-list-header,css-prop,--inner-border-width,ios +ion-list-header,css-prop,--inner-border-width,md ion-loading,scoped ion-loading,prop,animated,boolean,true,false,false @@ -1485,14 +1492,20 @@ ion-note,shadow ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-note,prop,mode,"ios" | "md",undefined,false,false ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false +ion-note,css-prop,--color,ionic +ion-note,css-prop,--color,ios +ion-note,css-prop,--color,md ion-picker,shadow ion-picker,prop,mode,"ios" | "md",undefined,false,false ion-picker,prop,theme,"ios" | "md" | "ionic",undefined,false,false +ion-picker,css-prop,--fade-background-rgb,ionic ion-picker,css-prop,--fade-background-rgb,ios ion-picker,css-prop,--fade-background-rgb,md +ion-picker,css-prop,--highlight-background,ionic ion-picker,css-prop,--highlight-background,ios ion-picker,css-prop,--highlight-background,md +ion-picker,css-prop,--highlight-border-radius,ionic ion-picker,css-prop,--highlight-border-radius,ios ion-picker,css-prop,--highlight-border-radius,md @@ -1722,26 +1735,37 @@ ion-range,event,ionFocus,void,true ion-range,event,ionInput,RangeChangeEventDetail,true ion-range,event,ionKnobMoveEnd,RangeKnobMoveEndEventDetail,true ion-range,event,ionKnobMoveStart,RangeKnobMoveStartEventDetail,true +ion-range,css-prop,--bar-background,ionic ion-range,css-prop,--bar-background,ios ion-range,css-prop,--bar-background,md +ion-range,css-prop,--bar-background-active,ionic ion-range,css-prop,--bar-background-active,ios ion-range,css-prop,--bar-background-active,md +ion-range,css-prop,--bar-border-radius,ionic ion-range,css-prop,--bar-border-radius,ios ion-range,css-prop,--bar-border-radius,md +ion-range,css-prop,--bar-height,ionic ion-range,css-prop,--bar-height,ios ion-range,css-prop,--bar-height,md +ion-range,css-prop,--height,ionic ion-range,css-prop,--height,ios ion-range,css-prop,--height,md +ion-range,css-prop,--knob-background,ionic ion-range,css-prop,--knob-background,ios ion-range,css-prop,--knob-background,md +ion-range,css-prop,--knob-border-radius,ionic ion-range,css-prop,--knob-border-radius,ios ion-range,css-prop,--knob-border-radius,md +ion-range,css-prop,--knob-box-shadow,ionic ion-range,css-prop,--knob-box-shadow,ios ion-range,css-prop,--knob-box-shadow,md +ion-range,css-prop,--knob-size,ionic ion-range,css-prop,--knob-size,ios ion-range,css-prop,--knob-size,md +ion-range,css-prop,--pin-background,ionic ion-range,css-prop,--pin-background,ios ion-range,css-prop,--pin-background,md +ion-range,css-prop,--pin-color,ionic ion-range,css-prop,--pin-color,ios ion-range,css-prop,--pin-color,md ion-range,part,bar @@ -2042,6 +2066,54 @@ ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectChangeEventDetail,true ion-select,event,ionDismiss,void,true ion-select,event,ionFocus,void,true +ion-select,css-prop,--background,ionic +ion-select,css-prop,--background,ios +ion-select,css-prop,--background,md +ion-select,css-prop,--border-color,ionic +ion-select,css-prop,--border-color,ios +ion-select,css-prop,--border-color,md +ion-select,css-prop,--border-radius,ionic +ion-select,css-prop,--border-radius,ios +ion-select,css-prop,--border-radius,md +ion-select,css-prop,--border-style,ionic +ion-select,css-prop,--border-style,ios +ion-select,css-prop,--border-style,md +ion-select,css-prop,--border-width,ionic +ion-select,css-prop,--border-width,ios +ion-select,css-prop,--border-width,md +ion-select,css-prop,--highlight-color-focused,ionic +ion-select,css-prop,--highlight-color-focused,ios +ion-select,css-prop,--highlight-color-focused,md +ion-select,css-prop,--highlight-color-invalid,ionic +ion-select,css-prop,--highlight-color-invalid,ios +ion-select,css-prop,--highlight-color-invalid,md +ion-select,css-prop,--highlight-color-valid,ionic +ion-select,css-prop,--highlight-color-valid,ios +ion-select,css-prop,--highlight-color-valid,md +ion-select,css-prop,--highlight-height,ionic +ion-select,css-prop,--highlight-height,ios +ion-select,css-prop,--highlight-height,md +ion-select,css-prop,--padding-bottom,ionic +ion-select,css-prop,--padding-bottom,ios +ion-select,css-prop,--padding-bottom,md +ion-select,css-prop,--padding-end,ionic +ion-select,css-prop,--padding-end,ios +ion-select,css-prop,--padding-end,md +ion-select,css-prop,--padding-start,ionic +ion-select,css-prop,--padding-start,ios +ion-select,css-prop,--padding-start,md +ion-select,css-prop,--padding-top,ionic +ion-select,css-prop,--padding-top,ios +ion-select,css-prop,--padding-top,md +ion-select,css-prop,--placeholder-color,ionic +ion-select,css-prop,--placeholder-color,ios +ion-select,css-prop,--placeholder-color,md +ion-select,css-prop,--placeholder-opacity,ionic +ion-select,css-prop,--placeholder-opacity,ios +ion-select,css-prop,--placeholder-opacity,md +ion-select,css-prop,--ripple-color,ionic +ion-select,css-prop,--ripple-color,ios +ion-select,css-prop,--ripple-color,md ion-select,part,container ion-select,part,icon ion-select,part,label @@ -2275,12 +2347,15 @@ ion-textarea,css-prop,--placeholder-opacity,md ion-thumbnail,shadow ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false ion-thumbnail,prop,theme,"ios" | "md" | "ionic",undefined,false,false +ion-thumbnail,css-prop,--border-radius +ion-thumbnail,css-prop,--size ion-title,shadow ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-title,prop,mode,"ios" | "md",undefined,false,false ion-title,prop,size,"large" | "small" | undefined,undefined,false,false ion-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false +ion-title,css-prop,--color,ionic ion-title,css-prop,--color,ios ion-title,css-prop,--color,md @@ -2435,4 +2510,37 @@ ion-toggle,part,track ion-toolbar,shadow ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-toolbar,prop,mode,"ios" | "md",undefined,false,false -ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false \ No newline at end of file +ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false +ion-toolbar,css-prop,--background,ionic +ion-toolbar,css-prop,--background,ios +ion-toolbar,css-prop,--background,md +ion-toolbar,css-prop,--border-color,ionic +ion-toolbar,css-prop,--border-color,ios +ion-toolbar,css-prop,--border-color,md +ion-toolbar,css-prop,--border-style,ionic +ion-toolbar,css-prop,--border-style,ios +ion-toolbar,css-prop,--border-style,md +ion-toolbar,css-prop,--border-width,ionic +ion-toolbar,css-prop,--border-width,ios +ion-toolbar,css-prop,--border-width,md +ion-toolbar,css-prop,--color,ionic +ion-toolbar,css-prop,--color,ios +ion-toolbar,css-prop,--color,md +ion-toolbar,css-prop,--min-height,ionic +ion-toolbar,css-prop,--min-height,ios +ion-toolbar,css-prop,--min-height,md +ion-toolbar,css-prop,--opacity,ionic +ion-toolbar,css-prop,--opacity,ios +ion-toolbar,css-prop,--opacity,md +ion-toolbar,css-prop,--padding-bottom,ionic +ion-toolbar,css-prop,--padding-bottom,ios +ion-toolbar,css-prop,--padding-bottom,md +ion-toolbar,css-prop,--padding-end,ionic +ion-toolbar,css-prop,--padding-end,ios +ion-toolbar,css-prop,--padding-end,md +ion-toolbar,css-prop,--padding-start,ionic +ion-toolbar,css-prop,--padding-start,ios +ion-toolbar,css-prop,--padding-start,md +ion-toolbar,css-prop,--padding-top,ionic +ion-toolbar,css-prop,--padding-top,ios +ion-toolbar,css-prop,--padding-top,md \ No newline at end of file diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 6bbea07c483..df85b0dc406 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -10,6 +10,7 @@ --knob-background: #{$range-ion-knob-background-color}; --knob-box-shadow: #{$range-ion-knob-box-shadow}; --knob-size: #{$range-ion-knob-width}; + --knob-handle-size: #{$range-ion-knob-handle-width}; --bar-height: #{$range-ion-bar-height}; --bar-background: #{$range-ion-bar-background-color}; --bar-background-active: #{ion-color(primary, base)}; @@ -77,11 +78,11 @@ } .range-tick { - @include margin(null, calc($range-ios-tick-width * -0.5), null, null); + @include margin-horizontal(calc($range-ion-tick-width * -0.5), null); @include border-radius($range-ion-tick-border-radius); position: absolute; - top: ($range-ion-hit-height * 0.5) - ($range-ion-tick-height * 0.5); + top: calc(($range-ion-hit-height * 0.5) - ($range-ion-tick-height * 0.5)); width: $range-ion-tick-width; height: $range-ion-tick-height; @@ -115,6 +116,12 @@ text-align: center; } +.range-knob { + border-style: solid; + border-width: $ion-border-size-025; + border-color: #{ion-color(primary, base)}; +} + /** * The -100% ensures the pin sits on top * of the range-knob-handle container. @@ -129,7 +136,7 @@ transform: translate3d(0, calc(-100% + 11px), 0) scale(1); } -// iOS Range: Disabled +// Ionic Range: Disabled (based on iOS Range) // -------------------------------------------------- // When the range is disabled, the entire range, // range label, any slotted labels, and any slotted diff --git a/core/src/components/range/range.ionic.vars.scss b/core/src/components/range/range.ionic.vars.scss index 24e448bfccf..a5758d4dfdd 100644 --- a/core/src/components/range/range.ionic.vars.scss +++ b/core/src/components/range/range.ionic.vars.scss @@ -5,14 +5,14 @@ // -------------------------------------------------- /// @prop - Padding top/bottom of the range -$range-ion-padding-vertical: 8px; +$range-ion-padding-vertical: $ion-space-200; /// @prop - Padding start/end of the range - modern syntax /** * 24px was chosen so the knob and its * shadow do not get cut off by the item. */ -$range-ion-item-padding-horizontal: 24px; +$range-ion-item-padding-horizontal: $ion-space-600; /// @prop - Height of the range slider $range-ion-slider-height: 42px; @@ -24,28 +24,31 @@ $range-ion-hit-height: $range-ion-slider-height; $range-ion-bar-height: $ion-scale-200; /// @prop - Background of the range bar -$range-ion-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)); +$range-ion-bar-background-color: $ion-primitives-neutral-100; /// @prop - Border radius of the range bar -$range-ion-bar-border-radius: 2px; +$range-ion-bar-border-radius: $ion-border-radius-400; /// @prop - Width of the range knob -$range-ion-knob-width: 26px; +$range-ion-knob-handle-width: $ion-scale-1000; + +/// @prop - Width of the range knob +$range-ion-knob-width: 22px; /// @prop - Box shadow of the range knob -$range-ion-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12); +$range-ion-knob-box-shadow: 0; /// @prop - Background of the range knob -$range-ion-knob-background-color: #ffffff; +$range-ion-knob-background-color: $ion-primitives-base-white; /// @prop - Width of the range tick -$range-ion-tick-width: $range-ion-bar-height; +$range-ion-tick-width: $ion-scale-100; /// @prop - Height of the range tick -$range-ion-tick-height: 8px; +$range-ion-tick-height: $ion-font-line-height-300; /// @prop - Border radius of the range tick -$range-ion-tick-border-radius: 0; +$range-ion-tick-border-radius: $ion-border-radius-0; /// @prop - Background of the range tick $range-ion-tick-background-color: $range-ion-bar-background-color; @@ -60,7 +63,7 @@ $range-ion-pin-color: $text-color; $range-ion-pin-font-size: dynamic-font(12px); /// @prop - Padding top of the range pin -$range-ion-pin-padding-top: 8px; +$range-ion-pin-padding-top: $ion-space-200; /// @prop - Padding end of the range pin $range-ion-pin-padding-end: $range-ion-pin-padding-top; From c65e3c98bd0447fe04deaf5abd50131d096b06c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Wed, 30 Oct 2024 13:16:22 +0000 Subject: [PATCH 03/22] Fixing lint issue --- core/src/components/range/range.ionic.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index df85b0dc406..715ca3235f4 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -99,9 +99,9 @@ @include transform(translate3d(0, 100%, 0), scale(0.01)); @include padding( $range-ion-pin-padding-top, - $range-ion-pin-padding-end, - $range-ion-pin-padding-bottom, - $range-ion-pin-padding-start + $range-ion-pin-padding-end, + $range-ion-pin-padding-bottom, + $range-ion-pin-padding-start ); min-width: 28px; @@ -117,8 +117,8 @@ } .range-knob { - border-style: solid; border-width: $ion-border-size-025; + border-style: solid; border-color: #{ion-color(primary, base)}; } From 06408d85e0ff78d73c9742c097ab251236205b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Wed, 30 Oct 2024 15:01:14 +0000 Subject: [PATCH 04/22] CR --- core/src/components/range/{range.scss => range.common.scss} | 1 - core/src/components/range/range.ionic.scss | 2 +- core/src/components/range/range.ios.scss | 2 +- core/src/components/range/range.md.scss | 2 +- core/src/components/range/range.native.scss | 6 ++++++ 5 files changed, 9 insertions(+), 4 deletions(-) rename core/src/components/range/{range.scss => range.common.scss} (99%) create mode 100644 core/src/components/range/range.native.scss diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.common.scss similarity index 99% rename from core/src/components/range/range.scss rename to core/src/components/range/range.common.scss index a6e67940f5c..60b53a440e5 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.common.scss @@ -18,7 +18,6 @@ * @prop --pin-background: Background of the range pin (only available in MD mode) * @prop --pin-color: Color of the range pin (only available in MD mode) */ - --knob-handle-size: calc(var(--knob-size) * 2); display: flex; position: relative; diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 715ca3235f4..16e4c14e63f 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -1,4 +1,4 @@ -@import "./range"; +@import "./range.common"; @import "./range.ionic.vars"; @import "../../foundations/ionic.vars"; diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index ad715ded787..06a678a97e3 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -1,4 +1,4 @@ -@import "./range"; +@import "./range.native"; @import "./range.ios.vars"; // iOS Range diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index df6bea37546..a9298300314 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -1,4 +1,4 @@ -@import "./range"; +@import "./range.native"; @import "./range.md.vars"; // Material Design Range diff --git a/core/src/components/range/range.native.scss b/core/src/components/range/range.native.scss new file mode 100644 index 00000000000..9200f3bd976 --- /dev/null +++ b/core/src/components/range/range.native.scss @@ -0,0 +1,6 @@ +@import "range.common"; +@import "./range.vars.scss"; + +:host { + --knob-handle-size: calc(var(--knob-size) * 2); +} From 6004d453fafba010ea41001f76d943ddf37adf48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Thu, 31 Oct 2024 12:25:42 +0000 Subject: [PATCH 05/22] CR + QA --- core/src/components/range/range.common.scss | 51 ------- core/src/components/range/range.ionic.scss | 125 ++++++++++++++---- .../components/range/range.ionic.vars.scss | 78 ----------- core/src/components/range/range.native.scss | 68 ++++++++++ .../components/range/test/basic/range.e2e.ts | 2 +- ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2052 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2848 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2087 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2200 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2953 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2630 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2263 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 3212 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2365 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2025 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2899 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2094 bytes 17 files changed, 166 insertions(+), 158 deletions(-) delete mode 100644 core/src/components/range/range.ionic.vars.scss create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/src/components/range/range.common.scss b/core/src/components/range/range.common.scss index 60b53a440e5..74bb9f9d67f 100644 --- a/core/src/components/range/range.common.scss +++ b/core/src/components/range/range.common.scss @@ -25,10 +25,7 @@ flex: 3; align-items: center; - font-family: $font-family-base; - user-select: none; - z-index: $z-index-item-input; } :host(.range-disabled) { @@ -39,10 +36,6 @@ flex: initial; } -::slotted(ion-icon[slot]) { - font-size: 24px; -} - .range-slider { position: relative; @@ -213,8 +206,6 @@ * only the label would show and users * would not be able to see the range. */ - max-width: 200px; - text-overflow: ellipsis; white-space: nowrap; @@ -253,15 +244,6 @@ flex-direction: row; } -:host(.range-label-placement-start) .label-text-wrapper { - /** - * The margin between the label and - * the range should be on the end - * when the label sits at the start. - */ - @include margin(0, $form-control-label-margin, 0, 0); -} - // Range Label Placement - End // ---------------------------------------------------------------- @@ -273,27 +255,9 @@ flex-direction: row-reverse; } -/** - * The margin between the label and - * the range should be on the start - * when the label sits at the end. - */ -:host(.range-label-placement-end) .label-text-wrapper { - @include margin(0, 0, 0, $form-control-label-margin); -} - // Range Label Placement - Fixed // ---------------------------------------------------------------- -:host(.range-label-placement-fixed) .label-text-wrapper { - /** - * The margin between the label and - * the range should be on the end - * when the label sits at the start. - */ - @include margin(0, $form-control-label-margin, 0, 0); -} - /** * Label is on the left of the range in LTR and * on the right in RTL. Label also has a fixed width. @@ -322,24 +286,9 @@ @include transform-origin(start, top); @include transform(scale(#{$form-control-label-stacked-scale})); - /** - * The margin between the label and - * the range should be on the bottom - * when the label sits on top. - */ - @include margin(null, 0, $form-control-label-margin, 0); - /** * Label text should not extend * beyond the bounds of the range. */ max-width: calc(100% / #{$form-control-label-stacked-scale}); } - -:host(.in-item.range-label-placement-stacked) .label-text-wrapper { - @include margin($range-item-label-margin-top, null, $form-control-label-margin, null); -} - -:host(.in-item.range-label-placement-stacked) .native-wrapper { - @include margin(null, null, $range-item-label-margin-bottom, null); -} diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 16e4c14e63f..13f4727cbd6 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -1,5 +1,6 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; + @import "./range.common"; -@import "./range.ionic.vars"; @import "../../foundations/ionic.vars"; // Ionic Range @@ -7,23 +8,27 @@ :host { --knob-border-radius: 50%; - --knob-background: #{$range-ion-knob-background-color}; - --knob-box-shadow: #{$range-ion-knob-box-shadow}; - --knob-size: #{$range-ion-knob-width}; - --knob-handle-size: #{$range-ion-knob-handle-width}; - --bar-height: #{$range-ion-bar-height}; - --bar-background: #{$range-ion-bar-background-color}; + --knob-background: #{$ion-primitives-base-white}; + --knob-box-shadow: 0; + --knob-size: 22px; + --knob-handle-size: #{$ion-scale-1000}; + --bar-height: #{$ion-scale-200}; + --bar-background: #{$ion-primitives-neutral-100}; --bar-background-active: #{ion-color(primary, base)}; - --bar-border-radius: #{$range-ion-bar-border-radius}; - --height: #{$range-ion-slider-height}; + --bar-border-radius: #{$ion-border-radius-400}; + --height: 42px; + + @include globals.typography(globals.$ion-body-md-regular); + + z-index: $ion-z-index-100; } :host(.range-item-start-adjustment) { - @include padding(null, null, null, $range-ion-item-padding-horizontal); + @include padding(null, null, null, $ion-space-600); } :host(.range-item-end-adjustment) { - @include padding(null, $range-ion-item-padding-horizontal, null, null); + @include padding(null, $ion-space-600, null, null); } :host(.ion-color) .range-bar-active, @@ -31,6 +36,10 @@ background: current-color(base); } +::slotted(ion-icon[slot]) { + font-size: $ion-font-size-600; +} + ::slotted([slot="start"]) { @include margin(0, 16px, 0, 0); } @@ -39,6 +48,10 @@ @include margin(0, 0, 0, 16px); } +::slotted([slot="label"]) { + max-width: $ion-scale-5000; +} + :host(.range-has-pin:not(.range-label-placement-stacked)) { /** * The pin should not overlap any elements that are @@ -52,7 +65,7 @@ * overlapping the range. The buffer is added to the * bottom of the range label instead of the host. */ - @include padding(calc($range-ion-padding-vertical + $range-ion-pin-font-size), null, null, null); + @include padding(calc($ion-space-200 + dynamic-font(12px)), null, null, null); } :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper { @@ -61,7 +74,7 @@ * margin to the bottom of the label, it provides a buffer * for the pin to move into when it is pressed. */ - @include margin(null, null, calc($range-ion-padding-vertical + $range-ion-pin-font-size), null); + @include margin(null, null, calc($ion-space-200 + dynamic-font(12px)), null); } .range-bar-active { @@ -73,21 +86,21 @@ &.has-ticks { @include border-radius(0); - @include margin(null, calc(-1 * $range-ion-tick-width * 0.5), null, calc(-1 * $range-ion-tick-width * 0.5)); + @include margin(null, calc(-1 * $ion-scale-100 * 0.5), null, calc(-1 * $ion-scale-100 * 0.5)); } } .range-tick { - @include margin-horizontal(calc($range-ion-tick-width * -0.5), null); - @include border-radius($range-ion-tick-border-radius); + @include margin-horizontal(calc($ion-scale-100 * -0.5), null); + @include border-radius($ion-border-radius-0); position: absolute; - top: calc(($range-ion-hit-height * 0.5) - ($range-ion-tick-height * 0.5)); + top: calc((42px * 0.5) - ($ion-scale-300 * 0.5)); - width: $range-ion-tick-width; - height: $range-ion-tick-height; + width: $ion-scale-100; + height: $ion-scale-300; - background: $range-ion-tick-background-color; + background: $ion-primitives-neutral-100; pointer-events: none; } @@ -98,20 +111,20 @@ .range-pin { @include transform(translate3d(0, 100%, 0), scale(0.01)); @include padding( - $range-ion-pin-padding-top, - $range-ion-pin-padding-end, - $range-ion-pin-padding-bottom, - $range-ion-pin-padding-start + $ion-space-200, + $ion-space-200, + $ion-space-200, + $ion-space-200 ); min-width: 28px; transition: transform 120ms ease; - background: $range-ion-pin-background-color; - color: $range-ion-pin-color; + background: transparent; + color: $text-color; - font-size: $range-ion-pin-font-size; + font-size: dynamic-font(12px); text-align: center; } @@ -143,5 +156,61 @@ // icons need to receive the same opacity. :host(.range-disabled) { - opacity: $range-ion-disabled-opacity; + opacity: 0.3; +} + +// Range Label Placement - Start +// ---------------------------------------------------------------- + +:host(.range-label-placement-start) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the end + * when the label sits at the start. + */ + @include margin(0, $ion-space-400, 0, 0); +} + +// Range Label Placement - End +// ---------------------------------------------------------------- + +:host(.range-label-placement-end) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the start + * when the label sits at the end. + */ + @include margin(0, 0, 0, $ion-space-400); +} + +// Range Label Placement - Fixed +// ---------------------------------------------------------------- + +:host(.range-label-placement-fixed) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the end + * when the label sits at the start. + */ + @include margin(0, $ion-space-400, 0, 0); +} + +// Range Label Placement - Stacked +// ---------------------------------------------------------------- + +:host(.range-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $ion-space-400, 0); +} + +:host(.in-item.range-label-placement-stacked) .label-text-wrapper { + @include margin($ion-space-250, null, $ion-space-400, null); +} + +:host(.in-item.range-label-placement-stacked) .native-wrapper { + @include margin(null, null, $ion-space-0, null); } diff --git a/core/src/components/range/range.ionic.vars.scss b/core/src/components/range/range.ionic.vars.scss deleted file mode 100644 index a5758d4dfdd..00000000000 --- a/core/src/components/range/range.ionic.vars.scss +++ /dev/null @@ -1,78 +0,0 @@ -@import "../../foundations/ionic.vars"; -@import "../../themes/native/native.globals.ios"; - -// Ionic Range -// -------------------------------------------------- - -/// @prop - Padding top/bottom of the range -$range-ion-padding-vertical: $ion-space-200; - -/// @prop - Padding start/end of the range - modern syntax -/** - * 24px was chosen so the knob and its - * shadow do not get cut off by the item. - */ -$range-ion-item-padding-horizontal: $ion-space-600; - -/// @prop - Height of the range slider -$range-ion-slider-height: 42px; - -/// @prop - Height of the area that will select the range knob -$range-ion-hit-height: $range-ion-slider-height; - -/// @prop - Height of the range bar -$range-ion-bar-height: $ion-scale-200; - -/// @prop - Background of the range bar -$range-ion-bar-background-color: $ion-primitives-neutral-100; - -/// @prop - Border radius of the range bar -$range-ion-bar-border-radius: $ion-border-radius-400; - -/// @prop - Width of the range knob -$range-ion-knob-handle-width: $ion-scale-1000; - -/// @prop - Width of the range knob -$range-ion-knob-width: 22px; - -/// @prop - Box shadow of the range knob -$range-ion-knob-box-shadow: 0; - -/// @prop - Background of the range knob -$range-ion-knob-background-color: $ion-primitives-base-white; - -/// @prop - Width of the range tick -$range-ion-tick-width: $ion-scale-100; - -/// @prop - Height of the range tick -$range-ion-tick-height: $ion-font-line-height-300; - -/// @prop - Border radius of the range tick -$range-ion-tick-border-radius: $ion-border-radius-0; - -/// @prop - Background of the range tick -$range-ion-tick-background-color: $range-ion-bar-background-color; - -/// @prop - Background of the range pin -$range-ion-pin-background-color: transparent; - -/// @prop - Color of the range pin -$range-ion-pin-color: $text-color; - -/// @prop - Font size of the range pin -$range-ion-pin-font-size: dynamic-font(12px); - -/// @prop - Padding top of the range pin -$range-ion-pin-padding-top: $ion-space-200; - -/// @prop - Padding end of the range pin -$range-ion-pin-padding-end: $range-ion-pin-padding-top; - -/// @prop - Padding bottom of the range pin -$range-ion-pin-padding-bottom: $range-ion-pin-padding-top; - -/// @prop - Padding start of the range pin -$range-ion-pin-padding-start: $range-ion-pin-padding-end; - -/// @prop - Opacity of the disabled range -$range-ion-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/range/range.native.scss b/core/src/components/range/range.native.scss index 9200f3bd976..af6cd00e794 100644 --- a/core/src/components/range/range.native.scss +++ b/core/src/components/range/range.native.scss @@ -3,4 +3,72 @@ :host { --knob-handle-size: calc(var(--knob-size) * 2); + + font-family: $font-family-base; + + z-index: $z-index-item-input; +} + +::slotted(ion-icon[slot]) { + font-size: 24px; +} + +::slotted([slot="label"]) { + max-width: 200px; +} + +// Range Label Placement - Start +// ---------------------------------------------------------------- + +:host(.range-label-placement-start) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the end + * when the label sits at the start. + */ + @include margin(0, $form-control-label-margin, 0, 0); +} + +// Range Label Placement - End +// ---------------------------------------------------------------- + +:host(.range-label-placement-end) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the start + * when the label sits at the end. + */ + @include margin(0, 0, 0, $form-control-label-margin); +} + +// Range Label Placement - Fixed +// ---------------------------------------------------------------- + +:host(.range-label-placement-fixed) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the end + * when the label sits at the start. + */ + @include margin(0, $form-control-label-margin, 0, 0); +} + +// Range Label Placement - Stacked +// ---------------------------------------------------------------- + +:host(.range-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $form-control-label-margin, 0); +} + +:host(.in-item.range-label-placement-stacked) .label-text-wrapper { + @include margin($range-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.range-label-placement-stacked) .native-wrapper { + @include margin(null, null, $range-item-label-margin-bottom, null); } diff --git a/core/src/components/range/test/basic/range.e2e.ts b/core/src/components/range/test/basic/range.e2e.ts index f864f2d0493..dcd86272412 100644 --- a/core/src/components/range/test/basic/range.e2e.ts +++ b/core/src/components/range/test/basic/range.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('range: basic'), () => { test.beforeEach(async ({ page }) => { await page.goto('/src/components/range/test/basic', config); diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f51ada8c804a73c6f87b8bcbcce644a0c99a092c GIT binary patch literal 2052 zcmV+f2>bVmP)Px+zDYzuRCt{2+;2=1X&wjgXJ%TVe`rB4l9sk0MD+Gbk+lgb(TkT`6Ow)5#c-U+ z7H^kT;u|)b-7~!KzquTSJ-8^WOBA(Q5`zbcaH43JT$XU^v2>|*uf~l9>dK#DD{Y5% zJ2Sl(bLk~gfetYA*5Bt<+v)t~d8Xyt=b1lX;cyrM06>iJm2Ln4;Qtb22LONz$PNGi z7mytQ04^Xq003M-b^rjlfb0MOZ~@r?0N?_$0|3AUWCs9%3&Bb^0D!rSOwtdZ($-1MvAAUi-jdg*2MHTZRzf8su^@ zj6V1SQ4QkDz6QUkS{mzG*QzDu4gTe65r_^iFE5uy6AT7dx^4gCbUGal$4a*XEW4)e zpe|Fekg3XRw!b6HRp8A%arCAA*~2C#Cj5RsLa3>!siULg_U+s30*yw4Vev8oJb3V+ z%jIfoYvX^@e;)|e-wfD)3{TJSzwx(Deir`q2^r_rOY6KRe}^eo!)SUL;W#c73JHQB zYHMqglarH^lLrO{Y&Kg>O%3}L!!Vo8cHzPWtJSJhDwC3uD2lpx@uEtl>gecbZ*LC< zgE=`l7K^31xp`=4C?_XJEEcoxQLEKAZrr$a>y|(u$jHcuY&B}Z)vH&VOeUYtmz9-; z5Hg$1Mx)VUv1DXq$Ye5vkkM%D>FJr6n80y7FE5XxsFs$N%*;%YNQ4j?7#J8F99+MC zebj2NZ86r}bn{`bykX`?Hwscq{Rx0s2n=n`7VIuu#koS~03}UCxr%uC&HGsjhr={Y z<2e4tgf^K>TefU*I-R|}y*i!FZnp;lfy&CtojZ4$&1Rd;R$N?cFc>N-D#pgfnwy*T zdVL@eVBfQS`*yS0eEVdMHg4Q#x7!gy zR;$(Ja(O%+i^ak)3`vrem6anSBW&6B_VzPp&LD(lSDU@XSa(zX&A=jdGKft^8di`^ zET%%9hIs5;x(0za3xz__CzgJ{zpAS0^5x6Bckf0B84QNgr%yLFHX?+M9zD8e&mM$O zd3kwPSC_-#kV>U)w>vd8^}&M&1qB5Np<~C6m6VhqgpM3Ja`^D!va+(7nVB~gtf{Fv zaNq#@$M5lYy1KgZ^70TuTeogC8jYt;ovN*^ot~a{xm;(@o<#_eBsoWyBGsaH;mVaO zG3}tIV{j6RKMaGk>P2OTRzrN*{S%x4-~q!h(X*qkug~lCPEAc+x^xL4gkjj=;2^sw zG6%`d&fc(LgH$R-2&JT?$Yip~$w_vRTCHXul$Dj8JbCiPix)PV?M(%BIvx8UF)^{V zwY9&$zp=5=?RK+y5o?zs)#m5|h)+}AuvW9!affvT;+`kbv%}-@2n2$=ckf1C*|u%l zytQUuDk7K55khXadw~VZ%E~MjOKE9oT3XtwRov&joV)OvoOJBlXYgI*3x<~BVk7vx z_<-Yh^z6va&Za2p+_`h9si~0{eLi2T8+h{M2|`GvQU!y-c?;U@c9Y5U{P}Z*LV*yv zckf=*nrxgZEd9}%IEW)IB{avu3d7ud?5veLLocXU>K&myZg?a zI~4Wb(;E_r#OZXhPsL)fQmO3d=s*ZL9FF$(_T}gT>wSH~wQ7+*8=;IE8Allm6_V3@Hl9D14i83=YuU@^n@amJ3lM02x zGk#X z6%`eAb#Zlr2hW?&6_umkB=)9iq|eMo44T1%nV7AvnLuPN&5Z% zHEY(ePeY;5)YMdZdiuOginR-1rHs0mKN?BXCox};9#LB7`{EB`MG8z?_^`zH!bP&9 zu&{6m%YwJWS9gL>$LQJ*#2nWBw1xbIn)vY7Fi7Od5+^i{=mB?#OmYs5+08- z-+UkQWxTzQLO+Z%5FC7hd+Z~xr9gIoxHdY)3_PXS zycim$*_&3h8bX&z=yL=L_*We(2eJbIzy-uM0Dud~4gdfbkR1R3E+9Jq09-(J006jv i>;M380oefn;Nm}3VXU<7cL<>X0000HfdF@s*yG|OA@P; z+G>zwPH>pu7S^21u18?!MBGSkq|u)$%F`!qDPC~7Xtbd?&3 zMgJ7j&@ivVAz+(Gm+j&ROB)A1vYwzNHXc=eI}^Z~LiB5W=mjzRK(-p>c%4pd}>{l^AvzY&GLxuhf|8Pz4MQlT^9)dPX;bueF67w-c@1W?bs%k|PMv?H&MYg^x9@z5vx*x}mei}0l zjjIQT^Z@${weweO%qxLHTH1I{J8luv$fZCU9Vx1Dn zURI1S`8qPsJZLo2RY#i^#)hvky4El5TzPW3v<6%H9wBwIqRZxucHu8y@wXiLH&2F# z=ZY(dPgJ^*DS2(Sd#WateT}JwZ=?W9JYR>6H*stU;(Wrso0e~Qxsj$L!y zA4dv5SJSL0Pk3}0B&Zz|x^)~k--!Aq4b%>2J>Fe>K+jlb$CC3a&mz(qLaeQ2&CShC zb?XKX6n5ot3LcycF|#C1t2=R-9P3xhOyF%(g3y{BS zUmC-=5gYzoKUY_~ySr%}Tm8HLyExnbvuesJaGSy$56(A*=Def4G%G5*9DF`JKCNmhROCl+&?@d4Hs*VmVvK0wMBAr zgUor5R;4SH%u27pT>EBU&U)uh(iy6uYi6|$O;-s)i%EHT4_5P4qD@SgiQ(I+)z(!W zKR#oYn`$03czi7bm+_C=4EgLYlf;kuUw{%6oB#lTJ@K(jiC&BX`Fs0Qb*->pl5jiJ zpzT*M+x?PUF;j{DES;1grVpx?Vy>V!D9%H730%&(0s-h^`e-jRJ=qPJIa-FKWC-X*>v(^8i4jr{OzDJs!r#I1@O-Lc&x(qGCue68dU_%( zd~zHH(Q8B3Yh62q6c}4ea^8QdB@cMh=5ZW?~j@6qF7@Z?>gY67-U~`!^+@IZ+TE$gL`|yI+1&2 z$_GDsk}Dkvf%dKb1st2by^w>gDGPLmXFrz{@iE|xgvxMx{utIlf<$5-PR3~HVb`&fY*U-6Hx z?%1t(-Ye9%7!k?C%j-UdhkHzziWg^ROD1N|zO}7M!~|dbdpJ;lV++|^0*eicq^U$z2h6n^ z?4b^~e*cz(w14)K7K(?Q&NTVJOij6wJbZk18TT$*AFY~5f z={2mDb6IWOB|$xBS@ZD*$Lo8A-uI7Yhx^IeEpWqN9|n%#u=`@}Iagk)Ww-W4?0Q{a z+ZmzcMU5PRv2?hNr?zBv%^pp z6@`;-ls1h=`y#rh8eCn`=4x=#zyoI7(f&RsUuLx57#;w;aU=bzqJp{HnDoB2i4W0X zbu}6^j*Fx?nMZ5t@UJer&YiCDy((fM_d2|S?amRdm6w-S+=R(GJ#6-9ArKnmny(X| zOAmUGQh7aUhlb2l0%mP^*86mW!@_u>T3qv~ukC6`q*xuQn2xZm+`XcvrY4NOwS*~# zzTE&nKR>S&vGaXEKJw!1n6lKJ0Cj&MI3w4S#CBE|{63ZD4Z?^i<^GZ_wexOHD{Rx z7`PBRV4YECd|zIw_MD&oCEe0dP+%8Q^XDK9ZfyAC9RCdT|8*e*7VlLh#K-rh7G+pW zGVv<(Pfae)mn)9_#99MYBDj8kir7sxkUT6mcq6l&e2hQ~=MG{FtwnE@H8>jbF2`^0 z7o;^W?60uOO9u}2EZUj2K_1XphcY$JVhrO$b{Fo71xmVj8fUfZS3t#mp24VAIr#fX zh!mXra*d~MKeF+a1WVzfFaK-bd)Lnm3OZTIQ6U*kG6C-Lie8+bC+_)pdZt_~jKAqJ z-f#7rGVitEPm!^HopM9U#!Ygxie}R3dhH&s`ZBS9~yP00|vG=S-&kYNmbuyPP@nN8S zVt%k|7>a8()N*~9nj{R?Jo&UUx#xWu)h5H;P)u)+_w#Z2$4*&dsnalFSZfZs2}8Y2 z_A}>;uYG?vZmfRTD=EEal=EZ)`m*{CZK$NaMZ;f*Ix>L>S}H*3o1JyA#!P1?_a0^h zhddA8ZP8pa+6nc>Ldr)!^jO)i{>0|D>38+w)T&Tx6~k}zAxzn`z(Y5QpJ%cLz8lLtlg&#X-I!bR$lP1(4zxMlmY5uwvvMZV68W;4SFz&W2WPrn1v~rS6vc|VIGc$R zF$cV#4g)Y&ll#QVnVl%JihiWj7c@LH8E+C-KYXh>q$P22w^pgPP!$;PQQxONoUsO1UP53jJo1?^!{54m3(R7 MP;*GVfm{6l0Abl&D*ylh literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5b4c932c8a401a5b8b668be9a9c0a823e33335c2 GIT binary patch literal 2087 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 literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ab42afd51fd3c84969462b1926106ec035ef0a6e GIT binary patch literal 2630 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 ZX0`!7Cw?Zf_KYFG-p0xLiPeR~{{UY~?bZMQ literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..95f4997294beac0cf69241e89f5a762f91fe17e6 GIT binary patch literal 2263 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

AzL8ZYMt)qcbj%ttJbOeoG2XAz$H?gQ z&U3X)r4yKny1J|~t&}cb@|bp7U`WWCg_n;Hi9|Z}eC`d?XPlFbgH3SyNNP&!`a;$@ zm5Zs6dR{jVi#JK@nPi)W{uKki^Jb92U$YWs`j4}F4+}5w9^Wr`)!{>%;To_f( zGp4#~YHEgtO%%%Z0;`=yJZg_X^!D`$L_?)gi;If|;g96^hLQ=5?!wGu7NvVhf4FbBU)(w_E)I*uhJ}TNhSpuEk-KXp*;VcOq+nsl@`Z1duPqAJ z$m6JL9QT*AxZe<-w4q~^C|xpO5{GJTX<3GqWM_Ykf7cj{LRG|%#2bdgQ$3$$rKbMS zV;nzPK-=8dNFKIxbi9UaDK9U7_AI0#Veeg3X`{F9<)-U>Q?vp_=@iDCH#xL;@Dilj zxK~$lmb;Xc;;3by5hNcZqbdv+wLY&#DzvQ}y1gW1prtLc6b(xR^Q)*no`X}Eqn^zH z+Z$_4CKHmWp{ePw;HAK=^m3)u_-N|65#oOgE&NE*?%oc>n`8u3sMtCcMptWEAfl5(-<{B01-p+n~EW<-b>6F1Lc6+GOUP`Qs z-IWqy#%c)}Q&m%2=Z+Y54^2%??Uq(}J~r<~4(%HlD0q*$s%;waw`+~7Clc9)nd%iJ zXKZW?krd;*u-WW`y56mrDMVo46Av9H1Y)!^zVmGP4K&(9Ag-s#rtVgW6lq1sD<=eO zWxzZbGyY3$l4c&f?7FevNk&)%npSowIp$|4Zcg{rt)tG-$oOjU&NVb>6MSg@nvE z-(WO*&X2wbvbVQiSzg|<=)`SC!r^cakIw@B$B<0!I|!I~B>%|Cla$iZE9|#Puz^mG zdFs*SfuL3{vV&Yug1;7v+{u-& zYku5l>3ySSty7)c_Lt5_mB*;szyturAs@gIAv=$nInI->9z5n$G#&R!dxg*5JCt)8 z#Csn*q!~HUQ__~y@#AaNg41qvwEKqHOCgYF{Vy*+*CWi@lZ+Uax+;d_-)n8I=+eAO zn9f@B%iXXi5iG(kSD(A9zpw`?cDdmU2pXa|{$Lwdd%(5@MLWy?sGw)_bBF4-DKns1 zlyB!EdkBmH%MZZj*%qcld~|I+%%iGt~?Eee0rnSai9npO7*j933X; zOe;KhZhe1i=t<74WA;D-P^YbUEZ I_?3iz0K}+%VgLXD literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0f9458cdccf6706b86f86e702bf187ac01c37242 GIT binary patch literal 2025 zcmVPx+qe(Z=jhoHgdF0}Mb6Gt0G|{pyQPjF6F?ek@5K**CHcMFDBXp^Cuf~l9Y7{88+IFDZ znd!ZlOJk(cc7SPRf1g*=PWzi@ChfQLJo8MkXf%od03b!YbT;M3;!B2Ms0GP|@B=!9x$}vJY zMk&V#g<(je#5F2hqrxjo`HBMg@k<*F?q>lRtF;ReQ z$#c58De&cioK0&J_o=`Ak^IBIg5Nib3-h4=!YRlOkXfDw=!!qTbbp?g(z_H5{`+Sn z5+R&@a0jv@zWh3WY}sc@?Q_gQ!6n?h9VY^R-z7-qjN?_`I3xf3D*V;oL`lA$Ac)wq zP$*1kTZ>)oZD}5_uC7iLPdFT&|27ti$K!Fk-RW)xSahvDVV#5PUnRS z7aR_UTrSVe%_T|l;>C*!g~DpJS}c}uI9ys*=!C5gT=+g2qBxzW-^)Vc6(7#kytE72$@W#-rnAci3uK$ zr`2jnl5B5pSF6oG_+>Tnz+?o+hXzu=u^wg;v9MKMmUBxl<;>}En{7w zYmgLWqcT~h{N^o5u~CjUCbZdX-nen2$K&bi>(l9UE|+U&W~QN`VcWKCHk-}qbne)( z!(cGf*VjLL_N=X~t+KLmW@d(Y&6X`&Y&P57yLYRrt4$`;+y%F8-FofXHKt3_*w|<= z7zl#s@9$r?Zk@~JLI^n=4zJhi_xtU3J5AFBK{PZpjE;^nWi1xVsZ*yALbI#Q-XbT* z7O+%QfK`;>^QoX!;SW3u*B~&b_#MkoDAd^4c=__>ojZ3TgbW75$&)9IMk7M#@ZrO| zcI`q4)z#H?cXzwpZjngj^ZBGw>AidRDk>@vLPw4qsi~cXzi|t3?QH+O)}JGMzYaqPe;G<;#~|ulMZPv#$;O%oeK_cNeZ) zxw2RX63iP-BaL!i*`ZP4pZEL>cUo{Ges=Wt_Xh%jsi~<;mo6cMFbo?S8e&$(`XD7G zC2QBN6^TR$q5S-Ou~TMxSZns> zUWr745c2taNfy-W^>(|xwzjsQpkUcD_WfSgy8zM&Lklrs0J4K4@w20(q=Y2NbLY-U zrPA1w!C)}e>JJ}2L z*s<-~w@W0FWC~_wWifpXnx=btdT!miMUo`5Dkmq$EtFK>>gvajA2X|JYHH4(KQ9mn#>U19 z3ky%5K3!j5-_p_|l}gvIUmy2`Xr8<9swFmYlY@fns{Q-BpS%8(;B<0sKe(y)s+J3d ziF>;emOZS$gbL$m;S4XFn^rvyz<#< zTY{f`Ae7}N?zX%YU(SUpn4auNRV+KIs;U;SEck`^;#T<4GphNIY(C$gv=hHl;vfDN z{?3CV3p}vI@+=tRNEgTskkQ7b=)p%MlNZAy6m!#xMuqFtcx5SH27lF&K9C&%05%}D z0RU`3b^rj_fb0MOumRZt0AK^M0|3AVWCs9%4ag1v02}`UZMNwU7Lfw&00000NkvXX Hu0mjfQHkb& literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6a018cc267fe30973425a8d17e875781e5a98bbf GIT binary patch literal 2899 zcmb7``9BkmAIE1|n3-x;j^!-(nIR#^tQd2X&)k-nGbVGzP$qZIZ_MP*k^9IIxv3nX zJ`%Z)3Aqv_eb?vn{Rh6kydUq!{bmly#PSooPgC}(8OX-5T9eNjpj4vXz;Gg*=0jv$LtG6xEmzSni523P@*66A8!+tYCbF``<%VEIBz zbyZJZsaN1?AcSCliXnIferC-ST^}n(!Q%g@$U;LNf9hB>!KGd$TkR}W6aG=j7Y1=u z|Ec)Y8N@v%Nkb?n{G*CSR{gJW1ptNXP3YO*fn-lQ3+Qk>C)EF-vAgXAx?R>+eF7Z+hNj%s3pYIqy6a&fxZ-nkI5TV* z{~PP_fHOb~{Nvt8o!Xl5c{?#{3WhPyt>p{k{t;N?t!Xqor+$)+P>+I#jCzJvjsFJ5eRV?et#(Ful4t2^VK0a>Q~T(dkjH6RK+F?*f1KRIV(hx?O1Mg0Z7qglb8Suh zecF|u5=u~>ya{Ve0)E51)W1JV$>Z+!oc44_c!!QCb}M!LTkx8{i`?Nzguj!Mkf)c| zva*fBfE(Pcm^l+hb4j?odR0V3@!f%x+S@hrk7*&xKh!r&lxz25tHa`t$d+IvCZRi7 zS$un+Zf=-`Wc$0)4mHzquO{@!k9+LWz`y`GE{^@fa~q0XYry>So6NPT2C0Luvq{y} z@(7J!E^lvd>$X4z9UYyX1&>dSGE)s66q_dR`QaQjw~1$G^YimZi?P`$z0JOhH!2)D z_|x3kz~HWxp={IVI3=n^$ocMQ4%lk`^_z(Z?O#8>DR_L4wr%m(k5_W)VwSdPgf#ig zMt5|C5316SRlKLkxw!&;@jOva6kTISWbNBxwq{zR>`lx!Mm9dyJ=_$z5f89?v9Pcp zPuj9o4?nS`5kPok7MXi^^Bo zwVp36E#=k-u0NzJ;QJsyLx-uVS4mq4{_COQCs+x#NRf!=t|K(y zSk!5buH&P<-qpduL15SFNbXH7EdVdljr_j+7Jh9sZ-E#a#+Jxs+27aa{EEy3Y!3(s z5EmCebG9xii8FT3opE~Dc4B-y*Dp;&Qkqyw@iVHd`h@s;ahHU47O&lmcv(rDVUzdF zC9D_?D_sx%VQ~*VVumq-9{sdCs z(#neS;r6`n`ei+bjxalN+EmJA16}a^>vXBhG*e#Z5t;^YSU@KW>OTFV25=qSv9+}Y zT<>kZgF&51%hd>pe(-?VH<3!ErVz(}%i!u+cXoD!b;SOY#HUipTxKTdwZW;KBWrSS z@Ow5JbFeYfdI8^`n2rpA5cF#ajj1KsP+tRElh&3abbBqe{d?^h^8lCmF5#muqFL}y zT@bO8boQ~dDM4`_mB_l()Kux@%3D=5fJ~7E>sWu{#i*((pVFN*?%2WvA#8PV8uN0V zL}V4Nq3n=4cB%Jq6(Si5fpAIiFItsb$-HQ3!QjsQ+ZZ-evFn$~Cpp-LmsKifZLb^K z9!Ur##@)F`cxmqbmPY^UhI;CkjZ;le;3iqd1mKEA}Zw?5HXPZ-zb3R|C$ zsK7N~xa0~73VJ=wDye>-rK~E>9MS3HC2=v-zLE)6xU58#S6gd0_gETCOl^P!JeX-E zp@mX@mPw=1^qCaaK+4-@#im2c0<8Mr{-HApq|{$*d;B@}f3 z>t_unmBddRq+QV@E^Z`*>i$w?VJY!7!nKw! zE@p)LvD3~ahE?2s*7L%h7d4!H$?&M?&zC`+NGfI6E_zYQy@-bBTX!~NhI&uvMhofIEA{M6yJuT8V6&l{8x9m2UI*_EXEWe2G*XRpggQWIc$z9Fyn9|zs? z4@VVxt=wbqQrX;WxP0EL5jy&5wwY1?YQ*l4zC^Hz#OSykkO z`8@@N!squ^KKd|7a`XXXW~?EMZ;-)?AIbozDV!_q*Bu5IV#Qx2f9OHhJZ8Y4<8ubU d{og6aED;XQ_=|W!6a$t4`e-BFN*%|@{{p((U-tk2 literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0058803efe8f2a92f9ce88abf68356e10f73ec06 GIT binary patch literal 2094 zcmV+}2+{Y6P)_Ncunra-AHzgNW4Y#{^+Lc>c-ocjV2cx^u!n5wEQ8b9+G+j zcP-BJeLD9?y@uQt+MzG>a=*`C({$!H&(qLvpP4>S!5D@?000mke7PF{0Qg@5kpTc; z0U`qczyd@D0DuLE3;+NN5E%df79cVJ04zXc003Bk$N&Ja0FeOzV1Zcf1^^J8!_E9K z?EU_MXXH6OZS&deOv+pM>J|9LY@$TPRjuV<*m5`V{}KjkOhBS>d(nj(uFt-6zPpAf zQ4x8W#7ZeH6=5@TzUR}vo1@;VgPtTIYOfM*%!1Fnc!S6QiRHztujVsKu>xTHx}|k?)=)p)PHIB(#)S) zBzzcc#0x|QNEEMZ%+|Ko?bX7M^SEIiLiWgu~$w z2n6wOP=ff$FRg*?fAz^CtoExe>dIY@fBTQ0h{JzN1oiD*&)zP|zr8(=`_(7n2%8t( z&Mvvy&fk;y?+~pYv-_)ax|yO5vTifK_CsFCooSkOxm^Bj4u`|%haSr;&Th8{wnd^y zW6R}o(KPMf=JWX+PDEE+G3qRS=FAzh*=#nOTUuH&Gc(Qq5%~$C=)i#k6%`fB-3kyx zH%2^@v&^SutUsj$Jglo;^gE-|?t<}hJP-%krpB(? z{EyAZ?d_uWMz7kHyPoJaZyBpKmkO44BQrOHllL?1!Vl!Wk60W})Aal?Lgb=bEigcc ziU>Q4VHl3TnZvclgTnNGTPeOXqqNT62q|0&Q7ILDG&$>3kxk4OI=-^ zL?TH`OFMu5JVMC7Pe(_GQmGUQg{7sXGcz-b7u0ICX=!Q4jvYe?jgOBP6%~m@B85V6 z{P=PIfijuw+_`f`qY=X}k|eEGD~4f1Lqq;&bvj)^K|$cu^Q-;%j7xsWK&)XHI$FN; z3*qWbygxsLQAVsV3=??!EO?_?qtVRG&6!N5nVFf|+S=6A)IEFlAcU@7z1r8;XS3Nf z8clX~c5`#{z`#I%e}7X`Q*m*zR4PRXJ$(4kWHMQ;){2UXmX?-_7cVYS@Xnn(27_Vk z+O;%I7Zw&47Z;n&=81`k^78VWoSe$a%BiWT=H}+v+1b9nK8ZwPwJ!F-6{r^UjE#+r z(R&#|G^MBDg3$LO7W82*Z~s}xYX?daMz2jEnBbA|?AbG;(Kt0Vm71E05IS_|(B;dQ z{qOLTCr{?((;Fki9~DGtSKlc7#J9+tgIA^#RNfcI2?&Y60$#m zYC*dIk&&=6QzKftAmC!@$@q(ZGTEzPPH1cekBp(AA%CB?sua1VC-s|;FPEJ00^k|`iJRUDlStu0N)YJ?P4w5A4a5(nu z+sC#)foh9%0VE*Bib$6`t&(B?utH?S+=3S-d_F&LzW~ik3Rc{1H$uoi^&@0Kr_;H0 z>(=`E`rh7NsZ<*IS0qvC0*H?&Ob=ohguyb)m<#?c%FfPqxm-4zO{G#HglL*}yWQd6 zKJ@u~{*C+h?{m4_jEoG1VL}#s{P?lOV$o`~{u?3`MFmDN*t``;VzC&dC2s;XLBTf;A^)9J>> z#!M#Dkt0WHYik7pK{y4|)6@BUen&^g;NYN6r@MardfCw?qgTc_#(-Vs>fH<3Y6;Wh3J0N)IeqGFO`bFpq?>ReD_obcjF_+;dcH#&k10K+|DY+DH zuN16HU+{GiZTP1I%L5_<0Kfu#$qE2q0U`qczyd@D0DuLE3;+NN5E%df79cVJ04zXc003C{ YH*4wejp~GpK>z>%07*qoM6N<$f^%RFjQ{`u literal 0 HcmV?d00001 From 4db25bfc7d88243c55dedea4d0656efcdb4420f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Thu, 31 Oct 2024 12:32:16 +0000 Subject: [PATCH 06/22] Fixing lint issue --- core/src/components/range/range.ionic.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 13f4727cbd6..776c87e9acb 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -1,5 +1,4 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; - @import "./range.common"; @import "../../foundations/ionic.vars"; @@ -110,12 +109,7 @@ .range-pin { @include transform(translate3d(0, 100%, 0), scale(0.01)); - @include padding( - $ion-space-200, - $ion-space-200, - $ion-space-200, - $ion-space-200 - ); + @include padding($ion-space-200, $ion-space-200, $ion-space-200, $ion-space-200); min-width: 28px; From 2ada43cd498ae3684148820f018b91d65df6bd19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Thu, 31 Oct 2024 15:10:37 +0000 Subject: [PATCH 07/22] Updating the range pin to always be visible when enabled for the ionic theme --- core/src/components/range/range.ionic.scss | 21 +++------------------ core/src/components/range/range.tsx | 11 ++++++++--- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 776c87e9acb..39e60f672c2 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -108,19 +108,18 @@ } .range-pin { - @include transform(translate3d(0, 100%, 0), scale(0.01)); - @include padding($ion-space-200, $ion-space-200, $ion-space-200, $ion-space-200); + @include padding($ion-space-300, $ion-space-300, $ion-space-300, $ion-space-300); min-width: 28px; - transition: transform 120ms ease; - background: transparent; color: $text-color; font-size: dynamic-font(12px); text-align: center; + + transform: translate3d(0, calc(-100% + 11px), 0) scale(1); } .range-knob { @@ -129,20 +128,6 @@ border-color: #{ion-color(primary, base)}; } -/** - * The -100% ensures the pin sits on top - * of the range-knob-handle container. - * We apply 11px so that the pin - * text is closer to the knob inside of the container. - * We also apply the 11px here instead of using "top" - * otherwise the pin text will translate below the knob - * when the text is scaled. - */ -.range-knob-pressed .range-pin, -.range-knob-handle.ion-focused .range-pin { - transform: translate3d(0, calc(-100% + 11px), 0) scale(1); -} - // Ionic Range: Disabled (based on iOS Range) // -------------------------------------------------- // When the range is disabled, the entire range, diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 9b749941919..d3603a9d69f 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -8,7 +8,7 @@ import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; import { getIonTheme } from '../../global/ionic-global'; -import type { Color, Gesture, GestureDetail } from '../../interface'; +import type {Color, Gesture, GestureDetail, Theme} from '../../interface'; import { roundToMaxDecimalPlaces } from '../../utils/floating-point'; import type { @@ -637,6 +637,8 @@ export class Range implements ComponentInterface { inheritedAttributes, } = this; + const theme = getIonTheme(this); + let barStart = `${ratioLower * 100}%`; let barEnd = `${100 - ratioUpper * 100}%`; @@ -778,6 +780,7 @@ export class Range implements ComponentInterface { min, max, inheritedAttributes, + theme, })} {this.dualKnobs && @@ -793,6 +796,7 @@ export class Range implements ComponentInterface { min, max, inheritedAttributes, + theme, })} ); @@ -873,11 +877,12 @@ interface RangeKnob { pinFormatter: PinFormatter; inheritedAttributes: Attributes; handleKeyboard: (name: KnobName, isIncrease: boolean) => void; + theme: Theme; } const renderKnob = ( rtl: boolean, - { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }: RangeKnob + { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, theme }: RangeKnob ) => { const start = rtl ? 'right' : 'left'; @@ -928,7 +933,7 @@ const renderKnob = ( > {pin && (

)} ); @@ -877,25 +873,11 @@ interface RangeKnob { pinFormatter: PinFormatter; inheritedAttributes: Attributes; handleKeyboard: (name: KnobName, isIncrease: boolean) => void; - theme: Theme; } const renderKnob = ( rtl: boolean, - { - knob, - value, - ratio, - min, - max, - disabled, - pressed, - pin, - handleKeyboard, - pinFormatter, - inheritedAttributes, - theme, - }: RangeKnob + { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }: RangeKnob ) => { const start = rtl ? 'right' : 'left'; @@ -946,7 +928,7 @@ const renderKnob = ( > {pin && ( )}