Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

core/src/components/range/range.ios.scss

@@ -94,6 +94,12 @@
   @include transform(translate3d(0, 0, 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: .5;
+  opacity: $range-ios-disabled-opacity;
 }

core/src/components/range/range.ios.vars.scss

@@ -80,3 +80,6 @@ $range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
 
 /// @prop - Padding start of the range pin
 $range-ios-pin-padding-start: $range-ios-pin-padding-end !default;
+
+/// @prop - Opacity of the disabled range
+$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;

core/src/components/range/range.md.scss

@@ -195,6 +195,13 @@
   transform: scale(1);
 }
 
+// Material Design Range: Disabled
+// --------------------------------------------------
+// When the range is disabled, the range label,
+// any slotted labels, and any slotted icons
+// need to receive the same opacity. The range
+// changes color instead of becoming transparent.
+
 :host(.range-disabled) .range-bar-active,
 :host(.range-disabled) .range-bar,
 :host(.range-disabled) .range-tick {
@@ -208,3 +215,9 @@
 
   background-color: $range-md-bar-background-color;
 }
+
+:host(.range-disabled) .label-text-wrapper,
+:host(.range-disabled) ::slotted([slot=start]),
+:host(.range-disabled) ::slotted([slot=end]) {
+  opacity: $range-md-disabled-opacity;
+}

core/src/components/range/range.md.vars.scss

@@ -55,4 +55,7 @@ $range-md-knob-indicator-opacity-hover: 0.13 !default;
 $range-md-knob-indicator-opacity-focus: 0.13 !default;
 
 /// @prop - Opacity of the indicator shown when the range knob is active
-$range-md-knob-indicator-opacity-active: 0.25 !default;
+$range-md-knob-indicator-opacity-active: 0.25 !default;
+
+/// @prop - Opacity of the disabled range
+$range-md-disabled-opacity: $form-control-md-disabled-opacity !default;

core/src/components/range/range.scss

@@ -200,15 +200,7 @@
 // Range Label
 // ----------------------------------------------------------------
 
-/**
- * When the range is disabled, only the text
- * receives an opacity. The range changes color instead.
- */
-:host(.range-disabled) .label-text-wrapper {
-  opacity: 0.3;
-}
-
-::slotted([slot="label"]), .label-text {
+::slotted([slot="label"]) {
   /**
    * Label text should not extend
    * beyond the bounds of the range.

core/src/components/range/test/states/index.html

@@ -16,9 +16,10 @@
       .grid {
         display: grid;
         grid-template-columns: repeat(4, minmax(250px, 1fr));
-        grid-row-gap: 20px;
+        grid-row-gap: 10px;
         grid-column-gap: 20px;
       }
+
       h2 {
         font-size: 12px;
         font-weight: normal;
@@ -26,7 +27,9 @@
         color: #6f7378;
 
         margin-top: 10px;
+        margin-bottom: 0;
       }
+
       @media screen and (max-width: 800px) {
         .grid {
           grid-template-columns: 1fr;
@@ -55,6 +58,24 @@
             </ion-range>
           </div>
 
+          <div class="grid-item">
+            <h2>Value</h2>
+            <ion-range value="40%">
+              <ion-icon name="volume-off" slot="start"></ion-icon>
+              <ion-icon name="volume-high" slot="end"></ion-icon>
+              <span slot="label">Temperature</span>
+            </ion-range>
+          </div>
+
+          <div class="grid-item">
+            <h2>Ticks</h2>
+            <ion-range snaps="true" ticks="true" step="10" value="10%">
+              <ion-icon name="volume-off" slot="start"></ion-icon>
+              <ion-icon name="volume-high" slot="end"></ion-icon>
+              <span slot="label">Temperature</span>
+            </ion-range>
+          </div>
+
           <div class="grid-item">
             <h2>Disabled</h2>
             <ion-range disabled="true">
@@ -63,6 +84,24 @@
               <span slot="label">Temperature</span>
             </ion-range>
           </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Value</h2>
+            <ion-range disabled="true" value="40%">
+              <ion-icon name="volume-off" slot="start"></ion-icon>
+              <ion-icon name="volume-high" slot="end"></ion-icon>
+              <span slot="label">Temperature</span>
+            </ion-range>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Ticks</h2>
+            <ion-range snaps="true" ticks="true" step="10" value="10%" disabled>
+              <ion-icon name="volume-off" slot="start"></ion-icon>
+              <ion-icon name="volume-high" slot="end"></ion-icon>
+              <span slot="label">Temperature</span>
+            </ion-range>
+          </div>
         </div>
       </ion-content>
     </ion-app>

core/src/components/range/test/states/range.e2e.ts

@@ -19,6 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-enabled`));
     });
+
     test('should render disabled state', async ({ page }) => {
       await page.setContent(
         `
@@ -35,5 +36,39 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled`));
     });
+
+    test('should render disabled state with a value', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-range value="40%" disabled="true">
+          <ion-icon name="volume-off" slot="start"></ion-icon>
+          <ion-icon name="volume-high" slot="end"></ion-icon>
+          <span slot="label">Temperature</span>
+        </ion-range>
+      `,
+        config
+      );
+
+      const range = page.locator('ion-range');
+
+      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-value`));
+    });
+
+    test('should render disabled state with ticks', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-range snaps="true" ticks="true" step="10" value="10%" disabled>
+          <ion-icon name="volume-off" slot="start"></ion-icon>
+          <ion-icon name="volume-high" slot="end"></ion-icon>
+          <span slot="label">Temperature</span>
+        </ion-range>
+      `,
+        config
+      );
+
+      const range = page.locator('ion-range');
+
+      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-ticks`));
+    });
   });
 });