feat(picker): add css variables for picker highlight and fade

core/api.txt

@@ -428,6 +428,7 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,css-prop,--wheel-highlight-border-radius
 ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
@@ -909,6 +910,9 @@ ion-note,css-prop,--color
 ion-picker,shadow
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,event,ionInputModeChange,PickerChangeEventDetail,true
+ion-picker,css-prop,--fade-background-rgb
+ion-picker,css-prop,--highlight-background
+ion-picker,css-prop,--highlight-border-radius
 
 ion-picker-column,shadow
 ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true

core/src/components/datetime/datetime.scss

@@ -11,6 +11,8 @@
    *
    * @prop --wheel-highlight-background: The background of the highlight under the selected
    * item when using a wheel style layout, or in the month/year picker for grid style layouts.
+   * @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
+   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
@@ -516,3 +518,12 @@
 
   align-items: center;
 }
+
+// Picker Custom Variables
+// -----------------------------------
+
+ion-picker {
+  --highlight-background: var(--wheel-highlight-background);
+  --highlight-border-radius: var(--wheel-highlight-border-radius);
+  --fade-background-rgb: var(--wheel-fade-background-rgb);
+}

core/src/components/datetime/test/custom/index.html

@@ -60,6 +60,7 @@
       .custom-grid-wheel,
       ion-picker {
         --wheel-highlight-background: rgb(218, 216, 255);
+        --wheel-highlight-border-radius: 16px;
         --wheel-fade-background-rgb: 245, 235, 247;
       }
 

core/src/components/picker/picker.ios.scss

@@ -1,6 +1,5 @@
-@import "./picker.scss";
-@import "./picker.vars.scss";
 @import "../../themes/ionic.globals.ios";
+@import "./picker";
 
 :host .picker-before {
   background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0.8) 100%);
@@ -11,5 +10,5 @@
 }
 
 :host .picker-highlight {
-  background: var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef));
+  background: var(--highlight-background, var(--ion-color-step-150, #eeeeef));
 }

core/src/components/picker/picker.md.scss

@@ -1,6 +1,5 @@
-@import "./picker.scss";
-@import "./picker.vars.scss";
 @import "../../themes/ionic.globals.md";
+@import "./picker";
 
 :host .picker-before {
   background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0) 90%);

core/src/components/picker/picker.scss

@@ -1,9 +1,17 @@
-@import "../../themes/ionic.globals";
+@import "./picker.vars";
 
 // Picker
 // --------------------------------------------------
 
 :host {
+  /**
+  * @prop --highlight-background: Background of the picker highlight for the selected item
+  * @prop --highlight-border-radius: Border radius of the picker highlight for the selected item
+  *
+  * @prop --fade-background-rgb: Background of the gradient covering non-selected items in rgb format
+  */
+  --highlight-border-radius: 8px;
+
   display: flex;
 
   position: relative;
@@ -61,7 +69,7 @@
 }
 
 :host .picker-highlight {
-  @include border-radius(8px, 8px, 8px, 8px);
+  @include border-radius(var(--highlight-border-radius));
   @include position(50%, 0, 0, 0);
   @include margin(0, auto, 0, auto);
 
@@ -71,8 +79,8 @@
   height: 34px;
 
   transform: translateY(-50%);
-  
-  background: var(--wheel-highlight-background);
+
+  background: var(--highlight-background);
 
   z-index: -1;
 }

core/src/components/picker/picker.vars.scss

@@ -1,2 +1,4 @@
+@import "../../themes/ionic.globals";
+
 $picker-fade-background-fallback: var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255));
-$picker-fade-background: var(--wheel-fade-background-rgb, $picker-fade-background-fallback);
+$picker-fade-background: var(--fade-background-rgb, $picker-fade-background-fallback);

core/src/components/picker/test/custom/picker.e2e.ts

@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+const pickerElement = `
+  <ion-picker>
+    <ion-picker-column id="first"></ion-picker-column>
+    <ion-picker-column id="second"></ion-picker-column>
+  </ion-picker>
+
+  <script>
+    const setPickerColumn = (selector, items, value) => {
+      const column = document.querySelector(selector);
+
+      items.forEach((item) => {
+        const option = document.createElement('ion-picker-column-option');
+        option.value = item.value;
+        option.textContent = item.text;
+
+        option.setAttribute('data-test-value', item.value);
+
+        column.appendChild(option);
+      });
+
+      column.value = value;
+    };
+
+    setPickerColumn(
+      '#first',
+      [
+        { text: 'Minified', value: 'minified' },
+        { text: 'Responsive', value: 'responsive' },
+        { text: 'Full Stack', value: 'full-stack' },
+        { text: 'Mobile First', value: 'mobile-first' },
+        { text: 'Serverless', value: 'serverless' },
+      ],
+      'minified'
+    );
+
+    setPickerColumn(
+      '#second',
+      [
+        { text: 'Tomato', value: 'tomato' },
+        { text: 'Avocado', value: 'avocado' },
+        { text: 'Onion', value: 'onion' },
+        { text: 'Potato', value: 'potato' },
+        { text: 'Artichoke', value: 'artichoke' },
+      ],
+      'tomato'
+    );
+  </script>
+`;
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker: custom'), () => {
+    test('should allow styling of the picker highlight', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-picker {
+            --highlight-background: rgb(0, 255, 0, 0.4);
+            --highlight-border-radius: 48px;
+          }
+        </style>
+        ${pickerElement}
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+
+      await expect(picker).toHaveScreenshot(screenshot(`picker-custom-highlight`));
+    });
+
+    test('should allow styling of the picker fade', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-picker {
+            --fade-background-rgb: 40, 40, 40;
+          }
+        </style>
+        ${pickerElement}
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+
+      await expect(picker).toHaveScreenshot(screenshot(`picker-custom-fade`));
+    });
+  });
+});