From 226aa78c257b86742af6c007506be62e8cfe6301 Mon Sep 17 00:00:00 2001
From: Felipe Fialho <hi@felipefialho.com>
Date: Mon, 9 Sep 2024 15:25:10 -0300
Subject: [PATCH] fix(select): add background to selected item and remove
 color's prop (#565)

---
 packages/core/src/components.d.ts             |  2 -
 .../core/src/components/select/select.scss    | 18 +-----
 .../core/src/components/select/select.spec.ts |  7 +--
 .../core/src/components/select/select.tsx     | 13 +----
 .../components/select/stories/select.args.ts  | 10 ----
 .../select/stories/select.core.stories.tsx    |  1 -
 .../select/stories/select.react.stories.tsx   |  1 -
 .../select/stories/select.vue.stories.tsx     |  1 -
 packages/core/src/global/global.scss          | 57 +++++++------------
 9 files changed, 27 insertions(+), 83 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 89a08562e..58483dc31 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -169,7 +169,6 @@ export namespace Components {
         "trigger"?: string;
     }
     interface AtomSelect {
-        "color"?: 'primary' | 'secondary' | 'danger';
         "disabled"?: boolean;
         "errorText"?: string;
         "fill": 'solid' | 'outline';
@@ -709,7 +708,6 @@ declare namespace LocalJSX {
         "trigger"?: string;
     }
     interface AtomSelect {
-        "color"?: 'primary' | 'secondary' | 'danger';
         "disabled"?: boolean;
         "errorText"?: string;
         "fill"?: 'solid' | 'outline';
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index 961cd0bf5..ba9d2b88b 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -26,19 +26,10 @@
   --ion-color-step-550: --color-neutral-light-1;
   min-height: var(--atom-select-min-height);
 
-  &[color='primary'] {
-    --highlight-color-focused: var(--color-brand-primary-regular);
-    --atom-icon-color: var(--color-brand-primary-regular);
-  }
-
   &[color='secondary'] {
     --highlight-color-focused: var(--color-brand-secondary-regular);
   }
 
-  &[color='danger'] {
-    --highlight-color-focused: var(--color-contextual-error-regular);
-  }
-
   &.has-error {
     --border-color: var(--color-contextual-error-regular);
     --placeholder-color: var(--text-color);
@@ -82,15 +73,8 @@
   z-index: var(--zindex-100);
 
   .select-expanded + & {
-    &.atom-color--primary {
-      --atom-icon-color: var(--color-brand-primary-regular);
-    }
-
-    &.atom-color--secondary {
-      --atom-icon-color: var(--color-brand-secondary-regular);
-    }
+    --atom-icon-color: var(--color-brand-secondary-regular);
 
-    &.atom-color--danger,
     &.has-error {
       --atom-icon-color: var(--color-contextual-error-regular);
     }
diff --git a/packages/core/src/components/select/select.spec.ts b/packages/core/src/components/select/select.spec.ts
index 552a7fbe0..ec4677312 100644
--- a/packages/core/src/components/select/select.spec.ts
+++ b/packages/core/src/components/select/select.spec.ts
@@ -92,7 +92,6 @@ describe('AtomSelect', () => {
         name="test"
         label="Select a fruit"
         placeholder="Select an option"
-        color="primary"
         mode="ios"
         fill="outline"
         disabled
@@ -104,9 +103,9 @@ describe('AtomSelect', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-select color="primary" disabled="" fill="outline" label="Select a fruit" mode="ios" multiple="" name="test" placeholder="Select an option">
+      <atom-select disabled="" fill="outline" label="Select a fruit" mode="ios" multiple="" name="test" placeholder="Select an option">
         <mock:shadow-root>
-          <ion-select class="atom-select" color="primary" disabled="" fill="outline" interface="popover" label="Select a fruit" label-placement="stacked" mode="ios" multiple="" name="test" placeholder="Select an option" shape="round">
+          <ion-select class="atom-select" color="secondary" disabled="" fill="outline" interface="popover" label="Select a fruit" label-placement="stacked" mode="ios" multiple="" name="test" placeholder="Select an option" shape="round">
             <ion-select-option value="apple">apple</ion-select-option>
             <ion-select-option value="banana" disabled>banana</ion-select-option>
             <ion-select-option value="orange">orange</ion-select-option>
@@ -135,7 +134,7 @@ describe('AtomSelect', () => {
             <ion-select-option disabled="" value="banana">banana</ion-select-option>
             <ion-select-option value="orange">orange</ion-select-option>
           </ion-select>
-          <atom-icon class="atom-color--secondary atom-icon" icon="account-multiple"></atom-icon>
+          <atom-icon class="atom-icon" icon="account-multiple"></atom-icon>
         </mock:shadow-root>
       </atom-select>
     `)
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 3c0e1564e..bbdbb7368 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -20,7 +20,6 @@ import { IconProps } from '../../icons'
 export class AtomSelect {
   @Element() selectEl!: HTMLIonSelectElement
 
-  @Prop() color?: 'primary' | 'secondary' | 'danger' = 'secondary'
   @Prop() disabled?: boolean
   @Prop() errorText?: string
   @Prop() fill: 'solid' | 'outline' = 'solid'
@@ -104,7 +103,7 @@ export class AtomSelect {
           placeholder={this.placeholder}
           disabled={this.disabled}
           multiple={this.multiple}
-          color={this.color}
+          color='secondary'
           mode={this.mode}
           value={this.value}
           tabindex={this.readonly && '-1'}
@@ -114,7 +113,7 @@ export class AtomSelect {
           onIonFocus={this.handleFocus}
           onIonCancel={this.handleCancel}
           interfaceOptions={{
-            cssClass: `atom-select-color-${this.color}`,
+            cssClass: `atom-select__popover`,
           }}
         >
           {this.options.map((option) => (
@@ -136,13 +135,7 @@ export class AtomSelect {
           </div>
         )}
         {this.icon && (
-          <atom-icon
-            class={{
-              [`atom-icon`]: true,
-              [`atom-color--${this.color}`]: true,
-            }}
-            icon={this.icon}
-          ></atom-icon>
+          <atom-icon class='atom-icon' icon={this.icon}></atom-icon>
         )}
       </Host>
     )
diff --git a/packages/core/src/components/select/stories/select.args.ts b/packages/core/src/components/select/stories/select.args.ts
index a8ea0eb02..ada180c58 100644
--- a/packages/core/src/components/select/stories/select.args.ts
+++ b/packages/core/src/components/select/stories/select.args.ts
@@ -40,15 +40,6 @@ export const SelectStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'danger'],
-      defaultValue: { summary: 'secondary' },
-      description: "The color to use from your application's color palette.",
-      table: {
-        category: Category.PROPERTIES,
-      },
-    },
     multiple: {
       control: 'boolean',
       defaultValue: { summary: false },
@@ -160,7 +151,6 @@ export const SelectStoryArgs = {
 }
 
 export const SelectComponentArgs = {
-  color: 'secondary',
   disabled: false,
   readonly: false,
   multiple: false,
diff --git a/packages/core/src/components/select/stories/select.core.stories.tsx b/packages/core/src/components/select/stories/select.core.stories.tsx
index 6b5772487..4d6f9d88f 100644
--- a/packages/core/src/components/select/stories/select.core.stories.tsx
+++ b/packages/core/src/components/select/stories/select.core.stories.tsx
@@ -12,7 +12,6 @@ const createSelect = (args) => {
   return html`
     <atom-select
       placeholder=${args.placeholder}
-      color=${args.color}
       fill=${args.fill}
       disabled=${args.disabled}
       readonly=${args.readonly}
diff --git a/packages/core/src/components/select/stories/select.react.stories.tsx b/packages/core/src/components/select/stories/select.react.stories.tsx
index b1a0fb004..bf76c88e3 100644
--- a/packages/core/src/components/select/stories/select.react.stories.tsx
+++ b/packages/core/src/components/select/stories/select.react.stories.tsx
@@ -13,7 +13,6 @@ export default {
 const createSelect = (args) => (
   <AtomSelect
     placeholder={args.placeholder}
-    color={args.color}
     fill={args.fill}
     disabled={args.disabled}
     readonly={args.readonly}
diff --git a/packages/core/src/components/select/stories/select.vue.stories.tsx b/packages/core/src/components/select/stories/select.vue.stories.tsx
index a3aa75959..a59245ebd 100644
--- a/packages/core/src/components/select/stories/select.vue.stories.tsx
+++ b/packages/core/src/components/select/stories/select.vue.stories.tsx
@@ -16,7 +16,6 @@ const createSelect = (args) => ({
   template: `
     <AtomSelect
       placeholder="${args.placeholder}"
-      color="${args.color}"
       fill="${args.fill}"
       disabled="${args.disabled}"
       readonly="${args.readonly}"
diff --git a/packages/core/src/global/global.scss b/packages/core/src/global/global.scss
index 91e35a349..2f247464f 100644
--- a/packages/core/src/global/global.scss
+++ b/packages/core/src/global/global.scss
@@ -77,52 +77,35 @@ Issue: https://github.com/ionic-team/ionic-framework/issues/27500
 */
 
 .select-popover {
-  .item-checkbox-checked {
-    --color: var(--ion-color-medium-shade);
-  }
-
-  ion-checkbox {
-    --checkbox-background-checked: var(--ion-color-medium-shade);
-    --border-color-checked: var(--ion-color-medium-shade);
-  }
-
-  .item-radio-checked {
-    --background: rgba(var(--ion-color-medium-rgb));
-    --background-focused: var(--ion-color-medium);
-    --background-hover: var(--ion-color-medium);
-  }
-
-  &.atom-select-color-primary {
-    .item-checkbox-checked {
-      --color: var(--ion-color-primary);
-    }
-
-    ion-checkbox {
-      --checkbox-background-checked: var(--ion-color-primary);
-      --border-color-checked: var(--ion-color-primary);
+  &.atom-select__popover {
+    .select-interface-option {
+      --background-hover: var(--color-neutral-light-5);
+      --background-hover-opacity: 0.6;
     }
 
     .item-radio-checked {
-      --background: rgba(var(--ion-color-primary-rgb));
-      --background-focused: var(--ion-color-primary);
-      --background-hover: var(--ion-color-primary);
+      --background: rgba(var(--color-brand-secondary-light-2-rgb));
+      --background-focused: var(--color-brand-secondary-regular);
+      --background-hover: var(--color-brand-secondary-regular);
+      --background-hover-opacity: 0.1;
+      --color-hover: var(--color-brand-secondary-regular);
+      --color: var(--color-brand-secondary-regular);
     }
-  }
 
-  &.atom-select-color-secondary {
     .item-checkbox-checked {
-      --color: var(--ion-color-secondary);
+      --background-hover: var(--color-brand-secondary-regular);
+      --background-hover-opacity: 0.1;
+      --color: var(--color-brand-secondary-regular);
+      --color-hover: var(--color-brand-secondary-regular);
+
+      &::part(native) {
+        --background: rgba(var(--color-brand-secondary-light-2-rgb));
+      }
     }
 
     ion-checkbox {
-      --checkbox-background-checked: var(--ion-color-secondary);
-      --border-color-checked: var(--ion-color-secondary);
-    }
-
-    .item-radio-checked {
-      --background: rgba(var(--ion-color-secondary-rgb));
-      --background-focused: var(--ion-color-secondary);
-      --background-hover: var(--ion-color-secondary);
+      --checkbox-background-checked: var(--color-brand-secondary-regular);
+      --border-color-checked: var(--color-brand-secondary-regular);
     }
   }
 }