feat(picker-column): add styles, disabled and active states

core/api.txt

@@ -919,6 +919,7 @@ ion-picker-column,prop,value,number | string | undefined,undefined,false,false
 ion-picker-column,event,ionChange,PickerColumnItem,true
 
 ion-picker-column-option,shadow
+ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
 ion-picker-column-option,prop,disabled,boolean,false,false,false
 ion-picker-column-option,prop,value,any,undefined,false,false
 

core/src/components.d.ts

@@ -1987,6 +1987,10 @@ export namespace Components {
         "value"?: string | number;
     }
     interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
         /**
           * If `true`, the user cannot interact with the picker column option.
          */
@@ -6634,6 +6638,10 @@ declare namespace LocalJSX {
         "value"?: string | number;
     }
     interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
         /**
           * If `true`, the user cannot interact with the picker column option.
          */

core/src/components/picker-column-option/picker-column-option.ios.scss

@@ -0,0 +1 @@
+@import "./picker-column-option";

core/src/components/picker-column-option/picker-column-option.md.scss

@@ -0,0 +1,5 @@
+@import "./picker-column-option.scss";
+
+:host(.option-active) button {
+  color: current-color(base);
+}

core/src/components/picker-column-option/picker-column-option.scss

@@ -0,0 +1,45 @@
+@import "../../themes/ionic.globals";
+
+// Picker Column
+// --------------------------------------------------
+
+button {
+  @include padding(0);
+  @include margin(0);
+
+  width: 100%;
+
+  height: 34px;
+
+  border: 0px;
+
+  outline: none;
+
+  background: transparent;
+
+  color: inherit;
+
+  font-family: $font-family-base;
+
+  font-size: inherit;
+
+  line-height: 34px;
+
+  text-align: inherit;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  overflow: hidden;
+}
+
+:host(.option-disabled) {
+  opacity: 0.4;
+}
+
+:host(.option-disabled) button {
+  cursor: default;
+}

core/src/components/picker-column-option/picker-column-option.tsx

@@ -1,9 +1,17 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { inheritAttributes } from '@utils/helpers';
+import { createColorClasses } from '@utils/theme';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { Color } from '../../interface';
 
 @Component({
   tag: 'ion-picker-column-option',
+  styleUrls: {
+    ios: 'picker-column-option.ios.scss',
+    md: 'picker-column-option.md.scss',
+  },
   shadow: true,
 })
 export class PickerColumnOption implements ComponentInterface {
@@ -29,6 +37,13 @@ export class PickerColumnOption implements ComponentInterface {
    */
   @Prop() value?: any | null;
 
+  /**
+   * The color to use from your application's color palette.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information on colors, see [theming](/docs/theming/basics).
+   */
+  @Prop({ reflect: true }) color?: Color = 'primary';
+
   /**
    * The aria-label of the option has changed after the
    * first render and needs to be updated within the component.
@@ -50,19 +65,17 @@ export class PickerColumnOption implements ComponentInterface {
   }
 
   render() {
-    const { value, disabled, ariaLabel } = this;
+    const { color, value, disabled, ariaLabel } = this;
+    const mode = getIonMode(this);
 
     return (
-      <Host>
-        <button
-          tabindex="-1"
-          aria-label={ariaLabel}
-          class={{
-            'picker-opt': true,
-            'picker-opt-disabled': !!disabled,
-          }}
-          disabled={disabled}
-        >
+      <Host
+        class={createColorClasses(color, {
+          [mode]: true,
+          ['option-disabled']: disabled,
+        })}
+      >
+        <button tabindex="-1" aria-label={ariaLabel} disabled={disabled}>
           <slot>{value}</slot>
         </button>
       </Host>

core/src/components/picker-column-option/test/a11y/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Picker Column Option - Basic</title>
+    <title>Picker Column Option - a11y</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
@@ -14,6 +14,9 @@
     <main>
       <ion-picker-column-option> my option </ion-picker-column-option>
       <ion-picker-column-option aria-label="the best one"> other option </ion-picker-column-option>
+      <ion-picker-column-option color="tertiary" class="option-active">option</ion-picker-column-option>
+      <ion-picker-column-option disabled="true">option</ion-picker-column-option>
+      <ion-picker-column-option color="tertiary" class="option-active" disabled="true">option</ion-picker-column-option>
     </main>
   </body>
 </html>

core/src/components/picker-column-option/test/basic/index.html

@@ -46,7 +46,19 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-picker-column-option> my option </ion-picker-column-option>
+            <ion-picker-column-option>My Option</ion-picker-column-option>
+          </div>
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-picker-column-option disabled="true">My Option</ion-picker-column-option>
+          </div>
+          <div class="grid-item">
+            <h2>Active</h2>
+            <ion-picker-column-option class="option-active">My Option</ion-picker-column-option>
+          </div>
+          <div class="grid-item">
+            <h2>Active / Disabled</h2>
+            <ion-picker-column-option class="option-active" disabled="true">My Option</ion-picker-column-option>
           </div>
         </div>
       </ion-content>

core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts

@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-column-option: rendering'), () => {
+    test('picker option should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker-column-option value="option">My Option</ion-picker-column-option>
+      `,
+        config
+      );
+
+      const option = page.locator('ion-picker-column-option');
+
+      await expect(option).toHaveScreenshot(screenshot('picker-column-option'));
+    });
+    test('disabled picker option should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker-column-option disabled="true" value="option">My Option</ion-picker-column-option>
+      `,
+        config
+      );
+
+      const option = page.locator('ion-picker-column-option');
+
+      await expect(option).toHaveScreenshot(screenshot('disabled-picker-column-option'));
+    });
+    test('active picker option should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker-column-option class="option-active" value="option">My Option</ion-picker-column-option>
+      `,
+        config
+      );
+
+      const option = page.locator('ion-picker-column-option');
+
+      await expect(option).toHaveScreenshot(screenshot('active-picker-column-option'));
+    });
+    test('disabled active picker option should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker-column-option class="option-active" disabled="true" value="option">My Option</ion-picker-column-option>
+      `,
+        config
+      );
+
+      const option = page.locator('ion-picker-column-option');
+
+      await expect(option).toHaveScreenshot(screenshot('disabled-active-picker-column-option'));
+    });
+  });
+});

packages/angular/src/directives/proxies.ts

@@ -1476,14 +1476,14 @@ export declare interface IonPickerColumn extends Components.IonPickerColumn {
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'value']
+  inputs: ['color', 'disabled', 'value']
 })
 @Component({
   selector: 'ion-picker-column-option',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'value'],
+  inputs: ['color', 'disabled', 'value'],
 })
 export class IonPickerColumnOption {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -1473,14 +1473,14 @@ export declare interface IonPickerColumn extends Components.IonPickerColumn {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonPickerColumnOption,
-  inputs: ['disabled', 'value']
+  inputs: ['color', 'disabled', 'value']
 })
 @Component({
   selector: 'ion-picker-column-option',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'value'],
+  inputs: ['color', 'disabled', 'value'],
   standalone: true
 })
 export class IonPickerColumnOption {

packages/vue/src/proxies.ts

@@ -589,7 +589,8 @@ export const IonPickerColumn = /*@__PURE__*/ defineContainer<JSX.IonPickerColumn
 
 export const IonPickerColumnOption = /*@__PURE__*/ defineContainer<JSX.IonPickerColumnOption>('ion-picker-column-option', defineIonPickerColumnOption, [
   'disabled',
-  'value'
+  'value',
+  'color'
 ]);