fix(many): update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity (#27396)

Issue number: resolves #27184

---------

## What is the current behavior?
The modern form controls do not use the same opacity for their labels
when disabled, resulting in inconsistent UI when using two different
types in the same view (select vs checkbox, for example).

## What is the new behavior?
The checkbox, input, radio, range, select, textarea and toggle labels
have been updated on both modes to use the same opacity as each other
when disabled. The checkbox and radio icons have been updated to use a
different opacity than the label for `md` mode.

- Updates `ios` mode so all form controls use the same opacity of `0.3`
- I could not find any guidelines by Apple for what color these should
be, so I decided to just make them the same as what is most commonly
used & match item
- Updates `md` mode so all form control labels use the same opacity of
`0.38`
- I used the [Material Design 3
documentation](https://m2.material.io/components) to get this number as
well as the opacity of the disabled selection controls in the [Material
Design 2 figma design
kit](https://www.figma.com/community/file/778763161265841481). The
Material Design 2 documentation does not mention the opacity, but this
is also the number used by Material Design 1 so it's safe to assume it
is what the disabled form labels should also use for Material Design 2.
- Updates the `md` range so the slotted elements are also included when
setting the opacity on the label
- Updates the range, radio & checkbox tests to make sure there are
screenshots in the different disabled states
- Updates the item/disabled test to include radio & textarea so you can
see all form controls side by side

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I downloaded screenshots of the item disabled tests and put them side by
side for `main` and this branch in order to see the differences in the
labels. The grey boxes to the left of each item are just a bigger
version of the label color for that item, so it's easier to see when
they aren't the same.

![iOS before and
after](https://github.com/ionic-team/ionic-framework/assets/6577830/2ce53625-e4e3-4565-a741-a47e27cf0275)
![MD before and
after](https://github.com/ionic-team/ionic-framework/assets/6577830/9cd83cdc-ab45-49bf-a0dc-1d78ba7f43be)

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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

@@ -196,6 +196,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 {
@@ -209,3 +216,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,14 +200,6 @@
 // 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 should not extend

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`));
+    });
   });
 });